Componentes privados

Los componentes privados son similares a los componentes de HTML y twig que se encuentran en las plantillas, la única diferencia es que el código no puede ser libremente modificado (es un código privado dentro de Tiendanube sin acceso desde un FTP), pero si permiten diferentes parámetros.

De esta manera el uso de componentes privados garantiza menos riesgo al editar los archivos de una plantilla, así como también continúa recibiendo actualizaciones más allá de si la tienda tiene FTP abierto o no. 

Debajo se listan todos los componentes privados disponibles hoy en Tiendanube, qué parámetros aceptan y un ejemplo de como incluirlos.

Algo importante antes de avanzar. Algunos componentes privados pueden depender de Javascript que se encuentra del lado de la tienda, así como otros no. En cada ejemplo se aclara las dependencias de cada uno. 

Por otro lado ningún componente necesita sumar traducciones del lado de la plantilla, ya las trae incorporadas.

Cuotas

Este componente se usa para mostrar las cuotas en el item del listado, en el detalle del producto y en el carrito.

Ejemplo de cómo incluirlo

{{ component('installments', {'location' : 'product_detail', container_classes: { installment: "product-detail-installments text-center text-md-left mb-2" }}) }}

Parámetros

Dependencias

Del lado de JS, tiene dependencias de la función changeVariant que está en el archivo store.js.tpl. Es decir que el JS de ese archivo se mantiene funcional.

Medios de pago

Este componente se usa para mostrar el detalle de los medios de pago en el detalle del producto

Ejemplo de cómo incluirlo

{{ component('payments/payments-details',
    {
        text_classes: {
            text_accent: "label label-accent ml-1",
            subtitles: "mb-3",
            text_big: "font-big",
            text_small: "font-small",
            align_right: "text-right"
        },
        spacing_classes: {
            top_1x: "mt-1",
            top_2x: "mt-2",
            top_3x: "mt-3",
            right_1x: "mr-1",
            right_2x: "mr-2",
            right_3x: "mr-3",
            bottom_1x: "mb-1",
            bottom_2x: "mb-2",
            bottom_3x: "mb-3",
            left_3x: "ml-3",
        },
        container_classes : {
            payment_method: "card p-3"
        }
    })
}}

Parámetros 

CSS

Otros

empty_placeholder_url: Usado para reemplazar la URL de la imagen placeholder que se carga mientras se hace lazyload de todas las banderas del componente.

Dependencias

Del lado de JS, tiene dependencias de la función changeVariant y del componente de modal (si es que se va a mostrar en un modal) que está en el archivo store.js.tpl. Es decir que el JS de ese archivo se mantiene funcional. 

Para el componente de tabs no es necesario JS.

Logos de pagos y envíos

Este componente se usa para mostrar los logos de pagos y envíos, especialmente en el footer.

Ejemplo de cómo incluirlo

{{ component('payment-shipping-logos', {'type' : 'payments'}) }}

Parámetros

empty_placeholder_url: Usado para reemplazar la URL de la imagen placeholder que se carga mientras se hace lazyload de todas las banderas del componente.

Dependencias

No tiene dependencias de JS

Filtros

Este componente se usa para mostrar los filtros tanto por categorías como por propiedades

Ejemplo de cómo incluirlo

{{ component(
    'filters/filters',{
        accordion: true,
        parent_category_link: false,
        applied_filters_badge: true,
        container_classes: {
            filters_container: "visible-when-content-ready",
        },
        accordion_classes: {
            title_container: "row no-gutters align-items-center",
            title_col: "col my-1 pr-3 d-flex align-items-center",
            title: "h6 font-body font-weight-bold mb-0",
            actions_col: "col-auto my-1",
            title_icon: "icon-inline svg-icon-text font-big mr-1"
        },
        filter_classes: {
            list: "list-unstyled my-3",
            list_item: "mb-2",
            list_link: "font-small",
            badge: "h6 font-small ml-1",
            show_more_link: "d-inline-block btn-link font-small mt-1",
            checkbox_last: "m-0",
            price_group: 'price-filter-container filter-accordion',
            price_title: 'h6 font-weight-bold mb-4',
            price_submit: 'btn btn-default d-inline-block',
            applying_feedback_message: 'h5 mr-2',
            applying_feedback_icon: 'icon-inline h5 icon-spin svg-icon-text'
        },
        accordion_show_svg_id: 'plus',
        accordion_hide_svg_id: 'minus',
        applying_feedback_svg_id: 'spinner-third'
    }) 
}}

