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

Parâmetro
ValoresDescrição
locationcart, product_item, product_detailÉ uma string usada para definir onde o componente está incluído

Wording

short_wording

É um booleano definir se o texto utilizado será curto ou longo. Ex: “12x R$ 100 sem juros” vs “12 parcelas de R$ 100 sem juros”. Não se aplica a lojas no Brasil.
CSS classescontainer_classes.installmentUsado para passar classes para o contêiner principal

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

Parâmetro
Descrição
text_classes.text_accentUsado para as classes de textos que exigem acentos como descontos
text_classes.subtitlesUsado para as classes dos subtítulos
text_classes.text_bigUsado para as classes dos textos com maior tamanho que o padrão
text_classes.text_smallUsado para as classes dos textos com menor tamanho que o padrão

spacing_classes.right_2x

Usado para as classes de espaciado na direita em 2x
spacing_classes.bottom_1x
Usado para as classes de espaciado abaixo em 1x
spacing_classes.bottom_3xUsado para as classes de espaciado abaixo em 3x
container_classes.payment_methodUsado para as classes de contêiner de cada forma de pagamento

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 

Parâmetro
Descrição
category_filtersBooleano usado para incluir apenas filtros de categoria
property_filtersBooleano usado para incluir apenas filtros de propriedades
accordionBooleano usado para exibir filtros dentro de um acordeão
applied_filters_badgeBooleano usado para exibir um numero sobre os filtros aplicados ao usar o acordeão
parent_category_linkUsado para mostrar o link que leva à categoria pai no filtro de categoria
svg_spritesBooleano que determina se sprites SVG serão usados
accordion_show_svg_id/accordion_hide_svg_idUsado para passar o ID do sprite SVG usado para os ícones de mostrar e ocultar.
applying_feedback_svg_idUsado para o ID do sprite SVG ao mostrar feedback de "aplicando filtro" em dispositivos móveis
parent_category_link_svg_idUsado para o ícone no link retornar à categoria pai


CSS

Parâmetro
Descrição
filter_classes.groupUsado para o contêiner de cada grupo de filtros. Ex: O grupo "cor"
filter_classes.list_titleUsado para o título de cada grupo de filtros
filter_classes.checkbox_containerUsado para o contêiner do checkbox de cada filtro
filter_classes.checkbox_lastUsado para o contêiner do último checkbox em um grupo de filtros

filter_classes.checkbox_icon

Usado para o ícone do checkbox de cada filtro
filter_classes.checkbox_textUsado para o texto do checkbox de cada filtro
filter_classes.checkbox_colorUsado para os filtros de cores
filter_classes.show_more_linkUsado para o link de "ver mais" quando tem muitos filtros
filter_classes.parent_category_linkUsado para o link para voltar a categoria anterior
filter_classes.badgeUsado para o ícone que exhibe os filtros aplicados (se for usada esta funcionalidade)
accordion_classes.title_containerUsado para os títulos dois filtros em formato acordeão
accordion_classes.title_colUsado para a coluna que tem o título dos filtros em formato acordeão
accordion_classes.titleUsado para o título dos filtros em formato acordeão
accordion_classes.actions_colUsado para a coluna que tem o link que abre ou fecha o acordeão dos filtros
accordion_classes.title_iconUsado para o ícone do título nos filtros em formato acordeão
accordion_classes.toggle_linkUsado para o link que abre ou fecha o acordeão nos filtros nesse formato se um ícone não for usado
filter_classes.price_groupUsado para o contêiner de filtro de preço
filter_classes.price_titleUsado para título do filtro de preço
filter_classes.price_submitUsado para o submit do filtro de preço

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 

Parâmetro
Descrição
accordionBooleano usado para exibir  o sort by dentro de um acordeão
listBooleano usado para exibir o sort by em formato de lista, em vez de um menu suspenso
svg_spritesBooleano que determina se sprites SVG serão usados
accordion_show_svg_id/accordion_hide_svg_idUsado para passar o ID do sprite SVG usado para o ícone de mostrar e ocultar.
applying_feedback_svg_idUsado para o ID do sprite SVG ao mostrar feedback de "aplicação de filtro" em dispositivos móveis


CSS

