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 | Valores | Descrição |
|---|---|---|
| location | cart, 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 classes | container_classes.installment | Usado 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_accent | Usado para as classes de textos que exigem acentos como descontos | |
| text_classes.subtitles | Usado para as classes dos subtítulos | |
| text_classes.text_big | Usado para as classes dos textos com maior tamanho que o padrão | |
| text_classes.text_small | Usado 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 |
| |
| spacing_classes.bottom_3x | Usado para as classes de espaciado abaixo em 3x | |
| container_classes.payment_method | Usado 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_filters | Booleano usado para incluir apenas filtros de categoria |
| property_filters | Booleano usado para incluir apenas filtros de propriedades |
| accordion | Booleano usado para exibir filtros dentro de um acordeão |
| applied_filters_badge | Booleano usado para exibir um numero sobre os filtros aplicados ao usar o acordeão |
| parent_category_link | Usado para mostrar o link que leva à categoria pai no filtro de categoria |
| svg_sprites | Booleano que determina se sprites SVG serão usados |
| accordion_show_svg_id/accordion_hide_svg_id | Usado para passar o ID do sprite SVG usado para os ícones de mostrar e ocultar. |
| applying_feedback_svg_id | Usado para o ID do sprite SVG ao mostrar feedback de "aplicando filtro" em dispositivos móveis |
| parent_category_link_svg_id | Usado para o ícone no link retornar à categoria pai |
CSS
| Parâmetro | Descrição |
|---|---|
| filter_classes.group | Usado para o contêiner de cada grupo de filtros. Ex: O grupo "cor" |
| filter_classes.list_title | Usado para o título de cada grupo de filtros |
| filter_classes.checkbox_container | Usado para o contêiner do checkbox de cada filtro |
| filter_classes.checkbox_last | Usado 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_text | Usado para o texto do checkbox de cada filtro |
| filter_classes.checkbox_color | Usado para os filtros de cores |
| filter_classes.show_more_link | Usado para o link de "ver mais" quando tem muitos filtros |
| filter_classes.parent_category_link | Usado para o link para voltar a categoria anterior |
| filter_classes.badge | Usado para o ícone que exhibe os filtros aplicados (se for usada esta funcionalidade) |
| accordion_classes.title_container | Usado para os títulos dois filtros em formato acordeão |
| accordion_classes.title_col | Usado para a coluna que tem o título dos filtros em formato acordeão |
| accordion_classes.title | Usado para o título dos filtros em formato acordeão |
| accordion_classes.actions_col | Usado para a coluna que tem o link que abre ou fecha o acordeão dos filtros |
| accordion_classes.title_icon | Usado para o ícone do título nos filtros em formato acordeão |
| accordion_classes.toggle_link | Usado para o link que abre ou fecha o acordeão nos filtros nesse formato se um ícone não for usado |
| filter_classes.price_group | Usado para o contêiner de filtro de preço |
| filter_classes.price_title | Usado para título do filtro de preço |
| filter_classes.price_submit | Usado 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 |
|---|---|
| accordion | Booleano usado para exibir o sort by dentro de um acordeão |
| list | Booleano usado para exibir o sort by em formato de lista, em vez de um menu suspenso |
| svg_sprites | Booleano que determina se sprites SVG serão usados |
| accordion_show_svg_id/accordion_hide_svg_id | Usado para passar o ID do sprite SVG usado para o ícone de mostrar e ocultar. |
| applying_feedback_svg_id | Usado 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.group | Usado para o grupo que contém o sort by |
| sort_by_classes.container | Usado para o contêiner que contém o sort by. |
| sort_by_classes.list_title | Usado para o título se o formato for do tipo lista |
| sort_by_classes.list | Usado para listagem se o formato for do tipo de lista |
| sort_by_classes.list_item | Usado para o item da lista no formato de tipo de lista |
| sort_by_classes.radio_button | Usado para o radio button de cada opção no formato de lista |
| sort_by_classes.radio_button_content | Usado para o contêiner de conteúdo em cada radio button |
| sort_by_classes.radio_button_icons_container | Usado para o contêiner de ícones em cada radio button |
| sort_by_classes.radio_button_icon | Usado para cada ícone nos radio buttons |
| sort_by_classes.radio_button_label | Usado para o texto dos radio buttons |
| sort_by_classes.select_group | Usado para o contêiner do sort by en formato tipo menu suspenso |
| sort_by_classes.select_label | Usado para o texto do sort by en formato tipo menu suspenso |
| sort_by_classes.select | Usado para o menu suspenso do sort by |
| sort_by_classes.select_svg | Usado para o ícone do select en formato tipo menu suspenso |
| sort_by_classes.applying_feedback_container | Usado para o contêiner do feedback quando os produtos são ordenados no mobile |
| sort_by_classes.applying_feedback_message | Usado para o texto do feedback quando os produtos são ordenados no mobile |
| sort_by_classes.applying_feedback_icon | Usado para o ícone do feedback quando os produtos são ordenados no mobile |
| accordion_classes.title_container | Usado para o contêiner do título em formato acordeão |
| accordion_classes.title_col | Usado para a coluna que tem o título em formato acordeão |
| accordion_classes.title | Usado para o título em formato acordeão |
| accordion_classes.actions_col | Usado para a coluna que tem o link que abre ou fecha o acordeão |
| accordion_classes.title_icon | Usado para o ícone do título em formato acordeão |
| accordion_classes.toggle_link | Usado 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_text | Usado para substituir o texto padrão usado pelo placeholder do campo de pesquisa. |
| use_submit_text | Booleano usado para exibir um texto no botão de submit do formulário de pesquisa. Por padrão, está ativado. |
| submit_text | Usado para substituir o texto padrão usado pelo botão de submit da pesquisa. |
| use_delete_btn | Booleano 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.form | Usado para formulário de pesquisa |
| form_classes.input_group | Usado para o contêiner do campo de pesquisa |
| form_classes.input | Usado para o campo de pesquisa |
| form_classes.submit | Usado para o botão que envia o formulário de pesquisa |
| form_classes.delete_content | Usado para o botão que apaga o que estava escrito em celulares |
| form_classes.search_suggestions_container | Usado 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_thumbnail | Usado para escolher qual miniatura de logotipo usar. Por padrão é "medium". |
CSS
| Parâmetro | Descrição |
|---|---|
| container_classes.logo_img_container | Usado para o contêiner do logotipo |
| logo_img_classes | Usado para o contêiner do logotipo |
| logo_text_classes | Usado 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_thumbnail | Usado para escolher qual miniatura de logotipo usar. Por padrão é "medium". |
| logo_img_name | Usado para conectar o caminho da imagem à configuração definida em settings.txt |
CSS
| Parâmetro | Descrição |
|---|---|
| container_classes.logo_img_container | Usado para o contêiner do logotipo |
| logo_img_classes | Usado 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.form | Usado para o formulário |
| form_classes.input_group | Usado para o contêiner de cada campo |
| form_classes.input_label | Usado para os textos de cada campo |
| form_classes.input | Usado para cada campo |
| form_classes.input_error | Usado para a mensagem de erro de cada campo |
| form_classes.input_help_align | Usado para alinhamento do texto de ajuda no campo de senha |
| form_classes.input_help_link | Usado para o link no texto de ajuda do campo de senha |
| form_classes.password_toggle | Usado para o botão que mostra/oculta a senha no campo de senha |
| form_classes.submit | Usado para o botão que envia o formulário |
| form_classes.submit_spinner | Usado para o spinner do botão que envia o formulário. Visível após o envio. |
| form_classes.help_info_align | Usado para alinhar as informações gerais de ajuda do formulário |
| form_classes.help_info_text_size | Usado para o tamanho do texto nas informações gerais de ajuda do formulário |
| form_classes.help_link | Usado para o link de ajuda nas informações gerais de ajuda do formulário |
| spacing_classes.top_3x | Usado para classes de espaçamento acima em 3x |
| spacing_classes.top_2x | Usado para classes de espaçamento acima em 2x |
| spacing_classes.bottom_4x | Usado para classes de espaçamento abaixo em 4x |
| spacing_classes.bottom_3x | Usado para classes de espaçamento abaixo em 3x |
| spacing_classes.bottom_2x | Usado para classes de espaçamento abaixo em 2x |
| validation_classes.title_size | Usado para títulos em mensagens de validação de conta |
| validation_classes.text_align | Usado para alinhar textos em mensagens de validação de conta |
| validation_classes.text_size | Usado 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 |
|---|---|
| item | Booleano 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
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_classes | Classes 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_spacing | Usado para ocupar espaço no contêiner de imagem antes que a imagem seja carregada
|
| secondary_image | Booleano que ativa uma imagem secundária ao passar o mouse
|
| slider | Booleano 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.
|
| custom_content | Usado para aplicar HTML personalizado
|
| placeholder | Usado para exibir um placeholder
|
CSS
| Parâmetro
|
Descrição
|
|---|---|
| product_item_image_classes.image_container | Usado para o contêiner principal da imagem
|
| product_item_image_classes.image_spacing_container | Usado para o contêiner que gera o espaçamento onde a imagem está localizada
|
| product_item_image_classes.image_link | Usado para o link para os detalhes do produto
|
| product_item_image_classes.image | Usado para imagem
|
| product_item_image_classes.image_secondary | Usado para imagem secundária ao passar o mouse
|
| product_item_image_classes.slider_container | Usado para o contêiner do slider
|
| product_item_image_classes.slider_wrapper | Usado para o "wrapper" do slider, necessário no Swiper.js
|
| product_item_image_classes.slider_controls_container | Usado para o contêiner dos controles do slider
|
| product_item_image_classes.slider_control_pagination | Usado para paginação de slider
|
| product_item_image_classes.slider_control | Usado para cada controle "próximo" e "anterior" no slider
|
| product_item_image_classes.slider_control_prev_container | Usado para o contêiner do controle "anterior" no slider
|
| product_item_image_classes.slider_control_next_container | Usado 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â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
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âmetro | Descrição |
|---|---|
| svg_sprites | Booleano que determina se sprites SVG serão usados |
| progressive_discounts_accordion | Booleano 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_id | Usado 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_hide | Usado 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.container | Usado para o contêiner geral |
| promotions_details_classes.promotion_title | Usado para o título |
| promotions_details_classes.valid_scopes | Usado para o texto dos escopos válidos |
| promotions_details_classes.categories_combinable | Usado para o texto com as categorias combináveis |
| promotions_details_classes.not_combinable | Usado para o texto com as categorias combináveis |
| promotions_details_classes.progressive_discounts_table | Usado para a tabela de descontos progressivos |
| promotions_details_classes.progressive_discounts_hidden_table | Usado para a seção da tabela de descontos progressivos que será ocultada |
| promotions_details_classes.progressive_discounts_show_more_link | Usado para o texto para mostrar todos os descontos progressivos |
| promotions_details_classes.progressive_discounts_show_more_icon | Usado para o ícone para mostrar todos os descontos progressivos |
| promotions_details_classes.progressive_discounts_hide_icon | Usado para o ícone para ocultar todos os descontos progressivos |
| promotions_details_classes.progressive_discounts_promotion_quantity | Usado para o texto com a quantidade mínima necessária para os descontos progressivos
|
Etiquetas de descontos, frete grátis, promoções e falta de estoque
Este componente é usado para etiquetas de descontos, frete grátis, promoções e sem de estoque. Você pode usar as listas e detalhes do produto.
Além disso inclui o componente de "promotion-label-text", que exibe os textos das etiquetas para promoções.
Exemplo de como incluí-lo
{{ component(
'labels', {
prioritize_promotion_over_offer: true,
promotion_quantity_long_wording: true,
promotion_nxm_long_wording: false,
labels_classes: {
group: 'js-labels-floating-group',
promotion: 'label label-default',
promotion_primary_text: 'd-block',
offer: 'js-offer-label label label-default',
shipping: 'label label-secondary',
no_stock: 'js-stock-label label label-default',
},
})
}}
Parâmetros
| Parâmetro
|
Descrição
|
|---|---|
| group
|
Booleano usado para agrupar as etiquetas abaixo de um único div. Por padrão é true.
|
| no_stock_only
|
Booleano usado para incluir apenas a etiqueta "Esgotado".
|
| offer_only
|
Booleano usado para incluir apenas a etiqueta de oferta em relação ao preço promocional. Exemplo: 50% OFF.
|
| promotion_only
|
Booleano usado para incluir apenas a etiqueta de promoções. Ex: Compre 2, pague 1.
|
| free_shipping_and_no_stock_only
|
Booleano usado para incluir apenas as etiquetas de envio grátis e sem estoque.
|
| promotion_and_offer_only
|
Booleano usado para incluir solamente las etiquetas de promociones y oferta por precio promocional.
|
| without_promotion
|
Booleano usado para incluir apenas etiquetas promocionais e oferta por preço promocional.
|
| without_no_stock
|
Booleano usado para incluir todas as etiquetas, exceto o sem estoque.
|
| free_shipping_only
|
Booleano usado para incluir apenas a etiqueta de envio grátis.
|
| free_shipping_short_wording
|
Booleano usado para mostrar um texto de envio grátis reduzido: "Grátis".
Ao contrário, será exibido "Frete grátis". |
| prioritize_promotion_over_offer
|
Booleano usado para priorizar a presença da etiqueta de promoções por cima da oferta por preço promocional. Por padrã é true.
|
| promotion_quantity_long_wording
|
Booleano para definir se o texto usado para promoção de desconto por quantidade será curto ou longo. Ex: "50% Comprando 3 ou mais" vs "50% OFF Comprando 3 ou mais".
|
| promotion_nxm_long_wording
|
[Somente para lojas em espanhol] Booleano para definir se o texto usado para a promoção de "Lleva X Paga Y". Exemplo: "Llevá 2 y paga 1" vs "2x1".
|
| no_stock_custom_wording
|
String opcional para substituir o texto da etiqueta "Esgotado" com um texto personalizado.
|
| offer_percentage_wording
|
String opcional para substituir o texto da etiqueta de oferta com preço promocional, com um texto personalizado.
|
| shipping_custom_wording
|
String opcional para substituir o texto da etiqueta de frete grátis com um texto personalizado.
|
| offer_negative_discount_percentage
|
Booleano para adicionar um "-" na porcentagem de desconto para a oferta por preço promocional. Ex: "-50% OFF"
|
| offer_percentage_wording
|
Booleano para usar a palavra "OFF" na porcentagem de desconto para a oferta por preço promocional. Por padrão é true.
|
| svg_sprites
|
Booleano que determina se usar sprites SVG
|
| shipping_icon
|
Booleano que determina se a etiqueta de frete grátis usa um ícone.
|
| shipping_icon_svg_id
|
Usado para passar o ID do sprite SVG que é usado para o ícone de frete gratuito.
|
| shipping_custom_icon
|
Usado no caso de não implementar sprites SVG, para aplicar HTML personalizado no ícone de frete grátis.
|
| labels_custom_content
|
É usado aplicar HTML personalizado
|
CSS
| Parámetro | Descripción |
|---|---|
| labels_classes.group
|
Usado para classe no div que contém as etiquetas no caso de usar o parâmetro "group" como true.
|
| labels_classes.no_stock
|
Usado para classe na etiqueta "Esgotado".
|
| labels_classes.offer
|
Usado para classe na etiqueta de desconto por preço promocional.
|
| labels_classes.offer_percentage
|
Usado para classe na porcentagem de desconto na etiqueta de desconto por preço promocional.
|
| labels_classes.offer_percentage_text
|
Usado para classe no texto de desconto na etiqueta de desconto por preço promocional.
|
| labels_classes.promotion
|
Usado para classe na etiqueta de promoções.
|
| labels_classes.shipping
|
Usado para classe na etiqueta de frete grátis.
|
| labels_classes.shipping_icon
|
Usado para classe em ícone de frete grátis no caso de usar shipping_icon como true.
|
| labels_classes.shipping_text
|
Usado para classe no texto da etiqueta para frete grátis.
|
Texto da etiqueta 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ámetro | Descripció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ámetro | Descripción |
|---|---|
| promotion_label_text_classes.primary_text
|
Usado para o texto principal
|
| promotion_label_text_classes.secondary_text
|
Usado para o texto secundário
|
Mensagem de desconto sobre preços
⚠️ Esta funcionalidade está sendo aplicada de forma gradual nas lojas.
Este componente é usado para exibir uma mensagem de aviso quando um produto tem uma promoção de desconto sobre preços que não é combinável com alguma outra promoção. A mensagem informa ao usuário que o desconto pode mudar ao ser combinado com outras promoções.
Exemplo de como incluí-lo
{{ component('price-discount-disclaimer', {
container_classes: 'font-small opacity-60 mt-1 mb-2',
}) }}
Parâmetros
CSS
| Parâmetro | Descrição |
|---|---|
| container_classes | Usado para as classes do contêiner da mensagem |
Dependências
Do lado do JS, tem dependências da função changeVariant que está no arquivo store.js.tpl para atualizar a visibilidade da mensagem quando a variante do produto muda.