Adicione o botão Quickview ao seu cartão de produto do Shopify

 { { 'visualização rápida.css' | URL_do_asset | folha_de_estilo } }
 < produto - visualizador > 
< div classe = "oculto" >
 < div id = "buttonViewer" >
 < div
 class = "buttonViewer"
 style = "fundo: {{section.settings.button_background}} ; cor: {{section.settings.button_font_color}} ; tamanho da fonte: clamp(12px, 1vw, 20px);" 
>
 < span class = "desktopbutton" >
 < span > { { seção. configurações . button_label } } </ span >
 < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 40 40" > 
< tipo de estilo = "texto/css" >
 . st -- 0 { preenchimento : nenhum ; }
 . st -- 1 { preencher : { { seção. configurações . button_font_color } } ; } 
</ estilo >
 < g id = "olho-ícone" >
 < classe de caminho = "st--0" d = "M19,86,8,36c-5,96,0,26-11,2,3,82-15,25,8,02c-1,03,1,11-2,2,31-2,98,3,51c-0,33,0,41- 0,31,0,96-0,01,1,42
 c0,21,0,31,0,41,0,63,0,66,0,9c10,1,13,8,25,85,13,6,35,76-0,3C40,34,16,95,24,74,7,44,19,86,8,36z" /> 
< classe de caminho = "st--1" d = "M19.86,8.36c8.91,0.49,17.14,7.75,18.5,12.53c0.05,0.19-0.01,0.47-0.13,0.63
 C28,31,35,31,12,34,35,96,2,27,22,2c-0,24-0,26-0,45-0,58-0,66-0,9c-0,3-0,45-0,32-1,01,0,01-1,42c0,98-1,19,1,95-2,4,2,98 -3,51
 C8.65,12,18,13,9,8,62,19,86,8,36z M20,06,11,35c-8,99-0,25-8,86,18,67-0,1,18,52C28,97,30,08,28,9,11,12,20,06,11,35z
 M26,06,29,26c4,06-1,67,7,57-4,94,10,49-8,36c-1,8-3,77-6,61-7,15-10,51-8,97C29,7,17,74,29,68,23,5,26,06,29,26z M13,99,11,95
 c-0,03-0,04-0,03-0,03-0,06-0,07c-3,85,2,02-8,6,5,13-10,43,9,01c2,96,3,35,6,39,6,72,10,52,8,4
 C10.36,23.49,10.37,17.72,13.99,11.95z" /> 
< classe de caminho = "st--0" d = "M20.06,11.35c8.84-0.23,8.91,18.73-0.1,18.52C11.2,30.02,11.07,11.1,20.06,11.35z M21.23,15.55
 c-4,52-2,07-6,82,6,52-3,77,9,19c3,95,4,36,8,16-3,43,6,07-6,51C21,77,20,95,19,51,17,29,21,23,15,55z" />
 < classe de caminho = "st--0" d = "M26.06,29.26c3.62-5.76,3.64-11.51-0.02-17.34c3.89,1.82,8.7,5.21,10.51,8.97
 C33.64,24.32,30.12,27.58,26.06,29.26z" /> 
< classe de caminho = "st--0" d = "M13,98,11,96c-3,61,5,77-3,62,11,53,0,04,17,33c-4,13-1,68-7,56-5,05-10,52-8,4
 c1.83-3.88,6,57-6,98,10,43-9,01C13,95,11,91,13,96,11,93,13,98,11,96z" />
 < classe de caminho = "st--1" d = "M21.23,15.55c-1.72,1.75,0.54,5.39,2.3,2.68c2.1,3.09-2.11,10.87-6.07,6.51
 C14.41,22.07,16.71,13.48,21.23,15.55z" />
 </ g > 
</ svg </ span
 >< span class = "mobilebutton" >
 < svg viewBox = "0 0 40 40" x = "121" y = "112" >
 < use xlink : href = "#icon-eye" />
 </svg> _ 
</span> _
 </div> _ _
 </div> _ _
 </div> _ _
 < div class = "viewerBackground {% if template == 'page' %} visualizar {% endif %} " > 
< div class = "productViewContainer color- {{ section.settings.color_scheme }} " >
 < div class = "quickViewButtonContainer" >
 < div class = "navigatorWrapper" >
 < botão 
tipo = "botão"
 class = "prevNavigator navigatorBtn"
 nome = "anterior"
 estilo = "fundo: {{section.settings.button_background}} ; cor: {{section.settings.button_font_color}} "
 >
 ANTERIOR
 </ botão >
 < botão
 tipo = "botão" 
class = "nextNavigator navegadorBtn"
 nome = "próximo"
 estilo = "fundo: {{section.settings.button_background}} ; cor: {{section.settings.button_font_color}} "
 >
 PRÓXIMO
 </ botão >
 < span class = "errorMessage" </ span > 
</div> _ _
 < intervalo
 class = "productViewerClose"
 estilo = "traço: {{section.settings.button_font_color}} ; plano de fundo: {{section.settings.button_background}} "
 >
 { %- renderizar 'icon-close' -% }
 </span> _ 
</div> _ _
 < div class = "productViewer" </ div >
 </div> _ _
 </div> _ _
 </ produto - visualizador > 
< script src = " {{ 'product-form.js' | asset_url }} " defer = "defer" </ script >
 <roteiro> _
 documento. addEventListener ( "DOMContentLoaded" , função ( ) {
 função o ( ) { 
const o = janela. navegador . agente de usuário ;
 const n = o. indexOf ( "MSIE" ) ;
 const t = o. indexOf ( "Tridente/" ) ; 
retornar n > 0 || t > 0 ;
 }
 se ( ! o ( ) ) retornar ;
 const n = documento. querySelector ( '# {{ product_form_id }} input[name="id"]' ) ; 
const t = documento. criarElement ( "div" ) ;
 const d =
 documento. querySelector (
 'variant-radios[data-section=" {{ product.id }} - {{forloop.index0}} "]'
 ) ||
 documento. querySelector ( 
'variant-selects[data-section=" {{ product.id }} - {{forloop.index0}} "]'
 ) ;
 t. innerHTML = documento. querySelector (
 ".product-form__noscript-wrapper- {{ product.id }} - {{forloop.index0}} "
 ) . textoConteúdo ;
 d. HTML externo = t. HTML externo ;
 documento 
. querySelector ( "#Variantes- {{ product.id }} " )
 . addEventListener ( "alterar" , função ( o ) {
 n. valor = o. atualTarget . valor ;
 } ) ;
 } ) ; 
