Componentes privados

Os componentes privados são semelhantes aos componentes HTML e twig encontrados nos layouts, a única diferença é que o código não pode ser modificado livremente (é um código privado dentro da Nuvemshop sem acesso por FTP), mas permitem parâmetros diferentes.

Desta forma, a utilização de componentes privados garante menos riscos na edição dos arquivos de um layout, além de continuar recebendo atualizações independente da loja ter FTP aberto ou não.

Abaixo estão listados todos os componentes privados disponíveis hoje na Nuvemshop, quais parâmetros eles aceitam e um exemplo de como incluí-los.

Algo importante antes de continuar. Alguns componentes privados podem depender de Javascript do lado da loja, enquanto outros não. Em cada exemplo as dependências de cada um são esclarecidas.

Por outro lado, nenhum componente precisa adicionar traduções do lado do layout, ele já as tem incorporadas.

Parcelas

Este componente é utilizado para exibir as parcelas no item de produto, no detalhe do produto e no carrinho.

Exemplo de como incluí-lo

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

Parâmetros

Dependências

No lado JS, tem dependências da função changeVariant que está no arquivo store.js.tpl. Ou seja, o JS desse arquivo permanece funcional.

Meios de pagamento

Este componente é utilizado para exibir os detalhes das formas de pagamento nos detalhes do produto.

Exemplo de como incluí-lo

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

Outros

empty_placeholder_url: Usado para substituir o URL do espaço reservado da imagem que é carregado durante o lazyload de todas as bandeiras do componente.

Dependências

No lado JS, tem dependências da função changeVariant e do componente modal (se for exibido em modal) que está no arquivo store.js.tpl. Ou seja, o JS desse arquivo permanece funcional.

JS não é necessário para o componente de guias.

Logos de pagamentos e frete

Este componente é utilizado para exibir os logotipos de pagamento e frete, principalmente no rodapé.

Exemplo de como incluí-lo

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

Parâmetros

empty_placeholder_url: Usado para substituir o URL do espaço reservado da imagem que é carregado durante o lazyload de todas as bandeiras do componente.

Dependências

Não tem dependências JS

Filtros

Este componente é usado para exibir filtros por categorias e propriedades

Exemplo de como incluí-lo

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

Dependências

Dependendo do layout você pode precisar manter o JS relacionado ao componente acordeão

Ordem de produtos

Este componente é utilizado para ordenar os produtos de acordo com um critério. Ex: Do preço mais baixo para o mais alto.

Exemplo de como incluí-lo

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

Dependências

Dependendo do layout você pode precisar manter o JS relacionado ao componente acordeão

Pesquisa

Este componente é utilizado para o formulário de pesquisa de produtos (incluindo sugestões).

Exemplo de como incluí-lo

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

Dependências

Dependendo do layout, pode ser necessário manter o JS relacionado à pesquisa usando a função LS.search

Logotipo

Este componente se usa para mostrar el logo de la tienda

Exemplo de como incluí-lo

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

Dependências

Não tem nenhum tipo de dependência

Logotipo de cabeçalho transparente

Este componente é utilizado para exibir o logo da loja que permite a funcionalidade de um logo específico quando o cabeçalho tem fundo transparente.

Exemplo de como incluí-lo

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

Parâmetros

CSS

Dependências

Depende se o layout tem ou não uma configuração de cabeçalho transparente.

Formulários de login e registro

Esses componentes são usados para exibir o login e o formulário de registro de um usuário.

Exemplo de como incluí-los

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

Dependências

Dependendo do layout, pode ser necessário manter o JS relacionado ao componente de alternância de senha

Meta informações para redes sociais

Este componente é usado para carregar as metainformações de redes sociais da loja. Inclua informações sobre o Facebook e o Twitter na tag HTML “head”.

Exemplo de como incluí-lo

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

Dependências

Este componente não tem dependências

Informação estruturada

Este componente é usado para carregar as informações estruturadas da loja para o Google. Ele pode ser incluído na tag HTML “head” ou em cada produto da listagem.

Exemplo de como incluí-lo

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

Dependências

Este componente não tem dependências

Links para reclamações

Este componente é utilizado para exibir os links “Defesa do Consumidor” e “Botão de Arrependimento” nas lojas da Argentina.

Exemplo de como incluí-lo

{{ 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",
    },
}) 

Classes de CSS

Dependências

Este componente apenas inicia o fluxo do Botão de Arrependimento. Para finalizar é necessário fazer alterações no formulário de contato. Para mais informações veja este tutorial

Imagem

Este componente é usado para qualquer tipo de imagem na loja, desde um banner até um produto.

Exemplo de como incluí-lo

Imagem do produto em destaque

