Fórum OpenCart Brasil

Aqui funcionou legal, obrigada.

Manoel Vidal escreveu:Olá colegas da OCBr.

Alguns colegas não estão se adaptando bem com a exibição por padrão de produtos em lista, e preferem que seja exibido em grade, porém, não sabem como fazer para que isso aconteça, então resolvi escrever esta rápida dica ensinando como fazer:

Vamos lá

1) Localize e edite o arquivo footer.tpl que está no diretório /catalog/view/theme/SEU_TEMA/template/common/, e antes do código:

Código: Selecionar todos

</body>

Adicione:

Código: Selecionar todos

<script type="text/javascript">$(document).ready(function() { display('grid'); });</script>

Salve as alterações no arquivo e faça um teste.

Espero que essa dica seja útil

Caro Manoel

Testei o código e deu um erro no depurador do IE8, objeto nâo definido ao carregar o home, fiz então a troca nos arquivos, Categoy.tlp de display('list') para display('grid') e deu certo sem erro.

Davi escreveu:Vlw Vidal !

Aqui esta normal 1.5.1.3

Fiz um xml pra quem usa o vQmod

Código: Selecionar todos

<modification>

	<id>Produtos exibidos em grade por padrão</id>
	<version>1.0.0</version>
	<vqmver>2.1.5</vqmver>
	<author>Manoel Vidal</author>

	<file name="catalog/view/theme/default/template/product/category.tpl">
	  <operation error="skip">
            <search position="replace"><![CDATA[display('list');
			            ]]></search>
            <add><![CDATA[display('grid');
            ]]></add>
          </operation>
		  </file>
	
	<file name="catalog/view/theme/default/template/product/manufacturer_info.tpl">
	  <operation error="skip">
            <search position="replace"><![CDATA[display('list');
			            ]]></search>
            <add><![CDATA[display('grid');
            ]]></add>
          </operation>
		  </file>
		  
	<file name="catalog/view/theme/default/template/product/search.tpl">
	  <operation error="skip">
            <search position="replace"><![CDATA[display('list');
			            ]]></search>
            <add><![CDATA[display('grid');
            ]]></add>
          </operation>
		  </file>
		  
		  <file name="catalog/view/theme/default/template/product/special.tpl">
	  <operation error="skip">
            <search position="replace"><![CDATA[display('list');
			            ]]></search>
            <add><![CDATA[display('grid');
            ]]></add>
          </operation>
		  </file>
		  
</modification>

COmo usa essa xml?

ABraço

Olá caros,
eu tambem deixei meus produtos exibidos por grade, alem disso removi todo conteudo acima das imagens dos mesmos (informaçoes da categoria, imagem e filtro). Me deparei com varios erros durante a remoçao dos codigos correspondentes ao conteudo que removi, mas fui corrigindo ao longo e deu certo.

Isso foi ontem, tropeçando e levantando... agora gostaria que fosse exibido as imagens dos produtos em 3 colunas, e nao 4 como meu tema exibi.

Alguma dica? grato!

stvedavid escreveu:Estou com um probleminha, consegui fazer tudo certinho, mas a pagina exibe 5 produtos por linha na grade,
sendo assim as imagens ficam cortadas, como posso deixar 3 produtos por linha apenas ?

Estou com a mesma problematica!

https://forum.opencartbrasil.com.br/ ... =30#p34711

!!!!Resolvido!!!!

H-Mad escreveu:!!!!Resolvido!!!!

Como você conseguiu resolver?

Seguinte; assim como a modificaçao dos produtos exibidos por grade na "index" voce vai alterar o codigo no arquivo category.tpl que se encontra em www/catalog/view/theme/SEUTEMA/template/product/category.tpl

alterando o valor '4' no caso deste tema para '3'

ANTES
<div id="content"><?php echo $content_top; ?>
<div class="product-list">
<?php $i = 1; ?>
<?php foreach ($products as $product) { ?>
<div <?php echo ($i%4==0 ? 'class="last"' : ''); ?>>

DEPOIS
<div id="content"><?php echo $content_top; ?>
<div class="product-list">
<?php $i = 1; ?>
<?php foreach ($products as $product) { ?>
<div <?php echo ($i%3==0 ? 'class="last"' : ''); ?>>

Se por acaso apresentar algum desajuste com a ordem dos produtos (tipo nem todas as linhas terem 3 produtos ou descentralizados; ajuste alterando os valores no arquivo 'stylesheet.css' nas linhas correspondentes a exibiçao dos produtos)

Dica para localizar as linhas referentes: usando o navegador "Google Crome" click com o botao direito sobre o "objeto" a ser alterado como a imagem do produto por exemplo, e click em "inspecionar elemento". No canto direito está os codigos e a linha referente no arquivo stylesheet.css onde voce pode alterar os valores sobre a posiçao esquerda direita altura largura do objeto e visualizar o efeito da alteraçao em tempo real. Entao basta observar qual a linha voce alterou e fazer a mesma alteraçao no aquivo hospedado (stylesheet.css). Por esse caminho cedo ou tarde voce acerta!

Lembrando que alem dos codigos no canto direito que pertencem ao arquivo da pasta "stylesheet"; do lado esquerdo está os codigos de algum arquivo (dependendo de qual objeto da pagina voce clicar/qual pagina por exemplo "product.tpl") localizado na pasta template. Sempre dentro da pasta de seu tema.

Eu sempre altero o css primeiro no Crome, é uma mão na roda (serve também para eliminar frames e assistir tv on-line, rsrs). Essa alteração no tamanho das imagens eu fiz alterando o tamanho das fotos no admin, e depois syles como padding, margin, essas coisas... Até ficar do jeito que eu queria.

Aqui: http://img836.imageshack.us/img836/2457/colunassite.png

Exatamente amigo, assim é so uma questao de disposiçao para se arriscar e aventurar no desafio. Ate chegar no seu objetivo errando e confirmando teorias.