</roteiro> _
 < tipo de script = "aplicativo/ld+json" >
 {
 "@context" : "http://schema.org/" ,
 "@type" : "Produto" , 
"nome" : { { produto. título | json } } ,
 "url" : { { loja. url | anexar : produto. url | json } } , 
{ % se seo_media -% }
 { %- atribuir media_size = seo_media. imagem_de_visualização . largura | acrescentar : 'x' -% }
 "imagem" : [ 
{ { seo_media | img_url : media_size | acrescentar : "https:" | json } }
 ] ,
 { %- fim se % } 
"descrição" : { { produto. descrição | tira_html | json } } ,
 { % se produto. selecionado_ou_primeira_variável_disponível . sku != em branco -% } 
"sku" : { { produto. selecionado_ou_primeira_variável_disponível . sku | json } } ,
 { %- fim se % }
 "marca" : {
 "@type" : "Coisa" , 
"nome" : { { produto. fornecedor | json } }
 } ,
 "ofertas" : [
 { %- para variante no produto. variantes -% }
 { 
"@type" : "Oferta" ,
 { %- se variante. sku != em branco -% }
 "sku" : { { variante. sku | json } } ,
 { %- fim se -% } 
"availability" : "http://schema.org/ {% if variant.available %} InStock {% else %} OutOfStock {% endif %} " ,
 "preço" : { { variante. preço | dividido_por : 100,00 | json } } , 
"preçoMoeda" : { { carrinho. moeda . código_iso | json } } ,
 "url" : { { loja. url | acrescentar : variante. url | json } } 
} { % a menos que forloop. último % } , { % endunless % }
 { %- fim para -% }
 ]
 }
 </roteiro> _
 { % esquema % }
 { 
"nome" : "Visualização rápida" ,
 "configurações" : [
 {
 "tipo" : "cabeçalho" ,
 "content" : "Estilo do botão de visualização rápida"
 } ,
 {
 "tipo" : "cor" , 
"id" : "botão_background" ,
 "label" : "Fundo do botão" ,
 "padrão" : "#000"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "button_font_color" , 
"label" : "Cor da fonte do botão" ,
 "padrão" : "#fff"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "button_label" ,
 "label" : "Texto do botão" , 
"default" : "VISUALIZAÇÃO RÁPIDA"
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "Estilo modal pop-up"
 } ,
 {
 "tipo" : "selecionar" , 
"id" : "esquema_cor" ,
 "opções" : [
 {
 "valor" : "acento-1" ,
 "label" : "Acento 1"
 } ,
 {
 "valor" : "acento-2" , 
"label" : "Acento 2"
 } ,
 {
 "valor" : "plano de fundo-1" ,
 "rótulo" : "Plano de fundo 1"
 } ,
 {
 "valor" : "plano de fundo-2" , 
"rótulo" : "Fundo 2"
 } ,
 {
 "valor" : "inverso" ,
 "label" : "Inverso"
 }
 ] ,
 "padrão" : "plano de fundo-1" , 
"label" : "t:seções.all.colors.label"
 }
 ] ,
 "predefinições" : [
 {
 "nome" : "Visualização rápida"
 }
 ]
 }
 { % termina o esquema % }

 { { 'seção-principal-produto.css' | URL_do_asset | folha_de_estilo } }
 { { 'seção-produto em destaque.css' | URL_do_asset | folha_de_estilo } } 
{ { 'preço-componente.css' | URL_do_asset | folha_de_estilo } }
 { { 'componente-rte.css' | URL_do_asset | folha_de_estilo } }
 { { 'component-loading-overlay.css' | URL_do_asset | folha_de_estilo } } 
{ { 'visualização rápida.css' | URL_do_asset | folha_de_estilo } }
 < link rel = "stylesheet" href = " {{ 'component-deferred-media.css' | asset_url }} " media = "print" onload = "this.media='all'" > 
{ %- atribuir first_3d_model = produto. mídia | onde : 'media_type' , 'modelo' | primeiro -% }
 { %- se primeiro_3d_model -% } 
{ { 'componente-produto-model.css' | URL_do_asset | folha_de_estilo } }
 < ligação
 id = "ModelViewerStyle"
 rel = "folha de estilo"
 href = "https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css"
 mídia = "imprimir"
 onload = "this.media='todos'"
 >
 < ligação 
id = "ModelViewerOverride"
 rel = "folha de estilo"
 href = " {{ 'component-model-viewer-ui.css' | asset_url }} "
 mídia = "imprimir"
 onload = "this.media='todos'"
 >
 { %- fim se -% }
 < seção > 
< div class = "seção- {{ section.id }} -padding" >
 < div class = "grade de grade de produtos em destaque--1-col gradiente de cor- {{ section.settings.color_scheme }} {% if section.settings.secondary_background == false %} isolar {% endif %} {% if product.media.size > 0 %} grid--2-col-tablet {% else %} produto--no-media {% endif %} " > 
< div class = "grid__item produto__media-wrapper" >
 { % se produto % }
 < controle deslizante - visualização rápida >
 < ul class = "largeImage" > 
{ %- para mídia no produto. meios de comunicação -% }
 < li
 classe = "
 item de imagem grande produto__item de mídia grid__item slider__slide {% if forloop.first %} está ativo {% endif %}
 {% if media.media_type != 'image' %} ocultar-modal {% endif %}
 " 
dados - mídia - id = " {{ media.id }} "
 >
 { % renderizar 'miniatura do produto' ,
 mídia : mídia ,
 posição : forloop. índice ,
 ciclo : verdadeiro , 
modal_id : produto. eu ia ,
 xr_button : verdadeiro
 % }
 </ li >
 { %- fim para -% }
 </ul> _
 < div class = "slider-wrapper" > 
< botão
 tipo = "botão"
 class = "botão deslizante botão deslizante - anterior controle deslizante maior {% if product.media.size <= 4 %} oculto {% endif %} "
 nome = "anterior"
 aria - label = " {{ 'accessibility.previous_slide' | t }} "
 > 
{ % renderizar 'ícone-caret' % }
 </ botão >
 < ul class = "product-slider-box slider" role = "list" > 
{ %- atribuir variante_images = produto. imagens | onde : 'attached_to_variant?' , verdade | mapa : 'src' -% }
 { %- para mídia no produto. meios de comunicação -% } 
< li class = "produto-slider slider__slide" dados - polegar - id = " {{ media.id }} " >
 { % se mídia. media_type == 'vídeo' % } 
< div class = "video-btn" style = "display: block" >
 < span class = "product__media-icon motion-reduce v-btn" ária - oculto = "true" >
 { %- líquido
 mídia do caso . tipo de mídia 
quando 'vídeo' , 'external_video'
 renderizar 'reprodução de ícone'
 quando 'modelo'
 renderizar 'ícone-modelo 3d'
 outro
 renderizar 'zoom de ícone'
 caso final
 -% }
 </span> _
 < imagem 
class = "slide-image {% if forloop.first %} active-thumb {% endif %} "
 src = " {{ media.preview_image | img_url: 'large' }} "
 alt = " {{ media.alt}} "
 estilo = "proporção: 1;"
 >
 </div> _ _ 
{ % outro % }
 < imagem
 class = "slide-image {% if forloop.first %} active-thumb {% endif %} "
 src = " {{ media.preview_image | img_url: 'large' }} "
 alt = " {{ media.alt }} "
 estilo = "proporção: 1;" 
