Coleção de variantes de produtos - Mostrar variantes como produtos separados

 { { 'modelo-coleção.css' | URL_do_asset | folha_de_estilo } } 
{ { 'component-loading-overlay.css' | URL_do_asset | folha_de_estilo } }
 { { 'component-cartão.css' | URL_do_asset | folha_de_estilo } }
 { { 'preço-componente.css' | URL_do_asset | folha_de_estilo } }

 < ligação 
rel = "pré-carregar"
 href = " {{ 'component-rte.css' | asset_url }} "
 as = "estilo"
 onload = "this.onload=null;this.rel='folha de estilo'"
 >
 { % -se seção. configurações . enable_quick_add -% } 
< link rel = "stylesheet" href = " {{ 'quick-add.css' | asset_url }} " media = "print" onload = "this.media='all'" >
 < script src = " {{ 'quick-add.js' | asset_url }} " defer = "defer" </ script > 
< script src = " {{ 'product-form.js' | asset_url }} " defer = "defer" </ script >
 { %- fim se -% } 
< noscript > { { 'component-rte.css' | URL_do_asset | folha de estilo_tag } } </ noscript >
 { %- estilo -% } 
. seção - { { seção. id } } - preenchimento {
 preenchimento - topo : { { seção. configurações . preenchimento_top | vezes : 0,75 | redondo : 0 } } px ; 
preenchimento - inferior : { { seção. configurações . preenchimento_bottom | vezes : 0,75 | redondo : 0 } } px ;
 }

 . variante - wrapper. cartão - invólucro { 
altura : ajuste - conteúdo ;
 }

 . cartão__inner . razão . cartão__media {
 largura : 100 %
 }

 @media screen e ( largura mínima : 750px ) { 
. seção - { { seção. id } } - preenchimento {
 preenchimento - topo : { { seção. configurações . padding_top } } px ; 
preenchimento - inferior : { { seção. configurações . padding_bottom } } px ;
 }
 }
 { %- estilo final -% }
 < div class = "seção- {{ section.id }} -padding" > 
{ % comment % } Sort é o primeiro elemento tabulável quando o tipo de filtro é vertical { % endcomment % }
 { % -se seção. configurações . enable_sorting e seção. configurações . tipo_filtro == 'vertical' -% } 
< faceta - filtros - classe de formulário = "facetas facetas-vertical-classificar largura da página pequena-ocultar no-js-hidden" >
 < form class = "facetas-vertical-form" id = "FacetSortForm" >
 < div class = "legenda de classificação de filtros de faceta" > 
< div class = "facet-filters__field" >
 < h2 class = "facet-filters__label caption-large text-body" > 
< rótulo para = "SortBy" > { { 'produtos.facets.sort_by_label' | t } } </ rótulo >
 </ h2 >
 < div classe = "selecionar" > 
{ %- atribuir sort_by = coleção. classificar_por | padrão : coleção. default_sort_by -% }
 < selecione
 nome = "classificar_por"
 class = "facet-filters__sort select__select caption-large"
 id = "Classificar por" 
ária - descrita por = "a11y-refresh-page-message"
 >
 { %- para opção na coleção. opções_de classificação -% }
 < opção
 valor = " {{ option.value | escape }} " 
{ % se opção. valor == classificar_por % }
 selecionado = "selecionado"
 { % fim se % }
 >
 { { opção. nome | escapar } } 
</ opção >
 { %- fim para -% }
 </ selecione >
 { % renderizar 'ícone-caret' % }
 </div> _ _
 </div> _ _
 <noscript> _ 
< tipo de botão = "enviar" class = "facets__button-no-js botão botão--secundário" >
 { { 'produtos.facets.sort_button' | } }
 </ botão >
 </noscript> _
 </div> _ _ 
< div class = "produto-contagem-vertical light" role = "status" >
 < h2 class = "produto-contagem__texto corpo-de-texto" >
 < span id = "ProductCountDesktop" > 
{ %- se coleção. contagem_resultados -% }
 { {
 'templates.search.results_with_count'
 | t : termos : coleção. termos , contagem : coleção. contagem_resultados
 } } 
{ %- coleção elsif. produtos_count == coleção. all_products_count -% }
 { { 'produtos.facets.product_count_simple' | t : contagem : coleção. contagem_produtos } }
 { %- outro -% } 
{ {
 'produtos.facetas.product_count'
 | t : product_count : coleção. produtos_count , contagem : coleção. contagem_de_produtos_todos
 } }
 { %- fim se -% }
 </span> _
 </ h2 > 
< div class = "loading-overlay__spinner" >
 < svg
 aria - oculto = "verdadeiro"
 focalizável = "falso"
 role = "apresentação"
 classe = "girador"
 viewBox = "0 0 66 66" 
xmlns = "http://www.w3.org/2000/svg"
 >
 < círculo classe = "caminho" preenchimento = "nenhum" traço - largura = "6" cx = "33" cy = "33" r = "30" </ círculo >
 </svg> _ 
</div> _ _
 </div> _ _
 </ formulário >
 </ faceta - filtros - formulário >
 { %- fim se -% } 
< div class = " {% if section.settings.filter_type == 'vertical' %} facetas-vertical largura da página {% endif %} " >
 { { 'componente-facetas.css' | URL_do_asset | folha_de_estilo } } 
< script src = " {{ 'facets.js' | asset_url }} " defer = "defer" </ script >
 { % -se seção. configurações . enable_filtering ou seção. configurações . habilitar_classificação -% }
 < à parte
 aria - labelledby = "verticalTitle" 
class = "facets-wrapper {% unless section.settings.enable_filtering %} facets-wrapper--no-filters {% endunless %} {% if section.settings.filter_type != 'vertical' %} largura da página {% endif %} "
 id = "filtros da coleção principal"
 dados -id = " {{ section.id }} "
 >
 { % renderiza 'facetas' , 
resultados : coleção ,
 enable_filtering : seção. configurações . habilitar_filtro ,
 enable_sorting : seção. configurações . ativar_classificação ,
 filter_type : seção. configurações . tipo_filtro
 % }
 </ à parte > 
{ %- fim se -% }
 < div
 class = "product-grid-container {% if section.settings.filter_type == 'vertical' and section.settings.collapse_on_larger_devices %} product-grid-container-vertical {% endif %} "
 id = "ProductGridContainer"
 > 
{ %- paginar coleção. produtos por seção. configurações . produtos_por_página -% }
 { %- se coleção. produtos . tamanho == 0 -% } 
