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âmetroValoresDescriçã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âmetroDescriçã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âmetroDescriçã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âmetroDescriçã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âmetroDescriçã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âmetroDescriçã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âmetroDescriçã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âmetroDescriçã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âmetroDescrição
logo_thumbnailUsado para escolher qual miniatura de logotipo usar. Por padrão é "medium".


CSS

ParâmetroDescriçã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âmetroDescriçã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âmetroDescriçã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âmetroDescriçã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âmetroDescriçã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âmetroDescrição
container_classesUsado para o contêiner de mensagens e links
text_classes.text_consumer_defenseUtilizado para o texto da mensagem de Defesa do Consumidor
link_classes.link_consumer_defenseUsado para o link dentro da mensagem de Defesa do Consumidor
divider_classesUsado para o divisor entre as informações de aconselhamento ao consumidor e o Botão de Arrependimento
link_order_cancellationUsado 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

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',
    })
}}
Parâmetro
Descrição
image_name

O nome que identifica a imagem. Ex: no caso de um banner, pode ser o nome da setting.

image_width

É a largura da imagem.

image_height
É a altura da imagem.
image_thumbs
Permite usar um ou vários tamanhos da imagem, especialmente em srcset. Os tamanhos disponíveis são:

'tiny': 50,

'thumb': 100,

'small': 240,

'medium': 320,

'large': 480,

'huge': 640,

'original': 1024,

'xlarge': 1400, (disponível apenas para banners)

'1080p': 1920 (disponível apenas para banners)

image_lazy
Booleano que permite usar lazy load nativo (por padrão é true).
image_lazy_js
Booleano que permite usar lazy load através do plugin lazysizes (disponível no JS do tema).
image_sizes
Booleano para o atributo "image sizes", que permite controlar as thumbs que o srcset vai usar em diferentes dispositivos.
image_data_sizes
Permite aplicar o atributo "data-sizes" como "auto" ao usar o image_lazy_js.
image_data_expand
Permite um valor numérico para antecipar ou atrasar o lazy load ao usar o image_lazy_js.
image_aspect_ratio
Permite aplicar o atributo aspect-ratio de forma inline, usando a largura e altura da imagem.
image_alt
É o texto alternativo da imagem.
product_image
Booleano que, se verdadeiro, usa parâmetros específicos para a imagem de produto.
post_image
Booleano que, se true, usa parâmetros específicos para a imagem de um post no blog.


CSS

Parâmetro
Descrição
image_classesClasses usadas para a imagem.

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',
    })
}}
Parâmetro
Descrição
image_container_spacingUsado para ocupar espaço no contêiner de imagem antes que a imagem seja carregada
secondary_imageBooleano que ativa uma imagem secundária ao passar o mouse
sliderBooleano que ativa o HTML para usar o formato slider (em nossos layouts usamos o plugin Swiper.js)
slider_paginationBooleano que ativa o HTML da paginação do slider
svg_spritesBooleano que determina se sprites SVG serão usados
control_prev_svg_id/control_next_svg_idUsado para passar o ID do sprite SVG que é usado para o ícone seguinte e anterior no slider.
custom_control_prev/custom_control_nextUsado se os sprites SVG não estiverem implementados, para aplicar HTML personalizado nos controles seguinte e anterior do slider.
slider_controls_containerBooleano para abranger os controles do slider em um contêiner.
slider_direction_controls_containerBooleano usado para abranger apenas os controles de direção do slider em um contêiner separado da paginação.
custom_contentUsado para aplicar HTML personalizado
placeholderUsado para exibir um placeholder


CSS

Parâmetro
Descrição
product_item_image_classes.image_containerUsado para o contêiner principal da imagem
product_item_image_classes.image_spacing_containerUsado para o contêiner que gera o espaçamento onde a imagem está localizada
product_item_image_classes.image_linkUsado para o link para os detalhes do produto
product_item_image_classes.imageUsado para imagem
product_item_image_classes.image_secondaryUsado para imagem secundária ao passar o mouse
product_item_image_classes.slider_containerUsado para o contêiner do slider
product_item_image_classes.slider_wrapperUsado para o "wrapper" do slider, necessário no Swiper.js
product_item_image_classes.slider_controls_containerUsado para o contêiner dos controles do slider
product_item_image_classes.slider_control_paginationUsado para paginação de slider
product_item_image_classes.slider_controlUsado para cada controle "próximo" e "anterior" no slider
product_item_image_classes.slider_control_prev_containerUsado para o contêiner do controle "anterior" no slider
product_item_image_classes.slider_control_next_containerUsado para o contêiner do controle "próximo" no slider

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


