Fórum OpenCart Brasil

Por um e-commerce livre, confiável e profissional

Suporte para temas OpenCart v3.x.
#87528
Preciso de uma ajuda.

Dentre as varias alterações que fiz no meu layout teve uma que não consegui.

Quando acessamos o site pelo celular ele mostra apenas um produto, e no meu caso precisaria que fossem 2, tem isso em um layout que baixei mas ele tem alguns erros que não o torna interessante usar, preferia fazer a alteração mesmo!

Pelo que eu vi no CSS a questão é o grid da class product-layout que está assim no tema padrão
Código: Selecionar todos
class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12
o col-xs-12 deixa apenas um produto ocupando a tela inteira .

eu gostaria que fosse co-lxs-6 assim ficaria 2 produtos por pagina no celular

apesar que o ideal seria pra mim lg-2, md-2 , sm-6 xs-6 como é no outro tema que não posso usar.

geralmente faço as ediçoes do css , no stylesheet, porem não sei como das esses valores na classe neste arquivo.

O segundo caso seria remover a borda da div .

Segue como aparece no celular o tema ( repare que mudei o padrão pra ficar melhor para roupa).

Imagem

E eu preciso que apareça de 2 em 2 os produtos:

Imagem

E a borda que precisava ficar transparente:

Imagem

Se alguém puder me ajudar eu agradeço.
Editado pela última vez por andrevalentim em 26 Jun 2020, 13:37, em um total de 1 vez.
#87534
Ola @andrevalentim

Na pratica essa parte não esta no layout mas sim no script responsável por alterar essa parte, para editar:
Acesse seu arquivo: catalog\view\javascript -> "COMMON.js"
Procure pelo bloco proximo a linha 96:
Código: Selecionar todos
	$('#grid-view').click(function() {
		// What a shame bootstrap does not take into account dynamically loaded columns
		var cols = $('#column-right, #column-left').length;

		if (cols == 2) {
			$('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
		} else if (cols == 1) {
			$('#content .product-list').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
		} else {
			$('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
		}
Altere a quantidade de produtos desejada por linha conforme as classes do Bootstrap, como deseja alterar apenas a quantidade de itens na menor tela disponivel, basta mudar o "xs-12" para xs-6.

:D
jotacunha gostou disso
#87539
obrigado @reds

Resolveu em partes, mas ainda se der vou precisar de mai um ajuda sua..

Quando eu vou na procura ou pelo departamento ele esta mostrando certinho depois da alteração que vc me disse , segue como ficou:

https://www.mobysystem.com.br/loja/mode ... ry&path=60

porém na pagina inicial ele ainda esta mostrando apenas um , segue link:

https://www.mobysystem.com.br/loja/mode ... ommon/home

Olhei no arquivo e não achei mais nada pra alterar, então acredito que o da pagina principal esteja em outro arquivo,
lá estou usando os modulos destaques , novidades, mais vendidos e promoções.
Acredito que tenho que fazer a alteração dentro de cada modulo..
saberia dizer qual o caminho do arquivo deles ?
#87543
@reds


Consegui os outros tbm, eles estavam em outro arquivo, foi apenas fazer as alterações nos arquivos:

extension/module/special
extension/module/featured
extension/module/latest
extension/module/bestseller

e pronto realmente deu outra cara no site... vou penas adicionar os banners agora e afins e já vou passar o projeto pro cliente.

segue caso queira dar uma olhada como ficou:

https://www.mobysystem.com.br/loja/modelo01/
#90848
Ola @A MS

O common.js controla apenas as categorias, para os modulos individuais e produtos relacionados na pagina do produto você vai ter que mudar um a um no arquivo de saida.

extension/module/special
extension/module/featured
extension/module/latest
extension/module/bestseller


Procure cada procure essa linha:
Código: Selecionar todos
<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
e substitua por:
Código: Selecionar todos
<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">
ou
Código: Selecionar todos
<div class="product-layout col-lg-3 col-md-3 col-sm-4 col-xs-6">
;)

Gente preciso de ajuda urgente. Na migraç&a[…]

Caro @reds , muito obrigado pela resposta.

PHP 8+ incompatibilidade

Toda tradução para a versão 3[…]

Ola @alex3257 Se você precisa apenas ver […]