< div class = "coleção de coleção - largura de página vazia" id = "grade de produto" dados - id = " {{ section.id }} " >
 < div class = "gradiente de sobreposição de carregamento" </ div > 
< div class = "title-wrapper center" >
 < h2 class = "título título--primário" >
 { { 'seções.collection_template.empty' | t - } }
 <br> _ 
{ {
 'seções.collection_template.use_fewer_filters_html'
 | t : link : coleção. url , classe : 'link sublinhado'
 } }
 </ h2 >
 </div> _ _ 
</div> _ _
 { %- outro -% }
 < div class = "coleção {% if section.settings.filter_type != 'vertical' %} largura da página {% endif %} " > 
< div class = "gradiente de sobreposição de carregamento" </ div >
 < ul
 id = "grade de produto"
 dados -id = " {{ section.id }} "
 classe = "
 grade grade de produto grade-- {{ section.settings.columns_mobile }} -col-tablet-down 
grade-- {{ section.settings.columns_desktop }} -col-desktop
 "
 >
 { %- para produto em coleção. produtos -% }
 { % atribuir varianteImage = true % } 
{ %- para variante no produto. variantes -% }
 { % se variante. imagem_em destaque != em branco % }
 { % atribuir varianteImage = true % } 
{ % outro % }
 { % atribuir varianteImage = false % }
 { % fim se % }
 { %- fim para -% } 
{ % se varianteImage % }
 { %- para variante no produto. variantes -% }
 { % atribuir carga_preguiçosa = falso % } 
{ % -se forloop. índice > 2 -% }
 { %- atribuir carga_preguiçosa = true -% }
 { %- fim se -% } 
< li class = "grid__item" >
 { % renderizar 'cartão variante' ,
 card_produto : produto ,
 card_variant : variante ,
 hide_variant_info : seção. configurações . hide_variant_info , 
show_secondary_image : seção. configurações . mostrar_imagem_secundária ,
 media_aspect_ratio : seção. configurações . proporção_da_imagem ,
 show_vendor : seção. configurações . mostrar_fornecedor ,
 show_rating : seção. configurações . mostrar_classificação ,
 carga_preguiçosa : carga_preguiçosa , 
show_quick_add : seção. configurações . ativar_quick_add ,
 seção_id : seção. eu ia
 % }
 </ li >
 { %- fim para -% }
 { % outro % } 
{ % atribuir carga_preguiçosa = falso % }
 { % -se forloop. índice > 2 -% }
 { %- atribuir carga_preguiçosa = true -% } 
{ %- fim se -% }
 < li class = "grid__item" >
 { % renderiza 'produto-cartão' ,
 card_produto : produto ,
 media_aspect_ratio : seção. configurações . proporção_da_imagem , 
show_secondary_image : seção. configurações . mostrar_imagem_secundária ,
 show_vendor : seção. configurações . mostrar_fornecedor ,
 show_rating : seção. configurações . mostrar_classificação ,
 carga_preguiçosa : carga_preguiçosa ,
 show_quick_add : seção. configurações . ativar_quick_add , 
seção_id : seção. eu ia
 % }
 </ li >
 { % fim se % }
 { %- fim para -% }
 </ul> _ 
{ %- se paginar. páginas > 1 -% }
 { % render 'paginação' , paginar : paginar , âncora : '' % }
 { %- fim se -% } 
</div> _ _
 { %- fim se -% }
 { %- endpaginate -% }
 </div> _ _
 </div> _ _
 </div> _ _
 { % esquema % } 
{
 "nome" : "t:seções.main-collection-product-grid.name" ,
 "classe" : "seção" ,
 "configurações" : [
 {
 "tipo" : "intervalo" ,
 "id" : "produtos_por_página" , 
"min" : 8 ,
 "máximo" : 24 ,
 " Passo 4 ,
 "padrão" : 16 ,
 "label" : "t:sections.main-collection-product-grid.settings.products_per_page.label"
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "colunas_desktop" ,
 "min" : 1 ,
 "máximo" : 5 ,
 " passo 1 ,
 "padrão" : 4 , 
"label" : "t:sections.main-collection-product-grid.settings.columns_desktop.label"
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "t:sections.main-collection-product-grid.settings.header__3.content"
 } ,
 {
 "tipo" : "selecionar" , 
"id" : "image_ratio" ,
 "opções" : [
 {
 "valor" : "adaptar" ,
 "label" : "t:sections.main-collection-product-grid.settings.image_ratio.options__1.label"
 } ,
 {
 "valor" : "retrato" , 
"label" : "t:sections.main-collection-product-grid.settings.image_ratio.options__2.label"
 } ,
 {
 "valor" : "quadrado" ,
 "label" : "t:sections.main-collection-product-grid.settings.image_ratio.options__3.label"
 }
 ] ,
 "padrão" : "adaptar" , 
"label" : "t:sections.main-collection-product-grid.settings.image_ratio.label"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_secondary_image" ,
 "padrão" : falso ,
 "label" : "t:sections.main-collection-product-grid.settings.show_secondary_image.label" 
} ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_vendor" ,
 "padrão" : falso ,
 "label" : "t:sections.main-collection-product-grid.settings.show_vendor.label"
 } ,
 { 
"tipo" : "caixa de seleção" ,
 "id" : "hide_variant_info" ,
 "label" : "Ocultar título da variante"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_rating" , 
"padrão" : falso ,
 "label" : "t:sections.main-collection-product-grid.settings.show_rating.label" ,
 "info" : "t:sections.main-collection-product-grid.settings.show_rating.info"
 } ,
 {
 "tipo" : "caixa de seleção" , 
"id" : "enable_quick_add" ,
 "padrão" : falso ,
 "label" : "t:sections.main-collection-product-grid.settings.enable_quick_buy.label"
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "t:sections.main-collection-product-grid.settings.header__1.content" 
} ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "enable_filtering" ,
 "padrão" : verdadeiro ,
 "label" : "t:sections.main-collection-product-grid.settings.enable_filtering.label" , 
"info" : "t:sections.main-collection-product-grid.settings.enable_filtering.info"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "tipo_filtro" ,
 "opções" : [
 {
 "valor" : "horizontal" , 
"label" : "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
 } ,
 {
 "valor" : "vertical" ,
 "label" : "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
 } ,
 {
 "valor" : "gaveta" , 
"label" : "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
 }
 ] ,
 "padrão" : "horizontal" ,
 "label" : "t:sections.main-collection-product-grid.settings.filter_type.label" ,
 "info" : "t:sections.main-collection-product-grid.settings.filter_type.info"
 } ,
 { 
"tipo" : "caixa de seleção" ,
 "id" : "enable_sorting" ,
 "padrão" : verdadeiro ,
 "label" : "t:sections.main-collection-product-grid.settings.enable_sorting.label"
 } ,
 {
 "tipo" : "cabeçalho" , 
"content" : "t:sections.main-collection-product-grid.settings.header_mobile.content"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "colunas_mobile" ,
 "padrão" : "2" , 
"label" : "t:sections.main-collection-product-grid.settings.columns_mobile.label" ,
 "opções" : [
 {
 "valor" : "1" ,
 "label" : "t:sections.main-collection-product-grid.settings.columns_mobile.options__1.label"
 } ,
 { 
"valor" : "2" ,
 "label" : "t:sections.main-collection-product-grid.settings.columns_mobile.options__2.label"
 }
 ]
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "t:sections.all.padding.section_padding_heading"
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "padding_top" ,
 "min" : 0 ,
 "máximo" : 100 ,
 " Passo 4 ,
 "unidade" : "px" , 
"label" : "t:sections.all.padding.padding_top" ,
 "padrão" : 36
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "padding_bottom" ,
 "min" : 0 , 
"máximo" : 100 ,
 " Passo 4 ,
 "unidade" : "px" ,
 "label" : "t:sections.all.padding.padding_bottom" ,
 "padrão" : 36
 }
 ]
 } 
{ % termina o esquema % } 

 { % Comente % } 
