Olá este é um novo tutorial sobre o Magento 1.9 e nele vou mostrar como usar o slideshow que vem com seu novo tema.

Sequência dos artigos

Quer criar temas para Magento?

Esta dúvida foi enviada por email pela Andréia por e resolvi fazer um tutorial para que mais pessoas possam ter acesso a esta informação. Sua dúvida é onde colocar as imagens e como habilitar o slideshow, as imagens devem ficar na pasta padrão usada pelo próprio sistema e ele não precisa ser ativado, veja como é fácil habilitar este recurso.

Para este exemplo vou utilizar as 3 imagens que vem com o conteúdo de exemplo, mas se quiser você pode utilizar suas próprias imagens.

slide-1 slide-2 slide-3

O código do slideshow

O código do slideshow deve ser inserido na página home

Então vá em SGC > páginas.tutorial-slideshow-01

Abra a página home (ou a página que você esteja usando com esta finalidade) para edição, clique na guia Conteúdo, caso esteja utilizando o editor clique no botão Show / Hide Editor para ver o código da página.

Este é o código base que você deve utilizar:

<div class="slideshow-container">
	<ul class="slideshow">
		<li><a href="link1">Imagem1</a></li>
		<li><a href="link2">Imagem2</a></li>
		<li><a href="link3">Imagem3</a></li>
	</ul>
 <div class="slideshow-pager">&nbsp;</div>
 <span class="slideshow-prev">&nbsp;</span> <span class="slideshow-next">&nbsp;</span></div>

Copie e cole o código acima, ficará assim.

tela de conetúdo com o código do slideshow

Agora onde estiver link1, link2 e link3, substitua pelo endereço da página que deseja usar.

No lugar de imagem1, imagem2 e imagem3 remova este texto e insira a imagem que disponibilizei como exemplo ou use suas próprias imagens da seguinte forma:

Apague o texto imagem1 e clique no botão  insert image... vai abrir uma caixa de dialogo que você pode gerenciar os arquivos diretamente no servidor, para mantermos a organização primeiro crie uma pasta que contenha somente os slides

Gerenciador de arquivos do Magento

Clique em Criar Pasta...

Digite o no me da pasta e clique em ok, automaticamente será movido para dentro da pasta criada.

Clique em Browse Files… e selecione as imagens que usará, você pode selecionar todas as imagens.

upload das imagens

Clique em Upload Files e aguarde o termino do upload.

Selecione a imagem desejada e clique em Inserir Arquivo.

selecione uma imagem

Pronto o código da primeira imagem foi inserida.

Agora você pode repetir o processo para inserir as outras imagens ou copiar e colar o código que acabou de gerar apenas substituindo o nome da imagem

O resultado será como mostrado na imagem abaixo

resultado do código

Este é o código:

<div class="slideshow-container">
	<ul class="slideshow">
		<li><a href="link1"><img src="{{media url="wysiwyg/slides/slide-1.jpg"}}" alt="" /></a></li>
		<li><a href="link2"><img src="{{media url="wysiwyg/slides/slide-2.jpg"}}" alt="" /></a></li>
		<li><a href="link3"><img src="{{media url="wysiwyg/slides/slide-3.jpg"}}" alt="" /></a></li>
	</ul>
 <div class="slideshow-pager">&nbsp;</div>
 <span class="slideshow-prev">&nbsp;</span> <span class="slideshow-next">&nbsp;</span></div>

Agora basta clicar em Salvar Página e ver o resultado

Resultado com coluna na direita

Repare que o slideshow não ficou na largura total do site, isso porque a página está programada para usar duas colunas a direita

Caso queira mudar isso volte no mesmo arquivo que acabamos de editar e vá na guia Design

Na caixa de layout selecione “1 coluna”.

alterando o número de colunas da página

Atualize a home e veja o resultado

tutorial slideshow resultado final

Observação: para as alterações terem efeito pode ser necessário atualizar o ache, caso esteja ativado, mas em meu teste não precisei atualizar.

Espero que este tutorial tenha ajudado você. Um agradecimento especial para Andréa que me deu a ideia deste tutorial.

Gostou? Ficou alguma dúvida ou sugestão? Comente aqui em baixo.

Por favor, curta minha página e compartilhe com seus amigos,

Um abraço.