Alterar quantidade item por linha vitrine conforme tamanho da tela

Layout
1

Boa tarde meus amigos e colegas.
Estou com uma duvida, queria alterar a vitrine da loja para que apareca mais de 4 itens por linha nas vitrines, alguem poderia me dar um help??
ja vi alguns themas com 5 items por linha.

Screenshot_6
Screenshot_6941×380 18.1 KB

Screenshot_7
Screenshot_71318×476 130 KB

Só que no momento como estou iniciando, não estou com Capital R$ para investir no thema por hora.

2

Olá!!

No exemplo passado na imagem, a vitrine está configurada para ser um Carousel, mas como pode ser que você não queira desse modo e outros lojistas possuam essa necessidade, criei um Script que pode ajudar para ficar como exemplo:

CSS:

@media (min-width: 768px) {
  #listagemProdutos .listagem-linha > ul {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
  }

  #listagemProdutos .listagem-linha > ul > li {
    width: auto;
  }

  #listagemProdutos .listagem-item .nome-produto {
    min-height: 72px;
  }
}

JS:

// Número de Produtos por Linha
const productsPerRow = 5;

$('#listagemProdutos > ul').each(function() {
  const $rows = $(this).find('.listagem-linha');

  $rows.each(function(index) {
    const $row = $(this);

    while($row.find('li').length !== productsPerRow) {
      const $products = $rows.eq(index + 1).find('li');

      if($products.length === 0)
        break;

      $row.find('ul').append($products.eq(0));
    }
  });
});

Espero ter ajudado, até mais.

3 curtidas
3

Bom dia @math muito obrigado novamente pela sua ajuda.
só tira uma duvida, esta apresentando um erro no css.
Screenshot_8
Outra coisa
olha como ficou após os 15 minutos

Screenshot_9
Screenshot_9406×741 35.5 KB

4

Bom dia!!

Imagina!! Entendi, faz as seguintes alterações então:

@media (min-width: 768px) {
  #listagemProdutos .listagem-linha > ul {
    display: flex;
  }

  #listagemProdutos .listagem-linha > ul > li {
    width: calc(20% - 10px);
  }

  /* Esse estilo não foi modificado */  
  #listagemProdutos .listagem-item .nome-produto {
    min-height: 72px;
  }
}

Espero ter ajudado, até mais.

2 curtidas
5

@math Cara não querendo abusar srsr, sabe como faço essa mesma ideia porém no carrossel de marcas? tipo como os icones das marcas são pequenos queria mostrasse pelo menos 6 marcas

Screenshot_11
Screenshot_111607×153 16.4 KB

6

@ModificMoveis Testa esse código:

$('.marcas .flexslider').data('flexslider').vars.maxItems = 6;

Funcionou para mim, mas a página estava carregada.

image
image1920×973 66.5 KB

Espero ter ajudado, até mais.

3 curtidas
7

deu certinho cara Obrigadoo.
Não é querendo abusar de vc, mais ja abusando
da uma olhada la

Ei @math olhando agora, a parte da pagina de categoria

Screenshot_13
Screenshot_131731×746 119 KB

teria como deixar com 5 produtos tbm? ou corrigir para espalhar na tela os 4 ficou o espaço no canto
Screenshot_14
Screenshot_141779×840 166 KB

Removi a parte do css, que passou e as categorias voltaram ao normal com 4 campos, e criei um arquivo html do tipo css, apénas na pagina inicial e joguei o css, esperando propagar ver se resolve.

RESOLVIDO DEU CERTO

2 curtidas
8

@math como vai??
Tira uma outra duvida, teria como o codigo para aumentar a quantidade eu configurar pela resolução da tela do usuario, exemplo 1920 5 produtos, 1366 4 produtos,800 3 produtos e mobile 2 produtos?

9

@ModificMoveis Tudo certo e com você?

Acredito que dessa forma funcionaria:

$(window).on('load resize', function() {
    let maxItems = 2;

    if(window.innerWidth >= 1920) {
        maxItems = 5;
    } else if(window.innerWidth >= 1366) {
        maxItems = 4;
    } else if(window.innerWidth >= 800) {
        maxItems = 3;
    }

    $('.marcas .flexslider').data('flexslider').vars.maxItems = maxItems;
});

Fico à disposição, até mais.

2 curtidas
10

Tu é o cara rsrsr obrigado agora tira uma duvida, isso ai é na parte das marcas, eu colocando nas vitrines dos produtos seria assim?