Renderiza um cartão de produto

 Aceita :
 - card_product : { Object } Produto Objeto líquido ( opcional )
 - media_aspect_ratio : { String } Tamanho do cartão de imagem do produto. Os valores são "quadrado" e "retrato" . O padrão é "quadrado" ( opcional ) 
- show_secondary_image : { Boolean } Mostra a imagem secundária ao passar o mouse. Padrão : falso ( opcional )
 - show_vendor : { Boolean } Mostra o fornecedor do produto. Padrão : falso 
- show_rating : { Boolean } Mostra a avaliação do produto. Padrão : falso
 - extend_height : { Boolean } A altura do cartão se estende ao espaço disponível no contêiner. Padrão : verdadeiro ( opcional ) 
- preguiçoso_load : { Boolean } A imagem deve ser carregada lentamente. Padrão : verdadeiro ( opcional )
 - show_quick_add : { Boolean } Mostra o botão de adição rápida.
 - section_id : { String } O ID da seção que contém este cartão.

 Uso : 
{ % render 'cartão variante' , show_vendor : seção. configurações . mostrar_vendor % }
 { % comentário final % }

 { { 'classificação do componente.css' | URL_do_asset | folha_de_estilo } }
 
{ %- se card_variant e card_variant != vazio -% }
 { %- líquido
 atribuir proporção = 1
 se card_variant. feature_media e media_aspect_ratio == 'retrato'
 atribuir proporção = 0,8
 elsif card_variant. feature_media e media_aspect_ratio == 'adaptar' 
atribuir proporção = card_variant. destaque_media . proporção da tela
 fim se
 se proporção == 0 ou proporção == nulo
 atribuir proporção = 1
 fim se
 -% }
 < div class = "variant-wrapper card-wrapper underline-links-hover" >
 < div 
classe = "
 cartão
 cartão-- {{ settings.card_style }}
 {% if card_variant.featured_media %} cartão--mídia {% else %} cartão--texto {% endif %}
 {% if settings.card_style == 'card' %} cor- {{ settings.card_color_scheme }} gradiente {% endif %}
 {% if extend_height %} cartão--extend-height {% endif %}
 {% if card_variant.featured_media == nil and settings.card_style == 'card' %} proporção {% endif %}
 " 
style = "--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }} %;"
 >
 < div
 class = "card__inner {% if settings.card_style == 'standard' %} cor- {{ settings.card_color_scheme }} gradiente {% endif %} {% if card_product.featured_media or settings.card_style == 'standard' %} proporção {% endif %} "
 style = "--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }} %;" 
>
 { %- se card_variant. destaque_media -% }
 < div class = "cartão__media" >
 < div class = "media media--transparent media--hover-effect" > 
{ % comment % } tema - verificar - desabilitar ImgLazyLoading { % endcomment % }
 < imagem
 srcset = "
 {%- if card_variant.featured_media.width >= 165 -%} {{ card_variant.featured_media | image_url: width: 165 }} 165w, {%- endif -%} 
{%- if card_variant.featured_media.width >= 360 -%} {{ card_variant.featured_media | image_url: width: 360 }} 360w, {%- endif -%}
 {%- if card_variant.featured_media.width >= 533 -%} {{ card_variant.featured_media | image_url: width: 533 }} 533w, {%- endif -%}
 {%- if card_variant.featured_media.width >= 720 -%} {{ card_variant.featured_media | image_url: width: 720 }} 720w, {%- endif -%}
 {%- if card_variant.featured_media.width >= 940 -%} {{ card_variant.featured_media | image_url: width: 940 }} 940w, {%- endif -%} 
{%- if card_variant.featured_media.width >= 1066 -%} {{ card_variant.featured_media | image_url: width: 1066 }} 1066w, {%- endif -%}
 {{ card_variant.featured_media | image_url }} {{ card_variant.featured_media.width }} w
 "
 src = " {{ card_variant.featured_media | image_url: width: 533 }} "
 tamanhos = "(largura mínima: {{ settings.page_width }} px) {{ settings.page_width | minus: 130 | divided_by: 4 }} px, (largura mínima: 990px) calc((100vw - 130px) / 4 ), (largura mínima: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" 
