Controle deslizante de imagem de produto vertical para Shopify Dawn Theme 2.5 e inferior

 { % comment % } tema - verificar - desabilitar TemplateLength { % endcomment % } 
{ { 'seção-principal-produto.css' | URL_do_asset | folha_de_estilo } }
 { { 'componente-acordeão.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 } }
 { { 'produto-slider.css' | URL_do_asset | folha_de_estilo } }
 { { 'classificação do componente.css' | URL_do_asset | folha_de_estilo } } 
{ { 'component-loading-overlay.css' | URL_do_asset | folha_de_estilo } }

 < link rel = "stylesheet" href = " {{ 'component-deferred-media.css' | asset_url }} " media = "print" onload = "this.media='all'" >
 
< script src = " {{ 'product-form.js' | asset_url }} " defer = "defer" </ script >

 { %- 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 -% }

 < classe de seção = "largura da página" >
 < div class = "grade de produto grid--1-col {% if product.media.size > 0 %} grid--2-col-tablet {% else %} produto--no-media {% endif %} " > 
< div class = "grid__item produto__media-wrapper" >
 < vertical - controle deslizante - componente >
 < div class = "slider-container" style = "flex-direction: {{section.settings.slider_placement}} " > 
<a class = "botão pular para link de conteúdo oculto visualmente" href = "#ProductInfo- {{section.id }} " > _ _ _ _ {{ section.id }} _
 { { 'acessibilidade.skip_to_product_info' | } }
 </a> _ 
< div class = "mainContainer" >
 < ul class = "mainBox" >
 { %- para mídia no produto. meios de comunicação -% }
 < li
 classe = " 
mainBoxItem produto__media-item grid__item slider__slide
 {% if media.media_type != 'image' %} hide-modal {% endif %} {% if media.media_type == 'image' %} image-zoom {% endif %}
 "
 dados - mídia - id = " {{ section.id }} - {{ media.id }} "
 dados - mídia - índice = " {{forloop.index}} "
 > 
{ % renderizar 'miniatura do produto' ,
 mídia : mídia ,
 posição : forloop. índice ,
 laço : seção. configurações . ativar_video_looping ,
 modal_id : seção. eu ia ,
 xr_button : verdadeiro 
% }
 </ li >
 { %- fim para -% }
 </ul> _
 < div class = "botões deslizantes no-js-hidden {% if product.media.size < 2 %} small-hide {% endif %} " >
 < botão 
tipo = "botão"
 class = "botão deslizante--anterior"
 nome = "anterior"
 aria - label = " {{ 'accessibility.previous_slide' | t }} "
 >
 { % renderizar 'ícone-caret' % }
 </ botão > 
< div class = "legenda do contador deslizante" >
 < span class = "slider-counter--current" > 1 </ span >
 < span aria - oculto = "true" > / </ span > 
< span class = "visualmente oculto" > { { 'accessibility.of' | t } } </ span >
 < intervalo
 class = "slider-counter--total" 
dados - total = " {% if section.settings.hide_variants %} {{ product.media.size | minus: variant_images.size | plus: 1 }} {% else %} {{ product.media.size }} {% endif %} "
 >
 { % -se seção. configurações . ocultar_variantes -% } 
{ { - produtos. meios de comunicação . tamanho | menos : variante_images. tamanho | mais : 1 - } }
 { %- outro -% } 
{ { - produtos. meios de comunicação . tamanho - } }
 { %- fim se -% }
 </span> _
 </div> _ _
 < botão
 tipo = "botão" 
class = "botão deslizante--próximo"
 nome = "próximo"
 aria - label = " {{ 'accessibility.next_slide' | t }} "
 >
 { % renderizar 'ícone-caret' % }
 </ botão >
 </div> _ _ 
</div> _ _
 < div class = "slider-wrapper thumbContainer" >
 < ul class = "thumbBox slider" role = "lista" > 
{ %- atribuir variante_images = produto. imagens | onde : 'attached_to_variant?' , verdade | mapa : 'src' -% }
 { %- para mídia no produto. meios de comunicação -% }
 < li 
class = "thumbBoxItem produto-slider slider__slide"
 dados - polegar - id = " {{ section.id }} - {{ media.id }} "
 { % se seção. configurações . hide_variants e variante_images contém mídia. fonte % }
 estilo = "display: nenhum;" 
{ % fim se % }
 >
 { % 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 = " {{ thumbnailAlt }} "
 { % se seção. configurações . imagem_quadrada == verdadeiro % }
 estilo = "proporção: 1;"
 { % fim se % }
 > 
</div> _ _
 { % outro % }
 < imagem
 class = "slide-image {% if forloop.first %} active-thumb {% endif %} "
 src = " {{ media.preview_image | img_url: 'large' }} " 
alt = " {{ thumbnailAlt }} "
 { % se seção. configurações . imagem_quadrada == verdadeiro % }
 estilo = "proporção: 1;"
 { % fim se % }
 > 
{ % fim se % }
 </ li >
 { % fim para % }
 </ul> _
 < div class = "button-wrapper {% if product.media.size <= 5 %} oculto {% endif %} " >
 < botão 
tipo = "botão"
 class = "botão deslizante botão deslizante - anterior controle deslizante maior"
 nome = "anterior"
 aria - label = " {{ 'accessibility.previous_slide' | t }} "
 >
 { % renderizar 'ícone-caret' % }
 </ botão > 
< botão
 tipo = "botão"
 class = "botão deslizante botão deslizante - próximo controle deslizante maior"
 nome = "próximo"
 aria - label = " {{ 'accessibility.next_slide' | t }} "
 >
 { % renderizar 'ícone-caret' % } 
</ botão >
 </div> _ _
 </div> _ _
 </div> _ _
 </ vertical - controle deslizante - componente >
 { %- se primeiro_3d_model -% }
 < botão 
class = "botão botão - produto de largura total__xr-button"
 tipo = "botão"
 aria - label = " {{ 'products.product.xr_button_label' | t }} "
 dados - shopify - xr
 dados - shopify - model3d - id = " {{ first_3d_model.id }} " 
dados - shopify - title = " {{ product.title | escape }} "
 dados - shopify - xr - oculto
 >
 { % renderizar 'icon-3d-model' % }
 { { 'produtos.produto.xr_button' | } }
 </ botão > 
{ %- fim se -% }
 </div> _ _
 < div class = "product__info-wrapper grid__item" >
 < div
 id = "ProductInfo- {{ section.id }} " 
class = "product__info-container {% if section.settings.enable_sticky_info %} product__info-container--sticky {% endif %} "
 >
 { %- atribuir product_form_id = 'formulário-produto-' | anexar : seção. eu ia -% }
 
{ %- para bloco na seção. blocos -% }
 { %- bloco de casos . tipo -% }
 { %- quando '@app' -% }
 { % bloco de renderização % } 
{ %- quando 'texto' -% }
 < p
 class = "product__text {% if block.settings.text_style == 'uppercase' %} legenda com espaçamento entre letras {% elsif block.settings.text_style == 'subtitle' %} subtítulo {% endif %} "
 { { bloquear. shopify_atributos } }
 > 
{ { - bloquear. configurações . texto - } }
 </ p >
 { %- quando 'título' -% } 
< h1 classe = "produto__título" { { bloco. shopify_attributes } } >
 { { produtos. título | escapar } }
 </ h1 > 
{ %- quando 'preço' -% }
 < div class = "no-js-hidden" id = "price- {{ section.id }} " { { bloco. 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 -% } 
< div { { bloco. shopify_attributes } } >
 { % -form 'produto' , produto , id : 'produto-formulário-instalação' , classe : 'captura de instalação-grande' -% } 
< tipo de entrada = "oculto" nome = "id" valor = " {{ product.selected_or_first_available_variant.id }} " >
 { { formulário | termos de pagamento } }
 { %- formulário final -% }
 </div> _ _ 
{ %- quando 'descrição' -% }
 { %- se produto. descrição ! = em branco -% }
 < div class = "produto__descrição rte" > 
{ { produtos. descrição } }
 </div> _ _
 { %- fim se -% }
 { %- quando 'custom_liquid' -% } 
{ { bloquear. configurações . líquido_personalizado } }
 { %- quando 'tab_colapsível' -% }
 < div class = "product__accordion acordeão" { { bloco. shopify_attributes } } > 
< detalhes >
 < resumo >
 < div class = "summary__title" >
 { % render 'icon-acordeão' , ícone : bloco. configurações . ícone % } 
< h2 classe = "h4 acordeão__título" >
 { { bloquear. configurações . título | padrão : bloco. configurações . página . título } }
 </ h2 > 
</div> _ _
 { % renderizar 'ícone-caret' % }
 </ resumo >
 < div class = "acordeão__content rte" > 
{ { bloquear. configurações . contente } }
 { { bloquear. configurações . página . contente } }
 </div> _ _
 </ detalhes >
 </div> _ _ 
{ %- quando 'quantity_selector' -% }
 < div class = "produto-form__input produto-form__quantidade" { { bloco. shopify_attributes } } > 
< 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"
 form = "formulário-produto- {{ section.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> _ _
 { %- quando 'pop-up' -% }
 < modal - abridor
 class = "produto-popup-modal__opener no-js-hidden"
 dados - modal = "#PopupModal- {{ block.id }} " 
{ { bloquear. shopify_atributos } }
 >
 < botão
 id = "ProductPopup- {{ block.id }} "
 class = "link do produto-popup-modal__button"
 tipo = "botão"
 aria - haspopup = "diálogo"
 > 
{ { bloquear. configurações . texto | padrão : bloco. configurações . página . título } }
 </ botão >
 </ modal - abridor > 
<a href = "{{block.settings.page.url }}" class = "product-popup-modal__button link no-js" > _ {{ block.settings.page.url }} _ _ _ _
 { { - bloquear. configurações . texto - } }
 </a> _ 
{ %- quando 'compartilhar' -% }
 < compartilhar - botão classe = "botão de compartilhamento" { { bloco. shopify_attributes } } >
 < classe de botão = "botão de compartilhamento__botão oculto" > 
{ % renderizar 'compartilhamento de ícone' % }
 { { bloquear. configurações . compartilhar_rótulo | escapar } }
 </ botão >
 < detalhes >
 < classe de resumo = "share-button__button" > 
{ % renderizar 'compartilhamento de ícone' % }
 { { bloquear. configurações . compartilhar_rótulo | escapar } }
 </ resumo > 
< div id = "Product-share- {{ section.id }} " class = "share-button__fallback motion-reduce" >
 < div classe = "campo" > 
< span id = "ShareMessage- {{ section.id }} " class = "share-button__message hidden" role = "status" >
 </span> _
 < entrada
 tipo = "texto"
 classe = "campo__input" 
id = "url"
 valor = " {{ shop.url | append: product.url }} "
 espaço reservado = " {{ 'general.share.share_url' | t }} "
 onclick = "this.select();"
 somente leitura
 > 
< label class = "field__label" for = "url" > { { 'general.share.share_url' | t } } </ rótulo >
 </div> _ _ 
< classe de botão = "share-button__close oculto no-js-hidden" >
 { % renderizar 'fechar ícone' % } 
< span class = "visualmente oculto" > { { 'general.share.close' | t } } </ span >
 </ botão >
 < classe de botão = "share-button__copy no-js-hidden" > 
{ % renderizar 'área de transferência de ícone' % }
 < span class = "visualmente oculto" > { { 'general.share.copy_to_clipboard' | t } } </ span >
 </ botão > 
</div> _ _
 </ detalhes >
 </ compartilhar - botão >
 < script src = " {{ 'share.js' | asset_url }} " defer = "defer" </ script >
 { %- quando 'variant_picker' -% } 
{ %- a menos que produto. has_only_default_variant -% }
 { % -se bloco. configurações . picker_type == 'botão' -% }
 < variante - rádios
 class = "no-js-hidden" 
dados - seção = " {{ section.id }} "
 dados -url = " {{ product.url }} "
 { { bloquear. shopify_atributos } }
 >
 { %- para opção no produto. opções_com_valores -% } 
< fieldset class = "js product-form__input" >
 < classe de legenda = "form__label" > { { opção. nome } } </ legenda > 
{ %- para valor na opção. valores -% }
 < entrada
 tipo = "rádio"
 id = " {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} "
 nome = " {{ option.name }} " 
valor = " {{ value | escape }} "
 form = "formulário-produto- {{ section.id }} "
 { % se opção. valor_selecionado == valor % }
 verificado
 { % fim se % }
 > 
< rótulo para = " {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} " >
 { { valor } }
 </ rótulo >
 { %- fim para -% }
 </ conjunto de campos > 
{ %- fim para -% }
 < tipo de script = "aplicativo/json" >
 { { produtos. variantes | json } }
 </roteiro> _
 </ variante - rádios > 
{ %- outro -% }
 < variante - seleciona
 class = "no-js-hidden"
 dados - seção = " {{ section.id }} "
 dados -url = " {{ product.url }} " 
{ { 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 }} ]" 
form = "formulário-produto- {{ section.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 - seleciona > 
{ %- fim se -% }
 { %- sem fim -% }

 < 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" >
 { %- 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> _
 { %- quando 'buy_buttons' -% }
 < div { { bloco. shopify_attributes } } > 
< 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'
 -% }
 < tipo de entrada = "oculto" nome = "id" valor = " {{ product.selected_or_first_available_variant.id }} " > 
< div class = "produto-form__buttons" >
 < botão
 tipo = "enviar"
 nome = "adicionar"
 class = "product-form__submit button button - largura total {% if block.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 bloco. configurações . show_dynamic_checkout -% }
 { { formulário | botão_pagamento } }
 { %- fim se -% }
 </div> _ _ 
{ %- formulário final -% }
 </ produto - formulário >
 { { 'component-pickup-availability.css' | URL_do_asset | folha_de_estilo } }
 { %- atribuir pick_up_availabilities = produto. selecionado_ou_primeira_variável_disponível . store_availabilities 
| onde : 'pick_up_enabled' , verdadeiro
 -% }

 < retirada - disponibilidade
 class = "product__pickup-availabilities no-js-hidden" 
{ % se produto. selecionado_ou_primeira_variável_disponível . disponível e pick_up_availabilities. tamanho > 0 % }
 disponível
 { % fim se % }
 dados - base - url = " {{ shop.url }} {{ routes.root_url }} " 
dados - variante - id = " {{ product.selected_or_first_available_variant.id }} "
 dados - tem - somente - padrão - variante = " {{ product.has_only_default_variant }} "
 >
 < modelo > 
< pickup - disponibilidade - classe de visualização = "pickup-availability-preview" >
 { % renderizar 'ícone indisponível' % }
 < div class = "informações de disponibilidade de coleta" > 
< p class = "caption-large" > { { 'products.product.pickup_availability.unavailable' | t } } </ p >
 < botão class = "link do botão de disponibilidade de retirada link--texto sublinhado-link" > 
{ { 'produtos.produto.pickup_availability.refresh' | } }
 </ botão >
 </div> _ _
 </ retirada - disponibilidade - visualização >
 </ modelo > 
</ retirada - disponibilidade >
 </div> _ _

 < script src = " {{ 'pickup-availability.js' | asset_url }} " defer = "defer" </ script >
 { %- quando 'classificar' -% } 
{ %- 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 -% }
 { %- fim -% }
 { %- fim para -% }
 </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 variante_images contém mídia. fonte
 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 >
 { % atribuir pop-ups = seção. blocos | onde : 'tipo' , 'pop-up' % }
 { %- para bloqueio em pop-ups -% } 
< modal - dialog id = "PopupModal- {{ block.id }} " class = "product-popup-modal" { { block. shopify_attributes } } >
 < div
 função = "diálogo"
 aria - label = " {{ block.settings.text }} " 
aria -modal = "verdadeiro"
 class = "produto-popup-modal__content"
 tabindex = "-1"
 >
 < botão
 id = "ModalClose- {{ block.id }} "
 tipo = "botão"
 class = "produto-popup-modal__toggle" 
aria - label = " {{ 'accessibility.close' | t }} "
 >
 { % renderizar 'fechar ícone' % }
 </ botão >
 < div class = "produto-popup-modal__content-info" > 
< h1 classe = "h2" > { { bloco. configurações . página . título } } </ h1 >
 { { bloquear. configurações . página . contente } }
 </div> _ _ 
</div> _ _
 </ modal - caixa de diálogo >
 { %- fim para -% }
 </ seção >

 { % javascript % }
 classe ProductModal estende ModalDialog {
 construtor ( ) { 
super ( ) ;
 }
 esconder ( ) {
 super. esconder ( ) ;
 }
 mostrar ( e ) {
 super. mostrar ( e ) ;
 esse . mostrarActiveMedia ( ) ; 
}
 mostrarActiveMedia ( ) {
 esse . querySelectorAll (
 ` [ dados - mídia - id ] : não ( [ dados - mídia - id = "${this.openedBy.getAttribute(
 " dados - mídia - id " 
)}" ] ) `
 ) . forEach ( ( e ) => {
 e. lista de classes . remover ( "ativo" ) ;
 } ) ;
 const e = isto . querySelector ( 
` [ dados - mídia - id = "${this.openedBy.getAttribute(" dados - mídia - id ")}" ] `
 ) ;
 const t = e. querySelector ( "modelo" ) ;
 const o = t ? t. conteúdo : nulo ; 
e. lista de classes . adicione ( "ativo" ) ;
 e. scrollIntoView ( ) ;
 const d = isto . querySelector ( '[role="document"]' ) ; 
d. scrollLeft = ( e.largura - d.clientWidth ) / 2 ;
 if ( e. nodeName == "DEFERRED-MEDIA" && o && o. querySelector ( ".js-youtube" ) ) 
e. carregarConteúdo ( ) ;
 }
 }
 elementos personalizados. define ( "produto-modal" , ProdutoModal ) ;
 { % endjavascript % }
 <roteiro> _ 
documento. addEventListener ( 'DOMContentLoaded' , função ( ) {
 função éIE ( ) {
 const ua = janela. navegador . agente de usuário ;
 const msie = ua. indexOf ( 'MSIE' ) ; 
const tridente = ua. indexOf ( 'Tridente/' ) ;

 return ( msie > 0 || tridente > 0 ) ;
 }
 
if ( ! isIE ( ) ) retornar ;
 const HiddenInput = documento. querySelector ( '# {{ product_form_id }} input[name="id"]' ) ;
 const noScriptInputWrapper = documento. criarElemento ( 'div' ) ; 
const varianteSwitcher = documento. querySelector ( 'variant-radios[data-section=" {{ section.id }} "]' ) || documento. querySelector ( 'variant-selects[data-section=" {{ section.id }} "]' ) ; 
noScriptInputWrapper. innerHTML = documento. querySelector ( '.produto-form__noscript-wrapper- {{ section.id }} ' ) . textoConteúdo ;
 varianteSwitcher. outerHTML = noScriptInputWrapper. HTML externo ;
 
documento. querySelector ( '#Variantes- {{ section.id }} ' ) . addEventListener ( 'alterar' , função ( evento ) {
 entrada oculta. valor = evento. atualTarget . valor ;
 } ) ;
 } ) ; 
</roteiro> _
 { %- 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 -% } 
< 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 produto. selecionado_ou_primeira_variável_disponível . destaque_media -% } 
{ %- atribuir media_size = produto. selecionado_ou_primeira_variável_disponível . destaque_media . imagem_de_visualização . largura | acrescentar : 'x' -% }
 "imagem" : [ 
{ { produtos. selecionado_ou_primeira_variável_disponível . destaque_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" : "t:seções.produto principal.nome" ,
 "tag" : "seção" ,
 "class" : "seção de produto espaçada" ,
 "blocos" : [
 {
 "type" : "@app"
 } ,
 { 
"tipo" : "texto" ,
 "nome" : "t:sections.main-product.blocks.text.name" ,
 "configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "texto" , 
"default" : "Bloco de texto" ,
 "label" : "t:sections.main-product.blocks.text.settings.text.label"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "estilo_texto" ,
 "opções" : [ 
{
 "valor" : "corpo" ,
 "label" : "t:sections.main-product.blocks.text.settings.text_style.options__1.label"
 } ,
 {
 "valor" : "legenda" ,
 "label" : "t:sections.main-product.blocks.text.settings.text_style.options__2.label" 
} ,
 {
 "valor" : "maiúsculas" ,
 "label" : "t:sections.main-product.blocks.text.settings.text_style.options__3.label"
 }
 ] ,
 "padrão" : "corpo" , 
"label" : "t:sections.main-product.blocks.text.settings.text_style.label"
 }
 ]
 } ,
 {
 "tipo" : "título" ,
 "nome" : "t:sections.main-product.blocks.title.name" ,
 "limite" : 1
 } , 
{
 "tipo" : "preço" ,
 "nome" : "t:seções.produto principal.blocos.preço.nome" ,
 "limite" : 1
 } ,
 {
 "tipo" : "seletor de quantidade" , 
"name" : "t:sections.main-product.blocks.quantity_selector.name" ,
 "limite" : 1
 } ,
 {
 "tipo" : "variant_picker" ,
 "nome" : "t:sections.main-product.blocks.variant_picker.name" , 
"limite" : 1 ,
 "configurações" : [
 {
 "tipo" : "selecionar" ,
 "id" : "picker_type" ,
 "opções" : [
 { 
"valor" : "suspenso" ,
 "label" : "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__1.label"
 } ,
 {
 "valor" : "botão" ,
 "label" : "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__2.label"
 } 
] ,
 "padrão" : "botão" ,
 "label" : "t:sections.main-product.blocks.variant_picker.settings.picker_type.label"
 }
 ]
 } ,
 {
 "type" : "buy_buttons" , 
"nome" : "t:sections.main-product.blocks.buy_buttons.name" ,
 "limite" : 1 ,
 "configurações" : [
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_dynamic_checkout" , 
"padrão" : verdadeiro ,
 "label" : "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.label" ,
 "info" : "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.info"
 }
 ]
 } ,
 {
 "tipo" : "descrição" , 
"nome" : "t:sections.main-product.blocks.description.name" ,
 "limite" : 1
 } ,
 {
 "tipo" : "compartilhar" ,
 "nome" : "t:sections.main-product.blocks.share.name" ,
 "limite" : 1 , 
"configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "share_label" ,
 "label" : "t:sections.main-product.blocks.share.settings.text.label" ,
 "padrão" : "Compartilhar"
 } ,
 { 
"tipo" : "parágrafo" ,
 "content" : "t:sections.main-product.blocks.share.settings.featured_image_info.content"
 } ,
 {
 "tipo" : "parágrafo" ,
 "content" : "t:sections.main-product.blocks.share.settings.title_info.content"
 }
 ] 
} ,
 {
 "tipo" : "custom_liquid" ,
 "nome" : "t:sections.main-product.blocks.custom_liquid.name" ,
 "configurações" : [
 {
 "tipo" : "líquido" , 
"id" : "custom_liquid" ,
 "label" : "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.label" ,
 "info" : "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.info"
 }
 ]
 } ,
 {
 "type" : "collapsible_tab" , 
"nome" : "t:sections.main-product.blocks.collapsible_tab.name" ,
 "configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "título" ,
 "default" : "Guia recolhível" , 
"info" : "t:sections.main-product.blocks.collapsible_tab.settings.heading.info" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.heading.label"
 } ,
 {
 "type" : "richtext" ,
 "id" : "conteúdo" , 
"label" : "t:sections.main-product.blocks.collapsible_tab.settings.content.label"
 } ,
 {
 "tipo" : "página" ,
 "id" : "página" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.page.label"
 } ,
 { 
"tipo" : "selecionar" ,
 "id" : "ícone" ,
 "opções" : [
 {
 "valor" : "nenhum" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
 } , 
{
 "valor" : "caixa" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
 } ,
 {
 "valor" : "chat_bubble" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label" 
} ,
 {
 "valor" : "marca_de_verificação" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label"
 } ,
 {
 "valor" : "secador" , 
"label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
 } ,
 {
 "valor" : "olho" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label"
 } ,
 { 
"valor" : "coração" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
 } ,
 {
 "valor" : "ferro" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
 } , 
{
 "valor" : "folha" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label"
 } ,
 {
 "valor" : "couro" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label" 
} ,
 {
 "valor" : "bloqueio" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label"
 } ,
 {
 "valor" : "map_pin" , 
"label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label"
 } ,
 {
 "valor" : "calças" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
 } ,
 { 
"valor" : "avião" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label"
 } ,
 {
 "valor" : "preço_etiqueta" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label"
 } , 
{
 "valor" : "ponto_de_interrogação" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
 } ,
 {
 "valor" : "retornar" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label" 
} ,
 {
 "valor" : "régua" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label"
 } ,
 {
 "valor" : "camisa" , 
"label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label"
 } ,
 {
 "valor" : "sapato" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label"
 } ,
 { 
"valor" : "silhueta" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label"
 } ,
 {
 "valor" : "estrela" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label"
 } , 
{
 "valor" : "caminhão" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label"
 } ,
 {
 "valor" : "lavagem" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label" 
}
 ] ,
 "default" : "marca_de_verificação" ,
 "label" : "t:sections.main-product.blocks.collapsible_tab.settings.icon.label"
 }
 ]
 } ,
 {
 "tipo" : "pop-up" , 
"nome" : "t:sections.main-product.blocks.popup.name" ,
 "configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "texto" ,
 "default" : "Texto do link pop-up" , 
"label" : "t:sections.main-product.blocks.popup.settings.link_label.label"
 } ,
 {
 "id" : "página" ,
 "tipo" : "página" ,
 "label" : "t:sections.main-product.blocks.popup.settings.page.label"
 }
 ] 
} ,
 {
 "tipo" : "classificação" ,
 "nome" : "t:sections.main-product.blocks.rating.name" ,
 "limite" : 1 ,
 "configurações" : [
 {
 "tipo" : "parágrafo" , 
"content" : "t:sections.main-product.blocks.rating.settings.paragraph.content"
 }
 ]
 }
 ] ,
 "configurações" : [
 {
 "tipo" : "caixa de seleção" ,
 "id" : "enable_sticky_info" , 
"padrão" : verdadeiro ,
 "label" : "t:sections.main-product.settings.enable_sticky_info.label"
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "t:sections.main-product.settings.header.content" , 
"info" : "t:sections.main-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" : "enable_video_looping" ,
 "padrão" : falso ,
 "label" : "t:sections.main-product.settings.enable_video_looping.label"
 }
 ]
 } 
{ % termina o esquema % }

 . controle deslizante - contêiner {
 margem : 0 automático ;
 estouro : automático ;
 exibição : flexível ;
 lacuna : 10px ;
 posição : relativa ;
 } 