>
 { % fim se % }
 </ li >
 { % fim para % }
 </ul> _
 < botão
 tipo = "botão" 
class = "botão deslizante botão deslizante - próximo controle deslizante maior {% if product.media.size <= 4 %} oculto {% endif %} "
 nome = "próximo"
 aria - label = " {{ 'accessibility.next_slide' | t }} "
 >
 { % renderizar 'ícone-caret' % }
 </ botão > 
</div> _ _
 </ slider - rápido - visualização >
 { % fim se % }
 </div> _ _
 < div class = "product__info-wrapper grid__item" > 
< div id = "ProductInfo- {{ section.id }} " class = "product__info-container" >
 { %- atribuir product_form_id = 'formulário-produto-' | anexar : seção. eu ia -% }
 
< h2 class = "h2 product__title" { { seção. shopify_attributes } } >
 { %- se produto. título ! = em branco -% } 
{ { produtos. título | escapar } }
 { %- outro -% }
 { { 'onboarding.product_title' | } }
 { %- fim se -% } 
</ h2 >
 < div class = "no-js-hidden" id = "price- {{ section.id }} " role = "status" { { block. shopify_attributes } } > 
{ %- renderizar 'preço' , produto : produto , use_variant : verdadeiro , show_badges : verdadeiro , price_class : 'preço--grande' -% }
 </div> _ _ 
{ %- se comprar. impostos_incluídos ou loja. política_de_envio . corpo ! = em branco -% }
 < div class = "product__tax caption rte" >
 { %- se comprar. impostos_incluídos -% } 
{ { 'produtos.produto.include_taxes' | } }
 { %- fim se -% }
 { %- se comprar. política_de_envio . corpo ! = em branco -% } 
{ { 'produtos.produto.shipping_policy_html' | t : link : loja. política_de_envio . URL } }
 { %- fim se -% }
 </div> _ _
 { %- fim se -% } 
{ %- se produto ! = em branco -% }
 < div { { bloco. shopify_attributes } } >
 { %- formulário 'produto' , produto -% } 
< tipo de entrada = "oculto" nome = "id" valor = " {{ product.selected_or_first_available_variant.id }} " >
 { { formulário | termos de pagamento } }
 { %- formulário final -% }
 </div> _ _ 
{ %- fim se -% }
 < div
 class = "product-form__input product-form__quantity {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top {% endif %} "
 { { bloquear. shopify_atributos } }
 > 
< label class = "form__label" for = "Quantidade- {{ section.id }} " >
 { { 'produtos.produto.quantidade.label' | } }
 </ rótulo > 
< quantidade - classe de entrada = "quantidade" >
 < botão class = "quantity__button no-js-hidden" name = "menos" type = "button" >
 < span class = "visualmente oculto" > 
{ { - 'produtos.produto.quantidade.decrease' | t : produto : produto. título | escapar - } }
 </span> _
 { % renderizar 'ícone-menos' % }
 </ botão > 
< entrada
 classe = "quantidade__entrada"
 tipo = "número"
 nome = "quantidade"
 id = "Quantidade- {{ section.id }} "
 min = "1"
 valor = "1"
 formulário = " {{ product_form_id }} "
 > 
< botão class = "quantity__button no-js-hidden" name = "plus" type = "button" >
 < span class = "visualmente oculto" > 
{ { - 'produtos.produto.quantidade.increase' | t : produto : produto. título | escapar - } }
 </span> _
 { % renderizar 'icon-plus' % }
 </ botão > 
</ quantidade - entrada >
 </div> _ _
 < variante - visualizador
 class = "no-js-hidden"
 dados - seção = " {{ section.id }} "
 dados -url = " {{ product.url }} " 
dados - atualização - url = "falso"
 { { bloquear. shopify_atributos } }
 >
 { %- para opção no produto. opções_com_valores -% } 
< div class = "produto-form__input produto-form__input--dropdown" >
 < label class = "form__label" for = "Opção- {{ section.id }} - {{ forloop.index0 }} " >
 { { opção. nome } } 
</ rótulo >
 < div classe = "selecionar" >
 < selecione
 id = "Opção- {{ section.id }} - {{ forloop.index0 }} "
 classe = "select__select"
 nome = "opções[ {{ option.name | escape }} ]" 
formulário = " {{ product_form_id }} "
 >
 { %- para valor na opção. valores -% }
 < opção
 valor = " {{ value | escape }} " 
{ % se opção. valor_selecionado == valor % }
 selecionado = "selecionado"
 { % fim se % }
 >
 { { valor } }
 </ opção > 
{ %- fim para -% }
 </ selecione >
 { % renderizar 'ícone-caret' % }
 </div> _ _
 </div> _ _
 { %- fim para -% } 
< tipo de script = "aplicativo/json" >
 { { produtos. variantes | json } }
 </roteiro> _
 </ variante - visualizador >
 < noscript class = "produto-form__noscript-wrapper- {{ section.id }} " > 
< div class = "product-form__input {% if product.has_only_default_variant %} oculto {% endif %} " >
 < label class = "form__label" for = "Variantes- {{ section.id }} " > 
{ { - 'produtos.produto.produtos_variantes' | t - } }
 </ rótulo >
 < div classe = "selecionar" > 
< select name = "id" id = "Variantes- {{ section.id }} " class = "select__select" form = " {{ product_form_id }} " >
 { %- para variante no produto. variantes -% }
 < opção 
{ % se variante == produto. selecionado_ou_primeira_variável_disponível % }
 selecionado = "selecionado"
 { % fim se % } 
{ % se variante. disponível == falso % }
 desabilitado
 { % fim se % }
 valor = " {{ variant.id }} "
 > 
{ { variante. título } } 
{ %- se variante. disponível == falso % } - { { 'produtos.produto.sold_out' | t } } { % endif % } 
- { { variante. preço | dinheiro | tira_html } }
 </ opção >
 { %- fim para -% }
 </ selecione >
 { % renderizar 'ícone-caret' % } 
</div> _ _
 </div> _ _
 </noscript> _
 < div { { bloco. shopify_attributes } } >
 { %- se produto ! = em branco -% } 
< produto - classe de formulário = "formulário de produto" >
 < div class = "product-form__error-message-wrapper" role = "alert" oculto >
 < svg
 aria - oculto = "verdadeiro"
 focalizável = "falso" 
role = "apresentação"
 class = "ícone erro de ícone"
 viewBox = "0 0 13 13"
 >
 < círculo cx = "6,5" cy = "6,50049" r = "5,5" traço = traço "branco" - largura = "2" /> 