alt = " {{ card_variant.featured_media.alt | escape }} "
 class = "redução de movimento"
 { % a menos que preguiçoso_load == falso % }
 carregando = "preguiçoso"
 { % sem fim % } 
largura = " {{ card_variant.featured_media.width }} "
 altura = " {{ card_variant.featured_media.height }} "
 >
 { % comment % } tema - verificar - ativar ImgLazyLoading { % endcomment % }
 
{ % atribuir meta_image = card_variant. metacampos . meus_campos [ 'imagem secundária' ] % }
 { % se meta_image ! = Nulo e show_secondary_image % }

 < imagem
 src = " {{ meta_image | image_url: width: 533 }} " 
tamanhos = "(largura mínima: {{ settings.page_width }} px) {{ settings.page_width | minus: 130 | divided_by: 4 }} px, (largura mínima: 990px) calc((100vw - 130px) / 4 ), (largura mínima: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
 alt = " {{ meta_image.alt | escape }} "
 class = "redução de movimento"
 carregando = "preguiçoso"
 largura = " {{ meta_image.width }} " 
altura = " {{ meta_image.height }} "
 >
 { % fim se % }
 </div> _ _
 </div> _ _
 { %- fim se -% }
 </div> _ _ 
< div class = "cartão__content" >
 < div class = "cartão__informações" >
 < h3
 class = "card__heading {% if card_variant.featured_media or settings.card_style == 'standard' %} h5 {% endif %} " 
{ % se card_variant. destaque_media ou configurações. estilo_cartão == 'cartão' % }
 id = "título- {{ section_id }} - {{ card_product.id }} "
 { % fim se % }
 > 
<a href = "{{ card_variant.url }} " class = "full-unstyled-link" > _ {{ card_variant.url }} _ _ _ _
 { { cartão_produto. título | escapar } }
 <br> _
 { { card_variant. título | escapar } } 
</a> _
 </ h3 >
 < div class = "informações do cartão" >
 { %- se show_vendor -% } 
< span class = "visualmente oculto" > { { 'accessibility.vendor' | t } } </ span > 
< div class = "legenda com espaçamento entre letras light" > { { card_product. fornecedor } } </ div >
 { %- fim se -% }
 
< span class = "caption-large light" > { { bloco. configurações . descrição | escape } } </ span > 
{ %- se show_rating e card_product. metacampos . avaliações . avaliação . valor ! = em branco -% }
 { % líquido
 atribuir classificação_decimal = 0 
atribuir decimal = cartão_produto. metacampos . avaliações . avaliação . valor . classificação | módulo : 1
 se decimal >= 0,3 e decimal <= 0,7
 atribuir classificação_decimal = 0,5
 elsif decimal > 0,7 
atribuir classificação_decimal = 1
 fim se
 % }
 < div
 classe = "classificação"
 papel = "img"
 aria - label = " {{ 'accessibility.star_reviews_info' | t: rating_value: card_product.metafields.reviews.rating.value, rating_max: card_product.metafields.reviews.rating.value.scale_max }} "
 >
 < intervalo 
aria - oculto = "verdadeiro"
 class = "rating-star color-icon- {{ settings.accent_icons }} "
 style = "--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }} ; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }} ; --rating -decimal: {{ rating_decimal }} ;"
 </ intervalo >
 </div> _ _ 
< p class = "rating-text caption" >
 < span aria - oculto = "true" >
 { { - cartão_produto. metacampos . avaliações . avaliação . valor } } / 
{ { cartão_produto. metacampos . avaliações . avaliação . valor . escala_max - } }
 </span> _
 </ p >
 < p class = "legenda de contagem de classificação" > 
< span aria - hidden = "true" > ( { { card_product. metafields . reviews . rating_count } } ) </ span >
 < span class = "visualmente oculto" > 
{ { - cartão_produto. metacampos . avaliações . contagem_avaliação } }
 { { 'acessibilidade.total_reviews' | t - } }
 </span> _
 </ p > 
{ %- fim se -% }
 { % renderizar 'preço' , produto : card_variant , price_class : '' % }
 </div> _ _
 </div> _ _ 
{ %- se show_quick_add -% }
 < div class = "adição rápida" >
 { %- atribuir product_form_id = 'adição rápida-' | acrescentar : seção_id | acrescentar : card_variant. eu ia -% } 
{ %- se cartão_produto. has_only_default_variant -% }
 < produto - formulário >
 { % -formulário 'produto' ,
 variante_cartão ,
 id : product_form_id ,
 classe : 'forma' , 
novalidate : 'novalidate' ,
 dados - tipo : 'formulário de adição ao carrinho'
 -% }
 < entrada
 tipo = "oculto"
 nome = "id"
 valor = " {{ card_variant.id }} "
 desabilitado
 >
 < botão 
id = " {{ product_form_id }} -enviar"
 tipo = "enviar"
 nome = "adicionar"
 class = "botão quick-add__submit - botão de largura total - secundário"
 aria - haspopup = "diálogo" 
aria - labelledby = " {{ product_form_id }} -submit title- {{ section_id }} - {{ card_variant.id }} "
 aria -live = "educado"
 dados - esgotados - esgotados - mensagem = "true" 
{ % se card_variant. disponível == falso % }
 desabilitado
 { % fim se % }
 >
 < intervalo > 
{ %- se card_variant. disponível -% }
 { { 'produtos.produto.add_to_cart' | } }
 { %- outro -% } 
{ { 'produtos.produto.sold_out' | } }
 { %- fim se -% }
 </span> _
 < span class = "mensagem esgotada oculta" > 
{ { 'produtos.produto.sold_out' | } }
 </span> _
 < div class = "loading-overlay__spinner oculto" >
 < svg
 aria - oculto = "verdadeiro"
 focalizável = "falso" 
role = "apresentação"
 classe = "girador"
 viewBox = "0 0 66 66"
 xmlns = "http://www.w3.org/2000/svg"
 > 
< círculo classe = "caminho" preenchimento = "nenhum" traço - largura = "6" cx = "33" cy = "33" r = "30" </ círculo >
 </svg> _
 </div> _ _ 
</ botão >
 { %- formulário final -% }
 </ produto - formulário >
 { %- outro -% }
 < modal - dados do abridor - modal = "#QuickAdd- {{ card_product.id }} " > 
