Guia para Designer do Magento

Você já ouviu falar sobre o inacreditável sistema Magento que é oferecido com características de código-fonte aberto. Você tem o direito de não poupar tempo vendo-o em ação, tem o oh! e ah! e sobre tudo - uma e outra vez.

... E agora você quer fazer tudo do seu próprio jeito. Você tem os seus PSD’s prontos e o zelo necessário para a construção e integração do seu site. Por onde você deve começar?

Guia para Designer do Magento foi preparado para você aprender a expandir seus conhecimentos de caráter estrutural, conceitual e os métodos de funcionamento para projetar no Magento — será basicamente ensinar o que você precisa saber para começar a criar seu próprio tema com o Magento. Dito isto, devido ao grande grau de flexibilidade que as características do Magento oferecem, não é possível documentar todas as diferentes formas pelas quais ele pode ser personalizado para ser usado. Para ajudar com isso, você pode consultar os fóruns e wiki da comunidade do Magento onde as pessoas da vida real com as experiências reais serão capazes de chamar a atenção para você na direção certa. Além disso, lembre-se que Magento é uma aplicação constantemente em desenvolvimento, apesar dos nossos maiores esforços, pois, esta documentação pode não refletir fielmente a versão que está você atualmente trabalhando.

A documentação está em grande parte seccionada em quatro capítulos e pode ser ignorado, a fim de acessar rapidamente a informação que você mais precisa. No entanto, porque cada capítulo funciona como um prelúdio para o próximo, aconselhamo-lo a seguir juntamente com a documentação na ordem em que foi escrita.

Terminologias do Design no Magento

Para acompanhar, juntamente com a documentação, é fundamental que você tenha uma boa idéia da terminologias utilizadas para descrever os aspectos do sistema Magento. As terminologias introduzidas neste capítulo são, mais provavelmente, novos territórios para você, então tome seu tempo e os leia cuidadosamente. Mas, o mais importante, não desanime se você não poder compreender plenamente o conceito de todas estas novas terminologias — este capítulo serve apenas para introduzi-los a todos de uma só vez, e outros capítulos irão cavar mais fundo e expandir a essas definições simples. Terminologias abrangidos neste capítulo são:

• Website, Loja e Visualização da Loja
• Interface
• Temas
  • Layouts
  • Modelos
  • Skins (Peles)
• Blocos
  • Blocos estruturais
  • Conteúdo dos Blocos

Site e Loja

Um site é uma coleção de lojas que partilham as mesmas informações dos clientes e dos pedidos, bem como o carrinho de compras. A store is a collection of store views. Uma loja é uma coleção de lojas visualizadas. Estes são termos muito gerais que podem ser adotados para definir as necessidades únicas de cada um dos comerciantes. Alguns cenários para definir os diferentes usos do site, armazenar e conservar as visualizações são as seguintes:

Cenário 1

Uma empresa chamada Dubloo Inc criou uma apresentação on-line com três lojas distintas de vestuário onde cada uma atenderá com diferentes preços a nível público. Dubloo Inc quer que a capacidade de todas as três lojas para compartilhar informações dos clientes e dos pedidos. Nesse cenário, Dubloo Inc teria um website e três armazéns em sua apresentação on-line. Loja iria definir o preço individual do nível loja, e o site seria a Dubloo Inc.

Uma empresa chamada "My Laptops" pretende abrir dois sites distintos, mas que ambos vendam laptops com diferentes preços. Eles também querem oferecer opções de idioma Inglês e Espanhol por site, cada um transportando seus próprios itens selecionados de acordo com o idioma. Eles também precisam sincronizar informações por ordem local dos clientes. Nesse cenário, a Store View iria armazenar as visualizações dos idiomas Inglês e Espanhol. Um site seria definido "My Laptops" e o outro "Cheap Laptops".

Uma empresa chamada Bongo's Instrumentos pretende criar uma apresentação on-line. Como não há nenhum outro ramo na loja, Bongo's Instruments é a loja, bem como o website.

Interface

Interface é uma coleção de temas que determinam a produção visual e a funcionalidades do frontend da sua loja. Uma interface pode ser atribuído em ambos o nível do site e/ou nível de visão da loja, através do painel de administração (Saiba como atribuir uma interface para o site/loja).

Se você atribuir uma interface, no nível de site, todas as suas lojas irão herdar a interface do seu site. Você pode ainda atribuir uma interface na loja visão - nível e loja, efetivamente superior do site. Digamos que você irá operar quatro diferentes lojas em um site chamado "John's Panacea" - ao se estudar os efeitos de cada método, conforme mostrado abaixo, você pode facilmente determinar o método a empregar para o design das necessidades do seu negócio.

Declaração de nível do Website

Se você quiser criar um visual e toque unificador de todas as quatro lojas, vai atribuir uma interface no nível do site, caso em que todos os quatro lojas irão herdar a interface do website.

• Declaração de nível da Visão da Loja

Se você quiser incorporar um visual e toque separado por loja, você pode atribuir uma interface por visão da loja, caso em que cada uma das quatro lojas vão levar o seu próprio visual e toque.

Temas

Um tema é qualquer combinação de layout, modelo, local e / ou skin (pele) arquivo (s) que criam a experiência visual de sua loja. Magento é construída com capacidade para carregar vários temas de uma só vez, portanto, distingue dois grandes temas em tipos:

• Tema Padrão (Default)
  Cada interface vem com um tema chamado 'padrão' que é o tema principal de uma interface. Quando você atribuir uma interface para sua loja, a aplicação automaticamente olha para este tema 'default' e carrega-o para o front-end. A fim de personalizar o design de sua loja, você pode modificar este tema isoladamente, ou criar um tema não-padrão, além de carregá-lo juntamente com o padrão. O tema padrão deve conter todos os layouts, templates e skins para executar uma loja livre de erros e, portanto, é o tema mais baixo na hierarquia tema.
