Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Sellos Personalizados

Para tener la posibilidad de agregar sellos o imágenes personalizadas y estas aparezcan al pie de todas las páginas de tu tienda desde la pantalla de Personalizar tu diseño, dentro del administrador, hay que seguir los siguientes pasos:

1. Dentro de layout.tpl reemplazar el código que muestra sellos como puede ser por ejemplo del de AFIP. A continuación se puede ver un ejemplo de como se ve este código dentro de la plantilla 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>

Lo que tienen que hacer es reemplazar el código mencionado anteriormente, por este nuevo código:

{% 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 %}

Esto mantiene el viejo código que mostraba los sellos que se configuran desde la sección de Códigos externos dentro del administrador, pero también incorpora la posibilidad de agregar una imagen (esta puede tener un link a un sitio web externo) y código HTML o Javascript, todo desde las opciones de Personalizar tu diseño.

2. Una vez que hayas terminado de editar layout.tpl necesitás agregar la opción dentro de settings.txt, la cual idealmente debe ir dentro de la sección Opciones generales . A continuación se puede ver un ejemplo de su ubicación en la plantilla 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. Tenés que agregar los textos para las traducciones dentro de 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 último solo queda agregar las reglas de CSS, las cuales pueden incluirse en cualquier hoja de CSS de la plantilla. Este es un ejemplo de la plantilla Luxury, donde las reglas fueron agregadas dentro del a hoja 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*/

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.