< botão
 id = " {{ product_form_id }} -enviar"
 tipo = "enviar"
 nome = "adicionar"
 class = "botão quick-add__submit - botão de largura total - secundário"
 aria - haspopup = "diálogo" 
aria - labelledby = " {{ product_form_id }} -submit title- {{ section_id }} - {{ card_product.id }} "
 dados - produto - url = " {{ card_product.url }} "
 >
 { { 'produtos.produto.escolha_opções' | } } 
< div class = "loading-overlay__spinner oculto" >
 < svg
 aria - oculto = "verdadeiro"
 focalizável = "falso"
 role = "apresentação"
 classe = "girador"
 viewBox = "0 0 66 66" 
xmlns = "http://www.w3.org/2000/svg"
 >
 < círculo classe = "caminho" preenchimento = "nenhum" traço - largura = "6" cx = "33" cy = "33" r = "30" </ círculo > 
</svg> _
 </div> _ _
 </ botão >
 </ modal - abridor >
 < quick - add - modal id = "QuickAdd- {{ card_product.id }} " class = "quick-add-modal" > 
< div
 função = "diálogo"
 aria - label = " {{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }} "
 aria -modal = "verdadeiro"
 class = "quick-add-modal__content global-settings-popup"
 tabindex = "-1"
 > 
< botão
 id = "ModalClose- {{ card_product.id }} "
 tipo = "botão"
 class = "adição rápida-modal__toggle"
 aria - label = " {{ 'accessibility.close' | t }} "
 >
 { % renderizar 'fechar ícone' % } 
</ botão >
 < div id = "QuickAddInfo- {{ card_product.id }} " class = "quick-add-modal__content-info" </ div >
 </div> _ _
 </ rápido - adicionar - modal > 
{ %- fim se -% }
 </div> _ _
 { %- fim se -% }
 < div class = "card__badge {{ settings.badge_position }} " > 
{ %- se card_variant. disponível == falso -% }
 < span class = "crachá - cor inferior esquerda {{ settings.sold_out_badge_color_scheme }} " > 
{ { - 'produtos.produto.esgotado' | t - } }
 </span> _
 { %- elsif card_variant. compare_at_price > card_variant. preço e card_variant. disponível -% } 
< span class = "crachá emblema - cor inferior esquerda {{ settings.sale_badge_color_scheme }} " >
 { { - 'produtos.produto.em_venda' | t - } }
 </span> _
 { %- fim se -% } 
</div> _ _
 </div> _ _
 </div> _ _
 </div> _ _
 { %- outro -% }
 < div class = "card-wrapper underline-links-hover" > 
< div
 classe = "
 cartão
 cartão-- {{ settings.card_style }}
 cartão--texto
 {% if extend_height %} cartão--extend-height {% endif %}
 {% if settings.card_style == 'card' %} cor- {{ settings.card_color_scheme }} gradiente {% endif %}
 {% if card_variant.featured_media == nil and settings.card_style == 'card' %} proporção {% endif %}
 "
 style = "--ratio-percent: 100%;"
 > 
< div
 class = "card__inner {% if settings.card_style == 'standard' %} cor- {{ settings.card_color_scheme }} gradiente {% endif %} {% if settings.card_style == 'standard' %} proporção {% endif %} "
 style = "--ratio-percent: 100%;"
 >
 < div class = "cartão__content" > 
< div class = "cartão__informações" >
 < h3 classe = "card__heading" >
 < a role = "link" aria - desativado = "true" class = "full-unstyled-link" > 
{ { 'onboarding.product_title' | } }
 </a> _
 </ h3 >
 </div> _ _
 </div> _ _
 </div> _ _ 
< div class = "cartão__content" >
 < div class = "cartão__informações" >
 < h3 class = "card__heading {% if settings.card_style == 'standard' %} h5 {% endif %} " > 
< a role = "link" aria - desativado = "true" class = "full-unstyled-link" >
 { { 'onboarding.product_title' | } }
 </a> _
 </ h3 > 
< div class = "informações do cartão" >
 { %- se show_vendor -% } 
< span class = "visualmente oculto" > { { 'accessibility.vendor' | t } } </ span > 
< div class = "legenda com espaçamento entre letras light" > { { 'products.product.vendor' | t } } </ div >
 { %- fim se -% } 
{ % renderiza 'preço' % }
 </div> _ _
 </div> _ _
 </div> _ _
 </div> _ _
 </div> _ _
 { %- fim se -% }

 { % Comente % }
 Renderiza um cartão de produto

 Aceita :
 - card_product : { Object } Produto Objeto líquido ( opcional ) 
- media_aspect_ratio : { String } Tamanho do cartão de imagem do produto. Os valores são "quadrado" e "retrato" . O padrão é "quadrado" ( opcional ) 
- image_shape : { String } Máscara de imagem a ser aplicada ao cartão de imagem do produto. Os valores são "arch" , "blob" , "chevronleft" , " chevronright" , "diamond" , "parallelogram" e "round" . ( opcional ) 
- show_secondary_image : { Boolean } Mostra a imagem secundária ao passar o mouse. Padrão : falso ( opcional )
 - show_vendor : { Boolean } Mostra o fornecedor do produto. Padrão : falso 
- show_rating : { Boolean } Mostra a avaliação do produto. Padrão : falso
 - extend_height : { Boolean } A altura do cartão se estende ao espaço disponível no contêiner. Padrão : verdadeiro ( opcional ) 
- preguiçoso_load : { Boolean } A imagem deve ser carregada lentamente. Padrão : verdadeiro ( opcional )
 - show_quick_add : { Boolean } Mostra o botão de adição rápida.
 - section_id : { String } O ID da seção que contém este cartão. 
-horizontal_class : { Boolean } Adiciona um cartão - classe horizontal se definido como verdadeiro . Padrão : falso ( opcional ) 
-horizontal_quick_add : { Boolean } Altera os estilos dos botões de adição rápida quando definido como true . Padrão : falso ( opcional )
 - placeholder_image : { String } A imagem do espaço reservado a ser usada quando não existir nenhum produto. Padrão : 'product-apparel-2' ( opcional )

 Uso : 
{ % render 'cartão-produto' , show_vendor : seção. configurações . mostrar_vendor % }
 { % comentário final % }

 { { 'classificação do componente.css' | URL_do_asset | folha_de_estilo } }
 