Parâmetro
Descrição
sort_by_classes.groupUsado para o grupo que contém o sort by
sort_by_classes.containerUsado para o contêiner que contém o sort by.
sort_by_classes.list_titleUsado para o título se o formato for do tipo lista
sort_by_classes.listUsado para listagem se o formato for do tipo de lista
sort_by_classes.list_itemUsado para o item da lista no formato de tipo de lista
sort_by_classes.radio_buttonUsado para o radio button de cada opção no formato de lista
sort_by_classes.radio_button_contentUsado para o contêiner de conteúdo em cada radio button
sort_by_classes.radio_button_icons_containerUsado para o contêiner de ícones em cada radio button
sort_by_classes.radio_button_iconUsado para cada ícone nos radio buttons
sort_by_classes.radio_button_labelUsado para o texto dos radio buttons
sort_by_classes.select_groupUsado para o contêiner do sort by en formato tipo menu suspenso
sort_by_classes.select_labelUsado para o texto do sort by en formato tipo menu suspenso
sort_by_classes.selectUsado para o menu suspenso do sort by
sort_by_classes.select_svgUsado para o ícone do select en formato tipo menu suspenso
sort_by_classes.applying_feedback_containerUsado para o contêiner do feedback quando os produtos são ordenados no mobile
sort_by_classes.applying_feedback_messageUsado para o texto do feedback quando os produtos são ordenados no mobile
sort_by_classes.applying_feedback_iconUsado para o ícone do feedback quando os produtos são ordenados no mobile
accordion_classes.title_containerUsado para o contêiner do título em formato acordeão
accordion_classes.title_colUsado para a coluna que tem o título em formato acordeão
accordion_classes.titleUsado para o título em formato acordeão
accordion_classes.actions_colUsado para a coluna que tem o link que abre ou fecha o acordeão
accordion_classes.title_iconUsado para o ícone do título em formato acordeão
accordion_classes.toggle_linkUsado para o link que abre ou fecha o acordeão nesse formato se um ícone não for usado

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 

Parâmetro
Descrição
placeholder_textUsado para substituir o texto padrão usado pelo placeholder do campo de pesquisa.
use_submit_textBooleano usado para exibir um texto no botão de submit do formulário de pesquisa. Por padrão, está ativado.
submit_textUsado para substituir o texto padrão usado pelo botão de submit da pesquisa.
use_delete_btnBooleano para mostrar nos celulares um botão que apaga o que foi escrito no campo de busca. Por padrão está ativado


CSS

Parâmetro
Descrição
form_classes.formUsado para formulário de pesquisa
form_classes.input_groupUsado para o contêiner do campo de pesquisa
form_classes.inputUsado para o campo de pesquisa
form_classes.submitUsado para o botão que envia o formulário de pesquisa
form_classes.delete_contentUsado para o botão que apaga o que estava escrito em celulares
form_classes.search_suggestions_containerUsado para o contêiner de sugestões de pesquisa

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

Parâmetro
Descrição
logo_thumbnailUsado para escolher qual miniatura de logotipo usar. Por padrão é "medium".


CSS

Parâmetro
Descrição
container_classes.logo_img_containerUsado para o contêiner do logotipo
logo_img_classesUsado para o contêiner do logotipo
logo_text_classesUsado para texto de logotipo quando uma imagem não existe

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

Parâmetro
Descrição
logo_thumbnailUsado para escolher qual miniatura de logotipo usar. Por padrão é "medium".
logo_img_nameUsado para conectar o caminho da imagem à configuração definida em settings.txt


CSS

Parâmetro
Descrição
container_classes.logo_img_containerUsado para o contêiner do logotipo
logo_img_classesUsado para imagem de logotipo

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

