Fórum OpenCart Brasil

[Gabriel Martins]

Em alguns sites e lojas virtuais você já deve ter reparado que existem botões para aumentar e diminuir a fonte da letra. No meu site de informática eu coloquei esse recurso já faz um tempo, então pensei; porque não colocar na minha loja também..

É um script bem básico que dá ao usuário o recurso de aumentar e diminuir a fonte da letra da descrição do produto.
Eu testei somente na versão 1.5.1.3 mas acredito que funcione em qualquer versão, pois o script é bem básico e pode funcionar em qualquer tipo de website.

Vá em catalog/view/theme/SEU_TEMA/template/product e abra o arquivo product.tpl

Procure por: <?php echo $description; ?>
Provavelmente estará assim: <div id="tab-description" class="tab-content"><?php echo $description; ?></div>

ANTES de: <?php echo $description; ?> coloque o script abaixo:

Código: Selecionar todos

<script type="text/javascript">
// Início do código de Aumentar/ Diminuir a letra
 
// Para usar coloque o comando:
// "javascript:mudaTamanho('tag_ou_id_alvo', -1);" para diminuir
// e o comando "javascript:mudaTamanho('tag_ou_id_alvo', +1);" para aumentar
 
var tagAlvo = new Array('p'); //pega todas as tags p//
 
// Especificando os possíveis tamanhos de fontes, poderia ser: x-small, small...
var tamanhos = new Array( '12px','13px','14px','15px','16px' );
var tamanhoInicial = 2;
 
function mudaTamanho( idAlvo,acao ){
if (!document.getElementById) return
var selecionados = null,tamanho = tamanhoInicial,i,j,tagsAlvo;
tamanho += acao;
if ( tamanho < 0 ) tamanho = 0;
if ( tamanho > 6 ) tamanho = 6;
tamanhoInicial = tamanho;
if ( !( selecionados = document.getElementById( idAlvo ) ) ) selecionados = document.getElementsByTagName( idAlvo )[ 0 ];
 
selecionados.style.fontSize = tamanhos[ tamanho ];
 
for ( i = 0; i < tagAlvo.length; i++ ){
tagsAlvo = selecionados.getElementsByTagName( tagAlvo[ i ] );
for ( j = 0; j < tagsAlvo.length; j++ ) tagsAlvo[ j ].style.fontSize = tamanhos[ tamanho ];
}
}
// Fim do código de Aumentar/ Diminuir a letra
 
</script>

<a href="javascript:mudaTamanho('texto', -1);">Diminuir</a>
<a href="javascript:mudaTamanho('texto', 1);">Aumentar</a>
 
<div style="font-size: 12px;" id="texto">

E DEPOIS de: <?php echo $description; ?> coloque a tag de fechamento </div>
Você poderá ver o script funcionando na minha loja clicando aqui.

Eu deixei o tamanho da fonte como padrão em 12px, mas você pode alterar para menos ou mais.
Esses são os tamanhos: '12px','13px','14px','15px','16px' você poderá modificar como quiser.

O script por padrão funciona na forma de links para o usuário clicar, mas você poderá se quiser mudar o link por uma imagem.
<a href="javascript:mudaTamanho('texto', -1);">Diminuir</a>
<a href="javascript:mudaTamanho('texto', 1);">Aumentar</a>

Basta substituir a palavra pela imagem de sua preferência.

Caso queira baixar o script clique aqui.

O script foi retirado do blog tiagopassos.com

Essa foi minha primeira contribuição, espero que ajude.
Att.

[Manoel Vidal]

Parabéns pela contribuição.

[witalovs]

Ei @Gabriel Martins!

E onde é para aparecer esses links aumentar e diminuir?

Pois não estou vendo aqui não vei! rs

Abraço!!!