{ %- se produto_cartão e produto_cartão ! = vazio -% }
 { %- líquido
 atribuir proporção = 1
 se card_variant. feature_media e media_aspect_ratio == 'retrato'
 atribuir proporção = 0,8
 elsif card_variant. feature_media e media_aspect_ratio == 'adaptar' 
atribuir proporção = card_variant. destaque_media . proporção da tela
 fim se
 se proporção == 0 ou proporção == nulo
 atribuir proporção = 1
 fim se
 -% }
 < div class = "card-wrapper product-card-wrapper underline-links-hover" >
 < div 
classe = "
 cartão
 cartão-- {{ settings.card_style }}
 {% if card_variant.featured_media %} cartão--mídia {% else %} cartão--texto {% endif %}
 {% if settings.card_style == 'card' %} cor- {{ settings.card_color_scheme }} gradiente {% endif %}
 {% if image_shape and image_shape != 'default' %} cartão - formato {% endif %}
 {% if extend_height %} cartão--extend-height {% endif %} 
{% if card_variant.featured_media == nil and settings.card_style == 'card' %} proporção {% endif %}
 Cartão {% if horizontal_class %} - horizontal {% endif %}
 "
 style = "--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }} %;"
 >
 < div 
class = "card__inner {% if settings.card_style == 'standard' %} color- {{ settings.card_color_scheme }} gradiente {% endif %} {% if card_variant.featured_media or settings.card_style == 'standard' %} proporção {% endif %} "
 style = "--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }} %;"
 >
 { %- se card_variant. destaque_media -% } 
< div class = "card__media {% if image_shape and image_shape != 'default' %} shape-- {{ image_shape }} color- {{ settings.card_color_scheme }} gradiente {% endif %} " >
 < div class = "media media--transparent media--hover-effect" > 
{ % comment % } tema - verificar - desabilitar ImgLazyLoading { % endcomment % }
 < imagem
 srcset = "
 {%- if card_variant.featured_media.width >= 165 -%} {{ card_variant.featured_media | image_url: width: 165 }} 165w, {%- endif -%} 
{%- if card_variant.featured_media.width >= 360 -%} {{ card_variant.featured_media | image_url: width: 360 }} 360w, {%- endif -%}
 {%- if card_variant.featured_media.width >= 533 -%} {{ card_variant.featured_media | image_url: width: 533 }} 533w, {%- endif -%}
 {%- if card_variant.featured_media.width >= 720 -%} {{ card_variant.featured_media | image_url: width: 720 }} 720w, {%- endif -%}
 {%- if card_variant.featured_media.width >= 940 -%} {{ card_variant.featured_media | image_url: width: 940 }} 940w, {%- endif -%} 
{%- if card_variant.featured_media.width >= 1066 -%} {{ card_variant.featured_media | image_url: width: 1066 }} 1066w, {%- endif -%}
 {{ card_variant.featured_media | image_url }} {{ card_variant.featured_media.width }} w
 "
 src = " {{ card_variant.featured_media | image_url: width: 533 }} "
 tamanhos = "(largura mínima: {{ settings.page_width }} px) {{ settings.page_width | minus: 130 | divided_by: 4 }} px, (largura mínima: 990px) calc((100vw - 130px) / 4 ), (largura mínima: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" 
alt = " {{ card_variant.featured_media.alt | escape }} "
 class = "redução de movimento"
 { % a menos que preguiçoso_load == falso % }
 carregando = "preguiçoso"
 { % sem fim % } 
largura = " {{ card_variant.featured_media.width }} "
 altura = " {{ card_variant.featured_media.height }} "
 >
 { % comment % } tema - verificar - ativar ImgLazyLoading { % endcomment % }
 
{ %- se card_variant. metacampos . meus_campos . imagem_secundária ! = null e show_secondary_image -% }
 < imagem
 srcset = "
 {%- if card_variant.metafields.my_fields.secondary_image.width >= 165 -%} {{ card_variant.metafields.my_fields.secondary_image | image_url: width: 165 }} 165w, {%- endif -%} 
{%- if card_variant.metafields.my_fields.secondary_image.width >= 360 -%} {{ card_variant.metafields.my_fields.secondary_image | image_url: width: 360 }} 360w, {%- endif -%}
 {%- if card_variant.metafields.my_fields.secondary_image.width >= 533 -%} {{ card_variant.metafields.my_fields.secondary_image | image_url: width: 533 }} 533w, {%- endif -%}
 {%- if card_variant.metafields.my_fields.secondary_image.width >= 720 -%} {{ card_variant.metafields.my_fields.secondary_image | image_url: width: 720 }} 720w, {%- endif -%} 
{%- if card_variant.metafields.my_fields.secondary_image.width >= 940 -%} {{ card_variant.metafields.my_fields.secondary_image | image_url: width: 940 }} 940w, {%- endif -%}
 {%- if card_variant.metafields.my_fields.secondary_image.width >= 1066 -%} {{ card_variant.metafields.my_fields.secondary_image | image_url: width: 1066 }} 1066w, {%- endif -%}
 {{ card_variant.metafields.my_fields.secondary_image | image_url }} {{ card_variant.metafields.my_fields.secondary_image.width }} w
 " 
src = " {{ card_variant.metafields.my_fields.secondary_image | image_url: width: 533 }} "
 tamanhos = "(largura mínima: {{ settings.page_width }} px) {{ settings.page_width | minus: 130 | divided_by: 4 }} px, (largura mínima: 990px) calc((100vw - 130px) / 4 ), (largura mínima: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
 alt = ""
 class = "redução de movimento"
 carregando = "preguiçoso" 
largura = " {{ card_variant.metafields.my_fields.secondary_image.width }} "
 altura = " {{ card_variant.metafields.my_fields.secondary_image.height }} "
 >
 { %- fim se -% }
 </div> _ _
 </div> _ _ 
{ %- fim se -% }
 < div class = "cartão__content" >
 < div class = "cartão__informações" >
 < h3
 classe = "card__heading" 
{ % se card_variant. feature_media == null e configurações. card_style == 'padrão' % }
 id = "título- {{ section_id }} - {{ card_variant.id }} "
 { % fim se % }
 >
 < um 