< círculo cx = "6,5" cy = "6,5" r = "5,5" preenchimento = "#EB001B" traço = "#EB001B" traço - largura = "0,7" /> 
< caminho d = "M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.1 8169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5 .81982 9,37267 6,12061 9,66091 6,50076 9,66091Z" preencher = "branco" /> 
< caminho d = "M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7 0,06121 10,0109 7,5317 9,57872 7,5317 9,00504C7,5317 8,43137 7,06121 7,99918 6,50076 7,99918C5,94031 7,99918 5,46982 8,431 37 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" preenchimento = traço "branco" = traço "#EB001B" - largura = "0,7 " />
 </svg> _ 
< span class = "product-form__error-message" </ span >
 </div> _ _
 { % -formulário 'produto' ,
 produtos ,
 id : product_form_id ,
 classe : 'forma' , 
novalidate : 'novalidate' ,
 dados - tipo : 'formulário de adição ao carrinho'
 -% }
 < input type = "hidden" name = "id" value = " {{ product.selected_or_first_available_variant.id }} " desativado > 
< div class = "produto-form__buttons" >
 < botão
 tipo = "enviar"
 nome = "adicionar"
 class = "product-form__submit button button - largura total {% if section.settings.show_dynamic_checkout and product.selling_plan_groups == empty %} botão - secundário {% else %} botão - primário {% endif %} " 
{ % se produto. selecionado_ou_primeira_variável_disponível . disponível == falso % }
 desabilitado
 { % fim se % }
 >
 < intervalo > 
{ %- se produto. selecionado_ou_primeira_variável_disponível . disponível -% }
 { { 'produtos.produto.add_to_cart' | } }
 { %- outro -% } 
{ { 'produtos.produto.sold_out' | } }
 { %- fim se -% }
 </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 >
 { % -se seção. configurações . show_dynamic_checkout -% }
 { { formulário | botão_pagamento } }
 { %- fim se -% }
 </div> _ _ 
{ %- formulário final -% }
 </ produto - formulário >
 { %- outro -% }
 < div class = "formulário do produto" > 
< div class = "formulário de produto__buttons" >
 < botão
 tipo = "enviar"
 nome = "adicionar"
 class = "product-form__submit button button - botão de largura total - primário"
 desabilitado
 > 
{ { 'produtos.produto.sold_out' | } }
 </ botão >
 </div> _ _
 </div> _ _
 { %- fim se -% }
 </div> _ _
 
{ %- se produto. metacampos . avaliações . avaliação . valor ! = em branco -% }
 { % líquido
 atribuir classificação_decimal = 0 
atribua decimal = 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: product.metafields.reviews.rating.value, rating_max: product.metafields.reviews.rating.value.scale_max }} "
 >
 < intervalo 
aria - oculto = "verdadeiro"
 class = "rating-star color-icon- {{ settings.accent_icons }} "
 style = "--rating: {{ product.metafields.reviews.rating.value.rating | floor }} ; --rating-max: {{ product.metafields.reviews.rating.value.scale_max }} ; --rating -decimal: {{ rating_decimal }} ;"
 </ intervalo >
 </div> _ _ 
< p class = "rating-text caption" >
 < span aria - oculto = "true" >
 { { - produtos. metacampos . avaliações . avaliação . valor } } / 
{ { produtos. metacampos . avaliações . avaliação . valor . escala_max - } }
 </span> _
 </ p >
 < p class = "legenda de contagem de classificação" > 
< span aria - hidden = "true" > ( { { product. metafields . reviews . rating_count } } ) </ span >
 < span class = "visualmente oculto" > 
{ { - produtos. metacampos . avaliações . contagem_avaliação } }
 { { 'acessibilidade.total_reviews' | t - } }
 </span> _
 </ p > 
{ %- fim se -% }

 <a href = "{{ product.url }} " class = "link product__view-details animate-arrow" > _ {{ product.url }} _ _ _ _
 { { 'produtos.produto.view_full_details' | } } 
{ % renderizar 'ícone-seta' % }
 </a> _
 </div> _ _
 </div> _ _
 </div> _ _ 
< produto - modal id = "ProductModal- {{ section.id }} " class = "product-media-modal media-modal" >
 < div
 classe = "produto-media-modal__dialog"
 função = "diálogo"
 aria - label = " {{ 'products.modal.label' | t }} " 
aria -modal = "verdadeiro"
 tabindex = "-1"
 >
 < botão
 id = "ModalClose- {{ section.id }} "
 tipo = "botão"
 class = "produto-media-modal__toggle"
 aria - label = " {{ 'accessibility.close' | t }} "
 > 
{ % renderizar 'fechar ícone' % }
 </ botão >

 < div
 classe = "produto-mídia-modal__content"
 função = "documento"
 aria - label = " {{ 'products.modal.label' | t }} "
 tabindex = "0"
 > 
{ %- líquido
 se produto. selecionado_ou_primeira_variável_disponível . destaque_media ! = nulo
 atribuir mídia = produto. selecionado_ou_primeira_variável_disponível . destaque_media 
renderizar 'produto-mídia' , mídia : mídia , loop : seção. configurações . enable_video_looping , variante_image : seção. configurações . ocultar_variantes
 fim se
 -% }

 { %- para mídia no produto. meios de comunicação -% } 
{ %- líquido
 se seção. configurações . hide_variants e media_to_render contém mídia. eu ia
 atribuir variante_image = true
 outro
 atribuir variante_image = falso
 fim se
 a menos que mídia. id == produto. selecionado_ou_primeira_variável_disponível . destaque_media . eu ia 
renderizar 'produto-mídia' , mídia : mídia , loop : seção. configurações . enable_video_looping , variante_image : variante_image
 infinito
 -% }
 { %- fim para -% }
 </div> _ _
 </div> _ _ 
