Estrutura


Temas da Maxistore são compostos por arquivos de template em Twig, cada um com um propósito diferente. 

Por exemplo, category.twig é utilizado para exibir vários produtos de uma determinada categoria, e product.twig é utilizado para exibir os detalhes de um único produto. 

Temas da Maxistore também incluem o arquivo config.json, que é uma ofrma de fazer com que você possa alterar configurações do tema de forma fácil.

Estrutura

Um tema da Maxistore consiste em: 

Diretórios

css

A pasta css contém os arquivos de estilo do tema, que por padrão é main.css. Você pode acessar esses arquivos através de um filtro, relativizando a URL em que ele é carregado.

{# acessa a URL da loja seguido de /css/main.css #}
<link rel="stylesheet" href="{{ 'main'|css }}" type="text/css" media="screen" />

js

Funciona da mesma forma que a pasta css, mas tem seu próprio filtro e é responsável por carregar os arquivos javascript da loja. 

{# acessa a URL da loja seguido de /js/theme.js #}
<script type="text/javascript" src="{{ 'theme'|js }}"></script>

img

Responsável por guardar imagens do tema, como botões, ícones, etc.

Deve ser utilizado para imagens exclusivamente de design, e não para imagens de produto ou outras de conteúdo.

Templates

Os templates ficam no diretório do próprio tema e um tema padrão inclui:

Outros arquivos

preview.jpg

Exibe uma imagem do tema no painel da loja para que os usuários consigam reconhecer o layout. Deve ter a medida de 600x450px.

settings.json

É um arquivo json utilizado para criar opções do tema ( Design > Opções do Tema). Essas opções permitem que o usuário faça alterações na loja sem ter que alterar código. 

Ele é responsável pela criação de Seções e Campos, transformando automaticamente os identificadores em variáveis twig. Cabe ao desenvolvedor implementar essas variáveis no layout.

Exemplo
O código a seguir

{
    "Geral" : {
        "type"    : "section",
        "title"    : "Geral",
        "content" : {
            "sidebar_social_icons": {
                "type"        : "form",
                "subtype"     : "checkbox",
                "title"       : "Exibir ícones de redes sociais na barra lateral",
                "default"      : false
            },
            "facebook_page_url":    {
                "type"        : "form",
                "subtype"    : "input",
                "title"        : "URL da sua página no Facebook",
                "default"    : "https://facebook.com/Maxistore.BR"
            },
            "twitter_page_url":    {
                "type"        : "form",
                "subtype"    : "input",
                "title"        : "URL da sua página no Twitter",
                "default"    : "https://twitter.com/Maxistore_BR"
            },
            "instagram_page_url":    {
                "type"        : "form",
                "subtype"    : "input",
                "title"        : "URL da sua página no Instagram"
            },
            "pinterest_page_url":    {
                "type"        : "form",
                "subtype"    : "input",
                "title"        : "URL da sua página no Pinterest"
            },
            "flickr_page_url":    {
                "type"        : "form",
                "subtype"    : "input",
                "title"        : "URL da sua página no Flickr"
            },
            "tumblr_page_url":    {
                "type"        : "form",
                "subtype"    : "input",
                "title"        : "URL da sua página no Tumblr"
            },
            "vimeo_page_url":    {
                "type"        : "form",
                "subtype"    : "input",
                "title"        : "URL da sua página no Vimeo"
            },
            "youtube_page_url":    {
                "type"        : "form",
                "subtype"    : "input",
                "title"        : "URL da sua página no Youtube"
            }    
        }
    }
}

Cria as seguintes opções do tema

Com isso, as variáveis são criadas e você pode implementar como preferir. Um exemplo de implementação é esse:

{% if settings.sidebar_social_icons %}
<div id="social">
    {% if settings.facebook_page_url %}
    <a href="" target="_blank" class="facebook"></a>
    {% endif %}
    {% if settings.twitter_page_url %}
    <a href="" target="_blank" class="twitter"></a>
    {% endif %}
    {% if settings.instagram_page_url %}
    <a href="" target="_blank" class="instagram"></a>
    {% endif %}
    {% if settings.pinterest_page_url %}
    <a href="" target="_blank" class="pinterest"></a>
    {% endif %}
    {% if settings.flickr_page_url %}
    <a href="" target="_blank" class="flickr"></a>
    {% endif %}
    {% if settings.tumblr_page_url %}
    <a href="" target="_blank" class="tumblr"></a>
    {% endif %}
    {% if settings.vimeo_page_url %}
    <a href="" target="_blank" class="vimeo"></a>
    {% endif %}
    {% if settings.youtube_page_url %}
    <a href="" target="_blank" class="youtube"></a>
    {% endif %}
</div>
{% endif %}