Parámetros 

CSS

Dependencias

Dependiendo de la plantilla podrías llegar a necesitar mantener el JS relacionado al componente de acordeón

Ordenar productos

Este componente se usa para ordenar los productos bajo un criterio. Ej: De menor a mayor precio.

Ejemplo de cómo incluirlo

{{ component(
    'sort-by',{
        accordion: true,
        list: true,
        accordion_classes: {
            title_container: "row no-gutters align-items-center",
            title_col: "col my-1 pr-3 d-flex align-items-center",
            title: "h1 font-huge mb-0",
            actions_col: "col-auto my-1",
            title_icon: "icon-inline svg-icon-text icon-xs mr-1"
        },
        sort_by_classes: {
            group: 'filter-accordion',
            list: 'radio-button-container list-unstyled my-3',
            list_item: 'radio-button-item',
            radio_button: "radio-button",
            radio_button_content: "radio-button-content",
            radio_button_icons_container: "radio-button-icons-container",
            radio_button_icon: "radio-button-icon",
            radio_button_label: "radio-button-label",
            applying_feedback_message: 'font-big mr-2',
            applying_feedback_icon: 'icon-inline font-big icon-spin svg-icon-text',
        },
        accordion_show_svg_id: 'chevron',
        accordion_hide_svg_id: 'chevron-down',
        applying_feedback_svg_id: 'spinner-third',
    }) 
}}

Parámetros 

CSS

Dependencias

Dependiendo de la plantilla podrías llegar a necesitar mantener el JS relacionado al componente de acordeón

Búsqueda

Este componente se usa para el formulario de búsqueda de productos (incluídas las sugerencias).

Ejemplo de cómo incluirlo

{{ component('search/search-form', {
    form_classes: { 
        input_group: 'm-0', 
        input: 'input-class', 
        submit: 'submit-class', 
        delete_content: 'delete-class',  
        search_suggestions_container: 'container-class'}
    }) 
}}

Parámetros 

CSS

Dependencias

Dependiendo de la plantilla podrías llegar a necesitar mantener el JS relacionado a la búsqueda usando la función LS.search

Logo

Este componente se usa para mostrar el logo de la tienda

Ejemplo de cómo incluirlo

{{ component('logos/logo', {logo_thumbnail: logo_size_thumbnail, logo_img_classes: 'transition-soft ' ~ logo_size_class, logo_text_classes: 'h3 m-0'}) }}

Parámetros 

Tipo de componente

CSS

Dependencias

No tiene ningún tipo de dependencia

Logo para encabezado transparente

Este componente se usa para mostrar el logo de la tienda que permite la funcionalidad de un logo específico cuando el encabezado tiene fondo transparente.

Ejemplo de cómo incluirlo

{{ component('logos/logo-transparent-header', {logo_thumbnail: 'medium', logo_img_name: 'logo-transparent.jpg', logo_img_classes: 'transition-soft'}) }}Parámetros 

CSS

Dependencias

Depende de si la plantilla tiene o no una configuración para encabezado transparente.

Formularios de login y registro

Estos componentes se usan mostrar el formulario de login y registro de un usuario

Ejemplo de cómo incluirlos

Login

{{ component('forms/account/login' , {
    validation_classes: {
        link: 'btn-link font-small ml-1',
        text_align: 'text-center',
        text_size: 'font-small',
    },
    spacing_classes: {
        top_2x: 'mt-2',
        bottom_2x: 'mb-2',
        bottom_3x: 'mb-3',
        bottom_4x: 'mb-4',
    },
    form_classes: {
        password_toggle: 'btn',
        input_help_align: 'text-right',
        input_help_link: 'btn-link font-small mb-2 mr-1',
        help_align: 'text-center',
        help_text_size: 'font-small',
        help_link: 'btn-link btn-link font-small mb-2 ml-1',
        submit: 'btn btn-primary btn-big btn-block mb-3',
        submit_spinner: 'icon-inline icon-spin svg-icon-mask ml-2'
    }})
}}

Registro