Parâmetro
Descrição
form_classes.formUsado para o formulário
form_classes.input_groupUsado para o contêiner de cada campo
form_classes.input_labelUsado para os textos de cada campo
form_classes.inputUsado para cada campo
form_classes.input_errorUsado para a mensagem de erro de cada campo
form_classes.input_help_alignUsado para alinhamento do texto de ajuda no campo de senha
form_classes.input_help_linkUsado para o link no texto de ajuda do campo de senha
form_classes.password_toggleUsado para o botão que mostra/oculta a senha no campo de senha
form_classes.submitUsado para o botão que envia o formulário
form_classes.submit_spinnerUsado para o spinner do botão que envia o formulário. Visível após o envio.
form_classes.help_info_alignUsado para alinhar as informações gerais de ajuda do formulário
form_classes.help_info_text_sizeUsado para o tamanho do texto nas informações gerais de ajuda do formulário
form_classes.help_linkUsado para o link de ajuda nas informações gerais de ajuda do formulário
spacing_classes.top_3xUsado para classes de espaçamento acima em 3x
spacing_classes.top_2xUsado para classes de espaçamento acima em 2x
spacing_classes.bottom_4xUsado para classes de espaçamento abaixo em 4x
spacing_classes.bottom_3xUsado para classes de espaçamento abaixo em 3x
spacing_classes.bottom_2xUsado para classes de espaçamento abaixo em 2x
validation_classes.title_sizeUsado para títulos em mensagens de validação de conta
validation_classes.text_alignUsado para alinhar textos em mensagens de validação de conta
validation_classes.text_sizeUsado para o tamanho dos textos nas mensagens de validação da conta

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') }}
Parâmetro
Descrição
itemBooleano usado ao incluir informações estruturadas no item do produto

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

Parâmetro
Descrição
container_classes
Usado para o contêiner de mensagens e links
text_classes.text_consumer_defense
Utilizado para o texto da mensagem de Defesa do Consumidor
link_classes.link_consumer_defense
Usado para o link dentro da mensagem de Defesa do Consumidor
divider_classes
Usado para o divisor entre as informações de aconselhamento ao consumidor e o Botão de Arrependimento
link_order_cancellation
Usado para o link do Botão de Arrependimento

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


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


Parâmetro
Descrição
id
Usado para ID da seção
products_amount
Opcionalmente usado para um atributo de dados com o número de produtos
slider
ooleano que ativa o HTML para usar o formato slider (em nossos layouts usamos o plugin Swiper.js)
slider_pagination
Booleano que ativa o HTML da paginação do slider
svg_sprites
Booleano que determina se sprites SVG serão usados
control_prev_svg_id/control_next_svg_id
Usado para passar o ID do sprite SVG que é usado para o ícone seguinte e anterior no slider.
custom_control_prev/custom_control_next
Usado se os sprites SVG não estiverem implementados, para aplicar HTML personalizado nos controles seguinte e anterior do slider.
slider_controls_container
Booleano para abranger os controles do slider em um contêiner.
slider_direction_controls_container
Booleano usado para abranger apenas os controles de direção do slider em um contêiner separado da paginação.
slider_controls_position
Define a posição dos controles do slider com 2 valores: 'bottom' é colocado abaixo do slider e 'with-section-title' é colocado como irmão do título da seção.
title
É usado para o título da seção.
products_array
É o array de produtos a serem exibidos. Por exemplo, em produtos relacionados pode ser "related_products" e em produtos em destaque "sections.primary.products"
product_template_path
É o caminho do tpl que representa o item do produto na lista.
product_template_params
São os parâmetros opcionais que o tpl do item pode ter. Por exemplo {'slide_item': true}


CSS

Parâmetro
Descrição
section_classes.section
Usado para seção
section_classes.container
Usado para o contêiner geral
section_classes.title_container
Usado para o contêiner do título
section_classes.title
Usado para o título
section_classes.products_container
Usado para o contêiner do grupo de produtos
section_classes.slider_container
Usado para o contêiner do slider
section_classes.slider_wrapper
Usado para o "wrapper" do slider, necessário no Swiper.js
section_classes.slider_controls_container
Usado para o contêiner dos controles do slider
section_classes.slider_control_pagination
Usado para paginação de slider
section_classes.slider_control
Usado para cada controle "próximo" e "anterior" no slider
section_classes.slider_direction_controls_container
Usado para o contêiner dos controles "próximo" e "anterior" no slider, caso o booleano slider_direction_controls_container seja true
section_classes.slider_control_prev_container
Usado para o contêiner do controle "anterior" no slider
section_classes.slider_control_next_container
Usado para o contêiner do controle "próximo" no slider
section_classes.slider_control_prev
Usado para o controle "anterior" no slider
section_classes.slider_control_next
Usado para o controle "próximo" no slider

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