{{ component(
    'image', {
        image_name: product.featured_image,
        image_width: product.featured_image.dimensions['width'],
        image_height: product.featured_image.dimensions['height'],
        image_alt: product.featured_image.alt,
        product_image: true,
        image_classes: 'product-item-image',
    })
}}

Imagem de um banner

{{ component(
    'image',{
        image_name: "banner.jpg",
        image_classes: 'img-fluid w-100 mb-3',
    })
}}

CSS

Dependências

Para que o lazy load com JS funcione é necessário adicionar o JS na loja. No caso de nossos layouts usamos lazysizes.js que é carregado no arquivo external-no-dependencies.js.tpl.

Imagem do item do produto

Este componente é usado para exibir a imagem do item do produto nas listagens.

Exemplo de como incluí-lo

{{ component(
    'product-item-image', {
        image_lazy: true,
        image_lazy_js: true,
        image_thumbs: ['small', 'medium', 'large', 'huge', 'original'],
        image_data_expand: '-10',
        image_secondary_data_sizes: 'auto',
        secondary_image: true,
        slider: true,
        placeholder: true,
        slider_pagination_container: true,
        product_item_image_classes: {
            image_container: 'item-image',
            image_padding_container: 'position-relative d-block',
            image: 'img-absolute img-absolute-centered fade-in',
            image_featured: 'item-image-featured',
            image_secondary: 'item-image-secondary',
            slider_container: 'swiper-container position-absolute h-100 w-100',
            slider_wrapper: 'swiper-wrapper',
            slider_slide: 'swiper-slide item-image-slide',
            slider_control_pagination_container: 'item-slider-pagination-container d-md-none',
            slider_control_pagination: 'swiper-pagination item-slider-pagination',
            slider_control: 'icon-inline icon-lg',
            slider_control_prev_container: 'swiper-button-prev',
            slider_control_prev: 'icon-flip-horizontal',
            slider_control_next_container: 'swiper-button-next',
            more_images_message: 'item-more-images-message',
            placeholder: 'placeholder-fade',
        },
        control_next_svg_id: 'arrow-long',
        control_prev_svg_id: 'arrow-long',
    })
}}

CSS

Este componente também inclui o componente image.tpl, portanto product-item-image.tpl também aceita parâmetros image.tpl. Por exemplo: O parâmetro image_lazy de image pode ser usado em product-item-image para fazer com que a imagem do produto seja carregada com lazy load.

Dependências

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

Para que o slider ou o lazy load funcionem, é necessário adicionar o JS na loja. No caso de nossos temas, usamos Swiper.js e Lazysizes.js que são carregados no arquivo external-no-dependencies.js.tpl e o slider é criado no arquivo store.js.tpl

Seção de produtos

Este componente é usado para exibir uma seção de produtos, que pode ser qualquer coisa, desde destaques na página inicial até aqueles relacionados nos detalhes do produto.

Exemplo de como incluí-lo

Produtos 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

Dependências

Para que o slider funcione é necessário adicionar o JS na loja. No caso de nossos layouts usamos Swiper.js que é carregado no arquivo external-no-dependencies.js.tpl e o slider é criado no arquivo store.js.tpl

Promoções no detalhe do produto

Este componente é usado para mostrar as informações das promoções no detalhe do produto

Exemplo de como incluí-lo

{{ component('promotions-details', {
    promotions_details_classes: {
        container: 'js-product-promo-container text-center text-md-left mb-4',
        promotion_title: 'h4 mb-2 text-accent',
        valid_scopes: 'mb-0',
        categories_combinable: 'mb-0',
        not_combinable: 'font-small mb-0',
        progressive_discounts_table: 'table mb-2 mt-3',
        progressive_discounts_hidden_table: 'table-body-inverted',
        progressive_discounts_show_more_link: 'btn-link btn-link-primary mb-4',
        progressive_discounts_show_more_icon: 'icon-inline',
        progressive_discounts_hide_icon: 'icon-inline icon-flip-vertical',
        progressive_discounts_promotion_quantity: 'font-weight-light text-lowercase'
    },
    svg_sprites: false,
    custom_control_show: include("snipplets/svg/chevron-down.tpl", { 
        svg_custom_class: "icon-inline icon-w-14 icon-md ml-2" 
    }),
    custom_control_hide: include("snipplets/svg/chevron-up.tpl", { 
        svg_custom_class: "icon-inline icon-w-14 icon-md ml-2" 
    }),
}) }}

Parâmetros

CSS

Texto do label de promoções na lista e no detalhe do produto

Este componente é usado para exibir as informações das promoções na lista e no detalhe do produto

Ejemplo de cómo incluirlo

{{ component('promotion-label-text', {
  promotion_label_text_classes: {
    primary_text: 'd-block',
  },
  quantity_long_wording: true,
}) }}

Parâmetros

CSS