• Tema Não-Padrão
  Um tema não-padrão pode conter tantas ou tão pouco arquivos de tema como você vê o ajuste para a sua necessidade. Este tipo de tema é destinado ao uso de alterações na criação temporária sazonal de projeto de uma loja, sem ter que criar todo um novo conjunto de tema default. Ao criar algumas imagens e atualização de algumas das CSS, você pode facilmente transformar sua loja a partir de um modelo atual a suportar um modelo sanzonl, sobressaindo uma loja de Natal.

Um tema é composto por uma ou todas as seguintes características:

• Layout (localizado na app/design/frontend/your_interface/your_theme/ layout /
  Estes são arquivos básicos XML que definem aestrutura para bloquear páginas diferentes, bem como o controle de informação META e o encoding da página.
• Modelos (Templates) (localizada na app/design/frontend/your_interface/your_theme/ template /
  Estes são arquivos que contêm os markups PHTML (X) HTML e eventuais tags PHP para criar lógica de apresentação visual.
• Localidade (Locale) (localizado na app/design/frontend/your_interface/your_theme/ locale /
  Trata-se de texto simples de documentos organizados em uma base por língua que contêm traduções para armazenar cópia.
• Peles (Skins) (localizada na skin/frontend/your_interface/your_theme/
  Estes são os blocos específicos de Javascript, CSS e imagens que elogiam (X)HTML.

Blocos

Figura 1. Bloco Estrutural (indicado em azul)

Figura 2. Conteúdo do Bloco (Indicado em laranja)

Os blocos são um meio pelo qual o Magento distingue o leque de funcionalidades no sistema e cria uma maneira modular para a sua gestão, tanto visual e ponto de sustentação funcional. Existem dois tipos de blocos e eles trabalham juntos para criar o visual saída.

• Blocos estruturais
  Estes blocos são criados com o único objectivo de atribuir uma estrutura visual para armazenar uma página, como cabeçalho, coluna da esquerda, coluna principal e rodapé (Figura 1).
• Content Blocks Conteúdo Blocks
  Estes são blocos que produzem o próprio conteúdo estrutural no interior de cada bloco. Eles são representações de cada recurso da funcionalidade em uma página e emprega modelo para gerar arquivos (X)HTML para ser inserido em sua matriz estrutural do bloco. Lista de categoria, mini carrinho, produto e listagem de produto e tags, etc ... são os seus próprios conteúdos de cada bloco (Figura 2).

Em vez de incluir modelo após modelo como um típico pedido de eCommerce seria no sentido de reunir o conjunto (X) HTML de saída, Magento reúne e organiza conteúdo da página através de blocos.

:: Isto é que é terminologias, pessoal! - Curto e doce. No capítulo seguinte, iremos abordar os Temas no Magento.

Trabalhando com Temas no Magento

Neste capítulo vamos entrar nos detalhes da forma como lidar com temas no Magento e ensinar-lhe como criar e gerir o seu próprio:

• Como fazer temas diferentes no Magento
• Como criar um tema
• Como atribuir interface e tema para a loja
• Diga Olá para vários temas
• Hierarquia dos temas: Como lidar com vários temas no Magento

Como fazer temas diferentes no Magentos

O termo "tema" provavelmente soa familiar a você. Ou como uma platéia, um criador, ou ambos, você experimentou o mar de opções disponíveis nas aplicações da web através de seus temas. Um tema foi amplamente dois tipos de utilizadores - Em primeiro lugar, o público-tipo que as experimenta a partir da estética e usabilidade do ponto de vista de quem navega através de uma loja - e, por outro, o criador do tipo que passa por uma camada adicional de experiência ao tema, tomando parte na construção do tema.

Para o primeiro tipo de usuário, uma loja experiência é definido pela capacidade de uma loja para cumprir a sua táctica e demandas emocional. Para o segundo tipo de usuário que deve preencher o criador papel, é a eficiência com que ele/ ela é capaz de completar um conjunto de tarefas que determinam o desenvolvimento da loja experiência. Nós reconhecemos que é o acumulado de experiências de ambos os tipos de usuário que determinam a rentabilidade final da loja, nem, por conseguinte, a experiência do usuário pode dar ao luxo de ser esquecida.

Porque sabemos que, como designers, que você já tem o gráfico final de coisas melhores a mostrar (assistência a tipos de audiência), nós tínhamos apenas que ajudá-lo a construir algo que não é deste mundo como tema de gestão para maximizar seu fluxo de trabalho, eficiência e tomar a sua criatividade para o próximo nível. Aqui estão algumas coisas que achei que você poderia chegar a se interessar:

1. Potência máxima de personalização
   Com o Magento você pode atualizar a aparência de sua loja na categoria de produtos e nível, dando-lhe um maior poder de promoção e comercialização, bem como uma loja com design infinitamente único. Alguma vez imaginou apresentar cada produto em sua própria página personalizada? O Magento lhe dá o poder para fazer isso e muito mais, fornecendo uma maneira rápida para personalizar a sua apresentação em um produto por produto e por categoria de base.
2. Vários temas
   O Magento lhe dá a capacidade para carregar vários temas de uma só vez, permitindo a você trocar entre um padrão de design armazenado e eventos temporários / específicas temporada - Tudo ao comando de algumas chaves de estilos.
3. Fluxo de Trabalho Ininterrupto
   Com a programação orientada para objeto no Magento, integralmente, todos os módulos são imediatamente acessíveis através de tags de modelos a partir de qualquer arquivo de modelo. E porque o Magento vem com sua características ricas, você nunca mais terá de ser dependente de um programador para terminar o mais simples tarefas para você. Magento também dispõe de uma extensa rede de conhecimento dos membros da comunidade (incluindo o funcionário do Magento Team), assim que você nunca vai ter de pensar duas vezes sobre onde obter orientação se precisar ao longo do caminho.
4. Minimizar depuração do tempo
   Qualquer criador pode recordar aquelas preciosas horas e minutos desperdiçado procurando a marcação aberto controlada pelo seu validador. O validador poderá informá-lo que está errado, mas nunca parece lhe dizer onde ele está acontecendo. Os módulos backend do Magento trazem consigo um sistema modular modelo que minimiza a quantidade de (X)HTML que você precisa para tratar de uma só vez. Menos bagunça significa menos barulho e mais a sanidade mental para as coisas verdadeiramente importante na vida.

Realmente, a melhor parte do que o Magento pode lhe oferecer, porém, é um aplicativo que vive da sua flexibilidade, deixando-o com muito a se preocupar com nada exceto conceber o seus brilhantes planos para o seu próximo 'uau' front-end. O céu é o limite para essa aplicação, e nós esperamos que você se diverta aplicando-o à sua loja.

Como criar um tema

Vamos primeiro desvendar alguns diretórios onde você deve ir. Abra as seguintes pastas na raiz do seu Magento e vamos xeretar:

• Diretório 1: app/design/frontend/default/default/ - Este diretório contém o layout, tradução (localidade) de modelo e materiais.
• Diretório 2: skin/frontend/default/default/ - Este diretório contém as imagens, CSS e Javascript bloco específicos.

Ao trabalhar com temas, estes dois diretórios permanecerão como sua base para ponto de partida.
Como você deve ter notado, nós temos o tema arquivos seccionado em duas partes. Ao separar os arquivos que devem estar acessíveis na web (como a imagem e Javascript) daqueles que podem estar ocultos a partir dele, nós fizemos alguns Magento oferece-lhe as medidas de segurança máxima para sua loja em cada canto.

Vamos em frente e examinar os dois diretórios.
A primeira blush você verá o uso de nomes diretório default/default em ambos os diretórios 1 e 2 assim:

• Diretório 1: app/design/frontend/ default / default /
• Diretório 2: skin/frontend/ default / default /

Em ambos os casos, * indica um nome de interface, e * indica o nome para o tema. Portanto, se você estava trabalhando em um tema chamado my_theme em uma interface chamada my_interface você estaria trabalhando no diretório "app / app/design/frontend/my_interface/my_theme/ '.

Você pode salvar tantos temas em seu diretório de interface que você desejar, mas na hora de escrever, sua loja só pode lidar com o carregamento do tema chamado "padrão" e um outro tema de sua escolha para sua loja. (Nota: Capacidade de carga número ilimitado de temas que estarão disponíveis nos próximos lançamentos.) Para saber como carregar Magento gere vários temas de uma só vez, leia Hierarquia de Temas) Isto deixa-lhe trabalhando com dois temas, para que se possa manter o seu padrão de tema para sua concepção de loja fora de estação e utilização adicional do tema para o evento-sazonais e aqueles específicos (Para ler sobre vários temas como trabalho e como você pode se beneficiar, leia Diga Olá para vários temas).

Criando um novo tema default

A fim de criar um novo padrão tema, primeiro você deve copiar um tema padrão existente do qual você pode basear o seu novo tema. Criar um duplicado das pastas app/design/frontend/default/default/ mudar o nome do novo diretório para o que você gostaria de (O nome de uma interface deve ser um tema com palavra alfa-numérico começando com uma letra do alfabeto [az]. Por exemplo, "Meu Novo Tema" e '02123_meu_tema' é ruim, 'meu_novo_tema 'é bom). O nome do diretório do seu tema é o nome pelo qual a aplicação irá reconhecer o seu tema. Agora, fazer o mesmo para a skin/frontend/default/default e só isso! Você já criou com sucesso um novo tema default. Para saber como atribuir este tema para sua loja, leia Atribuir um novo tema abaixo.

Criando um novo tema não-padrão

Diagrama 1

Ao criar um novo tema não-padrão, você não precisa duplicar qualquer diretório padrão existente. Provavelmente você está apenas fazendo alterações para arquivos específicos e, portanto, só terão de duplicar o segundo arquivos como um ponto de partida do seu novo tema. Uma regra que você deve sempre lembrar-se de seguir, porém, é ter a certeza que você preserve o subdiretório estrutural das convenções Magento. Por exemplo, se todos os temas não padrão contém arquivo modelo "home.phtml 'a partir do catálogo módulo, dentro de app/design/frontend/your_interface/your_non_default_theme/ você precisará criar diretórios template/catalog em que você vai salvar o seu arquivo de modelo. Quando você abrir um diretório tema padrão Magento (Figura 1), você vai ver como os diretórios estão estruturados - Certifique-se da referência para esse diretório na convenção para que o seu novo tema possa carregar com êxito.

Atribuir interface e tema para a loja

Agora que você criou o seu próprio tema (se um padrão ou uma não-padrão), você precisará associá-la ao seu site/ loja para que possa ter efeito. Navegue para o painel admin do Magento (ie.www.mydomain.com / admin) e, em seguida, a configuração da guia do Design (Sistema > Configuração > Design).

Diagrama 2

Sobre o canto superior esquerdo da coluna na Figura 2, você verá uma caixa chamada "Escopo da Configuração Atual".

• A fim de gerir a sua loja na concepção de nível do website, selecione o nome do seu site a partir da lista pendente e, em seguida, aplicar as seguintes etapas.
• Para gerir o projeto da loja de nível de visão, selecione o nome da visão de sua loja no menu suspenso e, em seguida, aplicar as seguintes etapas.

Passo 1
A partir da guia Design, em Nome do pacote atual, digite o nome da interface em que o novo tema reside. Magento irá carregar automaticamente a interface chamado "padrão" se esta opção é deixada em branco.

Passo 2
Em Default (Padrão) (sob posição Temas), introduza o nome do novo tema que você gostaria de carregar para o seu site / loja. Se você deixar esta caixa em branco, Magento irá automaticamente carregar apenas o tema chamado "padrão" (Lembre-se, não importa como você configurar a concepção guia, Magento irá carregar automaticamente o tema chamado 'padrão'. Se você atribuir um tema no admin, que o tema será simplesmente carga superiores na hierarquia, mas irá carregar, juntamente com o tema 'default'. Isto irá mudar na próxima versão estável, contudo, dar-lhe total controle sobre o que os temas são carregados para a loja). Se você optar por carregar o tema separadamente dependendo do tipo de arquivo (layout, modelos, skin (pele) ou arquivos de tradução), digite o nome do tema a partir da qual agarrar segundo os tipos de arquivo.

Passo 3
Quando estiver pronto, clique no botão "Salvar configuração" e atualize a sua loja - Voila! Você agora vê o seu novo tema refletido no frontend.

Agora que temos a fazer é criar e gerir temas, vamos passar sobre a forma como lidar com esses temas no Magento.

Diga Olá para os vários temas

Nota: Capacidade ilimitada para temas serão disponíveis com os próximos lançamentos. Embora no momento apenas dois temas podem ser carregados de uma só vez, os trabalhos nos bastidores permanecerá o mesmo e você vai se beneficiar com esta documentação.

Temporadas de festas são de longe a mais ampla oportunidade de vendas para qualquer loja eCommerce - Clientes formam filas para comprar no Natal presentes para seus familiares e amigos, e até mamães compram fantasias de Halloween para o seu filho para a noite da festividade. A fim de adequar aos compradores sazonal, sua loja deve refletir fielmente as ocasiões, a fim de inspirar seus clientes a explorar a sua loja. Uma loja como o Diagrama 3 apenas altera durante o Natal - pois precisa é de uma loja poucos vermelhos, floco de neve e Papai Noel - tal como a loja abaixo na Figura 4!

Figura 3. Isto simplesmente se altera

Figura 4. Isto é o que você precisa

Com o Magento, criamos a capacidade de sua loja para tratar vários temas de sua escolha exatamente para aqueles momentos em que um toque extra é mais necessário. Ao carregar vários temas para sua loja, você pode manter o seu design da loja normal não sazonal, reforçando-o com o tema Natal.

No exame atento dos dois modelos acima, você verá semelhanças na concepção subjacente. A fachada do Natal na Figura 4, debaixo dela, mas você ainda pode ver a estrutura do fora de estação do design da loja. A única verdadeira diferença entre os dois desenhos da loja, são apenas alguns arquivos CSS de imagem e texto de mudanças no modelo de arquivos. Porque, de fato, as mudanças são menores, não é preciso todo um novo tema padrão para acolher o tema Natal. O que você precisa é apenas um arquivo com poucas substituições, e você estiver em seu caminho para uma loja muito melhor. A funcionalidade dos múltiplos temas do Magento foi criada para acomodar exatamente essa necessidade, colocando o poder em suas mãos para ligar e desligar os temas sazonais, preservando simultaneamente o seu tema default.

Magento manipula várias carga temas, atribuindo algo chamado hierarquia para os temas que é simplesmente um processo de anulação dos redundantes arquivos para carregar apenas o que reside na mais alta hierarquia. A hierarquia é determinada por você na guia de configuração do Design do Admin e sua capacidade de fazer assim tornar-se-á totalmente funcional com a próxima versão estável. A essa altura, a hierarquia dos temas já está decidido para você, como Magento carrega o tema 'default' no sistema primeiro (colocá-lo na menor hierarquia) e, em seguida, carregar o segundo tema que você atribuir no admin (colocá-lo na mais alta hierarquia).

Hierarquia de Temas

Quando você atribuir vários temas para sua loja, você está basicamente tirando partido do fato de que enquanto o seu principal objetivo ao construir um tema é a de criar o mais utilizáveis e visualmente agradável interface gráfica, o objetivo do Magento é para garantir que a aplicação seja capaz de localizar e carregar todos os arquivos do tema necessário para manter a aplicação executando livre de erros.

Por exemplo, se a sua lista de página de categoria exige um modelo chamado "view.phtml" (caso em que este modelo se torna um arquivo necessário), mas a aplicação não é capaz de encontrar o arquivo no tema mais elevada na hierarquia (Nota: No momento da redação, o tema mais elevado na hierarquia, é o tema que você atribuir, através do administrador, bem como o tema mais baixo na hierarquia, é o tema chamado 'padrão' que o Magento carrega automaticamente na loja. Nas próximas edições, o Magento fornecer-lhe-á a capacidade de ter pleno controle sobre a hierarquia dos seus temas), vai olhar para o próximo tema mais elevado na hierarquia para localizar o arquivo. Se isto falhar, irá continuar a trabalhar para baixo na hierarquia dos temas até ser capaz de localizar o arquivo chamado "view.phtml ', em que a aplicação irá carregá-lo para a loja e terminar a pesquisa. Este método de construção de desenho é chamado fallbacks, porque o aplicativo 'desce' para a próxima possível fonte de arquivos necessários, a fim de recuperar e carregá-lo.

Vamos dizer que você tem três temas atribuídos à sua loja e de cada um destes temas contém os seguintes arquivos:

Tabela 1

default (padrão)	my_theme_1	my_theme_2
All required filesTodos os arquivos necessários	templates/3-col-layout.phtml	templates/3-col-ayout.phtml
	templates/header.phtmltemplates / header.phtml	css/base.csscss / base.css
	mages/logo.gifimages / logo.gif
	css/base.csscss / base.css
	css/boxes.csscss / boxes.css

Vamos também assumir que os três temas são atribuídos esta hierarquia:

Tabela 2

HIGHEST (MÁXIMAS)	my_theme_2
	my_theme_1
LOWEST (MAIS BAIXO)	default (padrão)

Em estreita observação, você verá que lá estão alguns arquivos redundantes, como templates/3-col-layout.phtml e css/base.css na Tabela 1. Agora vamos organizar em torno da mesa de modo que os arquivos redundante estejam dispostos paralelamente um ao outro.

Tabela 3

padrão	my_theme_1	my_theme_2
Todos os arquivos necessários
	templates/3-col-layout.phtml	templates/3-col-layout.phtml
	emplates/header.phtmltemplates / header.phtml
	mages/logo.gifimages / logo.gif
	css/base.csscss / base.css	css/base.csscss / base.css
	css/boxes.csscss / boxes.css

Ok, ótimo. Mas "o que significa isto?" Você pode está perguntando.
Bem, deixe-nos lembrar que os arquivos na Tabela 3 são como você ver os arquivos em pastas de cada tema, e não como Magento os vê.

Vamos então olhar como Magento vê a mesma estrutura de arquivo na Tabela 4.

Tabela 4

padrão	my_theme_1	my_theme_2
Todos os arquivos necessários
		templates/3-col-layout.phtml
	templates/header.phtmltemplates / header.phtml
	images/logo.gifimages / logo.gif
		ss/base.csscss / base.css
	css/boxes.csscss / boxes.css

Você perceberá como o Magento ignora a versão de arquivo redundante na hierarquia inferior e só reconhece a versão mais elevado na hierarquia. Isto porque ele já encontrou o arquivo necessário e não precisa de pesquisa para ele por mais tempo, portanto encerra a busca por esse arquivo específico, continuando a busca de outros arquivos necessários ainda a ser encontrados.

:: Neste capítulo você aprendeu como temas são criados e geridos. No próximo capítulo, passo a passo de como construir um tema. Você será introduzido para layouts, templates e skins.

Construindo o tema

Magento é construído sobre um modelo totalmente modular para que as transferências ilimitadas de escalabilidade e flexibilidade para sua loja. Por natureza do pedido, esta abordagem da programação está refletida na forma como você irá desenvolver temas para sua loja. Neste capítulo, iremos explorar o que isso significa para você e exatamente como desenvolver um tema para sua loja com Magento.

Apresentando Blocos e Layout

Você trabalhou muito provavelmente com outras aplicações antes de chegar ao Magento eCommerce - com essa experiência, sabemos que você provavelmente tem alguns conjuntos de coisas que tornaram-se segunda natureza para você ao desenvolver um tema para sua loja. Antes de começar essa documentação, nós gostaríamos de ter certeza que você reuniu as mesmas expectativas e que você possa ter piedade e jogue-os fora pela janela. Não, não, isso não significa que você precise aprender uma nova língua. Na verdade isso não significa ainda que vá mudar muito com relação ao seu fluxo de trabalho. Tudo isto significa, na realidade, é que lá está um par de novos truques que você terá de aprender e com ele novas ferramentas que agora gostaríamos de apresentar. Unir-se a essas ferramentas, mantê-los ao seu lado em todos os momentos e certifique-se de pagar-lhes tempos e tempos de atenção - você faz tudo isso, e nós prometemos que você, você vai amar a si mesmo por eles. Você está pronto? Aqui estão eles:

1. Blocos estruturais
2. Conteúdo dos Blocos
3. Layout

Criando a Nota Mental

A fim de lhe dar uma clara compreensão daquilo que são blocos e esquemas, você pode chamar para si mesmo a nossa imagem mental:

1. Imagine um esboço de um bloco (como na Figura 1 - Não se referencie na imagem o tempo todo. Imagine-o e siga).
2. Agora imagine o esboço de um bloco preenchido com um bloco.
3. Agora imagine dois blocos e os contornos cada vez maior com os blocos.
4. Agora imagine três blocos e com o contorno crescente dos blocos.
5. Agora imagine quatro e com o contorno crescente dos blocos.

Diagrama 1

1. Agora olhe para esta fotografia da página de categoria do Magento:

   Diagrama 2
   

   

2. E agora olha para o break-down do instantâneo exposto em dois tipos.

   Diagrama 3
   

   

   Diagrama 4
   

   

A imagem mental que você acabou de criar serve para dar-lhe um conceito paralelo de comparação entre real e realização de blocos. Sei que você provavelmente está completamente perdido. Vamos explicar.

No conceito, as linhas gerais no Diagrama 3 são os blocos estruturais. Eles são os blocos pais do conteúdo dos blocos na realização, servem para posicionar o seu conteúdo dentro do contexto de blocos de página de uma loja (como na Figura 4). Estes blocos estruturais existem nos formulários da área de cabeçalho, área da coluna esquerda, coluna da direita etc ... que servem para criar a estrutura visual de uma página da loja.

Um bloco de conteúdo no conceito, por outro lado, é o indivíduo de blocos de cor que compõem um bloco estrutural. Em uma loja de contexto, eles são o verdadeiro cerne de uma página da loja. Eles são representações de cada funcionalidades de destaque em uma página (tal como lista de categoria, callout e tags de produto... etc), e emprega modelo para gerar arquivos (X)HTML para ser inserido em sua matriz de bloco estrutural.

Layout é a ferramenta com a qual você pode atribuir conteúdo aos blocos estruturais de cada bloco que você criar. Layout existe sob a forma de arquivo XML de texto e, modificando o esquema você é capaz de mover blocos ao redor de uma página e atribuir modelos para conteúdo para produzir blocos de marcação para os blocos estruturais. Na verdade, com a ajuda de alguns arquivos layout sozinho, você é capaz de modificar o layout visual de todas as páginas da sua loja.

Com o Magento, você não terá mais um arquivo chamado modelo left_column.ext e em que nunca termine com markups esparguete do que deve ser gerido manualmente dependendo de cada funcionalidade necessária para a página. Em vez disso, seus modelos são geridas numa base pre-funcionalidade e você pode carregar e descarregar funcionalidades em sua página da loja com ações de comandos de layout sozinho.

Guia Passo a Passo para a construção de um tema

Aqui esta uma lista completa de ferramentas Magento para construir seus temas:

1. Modelos
2. Layouts
3. Blocos
4. Skins (imagens, CSS e bloco específico de Javascript )

Para construir um tema para sua loja, o seu fluxo de trabalho será composto das seguintes etapas:

UM: Desativar cache do sistema

A fim de preparar para a produção do seu Magento, você precisa primeiro desabilitar o cache de sistema, vá para o Painel de Administração (http://yourhost.com/ admin) e navegar até a aba Sistema -> Cache Management. Escolha 'Desabilitar' de 'All Cache' e clique em salvar. Fazendo isto irá assegurar que você verá um reflexo fiel da sua loja frente as alterações que você ftenha feito.

DOIS: Determinar todas as possibilidades de tipos de estrutura para a sua loja

Antes de você começar a criar marcação para a loja, primeiro terá de se perguntar o tipo da estrutura da página que você gostaria de ter para cada uma de suas páginas da loja. Faça uma lista que é algo parecido com isto:

• Home page irá utilizar estrutura de três coluna.
• A página Listagem de Categoria irá utilizar estrutura de duas colunas que inclui uma coluna da direita.
• Páginas Cliente irá utilizar a estrutura de duas coluna que inclui uma coluna à esquerda.

Esqueleto modelo

Depois que sua lista estiver completa, você irá criar o markups (X)HTML para cada tipo de estrutura e guardá-las como esqueleto modelos em app/design/frontend/your_interface/your_theme/template/page/. Um esqueleto modelo é chamado assim devido à natureza do seu objetivo, tudo o que realmente contém (para além dos elementos ), é a apresentação dos markups que servem para posicionar cada bloco estrutural segundo as marcação áreas.

Amostra de esqueleto modelo

Após a varredura através da amostra do modelo de esqueleto acima, você irá notar um método chamado PHP getChildHtml()?> dentro de cada marcação de apresentação. Essa é a maneira como o Magento carrega os blocos de estrutura do esqueleto modelos e, portanto, é capaz de posicionar o conteúdo de todos os blocos estruturais dentro de uma página da loja.

Cada getChildHtml apela a um nome como no getChildHtml(' header ')?> e estes nomes são a maneira pelas quais cada bloco estrutural é identificado no layout. Os Modelos de Esqueleto são atribuídas à loja através do layout.

TRÊS: Cortar o seu (X)HTML de acordo com a funcionalidade

Depois de criar o seu esqueleto modelo, agora você vai precisar de criar o modelo para cada bloco de conteúdo.

Magento gosta de modelos significativos

Você irá precisar de cortar o markup (X)HTML para construiu a sua página e fornecer a marcação segundo cada funcionalidade da página. Por exemplo, se você tem uma área de carrinho de compras em seu projeto, a marcação para esta área, por si só, torna o seu próprio arquivo modelo. Mesma para as tags para o seu produto, registrar boletim ... etc All these functionalities already come with Magento, so you can reference the existing template tags to build your mark-up logic. Todas estas funcionalidades já vêm com o Magento, assim você pode obter referência com os modelos existente para construir a lógica do seu mark-up.

Onde guardar os modelos

Diagrama 5

A marcação completa de qualquer página na sua loja é introduzido através de uma variedade de modelos que cada um representa, uma funcionalidade de um módulo. A fim de descobrir quais modelos estão sendo chamados para uma página que você gostaria de modificar, você pode ligar dicas ao Caminho Modelo. A fim de permitir-lhe:

1. Vá para o admin e navegar até Sistema -> Configuração
2. Selecione sua loja, no canto superior esquerdo website / selecionar loja
3. Quando recarrega a página, selecione o dono da página e selecione 'Sim' para Sugestões Caminho Modelo.

Quando estiver pronto, volte para a frente da loja, recarregue a página e você verá o caminho para todos os modelos listados de acordo com o bloco. In order to modify the markup, all you have to do is follow the path written out for you and modify the according template(s). A fim de modificar a marcação, tudo que você tem a fazer é seguir o caminho fora escrita para você e modificar segundo modelo(s).

QUATRO: Mude o layout de modo a refletir o seu desenho

Depois de distribuir alguns dos markups, você provavelmente gostaria de passar agora aos modelos em cerca de uma página para ver como você está progredindo bem.

Onde encontrar layouts

Para acessar os arquivos do layout, vá para app/design/frontend/your_interface/your_theme/layout/. Tal como os modelos, os layouts são guardados em uma base por módulo, por isso, você pode facilmente localizar o arquivo para modificar o layout com a ajuda da Sugestões de Modelo. Primeiro, permitir Sugestões de Modelo, recarregue a página a que pretende modificar, e olhe para o caminho modelo do arquivo(s) que o modelo vai lhe fornecer dicas. Se você deseja (por exemplo) mover o carrinho de compras, o caminho do modelo de referência (ex: app / design / frontend / default / default / checkout / cart / sidebar.phtml) e usar o primeiro nome da pasta dentro da pasta tema (indicado em negrito, que é o nome do módulo) para encontrar o arquivo segundo o layout. Portanto, no caso do carrinho de compras, você sabe onde procurar em "checkout. xml 'para modificar o posicionamento do carrinho de compras . Cada arquivo do layout (deve ser necessário) novas seções em base per-page layout comando. Cada área de per-page layout é claramente marcado com as observações que refletem a sua utilização, mas a própria petição reconhece a separação do layout pelo lidar de cada layout.

Layout Padrão versus Layout Atualizações

Existem dois tipos de esquemas - padrão e atualizações. Um layout padrão (page.xml) é o esquema que, por padrão aplica-se a quase todas as páginas na loja. Todos os outros arquivos são Layout Atualizações que simplesmente atualiza o padrão layout em uma base per-page.

Vejamos por exemplo o seu esqueleto modelo:
No layout padrão, você tem que definir a três colunas, o que significa que por padrão a maioria de todas as páginas da sua loja passará a ter estrutura de página de três colunas. Mas não são a estrutura de três coluna que a página de seu produto precisa. Para isso, você quer uma estrutura de duas coluna que inclui uma coluna da direita. Para acomodar esta, você vai deixar o layout padrão sozinho e abrir o catalog.xml em que você pode colocar alguns comandos que diz ao esquema de carregar o aplicativo estrutura de duas colunas para o seu produto em vez do padrão de três na página. Isto é chamado o processo de atualização de um layout.

Exemplo de atribuição da forma do esqueleto modelo:

Vejamos outro exemplo:

Digamos que por padrão você deseja a assinatura de um boletim na caixa da coluna da direita, mas na páginas da conta do cliente você deseja excluir. Neste caso, você deve deixar o seu layout padrão e abrir customer.xml sozinho, em que você vai colocar um comando que o boletim unsets bloquear o conteúdo, excluindo a funcionalidade da página do boletim.

:: Neste capítulo nós andamos através das etapas de modificar um tema. No próximo capítulo vamos entrar nos detalhes de como modificar os layouts.

Introdução ao Layouts

Layout, pela aparência de seus componentes, você pode facilmente acreditando que, a fim de trabalhar com ele você deve primeiro ser preparado com um extenso conhecimento de programação lógicas. Nada pode estar mais longe da verdade. O Layout é construído com um pequeno conjunto de tags XML que são fáceis de aprender e divertido. Aprendendo alguns conceitos-chave e comandos do layout, você em breve estará preparado e com a confiança e conhecimento para modificar facilmente sua loja para as especificações desejada do seu desenho.

• Como Funciona um Layout
• Anatomia do Layout
• Regras do XML
• Exercícios Rápidos para você começar

Como Funciona o Layout

Ao modificar os componentes do esquema, você pode construir a página de sua loja de uma maneira compatível do upgrade.

Diagrama 1

Layout padrão é composta de layout e layout de atualizações que são compostos de tags XML fáceis de aprender. Com estes comandos de layout, você pode alterar/ atribuir conteúdo bloco-estruturais bloco-relações e também o controle da funcionalidades frente de loja, tais como carga e descarga dos blocos específicos de Javascript para uma página.

Os arquivos do Layout são separados em uma base por módulo, cada módulo trazendo consigo o seu próprio arquivo de layout (por exemplo 'catalog.xml' é um arquivo de apresentação do módulo catálogo, 'customer.xml' é para o módulo cliente... etc.). Esses arquivos estão localizados no layout app/design/frontend/your_interface/your_theme/layout/ e cada arquivo é separado por mais alças (ver gráfico 1), cada alça (com excepção da ) atribuindo a próximas atualizações para a segunda página específica na loja.

Ao analisar os arquivos do layout, o Magento primeira agarra as atualizações atribuídas ao layout no manipula o esquema de quase todos os arquivos, na leitura na ordem a eles atribuídas em app/etc/modules/Mage_All.xml. Em seguida, analisa as atualização específicas das páginas do layout, finalizando a construção de uma página da loja.

O sistema é feito desta forma, a fim de permitir sem adição e remoção dos módulos e sem efetuar outros módulos do sistema.

Anatomia do Layout

Layout contêm um pequeno conjunto de tags XML que funcionam como instruções detalhadas para a aplicação sobre como construir uma página, o que construí-lo e com o comportamento de cada elemento. A melhor forma de abordagem do layout é apenas mergulhar na direita e atacar a partir de todos os ângulos. Para que você possa fazer isso, aqui estão algumas propriedades do comportamento de cada tag XML do layout.

Alça

Alça (diagrama 1) é um identificador através do qual a aplicação determina o que fazer com as atualizações aninhadas por ele.

Se o nome da alça é , então sabe-se que a sua aplicação nas próximas atualizações devem ser carregados em quase todas as páginas da loja antes de carregar páginas específicas layout (Dizemos "quase todos", porque algumas páginas excepcionais como imagem popup do produto não carregam o layout na alça ).

Se o Magento encontrar alças diferente , então ele irá atribuir as atualizações aninhada de acordo com a alça para a página especificada pelo navegador. Por exemplo, o layout contêm atualizações para a página Compare Product, enquanto que contenham essas Compare Product para a página. Alçãs são estabelecidos em pedra identificadoras que como um criador sem ampla compreensão de programação do Magento, nunca deveriam precisar modificar.

O Magento determina o comportamento ea representação visual de cada elemento de uma página através do tag. Já referiu a dois tipos de blocos Magento emprega - blocos estruturais e blocos de conteúdo. A melhor forma de se distinguir entre os dois é através da análise do comportamento que lhe é atribuída por meio da tag atributos. Um bloco estrutural normalmente contém o atributo 'as', através do qual o aplicativo é capaz de se comunicar com a área designada (pelo método getChildHtml) em um modelo. Você vai notar muitas ocorrências deste atributo "as" no esquema padrão, porque, por natureza, o padrão é um layout que assenta o fundamento de trabalho em que a página podem se layouts específicos para começar a adicionar. Por exemplo, no layout padrão, não é blocos estruturais, tais como 'esquerda', 'direita', 'conteúdo' e 'rodapé' sendo introduzidas. Não quer dizer que esses blocos não podem existir no esquema normal de atualizações, mas por que não em primeiro lugar configurar o ocorrer de novo dos blocos estruturais no layout padrão e, em seguida, comece a adicionar conteúdo de uma página por base?. Vamos cavar mais fundo ainda em atributos disponíveis para .

• tipo (type) - Este é o identificador do módulo de classe que define a funcionalidade do bloco. Este atributo não deve ser modificado.
• Nome (name) - Este é o nome pelo qual os outros blocos podem fazer referência ao bloco em que este atributo é atribuído (ver gráfico 3).
• antes (before) (e) depois (after) – Estas são duas maneiras para posicionar um conteúdo dentro de um bloco estrutural, bloco.antes = "-" e depois = "-" são comandos usados para a posição do bloco em conformidade com o muito superior ou muito inferior de um bloco estrutural.
• template - Este atributo determina o modelo que irá representar a funcionalidade do bloco em que este atributo é atribuído. Por exemplo, se este atributos é atribuído catalog/category/view.phtml ', o aplicativo irá carregar o arquivo modelo app/design/frontend/template/catalog/category/view.phtml.
• ação - é usado para controlar funcionalidades da frente de loja como o carregamento ou descarregamento de um Javascript. Uma lista completa dos métodos de ação, em breve estará disponível, mas no tempo médio a melhor maneira para aprender sobre os diferentes métodos de ação é de brincar com eles nas atualizações de layout disponíveis atualmente.
• como (as): - Este é o nome pelo qual um modelo solicita o bloco em que este atributo é atribuído. Quando você ver o método PHP getChildHtml ( 'block_name') chamado a partir de um modelo, você pode ter certeza que é referente ao bloco cujo atributo 'as' é atribuído ao nome 'block_name'. (ie. O método getChildHtml ( "'header")?> no modelo correlaciona a um esqueleto )

Diagrama 3

é utilizada para fazer referência a outro bloco. Ao fazer uma referência a um outro bloco, as atualizações no interior serão aplicáveis às correlaciona a ele (ver gráfico 3).

A fim de tornar a referência, você deve visar a referência a um bloco, utilizando o atributo 'name'. Este atributo direciona a tag atributo 'name'. Então, se você fosse fazer uma referência a , você teria a segmentação do bloco denominado.

Regras do XML

Diagrama 4

Se não estiver familiarizados com ele, após deparar com o esquema XML do Magento baseado em atualizações, você pode ter uma ou duas perguntas sobre as regras que devem seguir quando se modifica um arquivo XML.
A única regra que você precisa configurar para lembrar com respeito aos XML, é que quando abre uma etiqueta, que deve ser seguida por uma tag de fechamento ( ) ou auto-fechar () exatamente como tags (X) HTML seria.

Exercícios Fáceis para você começar

Assim como quaisquer novos conceitos, sabemos que sem realmente um mergulho de cabeça, você nunca poderá realmente compreender o que lhe foi explicado em palavras. Então aqui está um pouco de exercícios para que você possa obter um gostinho de trabalhar com layouts. A fim de trabalhar com este exercício, você deve ter o tema padrão Magento pronto e acessível.

Exercício # 1: Na página categoria, mova a caixa "Meu Carrinho" da coluna da direita para a esquerda

1. Ligue a Sugestão Caminho Modelo indo até o admin, em seguida, navegar para Sistema -> Configuração. Quando você estiver na página de configuração, escolha a loja que você está trabalhando em cima à esquerda, usando o seletor de site/loja. Aguarde recarregar a página e, em seguida, selecione a guia Desenvolvedor. Escolha 'Sim' na caixa para selecionar Sugestões do Caminho Modelo. Clique em Salvar. Volte para a frente da loja, e recarregar.
2. Quando a página recarregar, olhe para o caminho modelo do bloco 'Meu Carro", mais provavelmente vai dizer 'frontend/default/default/template/checkout/cart/sidebar.phtml'. Ao olhar para o caminho, você conhece este modelo está a ser introduzido, através do módulo 'checkout'. Como é que você sabe isso? - frontend/default/default/template/ checkout /cart/sidebar.phtml. Diz o modelo do caminho. O nome do diretório seguinte 'template' é o nome do módulo através de um modelo que é introduzida.
3. Abra layout/checkout.xml - porque agora sabemos que estamos lidando com o módulo checkout.
4. Procurar por 'checkout/cart/sidebar.phtml' (nome do modelo do bloco Meu Carrinho) no layout atualizações. Você irá encontrar uma área que se parece com esta:
   



Alterá-lo em vez de dizer o seguinte (observe que todos os que você está fazendo é mudando o para ).




5. Recarregar a frente da loja e você vai ver agora a mudança refletida.

Exercício # 2: Separar os links no rodapé área do SEO - Em vez de ter a uma lista de itens no link, isolar 'Pesquisa avançada' para estar no cabeçalho.

1. Você pode fazer uma suposição de que o ligações calculadas do SEO devem ser atribuídas em algum lugar do esquema sob o bloco do rodapé porque está a ser puxado através 'getChildHtml ()?>' do template/page/html/footer.phtml. (Você vai precisar de Dicas do Caminho do Modelo ligado para ver porque isto é óbvio).
2. Abra a layout/page.xml e veja a lista das crianças sob o bloco de rodapé, a fim de localizar um bloco que solicita os links do rodapé - Você encontrará , que é o que chama os links do SEO. Agora que você sabe que o esquema de referência de atualizações de ligações do SEO através do name="footer_links", agora você vai fazer uma pesquisa em todos os arquivos XML para . Você irá encontrar referências para o bloco footer_links em catalog.xml (o que chama "Mapa do Site '), catalogsearch.xml (que designa por" Termos de pesquisa' e 'Pesquisa Avançada') e contacts.xml (que designa por "Fale Conosco").
3. Agora que você localizou a área de cada um dos itens do link SEO, você irá agora iniciar os passos para isolar a 'Pesquisa avançada' e torná-la no seu próprio cabeçalho. Primeiro voltar para page.xml e criar um novo bloco header_links" name=" header_links " type="page/template_links">ninho e template="page/template/links.phtml"/>- lá dentro . Você faz as atualizações do layout para esperar este link no header.phtml. Abrir modelo / page / html / header.phtml, e tipo, em getChildHtml('header_links')?> Onde você quiser que o link para residir.

• Agora vá para catalogsearch.xml, e corte isto:
  
Advanced Search out from .
  Eu criei novas linhas de referência para o novo bloco header_links que criei, e encaixei os códigos dentro dele assim:
  

Advanced Search

• Agora tenho a pesquisa avançada no cabeçalho em vez do rodapé.

Isto marca o final do Guia para Designer do Magento. Esperamos agora por que você esteja preparado com confiança e conhecimento sobre a forma de abordagem com a concepção Magento. Esperamos para ver alguns de seus resultados até no fórum. Share with us your designs, discuss this documentation and ask lots of questions at the community forum's 'HTML, XHTML, CSS, Design Questions' thread. Compartilhe connosco as suas concepções, discuta esta documentação e faça muitas perguntas no fórum de discussão da comunidade "Design/HTML/XHTML/CSS'.