Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Selos personalizados

Para ter a possibilidade de adicionar selos ou imagens personalizadas e essas aparecerem no rodapé de todas as páginas da sua loja, acesse a opção Personalizar layout no painel de administração e siga os passos:

1. Dentro de layout.tpl, localize o código que mostra selos, por exemplo do EBIT. Veja um exemplo dele no layout Luxury:

<div class="seals row" {% if store.country == 'BR' and not (store.afip or ebit or siteforte) %}data-tooltip="Esses são selos de exemplo"{% endif %}>
    {% if store.country == 'AR' %}
        <div class="afip">
            <img src="http://www.afip.gob.ar/images/f960/DATAWEB.jpg" border="0">
        </div>
    {% endif %}
    {% if store.country == 'BR' %}
        <div class="siteforte">
            {{ "images/siteforte-exemplo.png" | static_url | img_tag }}
        </div>
         <div class="ebit">
            {{ "images/ebit-exemplo.png" | static_url | img_tag }}
        </div>
    {% endif %}
</div>

Você precisa substituir esse código mencionado anteriormente por um novo:

{% if store.afip or ebit or siteforte or settings.custom_seal_code or ("seal_img.jpg" | has_custom_image) %}
    <div class="seals row">
        {% if store.afip %}
            <div class="afip">
                {{ store.afip | raw }}
            </div>
        {% endif %}
        {% if ebit %}
            <div class="ebit">
                {{ ebit }}
            </div>
        {% endif %}
        {% if siteforte %}
            <div class="siteforte">
                {{ siteforte }}
            </div>
        {% endif %}
        {% if "seal_img.jpg" | has_custom_image or settings.custom_seal_code %}
            <div class="custom-seals-container">
                {% if "seal_img.jpg" | has_custom_image %}
                    <div class="custom-seal custom-seal-img">
                        {% if settings.seal_url != '' %}
                            <a href="http://{{ settings.seal_url }}" target="_blank">
                                {{ "seal_img.jpg" | static_url | img_tag }}
                            </a>
                        {% else %}
                            {{ "seal_img.jpg" | static_url | img_tag }}
                        {% endif %}
                    </div>
                {% endif %}
                {% if settings.custom_seal_code %}
                    <div class="custom-seal custom-seal-code">
                        {{ settings.custom_seal_code | raw }}
                    </div>
                {% endif %}
            </div>
        {% endif %}
    </div>
{% endif %}

Isso mantém o código antigo que exibia selos configurados na seção Código externos no painel de administração, mas também traz a possibilidade de adicionar uma imagem (que pode ter um link para um site externo) e códigos HTML ou Javascript, tudo dentro da opção Personalizar layout.

2. Depois de editar layout.tpl, você precisa adicionar a opção dentro de settings.txt, que geralmente está dentro da seção Opções gerais. Confira um exemplo de sua localização no layout Luxury:

Opciones generales
    title
        title = Sellos personalizados en el footer
    description
        description = Podés agregar sellos de dos formas: subiendo una imagen o pegando el código Javascript o HTML
    subtitle
        subtitle = Imagen del sello
    image
        original = seal_img.jpg
    i18n_input
        name = seal_url
        description = [Opcional] Página web externa a la que llevará la imagen del sello al hacer clic
    subtitle
        subtitle = Código Javascript o HTML del sello
    textarea
        name = custom_seal_code
.......

3. Inclua os textos para traduções em translations.txt:

es "Sellos personalizados en el footer"
pt "Selos personalizados no rodapé"
en "Custom seals in the footer"

es "Podés agregar sellos de dos formas: subiendo una imagen o pegando el código Javascript o HTML"
pt "Você pode adicionar selos de duas formas: incluindo uma imagem ou adicionando um código HTML/Javascript"
en "You can add seals through two ways: uploading an image or pasting the Javascript or HTML code"

es "Imagen del sello"
pt "Imagem do selo"
en "Seal image"

es "Código Javascript o HTML del sello"
pt "Código HTML ou Javascript do selo"
en "HTML or Javascript seal´s code"

es "[Opcional] Página web externa a la que llevará la imagen del sello al hacer clic"
pt "[Opcional] Página da web externa a que levará a imagem do selo quando clicado"
en "[Optional] External website linked to the image when is clicked"

4. Por fim só falta definir as regras de CSS, que podem ser adicionadas em qualquer folha CSS do layout. Observe um exemplo dessas regras no layout Luxury, dentro da folha style.css:

/*seals*/
.seals{
    float: right;
    clear: both;
}
.custom-seals-container .custom-seal{
    float: right;
    margin: 5px;
}
.custom-seals-container .custom-seal-img img {
    max-width: 120px;
    max-height: 60px;
}
.copyright-text{
    width: 100%;
    float: right;
    clear: both;
}
.copyright > span{
    float: right;
    clear: both;
}
/*end*/