. mainContainer {
 largura : 100 %;
 }
 . mainBox {
 largura : 100 %;
 posição : relativa ;
 estouro : oculto ;
 }
 . mainBoxItem {
 máx - largura : 100 %; 
min - largura : 50 %;
 largura : conteúdo máximo ;
 máx - altura : 100 %;
 preenchimento : 0 ;
 posição : relativa ;
 margem : 0 automático ;
 }
 . xoomImage { 
posição : absoluta ;
 topo : 0 ;
 esquerda : 0 ;
 }
 . mainBoxItem : não ( : primeiro - filho ) {
 Mostrar nenhum ! importante ;
 }
 você { 
preenchimento -inline -start : 0px ! importante ;
 }
 controle deslizante - componente {
 posição : relativa ;
 exibição : bloco ;
 }
 . controle deslizante - invólucro {
 exibição : flexível ;
 flex - direction : coluna ; 
alinhar - itens : centro ;
 }
 . slider__slide {
 scroll - snap - align : start ;
 flex - encolher : 0 ;
 }
 . ThumbBox {
 flex - wrap : herdar ;
 estouro -y : automático ; 
scroll - snap - type : y obrigatório ;
 comportamento de rolagem : suave ;
 - webkit - overflow - rolagem : toque ;
 exibição : flexível ;
 índice z : 1 ;
 flex - direction : coluna ; 
alinhar - itens : centro ;
 margem : 0 ;
 largura : 6vw ;
 altura : 34vw ;
 largura máxima : 85px ;
 altura máxima : calc ( 390px + 5vw ) ;
 largura mínima : 30px ; 
altura mínima : calc ( 215px + 5vw ) ;
 }
 Tela @media somente e ( largura máxima : 750px ) {
 . ThumbBox {
 largura : 12vw ;
 altura : 65vw ;
 preenchimento : 5px ;
 }
 } 