ParâmetroDescrição
idUsado para ID da seção
products_amountOpcionalmente usado para um atributo de dados com o número de produtos
sliderooleano que ativa o HTML para usar o formato slider (em nossos layouts usamos o plugin Swiper.js)
slider_paginationBooleano que ativa o HTML da paginação do slider
svg_spritesBooleano que determina se sprites SVG serão usados
control_prev_svg_id/control_next_svg_idUsado para passar o ID do sprite SVG que é usado para o ícone seguinte e anterior no slider.
custom_control_prev/custom_control_nextUsado se os sprites SVG não estiverem implementados, para aplicar HTML personalizado nos controles seguinte e anterior do slider.
slider_controls_containerBooleano para abranger os controles do slider em um contêiner.
slider_direction_controls_containerBooleano usado para abranger apenas os controles de direção do slider em um contêiner separado da paginação.
slider_controls_positionDefine 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_paramsSão os parâmetros opcionais que o tpl do item pode ter. Por exemplo {'slide_item': true}


CSS

ParâmetroDescrição
section_classes.sectionUsado para seção
section_classes.containerUsado para o contêiner geral
section_classes.title_containerUsado para o contêiner do título
section_classes.titleUsado para o título
section_classes.products_containerUsado para o contêiner do grupo de produtos
section_classes.slider_containerUsado para o contêiner do slider
section_classes.slider_wrapperUsado para o "wrapper" do slider, necessário no Swiper.js
section_classes.slider_controls_containerUsado para o contêiner dos controles do slider
section_classes.slider_control_paginationUsado para paginação de slider
section_classes.slider_controlUsado para cada controle "próximo" e "anterior" no slider
section_classes.slider_direction_controls_containerUsado 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_containerUsado para o contêiner do controle "anterior" no slider
section_classes.slider_control_next_containerUsado para o contêiner do controle "próximo" no slider
section_classes.slider_control_prevUsado para o controle "anterior" no slider
section_classes.slider_control_nextUsado 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

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

ParâmetroDescrição
svg_spritesBooleano que determina se sprites SVG serão usados
progressive_discounts_accordionBooleano que determina se serão exibidas apenas as primeiras opções de descontos progressivos com um ícone para expandi-las e ver todas, ou se todas as opções serão sempre exibidas
accordion_show_svg_id/accordion_hide_svg_idUsado para passar o ID do sprite SVG que é usado para o ícone de mostrar e ocultar todas as opções de descontos progressivos
custom_control_show/custom_control_hideUsado no caso de não implementar sprites SVG, para aplicar HTML personalizado nos controles de mostrar e ocultar todas as opções de descontos progressivos

CSS

Parâmetro
Descrição
promotions_details_classes.containerUsado para o contêiner geral
promotions_details_classes.promotion_titleUsado para o título
promotions_details_classes.valid_scopesUsado para o texto dos escopos válidos
promotions_details_classes.categories_combinableUsado para o texto com as categorias combináveis
promotions_details_classes.not_combinableUsado para o texto com as categorias combináveis
promotions_details_classes.progressive_discounts_tableUsado para a tabela de descontos progressivos
promotions_details_classes.progressive_discounts_hidden_tableUsado para a seção da tabela de descontos progressivos que será ocultada
promotions_details_classes.progressive_discounts_show_more_linkUsado para o texto para mostrar todos os descontos progressivos
promotions_details_classes.progressive_discounts_show_more_iconUsado para o ícone para mostrar todos os descontos progressivos
promotions_details_classes.progressive_discounts_hide_iconUsado para o ícone para ocultar todos os descontos progressivos
promotions_details_classes.progressive_discounts_promotion_quantityUsado para o texto com a quantidade mínima necessária para os descontos progressivos

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

ParámetroDescripción
quantity_long_wording
Booleano para definir se o texto usado para a promoção de desconto por quantidade será curto ou longo. Ex: “50% Comprando 3 ou mais” vs “50% OFF Comprando 3 ou mais”.
nxm_long_wording
Booleano para definir se o texto usado para a promoção “Compre X Pague Y”. Ex: “Compre 2 Pague 1” vs “Compre 2 e pague 1”.


CSS

ParámetroDescripción
promotion_label_text_classes.primary_text
Usado para o texto principal
promotion_label_text_classes.secondary_text
Usado para o texto secundário