[OFICINA] - Pequenas alterações em sua loja

[Leonardo_Vicentini_F]

vi que tem CSS em inserir html tb…
depois de editar no inserir CSS, a LI está demorando até 15min, mesmo tendo um item no carrinho para não usar o cache…

[Laurel]

@Leonardo_Vicentini_F

Aqui é o local correto?

[Leonardo_Vicentini_F]

ai depende de como vc insere os codigos!

vc pode concentra todos os CSS em inserir CSS
mas tb pode colocar CSS no inserir HTML (geralmente sobrepõem o inserir css)

[Laurel]

Entendi!

Então não existe uma regra? Posso colocar em qualquer um desde que eu selecione CSS ?

[Leonardo_Vicentini_F]

sim, pode (no caso do CSS), mas é bom seguir uma regra ou entender as regras de sobreposição de códigos…

[Laurel]

Nossa, deu certo!
Muito muito muito obrigado! Vcs que nos ajudam aqui não tem noção da bondade que é esses atos de altruísmo.

Estou há uma semana levando pau! Quando dá certo uma coisa, buga outra rsrrss Mas vamos que vamos

Posso te pedir mais uma orientação? Pesquisando aqui na comunidade como colocar o menu na lateral consegui esses código. Mas não sei como aplicá-lo sem bugar outra coisa. Gostaria assim:

Esse é o código que recebi:

Alinhar os elementos do menu, à esquerda, com o seguinte código:

.atalhos-mobile li { float: left !important; }

Copiar o código html do menu (tag ) e inserir VIA JAVASCRIPT antes (“before”) do botão da casinha, dentro de uma tag

(tag de lista)

$(“#cabecalho > div.atalhos-mobile.visible-phone.fundo-secundario.borda-principal > ul > li:nth-child(1)”).before(“

”);

O código javascript acima serve para adicionar html a qualquer lugar de seu template. De maneira genérica é assim:

$(“ID”).before(“SEUCODIGOHTML”)

Onde ID é o ID ou CLASSE do elemento onde você quer inserir ANTES, e sendo que SEUCODIGOHTML não pode ter nenhuma aspas dupla, apena aspas simples.

Ajustar o novo menu (tirar o fundo degradê, bordas e outros detalhes) (por sua conta rs)

Por fim, ocultar o menu que tá ao lado da caixa de pesquisa pra não ficar duplicado, com o seguinte código

#cabecalho > div.conteiner > div > div.conteudo-topo.span9 > div.inferior.row-fluid > div.span8.busca-mobile > a {display:none !important}

[Laurel]

Tentei novamente, estou aguardando atualizar.

Qual a sua loja? Poderia dá uma olhada? Só se vc quiser, claro.

[Paulo21]

Claro, estou mexendo nela, não comecei com vendas ainda.

www.bemii.com.br

[Leonardo_Vicentini_F]

pode usar esse codigo.

Novo menu mobile lateral

Fala povo, beleza? Um amigo aqui da comunidade pediu ajuda para melhorar o menu mobile dele. Como é um pedido recorrente, resolvi isolar esse código em um repositório para ficar mais fácil de reaproveitar e fazer manutenções. Sempre que precisarem de algum ajuste, mandem aqui e vamos atualizando o código. Quem for desenvolvedor, fique a vontade para contribuir também. O código é feito em cima do tema básico da Loja Integrada. Contempla os três níveis do menu. Permite ajuste de cores simples …

[Laurel]

Leonardo, ficou assim:

Não sei pq duplicou.

[Leonardo_Vicentini_F]

tenta assim a parte do JS

document.addEventListener("DOMContentLoaded", function (event) {
  const iconAtalhoMenu = document.querySelector(".atalho-menu");
  //const iconMenuSVG =   '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>';
  //iconAtalhoMenu.insertAdjacentHTML("afterbegin", iconMenuSVG);
  iconAtalhoMenu.classList.remove("icon-th", "botao", "principal");

  const ulAtalhosMobile = document.querySelector(".atalhos-mobile ul");

  const newItemSideMenu = document.createElement("li");
  newItemSideMenu.classList.add("menu-button");
  ulAtalhosMobile.prepend(newItemSideMenu);

  newItemSideMenu.append(iconAtalhoMenu);

  const menuLateral = document.querySelector(".menu.superior > ul");

  const closeMenuButton = document.createElement("button");
  closeMenuButton.classList.add("closeMenuButton");
  menuLateral.append(closeMenuButton);

  closeMenuButton.onclick = () => {
    menuLateral.classList.remove("active");
  };
});

e inserir o CSS

e precisa editar o CSS

[Laurel]

Deu certo!

Obrigado! De verdade!
Você não imagina a ajuda que está dando para pessoas que estão começando a empreender e não tem condições de pagar um programador.

[Laurel]

Está muito top! Vc pagou alguém para fazer o layout?

[Paulo21]

Obrigado,
não, customizei tudo através de códigos postados aqui na comunidade, daí fui mexendo e aprendendo algumas coisas, o @Leonardo_Vicentini_F também me ajudou muito, o cara é fera

[Laurel]

Pois eu estou levando uma surra kkkkk
Essas coisas para mim são muito difíceis de entender​:woozy_face:!

Nossa essa parte do seu mobile está show!!

Vc teria os códigos para eu ir testando. Já testei os do mini banner mas não deu certo.

[Paulo21]

Eu também sofri bastante, nunca tinha trabalhado com programação, no modo PC tem uns ajustes na barra topo.que tenho que arrumar mas não tá fácil kkk Estranho não funcionar os mini banners é o mesmo que tenho no site para inserir no mobile.

/Javascript/
$(‘.row-fluid.banner.mini-banner.hidden-phone’).removeClass(‘hidden-phone’);
@Leonardo_Vicentini_F consegue nos ajudar para inserir os mini banners??

Passo sim os códigos, só me dizer qual parte você quer??

[Leonardo_Vicentini_F]

Quando cola um código direto na comunidade, ele muda as aspas

$(‘.row-fluid.banner.mini-banner.hidden-phone’).removeClass(‘hidden-phone’);

Fica

$(‘.row-fluid.banner.mini-banner.hidden-phone’).removeClass(‘hidden-phone’);

em vez de

$('.row-fluid.banner.mini-banner.hidden-phone').removeClass('hidden-phone');

[Paulo21]

Ah bom, como posso fazer para colar certo??

[Leonardo_Vicentini_F]

inicie e finalize o trecho de código com 4 x crase `

codigo 

[Paulo21]

Show de bola obrigado!!