</ produto - modal >
 </div> _ _
 </ seção >
 { % javascript % }
 if ( ! customElements. get ( "produto-modal" ) ) {
 elementos personalizados. definir ( 
"produto-modal" ,
 classe t estende ModalDialog {
 construtor ( ) {
 super ( ) ;
 }
 esconder ( ) {
 super. esconder ( ) ;
 }
 mostrar ( t ) { 
super. mostrar ( t ) ;
 esse . t ( ) ;
 }
 t ( ) {
 esse . querySelectorAll ( 
` [ dados - mídia - id ] : não ( [ dados - mídia - id = "${this.i.getAttribute(
 " dados - mídia - id "
 )}" ] ) `
 ) . forEach ( ( t ) => { 
t. lista de classes . remover ( "ativo" ) ;
 } ) ;
 const t = isto . querySelector ( 
` [ dados - mídia - id = "${this.i.getAttribute(" dados - mídia - id ")}" ] `
 ) ;
 const a = t. querySelector ( "modelo" ) ;
 const d = uma? a. conteúdo : nulo ; 
t. lista de classes . adicione ( "ativo" ) ;
 t. scrollIntoView ( ) ;
 const e = isto . querySelector ( '[role="document"]' ) ; 
e. scrollLeft = ( t.largura - e.clientWidth ) / 2 ;
 se (
 t. nodeName == "MÍDIA DIFERIDA" &&
 d &&
 d. querySelector ( ".js-youtube" )
 ) 
t. o ( ) ;
 }
 }
 ) ;
 }
 { % endjavascript % }
 < script src = " {{ 'product-form.js' | asset_url }} " defer = "defer" </ script > 
{ %- se primeiro_3d_model -% }
 < tipo de script = "application/json" id = "ProductJSON- {{ product.id }} " > 
{ { produtos. mídia | onde : 'media_type' , 'modelo' | json } }
 </roteiro> _
 < script src = " {{ 'product-model.js' | asset_url }} " adiar </ script >
 { %- fim se -% } 
{ %- líquido
 se produto. selecionado_ou_primeira_variável_disponível . destaque_media
 atribuir seo_media = produto. selecionado_ou_primeira_variável_disponível . destaque_media
 outro
 atribuir seo_media = produto. destaque_media
 fim se
 -% }
 < tipo de script = "aplicativo/ld+json" >
 { 
"@context" : "http://schema.org/" ,
 "@type" : "Produto" ,
 "nome" : { { produto. título | json } } , 
"url" : { { loja. url | anexar : produto. url | json } } ,
 { % se seo_media -% } 
{ %- atribuir media_size = seo_media. imagem_de_visualização . largura | acrescentar : 'x' -% }
 "imagem" : [
 { { seo_media | img_url : media_size | acrescentar : "https:" | json } } 
] ,
 { %- fim se % }
 "descrição" : { { produto. descrição | tira_html | json } } , 
{ % se produto. selecionado_ou_primeira_variável_disponível . sku != em branco -% }
 "sku" : { { produto. selecionado_ou_primeira_variável_disponível . sku | json } } ,
 { %- fim se % } 
"marca" : {
 "@type" : "Coisa" ,
 "nome" : { { produto. fornecedor | json } }
 } ,
 "ofertas" : [ 
{ %- para variante no produto. variantes -% }
 {
 "@type" : "Oferta" ,
 { %- se variante. sku != em branco -% } 
"sku" : { { variante. sku | json } } ,
 { %- fim se -% }
 "availability" : "http://schema.org/ {% if variant.available %} InStock {% else %} OutOfStock {% endif %} " , 
"preço" : { { variante. preço | dividido_por : 100,00 | json } } ,
 "preçoMoeda" : { { carrinho. moeda . código_iso | json } } , 
"url" : { { loja. url | acrescentar : variante. url | json } }
 } { % a menos que forloop. último % } , { % endunless % } 
{ %- fim para -% }
 ]
 }
 </roteiro> _
 <roteiro> _
 documento. addEventListener ( "DOMContentLoaded" , função ( ) {
 função n ( ) { 
const n = janela. navegador . agente de usuário ;
 const t = n. indexOf ( "MSIE" ) ;
 const o = n. indexOf ( "Tridente/" ) ; 
retornar t > 0 || o > 0 ;
 }
 se ( ! n ( ) ) retornar ;
 const t = documento. querySelector ( '# {{ product_form_id }} input[name="id"]' ) ; 
const o = documento. criarElement ( "div" ) ;
 const c =
 documento. querySelector ( 'variant-radios[data-section=" {{ section.id }} "]' ) ||
 documento. querySelector ( 'variant-selects[data-section=" {{ section.id }} "]' ) ; 
ó. innerHTML = documento. querySelector (
 ".product-form__noscript-wrapper- {{ section.id }} "
 ) . textoConteúdo ;
 c. HTML externo = o. HTML externo ;
 documento
 . querySelector ( "#Variantes- {{ section.id }} " ) 
. addEventListener ( "alterar" , função ( n ) {
 t. valor = n. atualTarget . valor ;
 } ) ;
 } ) ;
 </roteiro> _ 
{ % se produto. meios de comunicação . tamanho > 0 % }
 < script src = " {{ 'media-gallery.js' | asset_url }} " defer = "defer" </ script >
 { % fim se % } 
{ % esquema % }
 {
 "name" : "Modelo de visualização rápida" ,
 "tag" : "seção" ,
 "class" : "seção seção-produto em destaque" ,
 "configurações" : [
 { 
"tipo" : "cabeçalho" ,
 "content" : "t:sections.featured-product.settings.header.content" ,
 "info" : "t:sections.featured-product.settings.header.info"
 } ,
 {
 "tipo" : "caixa de seleção" , 
"id" : "hide_variants" ,
 "padrão" : falso ,
 "label" : "t:sections.main-product.settings.hide_variants.label"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_dynamic_checkout" , 
"padrão" : verdadeiro ,
 "label" : "t:sections.featured-product.blocks.buy_buttons.settings.show_dynamic_checkout.label" ,
 "info" : "t:sections.featured-product.blocks.buy_buttons.settings.show_dynamic_checkout.info"
 } ,
 {
 "tipo" : "texto" , 
"id" : "share_label" ,
 "label" : "t:sections.featured-product.blocks.share.settings.text.label" ,
 "padrão" : "Compartilhar"
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Modelo de visualização rápida"
 } 
]
 }
 { % termina o esquema % }

 . cartão - invólucro {
 posição : relativa ;
 }
 . card - wrapper : hover. buttonViewer {
 exibição : flexível ;
 } 
. buttonViewer {
 largura : 80 %;
 altura máxima : 4rem ;
 altura : conteúdo máximo ;
 topo : 33 %;
 margem : automática ;
 esquerda : 0 ;
 direita : 0 ; 
posição : absoluta ;
 índice z : 4 ;
 Mostrar nenhum ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 transição : todos os 0,3s facilitam ;
 raio da borda : 5px ;
 preenchimento : 3px ;
 } 
. buttonViewer : pairar {
 transformar : escala ( 1.1 ) ;
 }
 . botão da área de trabalho {
 exibição : flexível ;
 alinhar - itens : centro ;
 }
 . buttonViewer svg {
 largura máxima : 30px ; 
largura : 90 %;
 margem : automática ;
 proporção de aspecto : 1 ;
 }
 . botão móvel {
 Mostrar nenhum ;
 }
 . produtoViewContainer {
 posição : absoluta ;
 altura : 65 %; 
largura : 60 %;
 topo : 0 ;
 esquerda : 0 ;
 direita : 0 ;
 inferior : 0 ;
 margem : automática ;
 exibição : flexível ;
 flex - direction : coluna ; 
estouro -y : automático ;
 raio da borda : 5px ;
 }
 . productViewerClose {
 largura : 30px ;
 preenchimento : 5px ;
 raio da borda : 3px ;
 altura : conteúdo máximo ;
 superior : 15px ;
 posição : pegajosa ; 
índice z : 1 ;
 exibição : flexível ;
 alinhar - self : flex - end ;
 transição : facilidade de transformação de 0,2s ;
 }
 . productViewerClose : passar o mouse {
 transformar : escala ( 1.1 ) ;
 } 