href = " {{ card_variant.url }} "
 id = "StandardCardNoMediaLink- {{ section_id }} - {{ card_variant.id }} "
 class = "link sem estilo completo"
 aria - labelledby = "StandardCardNoMediaLink- {{ section_id }} - {{ card_variant.id }} NoMediaStandardBadge- {{ section_id }} - {{ card_variant.id }} "
 > 
{ { cartão_produto. título | escapar } }
 { % se hide_variant_info == falso % }
 <br> _
 { { card_variant. título | capitalizar } } 
{ % fim se % }
 </a> _
 </ h3 >
 </div> _ _
 < div class = "card__badge {{ settings.badge_position }} " > 
{ %- se card_variant. disponível == falso -% }
 < intervalo
 id = "NoMediaStandardBadge- {{ section_id }} - {{ card_variant.id }} "
 class = "crachá - cor inferior esquerda {{ settings.sold_out_badge_color_scheme }} "
 > 
{ { - 'produtos.produto.esgotado' | t - } }
 </span> _
 { %- elsif card_variant. compare_at_price > card_variant. preço e card_variant. disponível -% }
 < intervalo 
id = "NoMediaStandardBadge- {{ section_id }} - {{ card_variant.id }} "
 class = "crachá - cor inferior esquerda {{ settings.sale_badge_color_scheme }} "
 >
 { { - 'produtos.produto.em_venda' | t - } }
 </span> _ 
{ %- fim se -% }
 </div> _ _
 </div> _ _
 </div> _ _
 < div class = "cartão__content" > 
< div class = "cartão__informações" >
 < h3
 class = "card__heading {% if card_variant.featured_media or settings.card_style == 'standard' %} h5 {% endif %} " 
{ % se card_variant. destaque_media ou configurações. estilo_cartão == 'cartão' % }
 id = "título- {{ section_id }} - {{ card_variant.id }} "
 { % fim se % }
 >
 < um 
href = " {{ card_variant.url }} "
 id = "CardLink- {{ section_id }} - {{ card_variant.id }} "
 class = "link sem estilo completo"
 aria - labelledby = "CardLink- {{ section_id }} - {{ card_variant.id }} Crachá- {{ section_id }} - {{ card_variant.id }} "
 > 
{ { cartão_produto. título | escapar } }
 { % se hide_variant_info == falso % }
 <br> _
 { { card_variant. título | capitalizar } } 
{ % fim se % }
 </a> _
 </ h3 >
 < div class = "informações do cartão" >
 { %- se show_vendor -% } 
< span class = "visualmente oculto" > { { 'accessibility.vendor' | t } } </ span > 
< div class = "luz de legenda com espaçamento entre letras" > { { card_variant. fornecedor } } </ div >
 { %- fim se -% } 
< span class = "caption-large light" > { { bloco. configurações . descrição | escape } } </ span > 
{ %- se show_rating e card_variant. metacampos . avaliações . avaliação . valor ! = em branco -% }
 { % líquido
 atribuir classificação_decimal = 0 
atribuir decimal = card_variant. metacampos . avaliações . avaliação . valor . classificação | módulo : 1
 se decimal >= 0,3 e decimal <= 0,7
 atribuir classificação_decimal = 0,5
 elsif decimal > 0,7 
atribuir classificação_decimal = 1
 fim se
 % }
 < div
 classe = "classificação"
 papel = "img"
 aria - label = " {{ 'accessibility.star_reviews_info' | t: rating_value: card_variant.metafields.reviews.rating.value, rating_max: card_variant.metafields.reviews.rating.value.scale_max }} "
 >
 < intervalo 
aria - oculto = "verdadeiro"
 class = "classificação-estrela"
 style = "--rating: {{ card_variant.metafields.reviews.rating.value.rating | floor }} ; --rating-max: {{ card_variant.metafields.reviews.rating.value.scale_max }} ; --rating -decimal: {{ rating_decimal }} ;"
 </ intervalo >
 </div> _ _ 
< p class = "rating-text caption" >
 < span aria - oculto = "true" >
 { { - card_variant. metacampos . avaliações . avaliação . valor } } / 
{ { card_variant. metacampos . avaliações . avaliação . valor . escala_max - } }
 </span> _
 </ p >
 < p class = "legenda de contagem de classificação" > 
< span aria - hidden = "true" > ( { { card_variant. metafields . reviews . rating_count } } ) </ span >
 < span class = "visualmente oculto" > 
{ { - card_variant. metacampos . avaliações . contagem_avaliação } }
 { { 'acessibilidade.total_reviews' | t - } }
 </span> _
 </ p > 
{ %- fim se -% }
 { % renderizar 'preço' , produto : cartão_produto , price_class : '' % }
 </div> _ _
 </div> _ _ 
{ %- se show_quick_add -% }
 < div class = "adição rápida no-js-hidden" >
 { %- líquido
 atribuir product_form_id = 'adição rápida-' | acrescentar : seção_id | acrescentar : card_variant. eu ia 
atribuir qty_rules = falso
 se card_variant. regra_quantidade . min > 1 ou card_variant. regra_quantidade . max ! = nulo ou card_variant. regra_quantidade . incremento > 1
 atribuir qty_rules = verdadeiro
 fim se
 -% } 
{ %- se card_variant. variantes . tamanho > 1 ou qty_rules -% }
 < modal - dados de abertura - modal = "#QuickAdd- {{ card_variant.id }} " >
 < botão
 id = " {{ product_form_id }} -enviar" 
tipo = "enviar"
 nome = "adicionar"
 class = "botão quick-add__submit - botão de largura total - cartão secundário {% if horizontal_quick_add %} - horizontal__quick-add animate-arrow {% endif %} "
 aria - haspopup = "diálogo"
 aria - labelledby = " {{ product_form_id }} -submit title- {{ section_id }} - {{ card_variant.id }} " 
dados - produto - url = " {{ card_variant.url }} "
 >
 { { 'produtos.produto.escolha_opções' | } }
 { %- se horizontal_quick_add -% } 
< span class = "icon-wrap" > { % render 'icon-arrow' % } </ span >
 { %- fim se -% }
 < div class = "loading-overlay__spinner oculto" > 
