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

magento-tela-01

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

magento-tela-02

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

magento-temas-01

Figura 4. Isto é o que você precisa

magento-temas-02

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

magento-temas-03

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

Tabela 2

magento-temas-04

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

magento-temas-05

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

magento-temas-06

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.

2017-01-24T20:24:07+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x