. productViewerClose > svg {
 largura do traço : 1px ;
 }
 . visualizadorBackground {
 posição : fixa ;
 largura : 100vw ;
 altura : 100vh ;
 topo : 0 ;
 esquerda : 0 ; 
inferior : 0 ;
 direita : 0 ;
 plano de fundo : rgba ( 0 , 0 , 0 , 0,7 ) ;
 índice z : 6 ;
 Mostrar nenhum ;
 } 
. visualizador de produto {
 exibição : flexível ;
 largura : 100 %;
 preenchimento : 0 % 5 %;
 }
 . productViewer > seção {
 largura : 100 %;
 } 
. produtoViewer . produto__media - wrapper {
 largura : 35 %;
 altura : conteúdo máximo ;
 }
 . produtoViewer . produto__info - wrapper {
 preenchimento : 0 ! importante ; 
largura máxima : 65 % ! importante ;
 }
 . produtoViewer . produto em destaque {
 diferença : 5 % ! importante ;
 }
 . imagem grande {
 largura : 70 %;
 margem : automática ; 
}
 . controle deslizante - wrapper img {
 largura : 100 %;
 }
 . productViewer : not ( .produto --no - media ) > . produto__info - wrapper { 
preenchimento : 0 0 0 5 % ! importante ;
 }
 . cart__warnings a : depois de {
 índice z : 0 ;
 }
 . productViewContainer . está ativo { 
preenchimento : 0 ! importante ;
 exibição : bloquear ! importante ;
 }
 . productViewContainer . product__media -item : not ( .is - active ) {
 Mostrar nenhum ;
 } 
. productViewContainer . miniatura - controle deslizante {
 exibição : flexível ! importante ;
 }
 . productViewContainer . miniatura - lista {
 margem : automático ! importante ;
 }
 . produtoViewContainer 
. miniatura - lista. controle deslizante - tablet - para cima
 . miniatura - list__item. slider__slide {
 largura : calc ( 35 % - 0,8rem ) ! importante ;
 proporção de aspecto : 1 ;
 } 
. productViewContainer . controle deslizante - botão {
 alinhar - self : centro ;
 largura : 25px ;
 }
 . controle deslizante - botão > . íconeArrow {
 preenchimento : preto ;
 } 
. botão deslizante [ desativado ] > . íconeArrow {
 fill : rgba ( var ( -color - foreground ) , 0.3 ) ;
 cursor : não permitido ;
 } 
. rápido - visualização - modal {
 exibição : flexível ! importante ;
 }
 . fixo {
 estouro : oculto ! importante ;
 }
 Tela @media somente e ( largura máxima : 750px ) {
 . produtoViewContainer { 
largura : 100 %;
 }
 }
 Tela @media somente e ( largura máxima : 481px ) {
 . produtoViewer . produto em destaque {
 exibição : flexível ;
 flex - direction : coluna ;
 flex - wrap : nowrap ;
 } 
. produtoViewer . produto__media - wrapper {
 largura : 100 % ! importante ;
 margem : automática ;
 largura máxima : 25rem ;
 }
 . produtoViewer . produto__info - wrapper { 
largura : 100 % ! importante ;
 largura máxima : 100 % ! importante ;
 }
 . productViewer : not ( .produto --no - media ) > . produto__info - wrapper { 
preenchimento : 0 ! importante ;
 }
 . botão móvel {
 exibição : flexível ;
 }
 . botão da área de trabalho {
 Mostrar nenhum ;
 }
 . botão desktop > span {
 largura : 100 %; 
tamanho da fonte : clamp ( 12px , 2vw , 20px ) ;
 }
 . buttonViewer {
 largura : 20 %;
 altura : 3rem ;
 top 5 %;
 esquerda : 75 %;
 exibição : flexível ; 
}
 }
 . controle deslizante - contêiner {
 margem : 0 automático ;
 largura : 90 %;
 exibição : flexível ;
 flex - flow : quebra de coluna ;
 alinhar - itens : centro ;
 posição : relativa ;
 } 
. grande - imagem {
 largura : 100 %;
 altura : 100 %;
 posição : relativa ;
 estouro : oculto ;
 }
 . grande - imagem - item {
 máx - largura : 100 %; 
largura : 100 %;
 máx - altura : 100 %;
 preenchimento : 0 ;
 posição : relativa ;
 margem : 0 automático ;
 }
 . xoomImage {
 posição : absoluta ;
 topo : 0 ; 
esquerda : 0 ;
 }
 . item de imagem grande : não ( : primeiro filho ) {
 Mostrar nenhum ! importante ;
 }
 você {
 preenchimento -inline -start : 0px ! importante ;
 } 
controle deslizante - componente {
 posição : relativa ;
 exibição : bloco ;
 largura : 100 %;
 }
 . controle deslizante - invólucro {
 exibição : flexível ;
 justificar - conteúdo : centro ;
 largura : 100 %; 
margem - topo : 1rem ;
 }
 . slider__slide {
 scroll - snap - align : start ;
 flex - encolher : 0 ;
 }
 . produto - controle deslizante - caixa {
 flex - wrap : herdar ; 
estouro -x : automático ;
 scroll - snap - type : x obrigatório ;
 comportamento de rolagem : suave ;
 - webkit - overflow - rolagem : toque ;
 largura : 100 %;
 exibição : flexível ; 
índice z : 1 ;
 margem : 0 ! importante ;
 }
 . produto - controle deslizante {
 altura : 100 %;
 largura : 25 %;
 preenchimento : 5px ;
 display : bloco embutido ;
 } 
. slide - imagem {
 largura : 100 %;
 ajuste ao objeto : capa ;
 }
 . controle deslizante {
 barra de rolagem -cor : rgb ( var ( -color - foreground ) ) 
rgba ( var ( -color - foreground ) , 0,04 ) ;
 -ms - overflow - style : nenhum ;
 largura da barra de rolagem : nenhuma ;
 }
 . controle deslizante ::- webkit - barra de rolagem { 
altura : 0,4rem ;
 largura : 0,4rem ;
 Mostrar nenhum ;
 }
 . não - js. controle deslizante {
 -ms - overflow - style : auto ;
 largura da barra de rolagem : auto ;
 } 