< svg
 aria - oculto = "verdadeiro"
 focalizável = "falso"
 classe = "girador"
 viewBox = "0 0 66 66"
 xmlns = "http://www.w3.org/2000/svg"
 > 
< círculo classe = "caminho" preenchimento = "nenhum" traço - largura = "6" cx = "33" cy = "33" r = "30" </ círculo >
 </svg> _
 </div> _ _ 
</ botão >
 </ modal - abridor >
 < quick - add - modal id = "QuickAdd- {{ card_variant.id }} " class = "quick-add-modal" >
 < div
 função = "diálogo" 
aria - label = " {{ 'products.product.choose_product_options' | t: product_name: card_variant.title | escape }} "
 aria -modal = "verdadeiro"
 class = "quick-add-modal__content global-settings-popup"
 tabindex = "-1"
 >
 < botão
 id = "ModalClose- {{ card_variant.id }} " 
tipo = "botão"
 class = "adição rápida-modal__toggle"
 aria - label = " {{ 'accessibility.close' | t }} "
 >
 { % renderizar 'fechar ícone' % }
 </ botão > 
< div id = "QuickAddInfo- {{ card_variant.id }} " class = "quick-add-modal__content-info" </ div >
 </div> _ _
 </ rápido - adicionar - modal > 
{ %- outro -% }
 < produto - formulário >
 { % -formulário 'produto' ,
 cartão_produto ,
 id : product_form_id ,
 classe : 'forma' , 
novalidate : 'novalidate' ,
 dados - tipo : 'formulário de adição ao carrinho'
 -% }
 < entrada
 tipo = "oculto"
 nome = "id"
 valor = " {{ card_variant.id }} "
 desabilitado
 >
 < botão 
id = " {{ product_form_id }} -enviar"
 tipo = "enviar"
 nome = "adicionar"
 class = "botão quick-add__submit - botão de largura total - cartão secundário {% if horizontal_quick_add %} - horizontal__quick-add {% endif %} "
 aria - haspopup = "diálogo" 
aria - labelledby = " {{ product_form_id }} -submit title- {{ section_id }} - {{ card_variant.id }} "
 aria -live = "educado"
 dados - esgotados - esgotados - mensagem = "true" 
{ % se card_variant. disponível == falso % }
 desabilitado
 { % fim se % }
 >
 < intervalo > 
{ %- se card_variant. disponível -% }
 { { 'produtos.produto.add_to_cart' | } }
 { %- outro -% } 
{ { 'produtos.produto.sold_out' | } }
 { %- fim se -% }
 </span> _
 < span class = "mensagem esgotada oculta" > 
{ { 'produtos.produto.sold_out' | } }
 </span> _
 { %- se horizontal_quick_add -% } 
< span class = "icon-wrap" > { % render 'icon-plus' % } </ span >
 { %- fim se -% }
 < div class = "loading-overlay__spinner oculto" > 
< svg
 aria - oculto = "verdadeiro"
 focalizável = "falso"
 classe = "girador"
 viewBox = "0 0 66 66"
 xmlns = "http://www.w3.org/2000/svg"
 > 
< círculo classe = "caminho" preenchimento = "nenhum" traço - largura = "6" cx = "33" cy = "33" r = "30" </ círculo >
 </svg> _
 </div> _ _ 
</ botão >
 { %- formulário final -% }
 </ produto - formulário >
 { %- fim se -% }
 </div> _ _
 { %- fim se -% } 
< div class = "card__badge {{ settings.badge_position }} " >
 { %- se card_variant. disponível == falso -% }
 < intervalo
 id = "Crachá- {{ section_id }} - {{ card_variant.id }} " 
class = "crachá - cor inferior esquerda {{ settings.sold_out_badge_color_scheme }} "
 >
 { { - 'produtos.produto.esgotado' | t - } }
 </span> _ 
{ %- elsif card_variant. compare_at_price > card_variant. preço e card_variant. disponível -% }
 < intervalo
 id = "Crachá- {{ section_id }} - {{ card_variant.id }} "
 class = "crachá - cor inferior esquerda {{ settings.sale_badge_color_scheme }} "
 > 
{ { - 'produtos.produto.em_venda' | t - } }
 </span> _
 { %- fim se -% }
 </div> _ _
 </div> _ _
 </div> _ _ 
</div> _ _
 { %- outro -% }
 < div class = "card-wrapper product-card-wrapper underline-links-hover" >
 < div
 classe = "
 cartão
 cartão-- {{ settings.card_style }}
 cartão--texto 
{% if extend_height %} cartão--extend-height {% endif %}
 {% if settings.card_style == 'card' %} cor- {{ settings.card_color_scheme }} gradiente {% endif %}
 {% if card_variant.featured_media == nil and settings.card_style == 'card' %} proporção {% endif %}
 {{ horizontal_class }}
 "
 style = "--ratio-percent: 100%;"
 >
 < div 
class = "card__inner {% if settings.card_style == 'standard' %} cor- {{ settings.card_color_scheme }} gradiente {% endif %} {% if settings.card_style == 'standard' %} proporção {% endif %} "
 style = "--ratio-percent: 100%;"
 >
 < div class = "cartão__media" > 
{ %- if placeholder_image -% }
 { { placeholder_image | placeholder_svg_tag : 'placeholder-svg' } }
 { %- outro -% } 
{ { 'produto-vestuário-2' | placeholder_svg_tag : 'placeholder-svg' } }
 { %- fim se -% }
 </div> _ _
 </div> _ _ 
< div class = "cartão__content" >
 < div class = "cartão__informações" >
 < h3 class = "card__heading card__heading--placeholder {% if settings.card_style == 'standard' %} h5 {% endif %} " > 
< a role = "link" aria - desativado = "true" class = "full-unstyled-link" >
 { { 'onboarding.product_title' | } }
 </a> _
 </ h3 > 
< div class = "informações do cartão" >
 { %- se show_vendor -% } 
< span class = "visualmente oculto" > { { 'accessibility.vendor' | t } } </ span > 
< div class = "legenda com espaçamento entre letras light" > { { 'products.product.vendor' | t } } </ div >
 { %- fim se -% } 
{ % renderiza 'preço' % }
 </div> _ _
 </div> _ _
 </div> _ _
 </div> _ _
 </div> _ _
 { %- fim se -% }