###### tags: `front`
<!--(Por favor veja isso no Github (https://github.com/mobly-front) para ficar mais bonito)-->
# Front Mobly
### Documentação
**Jetlore**
```html
<!-- desktop script-->
<script src="https://assets.jetlore.com/mobly/sections/jetlore_mobly_integration.js"></script>
<!--Mobile script-->
<script src="https://assets.jetlore.com/mobly/sections/jetlore_mobly_integration_mobile.js"></script>
<script src="https://assets.jetlore.com/mobly/dark/jetlore_mobly_integration_black_mobile.js?v26112019"></script>
```
**Campanhas**
* Até 70 off
* Até 60 off
* Novidades do Mês
* Envio Imediato
* banner Paypal fullwidth(paypal-banner-fullwidth-mobile)
**Ferramentas**
- [Bob](#bob)
- [Static Blocks](#static-blocks)
- [Static Pages](#static-pages)
- [Ambientes de teste](#ambientes-de-teste)
- [Observações adicionais](#observacoes-adicionais)
- [LandingPage](#landing-page)
- [LandingCampanhas](#landing-campanhas)
- [Hotjar](#hotjar)
- [Neemu](#neemu)
- [Salesforce](#salesforce)
- [Wordpress](#wordpress)
- [Blog](#blog)
- [Auto-Atendimento](#auto-atendimento)
- [Staging](#staging)
- [Cronograma](#cronograma)
- [Mobly Front Git](#mobly-front-git)
- [Web Engage](#web-engage)
## Campanhas
### Envio imediato
Campanhas de envio imediato possuem o filtro ativo no catálogo, para adicionar
```html
&immediate_delivery=Dispon%C3%ADvel%20para%20envio%20imediato
```
## Bob
[Bob](https://bob.mobly.com.br/cms) é a aplicação que usamos para fazer alterações em páginas e criar landing pages. Praticamente toda a rotina passa por lá. Lá temos como fazer Static Pages (A página em si) e Static blocks (Caso seja necessário colocar o mesmo conteúdo dentro de várias páginas diferentes, se inclui esse bloco nelas e faz a alteração somente nele que irá refletir em todas. Geralmente usamos essa funcionalidade para criar páginas com menu).
### Static Blocks
Sintaxe da inclusão do bloco:
```
**include-block:nome-do-bloco**
```
Alguns blocos temos que mexer com certa frequência, pois eles são usados em campanhas e N1. São eles:
1. **newness** (N1 de lançamentos)
2. **promocoes-block** (N1 Outlet)
3. **home_linha_1** (Todos os slides da campanha (Campanha principal, apostas, etc))
4. **home_linha_2** (Subcampanhas e perenes)
5. **bannerfixo** (Para o banner fixo | Hotsite)
6. **mobile-home** (Slides da campanha principal/apostas no mobile)
7. **mobile-subcampanha** (subcampanhas do mobile)
Os blocos da campanha principal (Tanto no desktop quanto no mobile) estão reunidos na static page home_main_content. Se um dia precisar remover algum desses blocos, só precisa encontrar o que precisa e deletar de lá, que ele não irá mais aparecer na página.
Há também alguns blocos que mexemos com menos frequência. São eles:
1. **cms_menu_content** (Bloco com o menu que aparece no topo da página)
2. **paypal_shortcut** (Para adicionar o banner do paypal no carrinho (Esse é mais voltar um versionamento no canto superior direito que provavelmente já terá o código com o paypal inserido e, quando acabar o paypal, voltar o código para a versão sem))
3. **home-linha-js** (Para alterações no JavaScript da página)
4. **mobile-larstyle** (Para mudar os destaques na sessão do larstyle do mobile)
5. **countdown-home** (Para alterar configurações da data do countdown na home)
Código do countdown:
```javascript
try{
$('.crono-campanha').countdown('2019/07/02 00:00:00', function(event) {//Colocar a classe do <p> ou <span> onde ele irá aparecer e a data de término do countdown
var totalHours = event.offset.totalDays * 24 + event.offset.hours;
var totalDays = (Math.floor(totalHours / 24) - 1);
$(this).html(event.strftime("%D dias, %H:%M:%S"));
});
}catch(e){}
```
### Static Pages
As Static Pages (landings) são criadas unindo informações do [Cronograma](##cronograma) com alguns scripts disponíveis na página do [Mobly Front](##mobly-front-git) (Mais explicações adiante).
Não costumamos mexer na mesma landing mais de uma vez, mas há algumas exceções:
1. Nas campanhas principais, geralmente na principal das principais, a página que irá para o allproducts é um link genérico, diferente dos outros que estão no esquema "campanha-data-hash". Mais explicaç~eos sobre isso na parte do [Cronograma](##cronograma);
2. Landings da Mobly-inspira (**mobly-inspira**, **mobly-inspira-lp1**, **mobly-inspira-lp2**, **mobly-inspira-lp3**, **mobly-inspira-lp4**).
### Ambientes de teste
Para desenvolver o código que iremos aplicar nos blocos/landings anteriormente escritos, temos algumas páginas para teste:
1. **home_main_content_teste_t**
2. **home_main_content_teste**
3. **home_main_content_teste_w**
4. **campanha-landing-test**
5. **campanha-principal-test**
5.1 **campanha-ate-70-off-test**
5.1 **campanha-ate-70-off-test-mobile**
Os itens 1,2 e 3 tem uma estrutura interna parecida com a home_main_content, e seus blocos podem ser adaptados para atender as necessidades (Colocar campos diferentes para torná-la uma cópia da página a se alterar). Após o desenvolvimento, pode se jogar o código direto na página ou agendar na página certa (entre as opções de itens a se adicionar, tem o *Scheduled Date* que serve justamente para isso).
**4** é usado para testes de landing pages de campanhas, podendo ser incluido static blocks e hash.
**5** é usado para testes de landing pages de campanhas principais, podendo ser incluido static blocks com os menus e submenus de categorias e hash.
### Observações adicionais
Falei muito sobre as características mas não cheguei a falar como criar essas páginas. No canto superior esquerdo tem um dropdown com as opções do que se pode criar. Lá temos a opção static page e static block. Se a opção selecionada for a static page, na caixa de texto que aparecerá ao lado deve ser inserido o link daquela página (O que irá aparecer após o "mobly.com.br/"). Se for o static block, se coloca o nome daquele bloco. Geralmente usamos o padrão "data-nomecpg" ou "data-nomecpg-mobile" (Para blocos mobile).
Se um dia for necessário mexer em alguma categoria que não tiver a static page já criada, o bob dá a opção de criar uma baseada nessa categoria e as alterações feitas nela irão refletir no topo da página da cat. especificada.
No canto superior direito há uma lupa para fazer pesquisa de blocos/static pages (Na caixa de texto de baixo, é possível buscar por algum conteúdo que esteja dentro dessa página/bloco (caso não se saiba qual o cms específico que se quer encontrar)).
Para alterar coisas relacionadas a big lar ou a loja física, na barra inferior do site tem um dropdown ao lado do texto "Store:". Selecionar "Mobly Franquias" para as páginas da [Big Lar](https://www.biglaroutlet.com.br/biglar) e "Mobly Loja Física" para alterações na página da [loja física](https://loja.mobly.com.br/m).
## Landing Page
### Landing Campanhas
Adicionar:
- **Page Title**
- **Hash**
- **Banner 1**
- **Dynamic CSS**
Em banner 1 adicionar o seguinte código e adicionar o caminho da respctiva imagem no atributo "data-bg=", ex:
```html
<div class="lpTopo hasLazyBg"
data-bg="[MEDIA_BASE_URL]/cms/marketing/campanha/2019/20191022---Mobly-In-Black---LandingDesk---Minis02.jpg">
</div>
```
Em Dynamic CSS, adicionar o seguinte código para aplicar o estilo do banner e remover o bannerfixo:
```css
.lpTopo {
position: relative;
width: 100%;
max-width: 1920px;
margin: auto;
background-repeat: no-repeat;
background-position: center top;
border-bottom: 3px solid #ebeae5;
margin-top: -20px;
height: 260px;
background-size: cover;
}
div#cmsSubMenu {
display: none;
}
```
## Hotjar
[Hotjar](https://insights.hotjar.com/sites/684448/dashboard) é uma ferramenta que nós usamos para criar heatmaps do site. Toda a campanha (Eu disse **TODA** campanha) nós devemos ativar (Falando isso com tanto ênfase porque... eu já esqueci várias vezes). É muito importante para sabermos como os usuários estão se comportando com algum elemento da tela então, por favor, não esqueça isso.
Depois de criarem seu usuário (Provavelmente você vai ter que pedir para criarem), para ativar a ferramenta é só ir no canto esquerdo em "Heatmaps" > "New Heatmap" (O botão verde gigante em cima). Aí para cada uma das sessões:
1. Nome: Seguimos o padrão "*HOME M|D (Mobile ou Desktop) - Data - Campanha*"
2. Numero de Pageviews *sempre* colocamos **10.000**
3. Page targeting: Colocar a url da página a ser verificada (Ps: tem que criar a versão desktop e mobile desse heatmap pois o site não considera os dois como um só já que tem links diferentes etc)
4. Review e save: Se tudo estiver certo é só criar
## Neemu
(Isso aqui pode envelhecer mal, já que estavam vendo de mudar o parceiro para o app mas) [Neemu](https://accounts.chaordic.com.br/users/sign_in) é nosso parceiro para subir os banners do app. Honestamente é a ferramenta mais intuitiva que usamos. O processo dele não tem muito segredo (Para a criação de banners do app. Torça pra evitarem usar as vitrines pois meu Deus que rolê).
Criação de banners é:
1. Banner mobile (no menu lateral)
2. Novo banner
3. Seguir o template dos banners anteriores (Sério, só vai, segue no título e na estrutura. O banner 0 vai ser o do topo e lá se coloca a cmapanha principal e apostas).
Obs: Não coloca data de término na campanha principal. Não confie muito na Neemu, ela pode dar problema e você não conseguir agendar a próxima campanha a tempo. Só agenda o final quando for agendar a próxima campanha.
#### Vitrines
Antes de começar esse texto já estou sofrendo.
## Salesforce
## Wordpress
### Blog
### Auto-atendimento
### Staging
## Cronograma
## Mobly Front Git
## Web Engage
Sign in with Wallet
Connect another wallet