{{ component('forms/account/register' , {
    validation_classes: {
        link: 'btn-link font-small ml-1',
        text_align: 'text-center',
        text_size: 'font-small',
    },
    spacing_classes: {
        top_2x: 'mt-2',
        bottom_2x: 'mb-2',
        bottom_3x: 'mb-3',
    },
    form_classes: {
        password_toggle: 'btn',
        input_help_align: 'text-right',
        input_help_link: 'btn-link btn-link font-small mb-2 mr-1',
        help_align: 'text-center',
        help_text_size: 'font-small',
        help_link: 'btn-link font-small mb-2 ml-1',
        submit: 'btn btn-primary btn-big btn-block mb-3',
        submit_spinner: 'icon-inline icon-spin svg-icon-mask ml-2',
        input_error: 'notification-left',
    }})
}}

Parámetros 

CSS

Dependencias

Dependiendo de la plantilla podrías llegar a necesitar mantener el JS relacionado al componente de toggle para la contraseña

Información meta para redes sociales

Este componente se usa para cargar la información meta de redes sociales de la tienda. Incluye información sobre Facebook y Twitter dentro de la etiqueta "head" de HTML.

Ejemplo de cómo incluirlo

{{ component('social-meta') }}

Dependencias

Este componente no tiene dependencias

Información estructurada

Este componente se usa para cargar la información estructurada de la tienda para Google. Se puede incluir en la etiqueta "head" de HTML o en cada producto del listado.

Ejemplo de cómo incluirlo

{{ component('structured-data') }}

Dependencias

Este componente no tiene dependencias

Links para reclamos

Este componente se usa para mostrar los links de "Defensa al consumidor" y "Botón de arrepentimiento" en las tiendas de Argentina.

Ejemplo de cómo incluirlo

{{ component('claim-info', {
    container_classes: 'font-small',
    divider_classes: "mx-1",
    text_classes: {text_consumer_defense: 'd-inline-block mb-1'},
    link_classes: {
        link_consumer_defense: "btn-link font-small",
        link_order_cancellation: "btn-link font-small",
    },
}) 

Clases de CSS

Dependencias

Este componente sólo comienza el flujo de Botón de arrepentimiento. Para poder terminarlo es necesario hacer cambios dentro del formulario de contacto. Para más información ver este tutorial

Sección de productos

Este componente se usa para mostrar una sección de productos, que pueden ser desde destacados en la página de inicio hasta los relacionados en el detalle del producto

Ejemplo de cómo incluirlo

Productos relacionados

{# Section classes #}

{% set section_class = 'section-products-related my-3' %}
{% set container_class = 'container' %}
{% set title_class = 'h3 text-center' %}
{% set products_container_class = 'position-relative swiper-container-horizontal' %}
{% set slider_container_class = 'swiper-container' %}
{% set swiper_wrapper_class = 'swiper-wrapper' %}
{% set slider_control_pagination_class = 'swiper-pagination' %}
{% set slider_control_class = 'icon-inline icon-w-8 icon-2x svg-icon-text' %}
{% set slider_control_prev_class = 'swiper-button-prev' %}
{% set slider_control_next_class = 'swiper-button-next' %}
{% set control_prev = include ('snipplets/svg/chevron-left.tpl', {svg_custom_class: slider_control_class}) %}
{% set control_next = include ('snipplets/svg/chevron-right.tpl', {svg_custom_class: slider_control_class}) %}

{{ component(
    'products-section',{
        title: settings.products_related_title,
        id: 'related-products',
        products_amount: related_products | length,
        products_array: related_products,
        product_template_path: 'snipplets/grid/item.tpl',
        product_template_params: {'slide_item': true},
        slider_controls_position: 'bottom',
        slider_pagination: true,
        svg_sprites: false,
        section_classes: {
            section: 'js-related-products ' ~ section_class,
            container: container_class,
            title: title_class,
            products_container: products_container_class,
            slider_container: 'js-swiper-related ' ~ slider_container_class,
            slider_wrapper: swiper_wrapper_class,
            slider_control_pagination: 'js-swiper-related-pagination ' ~ slider_control_pagination_class,
            slider_control_prev_container: 'js-swiper-related-prev ' ~ slider_control_prev_class,
            slider_control_prev: 'icon-flip-horizontal',
            slider_control_next_container: 'js-swiper-related-next ' ~ slider_control_next_class,
        },
        custom_control_prev: control_prev,
        custom_control_next: control_next,
    }) 
}}

CSS

Dependencias

Para que el slider funcione es necesario agregar el JS en la tienda. En el caso de nuestros diseños usamos Swiper.js que está cargado en el archivo external-no-dependencies.js.tpl y el slider es creado en el archivo store.js.tpl