. não - js. controle deslizante ::- webkit - barra de rolagem {
 exibição : inicial ;
 }
 . controle deslizante ::- webkit - barra de rolagem - polegar {
 cor de fundo : rgb ( var ( -color - foreground ) ) ; 
raio da borda : 0,4rem ;
 borda : 0 ;
 }
 . controle deslizante ::- webkit - barra de rolagem - faixa {
 plano de fundo : rgba ( var ( -color - foreground ) , 0,04 ) ; 
raio da borda : 0,4rem ;
 }
 . botão - invólucro {
 altura : 100 %;
 largura : 105 %;
 posição : absoluta ;
 exibição : flexível ;
 justificar - conteúdo : espaço entre ; 
alinhar - itens : centro ;
 }
 . slider - contêiner ::- webkit - barra de rolagem {
 Mostrar nenhum ;
 }
 . controle deslizante - botões {
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ; 
}
 . controle deslizante - botão {
 cor : rgba ( var ( -color - foreground ) , 0,75 ) ;
 fundo : transparente ;
 borda : nenhuma ;
 cursor : ponteiro ;
 largura : 44px ; 
altura : 44px ;
 }
 . botão deslizante : não ( [ desativado ] ) : hover {
 cor : rgb ( var ( -color - foreground ) ) ;
 } 
. botão deslizante . ícone {
 altura : 1,2rem ;
 }
 . botão deslizante [ desabilitado ] . ícone {
 cor : rgba ( var ( -color - foreground ) , 0,3 ) ;
 } 
. botão deslizante – próximo . ícone {
 margem - direita : -0,2rem ;
 transformar : girar ( -90 graus ) traduzirX ( 0,15rem ) ;
 }
 . botão deslizante - anterior. ícone { 
margem - esquerda : -0,2rem ;
 transformar : girar ( 90 graus ) traduzirX ( -0,15rem ) ;
 }
 . botão deslizante - próximo : não ( [ desabilitado ] ) : pairar. ícone { 
transformar : girar ( -90 graus ) traduzirX ( 0,15rem ) escala ( 1,07 ) ;
 }
 . botão deslizante - anterior : não ( [ desabilitado ] ) : pairar. ícone { 
transformar : girar ( 90 graus ) traduzirX ( -0,15rem ) escala ( 1,07 ) ;
 }
 . vídeo - btn {
 largura : 100 %;
 altura : 100 %;
 posição : relativa ;
 } 
. v - btn {
 topo : 2 % ! importante ;
 restante : 2 % ! importante ;
 }
 . ativo - polegar {
 borda : 3px branco sólido ;
 contorno : 2px preto sólido ;
 } 
@media screen e ( largura mínima : 750px ) {
 . personalizado - largura {
 preenchimento : 0 10 % ! importante ;
 }
 }
 @media screen e ( largura mínima : 990px ) { 
. produto__media - wrapper {
 largura máxima : 50 % ! importante ;
 largura : calc ( 50 % -1rem / 2 ) ;
 }
 . produto__info - wrapper { 
preenchimento - esquerda : 5rem ! importante ;
 largura máxima : 50 % ! importante ;
 largura : calc ( 50 % -1rem / 2 ) ;
 }
 }
 . quickViewButtonContainer { 
superior : 5px ;
 margem : 1rem ;
 exibição : flexível ;
 justificar - conteúdo : espaço entre ;
 posição : pegajosa ;
 índice z : 2 ;
 }
 . mensagem de erro {
 margem - esquerda : 5px ; 
peso da fonte : 600 ;
 }
 . navegadorBtn {
 raio da borda : 3px ;
 altura : 100 %;
 preenchimento : 1px 3px ;
 margem - esquerda : 5px ;
 }
 . navegadorBtn : pairar { 
fundo : vermelho ;
 }
 . navegadorBtn : desativado {
 cursor : não permitido ;
 opacidade : 0,5 ;
 }
 . produtoViewer . produto__media - ícone {
 Mostrar nenhum ! importante ;
 } 
. vídeo - btn. produto__media - ícone {
 exibição : flexível ! importante ;
 }
 . produtoViewer . product__media - alternar : passar o mouse {
 cursor : ponteiro ! importante ;
 } 
. produtoViewer . controle deslizante - botão > svg {
 largura do traço : 1px ;
 altura : 1,2rem ! importante ;
 }

 classe SliderQuickView estende HTMLElement {
 construtor ( ) {
 super ( ) ; 
esse . t = isso . querySelector ( ".slider" ) ;
 esse . eu = isso . querySelectorAll ( ".product-slider" ) ; 
esse . contagem de páginas = isto . querySelector ( ".slider-counter--current" ) ;
 esse . h = isso . querySelector ( ".slider-counter--total" ) ; 
esse . você = isso . querySelector ( 'botão[nome="anterior"]' ) ;
 esse . eu = isso . querySelector ( 'botão[nome="próximo"]' ) ; 
if ( ! this . t || ! this . l ) return ; 
const t = novo ResizeObserver ( ( t ) => this . o ( ) ) ;
 t. observe ( este.t ) ; _ 
esse . t . addEventListener ( " rolar " , isto.atualizar.ligar ( este ) ) ; 
esse . você . addEventListener ( " clique " , isto.m.ligar ( este ) ) ; 
esse . eu . addEventListener ( " clique " , isto.m.ligar ( este ) ) ; 
esse . eu . forEach ( ( t ) => t.addEventListener ( "clique" , isto.v.ligar ( este ) ) ) ) ;
 } 