. produto - controle deslizante {
 altura : conteúdo máximo ;
 preenchimento : 10px ;
 display : bloco embutido ;
 proporção de aspecto : 1 ;
 }
 . slide - imagem {
 largura : 100 %; 
altura : conteúdo máximo ;
 ajuste de objeto : contém ;
 proporção de aspecto : 1 ;
 }
 . 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 {
 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 {
 Mostrar nenhum ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }
 . controle deslizante - botão { 
cor : rgba ( var ( -color - foreground ) , 0,75 ) ;
 fundo : transparente ;
 borda : nenhuma ;
 cursor : ponteiro ;
 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 ( 0deg ) traduzirX ( 0,15rem ) ;
 }
 . botão deslizante - anterior. ícone {
 margem - esquerda : -0,2rem ; 
transformar : girar ( 180 graus ) traduzirX ( -0,15rem ) ;
 }
 . botão deslizante - próximo : não ( [ desabilitado ] ) : pairar. ícone { 
transformar : girar ( 0 graus ) traduzirX ( 0,15rem ) escala ( 1,07 ) ;
 }
 . botão - anterior : não ( [ desabilitado ] ) : pairar. ícone { 
transformar : girar ( 90 graus ) traduzirX ( -0,15rem ) escala ( 1,07 ) ;
 }
 . botão - próximo. ícone {
 margem - direita : -0,2rem ; 
transformar : girar ( -90 graus ) traduzirX ( 0,15rem ) ;
 }
 . botão - anterior. ícone {
 margem - esquerda : -0,2rem ;
 transformar : girar ( 90 graus ) traduzirX ( -0,15rem ) ; 
}
 . botão - próximo : não ( [ desabilitado ] ) : pairar. ícone {
 transformar : girar ( -90 graus ) traduzirX ( 0,15rem ) escala ( 1,07 ) ;
 } 
. botão - 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 ) ;
 } 
}
 . mainBox > li : nth -child ( 1 ) > modal - opener > span {
 Mostrar nenhum ! importante ;
 } 