$(window).on('load resize', function() {
   const productsPerRow = 4;

    if(window.innerWidth >= 1920) {
        productsPerRow = 5;
    } else if(window.innerWidth >= 1366) {
        productsPerRow = 4;
    } else if(window.innerWidth >= 800) {
        productsPerRow = 3;
    }
 
});
$('#listagemProdutos > ul').each(function() {
  const $rows = $(this).find('.listagem-linha');

  $rows.each(function(index) {
    const $row = $(this);

    while($row.find('li').length !== productsPerRow) {
      const $products = $rows.eq(index + 1).find('li');

      if($products.length === 0)
        break;

      $row.find('ul').append($products.eq(0));
    }
  });
});
1 curtida
11

Não, vou criar um Script que atende melhor a sua necessidade, ao invés de agrupar por linha, vamos juntar todos os produtos daquela vitrine em um único elemento pai e limitar o tamanho do item por CSS, sem Script, não por questão de performance, mas diminui a complexidade e a possibilidade de erros. Antes de inserir esse novo, pode apagar aquele antigo junto com seus estilos.

CSS (Usando Grid - Recomendado):

#listagemProdutos .listagem-linha > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#listagemProdutos .listagem-linha > ul > li {
    width: auto;
    margin: 0;
}

@media (min-width: 800px) {
    /* 3 itens */
    #listagemProdutos .listagem-linha > ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1366px) {
    /* 4 itens */
    #listagemProdutos .listagem-linha > ul {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1920px) {
    /* 5 itens */
    #listagemProdutos .listagem-linha > ul {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

CSS (Usando Flexbox):

#listagemProdutos .listagem-linha > ul {
    display: flex;
    flex-wrap: wrap;
}

#listagemProdutos .listagem-linha > ul > li {
    width: calc(100% / 2 - 10px); /* ou width: calc(50% - 10px); */
    margin: 0 0 10px 10px;
}

@media (min-width: 800px) {
    /* (100% da vitrine / 3 itens) - 10px -> Corresponde ao espaçamento do item */
    #listagemProdutos .listagem-linha > ul > li {
        width: calc(100% / 3 - 10px); /* ou width: calc(33.333333% - 10px); */
    }
}

@media (min-width: 1366px) {
    /* (100% da vitrine / 4 itens) - 10px -> Corresponde ao espaçamento do item */
    #listagemProdutos .listagem-linha > ul > li {
        width: calc(100% / 4 - 10px); /* ou width: calc(25% - 10px); */
    }
}

@media (min-width: 1920px) {
    /* (100% da vitrine / 5 itens) - 10px -> Corresponde ao espaçamento do item */
    #listagemProdutos .listagem-linha > ul > li {
        width: calc(100% / 5 - 10px); /* ou width: calc(20% - 10px); */
    }
}

JS:

$('#listagemProdutos > ul').each(function() {
    let html = '<li class="listagem-linha"><ul>';

    $(this).find('.listagem-linha').each(function() {
        html += $(this).find('ul').html();
    });

    html += '</ul></li>';

    $(this).html(html);
});

Espero ter ajudado, até mais.

2 curtidas
12

è normal ficar com esses erros no css?

Screenshot_1
Screenshot_1876×299 19.3 KB

13

Essa é uma propriedade válida, pode ser que esse editor ainda não reconheça, mas o navegador irá sim.

1 curtida
14

Muito Obrigado!!
da um Help

1 curtida
15

De nada!!

@ModificMoveis Reparei que você já adicionou o código novo à loja e está funcionando, mas recomendo remover o antigo, por mais que o novo já esteja sobrescrevendo:

image
image1920×973 126 KB

16

vdd, eu esqueci que criei uma pagina html com o codigo vou deletar ela

No mobile ficou assim

Screenshot_2
Screenshot_2616×777 61.5 KB

17

Parece que já foi resolvido:

image
image1920×973 125 KB

Edit: Consegui achar o problema em uma outra resolução, é devido à outro estilo, já posto uma solução aqui.

18

ele fica desconfigurado quando aumentar a resolução, nessa de 411, ele fica certinho agora aumenta um pouco pra 500 ja desconfigura

Screenshot_18
Screenshot_18714×918 60.8 KB

Como no mobile não tem o Hover, tem como por esse botão azul para visualizar, a baixo dos preços?

19

Acho que esse código ajuda, dá uma testada:

@media (max-width: 767px) {
    .listagem .listagem-item .acoes-produto-responsiva {
        margin: 0;
        text-align: center;
    }

    .listagem .listagem-item .imagem-produto, .listagem .listagem-item .info-produto {
        float: none;
        width: auto;
        margin: 0;
    }

    .acoes-produto-responsiva .tag-comprar {
        display: block;
        margin: 10px -10px;
    }
}

@media (max-width: 479px) {
    .acoes-produto-responsiva {
        left: 0;
        top: 35%;
    }

    .acoes-produto-responsiva .tag-comprar {
        margin: 0;
    }
}
1 curtida
20

Obrigado, ficou bacana, agora só preciso melhorar meu topo do site, e por mais pra baixo o botão Visualizar, no desktop, ele ta muito em cima.

1 curtida