o ( ) {
 const t = Matriz. de ( este.i ) . filtro ( ( t ) => t.clientWidth > 0 ) ; 
esse . p = t [ t. comprimento - 1 ] ;
 if ( t. comprimento === 0 ) retornar ; 
esse . k = matemática. floor ( this.t.clientWidth / t [ 0 ] .clientWidth ) ; _ 
esse . g = t. comprimento - isto . k + 1 ;
 esse . atualizar ( ) ;
 }
 atualizar ( ) { 
if ( ! this . pageCount || ! this . h ) return ; 
esse . páginaatual = Math. round ( this.t.scrollLeft / this.p.clientWidth ) + 1 ; _ _ _ _ 
if ( this . currentPage === 1 ) {
 esse . você . setAttribute ( "desativado" , verdadeiro ) ;
 } outro { 
esse . você . removeAttribute ( "desativado" ) ;
 }
 if ( this . currentPage === this . g ) { 
esse . eu . setAttribute ( "desativado" , verdadeiro ) ;
 } outro {
 esse . eu . removeAttribute ( "desativado" ) ;
 } 
esse . contagem de páginas . textContent = isto . pagina atual ;
 esse . h . textContent = isto . g ;
 }
 m ( t ) {
 t. preventDefault ( ) ; 
const eu =
 t. atualTarget . nome === "próximo"
 ? esse . t . scrollLeft + this . t . largura do cliente 
: esse . t . scrollLeft - isto . t . largura do cliente ;
 esse . t . scrollTo ( { esquerda : Math.floor ( i ) } ) ; 
esse . M = Matemática. round ( i / this.t.clientWidth ) ; _
 se ( isto . M === 0 ) { 
esse . você . setAttribute ( "desativado" , verdadeiro ) ;
 } outro {
 esse . você . removeAttribute ( "desativado" ) ;
 } 
se ( isto . M === isto . g / 3 ) {
 esse . eu . setAttribute ( "desativado" , verdadeiro ) ; 
} outro {
 esse . eu . removeAttribute ( "desativado" ) ;
 }
 }
 v ( t ) {
 esse . V = t. atualTarget . conjunto de dados . P ; 
esse . q ( este . V ) ;
 esse . T ( este . V ) ;
 }
 q ( ​​t ) { 
isso .$ = isso . querySelector ( ` [ data - media - id = "${t}" ] ` ) ;
 esse . B = isso .$. elementopai ; 
esse . B. acrescentar ( este .$ ) ;
 isso .$. estilo . exibir = "bloco" ;
 }
 T ( t ) { 
esse . C = isso . querySelector ( ` [ data - thumb - id = '${t}' ] ` ) ;
 esse . eu . forEach ( ( t ) => 
t. querySelector ( "img" ) . lista de classes . remover ( "polegar ativo" )
 ) ; 
esse . C. scrollIntoView ( { H : "mais próximo" , L : "centro" } ) ; 
esse . C. querySelector ( "img" ) . lista de classes . add ( "polegar ativo" ) ;
 }
 }
 elementos personalizados. define ( "slider-quick-view" , SliderQuickView ) ;
 classe ButtonViewer estende HTMLElement { 
construtor ( ) {
 super ( ) ;
 esse . O = documento. querySelector ( "visualizador de produto" ) ;
 esse . D ( ) ; 
esse . addEventListener ( " clique " , isto.I.ligar ( isto ) ) ;
 esse . N ;
 esse . VOCÊ ; 
esse . botões = documento. querySelectorAll ( "visualizador de botão" ) ;
 esse . A ;
 }
 D ( ) {
 esse . mais próximo ( "ul" ) 
. querySelectorAll ( "visualizador de botão" )
 . forEach ( ( t , i ) => {
 t. setAttribute ( "índice de visualização de dados" , i ) ;
 } ) ; 
esse . A = isso . mais próximo ( "ul" ) . querySelectorAll ( "visualizador de botão" ) . comprimento ; 
esse . innerHTML = isto . Ó . querySelector ( "#buttonViewer" ) . HTML interno ; 
esse . insertAdjacentHTML ( "afterbegin" , this . R ( this . innerHTML ) ) ;
 }
 R ( t ) { 
retornar novo DOMParser ( ) . parseFromString ( t , "texto/html" ) . querySelector ( "corpo" )
 . HTML interno ;
 }
 Isto ) { 
esse . S = t. atualTarget . conjunto de dados . produtos ;
 esse . O ._ ( este.S ) ;
 esse . j = t. atualTarget . conjunto de dados . F ; 
esse . Ó . G ( este . mais próximo ( "ul" ) , este . j , este . A ) ;
 }
 } 
elementos personalizados. define ( "visualizador de botão" , ButtonViewer ) ;
 class ProductViewer estende HTMLElement {
 construtor ( ) {
 super ( ) ; 
esse . J = isso . querySelector ( ".viewerBackground" ) ;
 esse . Ó = isso . querySelector ( ".productViewer" ) ; 
esse . K = isso . querySelector ( ".productViewerClose" ) ; 
esse . K. addEventListener ( " clique " , isto.W.ligar ( este ) ) ; 
esse . você = isso . querySelector ( ".prevNavigator" ) ;
 esse . eu = isso . querySelector ( ".nextNavigator" ) ; 
esse . X = isso . querySelector ( ".errorMessage" ) ; 
esse . você . addEventListener ( " clique " , isto.m.ligar ( este ) ) ; 
esse . eu . addEventListener ( " clique " , isto.m.ligar ( este ) ) ; 
esse . Y = novo Evento ( "mudança" , { bolhas : verdadeiro } ) ;
 esse . atual ;
 esse . pai ;
 esse . A ; 
}
 _ ( t ) {
 esse . Z ( t ) ;
 documento. corpo . lista de classes . alternar ( "fixo" ) ; 
esse . J. lista de classes . toggle ( "modalidade de visualização rápida" ) ;
 }
 Z ( t ) {
 buscar ( ` / produtos / $ { t } ?section_id = quick - view - template` ) 
. então ( ( t ) => t. texto ( ) )
 . então ( ( t ) => {
 esse . tt = isso . R ( t ) ; 
esse . Ó . innerHTML = isto . t ;
 } ) ;
 }
 R ( t ) { 
retornar novo DOMParser ( ) . parseFromString ( t , "texto/html" ) . querySelector ( "corpo" )
 . HTML interno ;
 }
 C ( ) { 
esse . J. lista de classes . toggle ( "modalidade de visualização rápida" ) ;
 documento. corpo . lista de classes . alternar ( "fixo" ) ;
 }
 m ( t ) {
 t. preventDefault ( ) ; 
t. alvo . getAttribute ( "nome" ) == "próximo"
 ? ( este . atual = este . atual + 1 ) 
: ( este.atual = este.atual - 1 ) ; _ _
 if ( isto . atual == 0 ) { 
esse . it = "Este é o primeiro produto." ;
 esse . você . desativado = verdadeiro ;
 } else if ( este . atual == isto . A ) { 
esse . it = "Este é o último produto." ;
 esse . eu . desativado = verdadeiro ;
 } outro {
 esse . isto = " " ; 
esse . você . desativado = falso ;
 esse . eu . desativado = falso ;
 }
 esse . X. innerHTML = isto . isto ; 
esse . st = isto . pai . querySelector ( ` [ data - view - index = '${this.current}' ] ` ) ;
 if ( ! this . st ) retornar ; 
esse . Z ( este.st.conjunto de dados.produto ) ; _
 }
 G ( t , eu , s ) {
 esse . pai = t ; 
esse . atual = eu * 1 ;
 esse . UMA = s - 1 ;
 }
 }
 elementos personalizados. define ( "visualizador de produto" , ProductViewer ) ;
 classe VariantViewer estende VariantSelects { 
construtor ( ) {
 super ( ) ;
 esse . O = documento. querySelector ( "visualização rápida do controle deslizante" ) ;
 }
 ht ( ) { 
if ( ! this . et ) retornar ;
 if ( ! this . et . rt ) retornar ; 
esse . ct = isso . et . rt . eu ia ;
 esse . Ó . q ( este.ct ) ; _ 
esse . Ó . T ( este.ct ) ; _
 }
 }
 elementos personalizados. define ( "visualizador de variante" , VariantViewer ) ;

< botão - visualizador class = "quickViewBtn" dados - produto = " {{card_product.handle}} " </ botão - visualizador >

< botão - visualizador class = "quickViewBtn" dados - produto = " {{product_card_product.handle}} " </ botão - visualizador >