. mainBox > li : nth -child ( 1 ) > modal - opener > botão {
 Mostrar nenhum ! importante ;
 }
 . mainBox > li > modal - abridor > div { 
preenchimento - topo : 0 ! importante ;
 }
 . mainBox > li > modal - abridor > div > img {
 estouro : oculto ;
 posição : relativa ! importante ;
 } 
. ocultar - modal modal - abridor {
 Mostrar nenhum ;
 }
 Tela @media somente e ( largura máxima : 750px ) {
 . mainContainer . controle deslizante - botões {
 exibição : flexível ;
 }
 . controle deslizante - contêiner { 
exibição : bloco ;
 }
 . polegarContainer {
 Mostrar nenhum ;
 }
 . mainContainer . legenda {
 margem : automático 15px ;
 }
 . botão deslizante . ícone {
 altura : 0,7rem ;
 }
 }

 classe VerticalSliderComponent estende HTMLElement {
 construtor ( ) {
 super ( ) ;
 esse . mainContainer = this . querySelector ( ".mainContainer" ) ; 
esse . mainSlider = isto . querySelector ( ".mainBox" ) ;
 esse . sliderContainer = isto . querySelector ( ".thumbContainer" ) ; 
esse . controle deslizante = isto . querySelector ( ".thumbBox" ) ;
 esse . sliderItems = este . querySelectorAll ( ".thumbBoxItem" ) ; 
esse . contagem de páginas = isto . mainContainer . querySelector (
 ".slider-counter--corrente"
 ) ;
 esse . páginaTotal = isto . mainContainer . querySelector ( ".slider-counter--total" ) ; 
esse . prevButtonMain = isto . mainContainer . querySelector (
 'botão[nome="anterior"]'
 ) ;
 esse . nextButtonMain = isto . mainContainer . querySelector (
 'botão[nome="próximo"]'
 ) ; 
esse . prevButton = isto . sliderContainer . querySelector (
 'botão[nome="anterior"]'
 ) ;
 esse . próximoButton = isto . sliderContainer . querySelector ( 'botão[nome="próximo"]' ) ; 
if ( ! this . slider || ! this . nextButton ) return ; 
const resizeObserver = new ResizeObserver ( ( entradas ) => this.initPages ( ) ) ;
 redimensionarObserver. observe ( este.slider ) ; _ 
esse . controle deslizante . addEventListener ( "roda" , ( e ) => e. preventDefault ( ) , {
 passivo : falso ,
 } ) ; 
esse . controle deslizante . addEventListener ( " rolar " , isto.atualizar.ligar ( este ) ) ; 
esse . prevButtonMain . addEventListener ( " clique " , isto.onMainClick.bind ( este ) ) ; 
esse . nextButtonMain . addEventListener ( " clique " , isto.onMainClick.bind ( este ) ) ; 
esse . botão anterior . addEventListener ( " clique " , isto.onButtonClick.bind ( isto ) ) ; 
esse . Próximo botão . addEventListener ( " clique " , isto.onButtonClick.bind ( isto ) ) ;
 esse . sliderItems . forEach ( ( polegar ) => 
dedão. addEventListener ( " clique " , isto.updateImage.bind ( este ) )
 ) ;
 esse . índice = 1 ;
 }
 initPages ( ) { 
const sliderItemsToShow = Array. de ( this.sliderItems ) . filtro (
 ( elemento ) => elemento. altura do cliente > 0
 ) ; 
esse . sliderÚltimoItem = sliderItemsToShow [ sliderItemsToShow. comprimento - 1 ] ;
 if ( sliderItemsToShow.length === 0 ) return ;
 esse . slidesPerPage = Math. chão ( 
esse . controle deslizante . clientHeight / sliderItemsToShow [ 0 ] . altura do cliente
 ) ;
 esse . totalPages = sliderItemsToShow. comprimento - isto . slidesPerPage + 1 ; 
esse . atualizar ( ) ;
 esse . ampliação ( ) ;
 }
 atualizar ( ) { 
if ( ! this . pageCount || ! this . pageTotal ) return ;
 esse . página atual = 
Matemática. round ( this.slider.scrollTop / this.sliderLastItem.clientHeight ) + 1 ; _ _ _ _
 if ( this . currentPage === 1 ) { 
esse . botão anterior . setAttribute ( "desativado" , verdadeiro ) ;
 } outro {
 esse . botão anterior . removeAttribute ( "desativado" ) ;
 } 
if ( this . currentPage === this . totalPages ) {
 esse . Próximo botão . setAttribute ( "desativado" , verdadeiro ) ;
 } outro { 
esse . Próximo botão . removeAttribute ( "desativado" ) ;
 }
 esse . contagem de páginas . textContent = isto . pagina atual ; 
esse . páginaTotal . textContent = isto . páginaTotal . conjunto de dados . total ;
 }
 onButtonClick ( evento ) {
 evento. preventDefault ( ) ;
 esse . slideScrollPosition = 
evento. atualTarget . nome === "próximo"
 ? esse . controle deslizante . scrollTop + 4 * this . sliderLastItem . altura do cliente 
: esse . controle deslizante . scrollTop - 4 * isto . sliderLastItem . altura do cliente ;
 esse . controle deslizante . scrollTo ( { 
topo : Matemática. chão ( este . slideScrollPosition ) ,
 } ) ;
 esse . currSlide = Matemática. redondo (
 esse . slideScrollPosition / this . sliderLastItem . altura do cliente 
) ;
 if ( este . currSlide <= 0 ) {
 esse . botão anterior . setAttribute ( "desativado" , verdadeiro ) ;
 } outro { 
esse . botão anterior . removeAttribute ( "desativado" ) ;
 }
 if ( este . currSlide >= isto . totalPages - 1 ) { 
esse . Próximo botão . setAttribute ( "desativado" , verdadeiro ) ;
 } outro {
 esse . Próximo botão . removeAttribute ( "desativado" ) ;
 }
 } 
onMainClick ( evento ) {
 evento. preventDefault ( ) ;
 esse . totalImage = isto . páginaTotal . conjunto de dados . total ; 
if ( evento. alvo atual . nome == "próximo" ) {
 esse . índice ++;
 if ( this . index > this . totalImage ) { 
esse . índice = 1 ;
 }
 } outro {
 esse . índice --;
 if ( este . índice <= 0 ) { 
esse . índice = isto . imagem total ;
 }
 }
 esse . updatePageCount ( this.index ) ; _ 
esse . novaImagem = esta . querySelector ( ` [ data - media - index = "${this.index}" ] ` ) ;
 if ( ! this.newImage ) retornar ; 
esse . parentData = este . nova imagem . elementopai ;
 esse . parentData . prefixar ( this.newImage ) ; _ 
esse . nova imagem . estilo . exibir = "bloco" ;
 }
 updatePageCount ( índice atual ) {
 esse . contagem de páginas . textContent = índiceAtual ; 
esse . páginaTotal . textContent = isto . páginaTotal . conjunto de dados . total ;
 }
 atualizarImagem ( evento ) {
 esse . imagem clicada = evento. atualTarget . conjunto de dados . polegarId ; 
const novaImagem = documento. querySelector (
 ` [ dados - mídia - id = "${this.clickedImage}" ] `
 ) ;
 const parentData = novaImagem. elementopai ;
 parentData. prefixar ( novaImagem ) ; 
nova imagem. estilo . exibir = "bloco" ;
 esse . sliderItems . forEach ( ( polegar ) =>
 dedão. querySelector ( "img" ) . lista de classes . remover ( "polegar ativo" )
 ) ; 
evento. atualTarget . querySelector ( "img" ) . lista de classes . add ( "polegar ativo" ) ;
 esse . ampliação ( ) ;
 }
 atualizarThumb ( newMedia ) { 
const novoId = novaMedia. conjunto de dados . mediaId ;
 esse . novoThumb = isto . querySelector ( ` [ dados - polegar - id = "${newId}" ] ` ) ; 
esse . polegarLocate = this . novoThumb [ "offsetTop" ] ;
 esse . querySelectorAll ( ".imagem-slide" ) . forEach ( ( polegar ) => 
dedão. lista de classes . remover ( "polegar ativo" )
 ) ;
 esse . querySelector ( ` [ dados - polegar - id = "${newId}" ] > img` ) . lista de classes . adicionar (
 "polegar ativo" 
) ;
 esse . controle deslizante . scrollTo ( { top : this.thumbLocate } ) ;
 esse . ampliação ( ) ;
 }
 ampliação ( ) { 
const mediaSmall = janela. matchMedia ( "(largura mínima: 400px)" ) ;
 const zoomItem = isto . querySelector ( ".image-zoom:nth-child(1)" ) ; 
esse . mainSlider . addEventListener ( "mouseout" , function ( ) {
 zoomItem. estilo . transformar = "escala(1)" ;
 } ) ;
 if ( mediaSmall. corresponde ) { 
esse . mainSlider . addEventListener ( "mouseover" , function ( ) {
 zoomItem. estilo . transformar = "escala(1.8)" ;
 } ) ; 
esse . mainSlider . addEventListener ( "mousemove" , função ( e ) {
 const itemWidth = zoomItem. getBoundingClientRect ( ) . largura ; 
const itemEsquerdo = zoomItem. getBoundingClientRect ( ) . esquerda ;
 const itemHt = zoomItem. getBoundingClientRect ( ) . altura ; 
const itemTop = zoomItem. getBoundingClientRect ( ) . superior + janela. rolarY ; 
const traduzirX = Matemática. round ( ( ( e.pageX - itemLeft ) / itemWidth ) * 100 ) ; 
const traduzirY = Matemática. round ( ( ( e.pageY - itemTop ) / itemHt ) * 100 ) ; 
zoomItem. estilo . transformOrigin = `$ { traduzirX } % $ { traduzirY } % ` ;
 } ) ;
 }
 }
 }
 elementos personalizados. define ( "componente deslizante vertical" , VerticalSliderComponent ) ;