### Nuvemshop Translations for Size Guide

Source: https://docs.nuvemshop.com.br/help/guia-de-medidas-jq-nuvem

This section provides localized text for the Size Guide feature across multiple languages (Spanish, Portuguese, English, Mexican Spanish). It includes translations for the title, description, input label, and example URL.

```config
es "Guía de talles"
en "Size guide"
pt "Guia de medidas"
es_mx "Guía de tallas"

es "Cuando un producto tenga variantes de 'Talle', podés mostrar un pop-up con las medidas. Solo necesitás <a target='_blank' href='/admin/pages/'>crear una página</a> e incluir su link debajo."
pt "Quando houver um produto com variações de 'Tamanho', você pode incluir um pop-up na sua loja com as medidas. Basta <a target='_blank' href='/admin/pages/'>criar uma página</a> e inserir o link aqui."
en "When a product has 'Size' variants, you can show a pop-up with the measurements. You just need to <a target='_blank' href='/admin/pages/'>create a page</a> and include its link below."
es_mx "Cuando un producto tenga variantes de 'Talla', puedes mostrar un pop-up con las medidas. Solo necesitas <a target='_blank' href='/admin/pages/'>crear una página</a> e incluir su link debajo."

es "Link de la página"
pt "Link da página"
en "Page link"
es_mx "Link de la página"

es "Ej: https://tudominio.com/guia-de-talles/"
pt "Ex: https://seudominio.com/guia-de-medidas/"
en "Ej: https://yourdomain.com/size-guide/"
es_mx "Ej: https://tudominio.com/guia-de-tallas/"
```

--------------------------------

### Nuvemshop Settings for Size Guide

Source: https://docs.nuvemshop.com.br/help/guia-de-medidas-jq-nuvem

This configuration block defines settings for the Size Guide feature in Nuvemshop. It specifies the title, subtitle, input name for the URL, and a description for the size guide section in the product detail page.

```config
title
    title = Guía de talles
subtitle
    subtitle = Cuando un producto tenga variantes de 'Talle', podés mostrar un pop-up con las medidas. Solo necesitás <a target='_blank' href='/admin/pages/'>crear una página</a> e incluir su link debajo.
i18n_input
    name = size_guide_url
    description = Link de la página
description
    description = Ej: https://tudominio.com/guia-de-talles/
```

--------------------------------

### Panzoom Initialization and Setup

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Initializes the Panzoom library, sets up the layout by finding the container and content elements, and resets internal values. It handles optional viewport wrapping and default options.

```javascript
function Panzoom(container, options) {
  // ... initialization logic ...
  this.initLayout();
  this.resetValues();
  // ... event attachment and state setting ...
  return this;
}
```

--------------------------------

### Nuvemshop Translation Configuration Example

Source: https://docs.nuvemshop.com.br/help/informao-de-meios-de-pagamento-e-parcelas-jqnuvem

An example snippet showing how to define translations for different languages. This format is used to manage multilingual content within the application.

```Config
es "Ver medios de pago"
pt "Ver meios de pagamento"
en "See payment options"
es_mx "Ver métodos de pago"
```

--------------------------------

### Settings Object Usage Example

Source: https://docs.nuvemshop.com.br/help/nosso-cdigo-objetos

Shows how settings defined in `settings.txt` can be accessed and utilized within the Nuvemshop templates. It demonstrates checking a boolean setting (`banner_show`) and displaying a text setting (`banner_title`).

```liquid
{% if setttings.banner_show %}
    {{  setttings.banner_title }}
{% endif %}
```

--------------------------------

### Nuvemshop Logo Rendering Example

Source: https://docs.nuvemshop.com.br/help/nosso-cdigo-objetos

Demonstrates how to combine store object properties with filters to render a store's logo as a clickable link. It shows the templating syntax and the resulting HTML output.

```liquid
{{ store.logo | img_tag | a_tag(store.url) }}
```

```html
<a href="http://yourstore.com" title=""><img src="//your-store-logo.png" alt="yourstore-name" title="yourstore-name"></a>
```

--------------------------------

### Fancybox Initialization and URL Hash Handling

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Handles the initialization of the Fancybox component and listens for URL hash changes to update the UI. It ensures the component starts correctly based on the initial URL state.

```javascript
function i(){
  window.addEventListener("hashchange",t.onHashChange,!1),
  t.startFromUrl()
}

t.Fancybox=e,
W&&window.requestAnimationFrame((function(){
  /complete|interactive|loaded/.test(document.readyState)?i():document.addEventListener("DOMContentLoaded",i)
}))
```

```javascript
t.destroy=function(){
  window.removeEventListener("hashchange",t.onHashChange,!1)
}
```

```javascript
t.getParsedURL=function(){
  var t=window.location.hash.substr(1),
  e=t.split("-"),
  i=e.length>1&&/^\+?\d+$/.test(e[e.length-1])&&parseInt(e.pop(-1),10)||null;
  return{
    hash:t,
    slug:e.join("-"),
    index:i
  }
}
```

--------------------------------

### Swiper Slider Configuration Examples

Source: https://docs.nuvemshop.com.br/help/secoes-com-drag-and-drop

Configuration options for Swiper sliders, including autoplay, pagination, navigation, and responsive breakpoints. These snippets are often embedded within a templating engine.

```javascript
createSwiper('.js-swiper-featured-pagination', {
    loop: true,
    autoplay: {
        delay: 6000,
    },
    spaceBetween: 30,
    threshold: 5,
    watchSlidesVisibility: true,
    slideVisibleClass: 'js-swiper-slide-visible',
    slidesPerView: {% if columns == 2 %}2{% else %}1{% endif %},
    pagination: {
        el: '.js-swiper-featured-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.js-swiper-featured-next',
        prevEl: '.js-swiper-featured-prev',
    },
    breakpoints: {
        640: {
            slidesPerView: {% if columns == 2 %}4{% else %}3{% endif %},
        }
    },
});
```

```javascript
var width = window.innerWidth;
if (width > 767) {
    var slider_empty_autoplay = {delay: 6000,};
} else {
    var slider_empty_autoplay = false;
}

window.homeEmptySlider = {
    getAutoRotation: function() {
        return slider_empty_autoplay;
    },
};
createSwiper('.js-home-empty-slider', {
    loop: true,
    autoplay: slider_empty_autoplay,
    pagination: {
        el: '.js-swiper-empty-home-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.js-swiper-empty-home-next',
        prevEl: '.js-swiper-empty-home-prev',
    },
});
```

```javascript
createSwiper('.js-swiper-featured-demo', {
    slidesPerView: {% if columns == 2 %}2{% else %}1{% endif %},
    spaceBetween: 30,
    navigation: {
        nextEl: '.js-swiper-featured-demo-next',
        prevEl: '.js-swiper-featured-demo-prev',
    },
    pagination: {
        el: '.js-swiper-featured-demo-pagination',
        clickable: true,
    },
    breakpoints: {
        640: {
            slidesPerView: {% if columns == 2 %}4{% else %}3{% endif %},
        }
    },
});
```

--------------------------------

### Display Payment Installment Information

Source: https://docs.nuvemshop.com.br/help/snipplets

This snippet iterates through payment methods, specifically credit cards, to display installment options. It differentiates between interest-free installments (showing amount per installment) and installments with interest (showing total installments available). It also handles displaying logos for associated banks for each payment type.

```twig
{% set gateways = installmentsv2['methods'][method] %}

{# Gateways with banks #}

{# Credit cards #}
{% if gateways.cc is not null %}
  <h6 class="mb-1">{{'Tarjetas de crédito' | translate }}</h6>
  <div class="box">
    {# Installments without interest modules by groups, E.g: 3, 6, 9, 12 #}

    {% if gateways.cc is null or gateways.cc is empty is not null %}
      {% for installment, banks in gateways.cc.no_interest %}
        <div>

          {# Installment amount, cost, CFT, 1 payment info and total cost #}

          <h4 class="font-weight-normal mb-1">
            {{ installment }}
            {{ 'cuotas' | translate }}
            <span>{{ 'sin interés' | t }}</span>
            {{'de' | t}}
            <strong class="js-modal-installment-price" data-installment="{{installment}}"> {{ (product.price / installment) | money }}</strong>
          </h4>
          <h6 class="font-weight-normal mb-2">
            <span class="mr-1">
              <span>{{ 'CFT: ' | translate }}</span><strong>0,00%</strong>
            </span>
            <span class="mr-1">
              <span>{{ 'Total: ' | translate }}</span><strong class="js-installments-one-payment">{{ product.price | money }}</strong>
            </span>
            <span>
              <span>{{ 'En 1 pago: ' | translate }}</span><strong class="js-installments-one-payment">{{ product.price | money }}</strong>
            </span>
          </h6>

          {# Banks with installments without interest flags #}

          <div class="mb-3">
            {% for bank in banks %}
              <span>
                <img src="{{ 'images/empty-placeholder.png' | static_url }}" data-src="{{ bank | bank_code_by_name | payment_new_logo }}" class="card-img card-img-big lazyload" alt="{{ bank }}">
              </span>
            {% endfor %}
          </div>
          <div class="divider"></div>
        </div>
      {% endfor %}
    {% endif %}

    {# Installments with interest in one module #}

    {% if gateways.cc.interest is not null %}
      <div>

        {# Installment amount #}

        <h4 class="font-weight-normal mb-1">
          {{ gateways.max_with_interests ~ ' cuotas con otras tarjetas' | translate }}
        </h4>
        <h6 class="font-weight-normal mb-2">
          <span>{{ 'O en 1 pago de: ' | translate }}</span>
          <strong class="js-installments-one-payment">{{ product.price | money }}</strong>
        </h6>

        {# Banks with installments with interest flags #}

        {% for bank in gateways.cc.interest %}
          <span class="js-installments-flag-tab js-installments-cash-tab">
            <img src="{{ 'images/empty-placeholder.png' | static_url }}" data-src="{{ bank | payment_new_logo }}" class="lazyload card-img card-img-big" alt="{{ bank }}">
          </span>
        {% endfor %}
        <div class="divider"></div>
      </div>
    {% endif %}
  </div>
{% endif %}
```

--------------------------------

### Display Payment Installment Information (Twig)

Source: https://docs.nuvemshop.com.br/help/snipplets

This snippet demonstrates how to display payment method details and installment options using Twig templating. It conditionally shows interest-free installments for Argentina and a general installment table for other countries, including credit card logos and total payment values.

```twig
{% set installments_data = installmentsv2['methods'][method] %}

{# Gateways without banks: cards only #}

{% if installments_data['cards'] %}

    {# Credit cards #}

    <h6 class="mb-1">{{'Tarjetas de crédito' | translate }}</h6>
    <div id="installment-credit-card-option-{{ method }}" class="box">

        {# Credit cards max installments only for AR stores #}

        {% if store.country == 'AR' %}

            {% if installments_data['max_without_interests'] != '0' %}
                <h4 class="font-weight-normal mb-1">
                    {{ installments_data['max_without_interests'] }}
                    {{ 'cuotas' | translate }}
                    <span>{{ 'sin interés' | t }}</span>
                    {{'de' | t}}
                    <strong class="js-modal-installment-price" data-installment="{{ installments_data['max_without_interests'] }}"> {{ (product.price / installments_data['max_without_interests']) | money }}</strong>
                </h4>
                <h6 class="font-weight-normal mb-2">
                    <span class="mr-1">
                        <span>{{ 'CFT: ' | translate }}</span><strong>0,00%</strong>
                    </span>
                    <span class="mr-1">
                        <span>{{ 'Total: ' | translate }}</span><strong class="js-installments-one-payment">{{ product.price | money }}</strong>
                    </span>
                    <span class="mr-1">
                        <span>{{ 'En 1 pago: ' | translate }}</span><strong class="js-installments-one-payment">{{ product.price | money }}</strong>
                    </span>
                </h6>
            {% elseif installments_data['max_with_interests'] > 0 %}
                <h4 class="font-weight-normal mb-1">
                    {{ 'Hasta' | translate }}
                    {{ installments_data['max_with_interests'] }}
                    {{ 'cuotas' | translate }}
                </h4>
                <h6 class="font-weight-normal mb-2">
                    <span>
                        <span>{{ 'O en 1 pago de: ' | translate }}</span><strong class="js-installments-one-payment">{{ product.price | money }}</strong>
                    </span>
                </h6>
            {% else %}
                <h4 class="font-weight-normal mb-1">
                    <span>{{ 'En 1 pago: ' | translate }}</span><strong class="js-installments-one-payment">{{ product.price | money }}</strong>
                </h4>
            {% endif %}

        {% endif %}

        {# Credit cards flags #}

        {% for logo in installments_data['cards'] %}
            <span class="mb-3">
                <img src="{{ 'images/empty-placeholder.png' | static_url }}" data-src="{{ logo | payment_new_logo }}" class="lazyload card-img card-img-medium">
            </span>
        {% endfor %}

        {% if store.country != 'AR' %}

            {# Installments list for non AR stores #}

            <table class="table">
                <thead>
                    <tr>
                        <th colspan="2">{{ 'Cuotas ' | translate }}</th>
                        <th class="text-right">{{ 'Total' | translate }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for installment, data_installment in installments %}
                        {% set rounded_installment_value = data_installment.installment_value | round(2) %}
                        {% set total_value = (data_installment.without_interests ? data_installment.total_value : installment * data_installment.installment_value) %}
                        {% set total_value_in_cents = total_value  | round(2) * 100 %}
                        <tr id="installment_{{ method }}_{{ installment }}">

                            {# Installment amount #}

                            <td>
                                <strong><span class="js-installment-amount">{{ installment }}</span></strong>
                                </span>{% if installment > 1 %}{{ 'cuotas' | translate }}{% else %}{{ 'cuota' | translate }}{% endif %}</span>
                            </td>

                            {# Installment price #}

                            <td>
                                <span>{{ 'de ' | translate }}</span>
                                <strong><span class="js-installment-price">{{ (rounded_installment_value * 100) | money }}</span> </strong>

                                {% if data_installment.without_interests or installments_data['max_with_interests'] == 0 %}
                                    {{ 'sin interés' | t }}
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
{% endif %}
```

--------------------------------

### Configure Product Listing Title and Quantity Dropdown

Source: https://docs.nuvemshop.com.br/help/quantidade-de-produtos-por-pagina

Define o título para listagens de produtos e um dropdown para selecionar a quantidade de produtos por página no arquivo settings.txt.

```config
title
    title = Productos en el listado
dropdown
    name = category_quantity_products
    description = Cantidad de productos por página
    values
        12 = 12
        16 = 16
        20 = 20
```

--------------------------------

### Display installment list

Source: https://docs.nuvemshop.com.br/help/melhorias-na-informacao-de-parcelas-de-meios-de-pagamento

Conditionally displays a list of installment plans if `hasInstallments` is true. It iterates through `installmentGroup.installments` to show quantity, price per installment, and total price for each plan.

```twig
{# Installments List #}
{% if hasInstallments %}
   <div class="mt-3">
       <strong class="text-primary">{{ 'O pagá en' | translate }}</strong>
   </div>

   {% for installmentGroup in paymentMethod.installmentGroups %}
       {# Installment Specification #}
       <table class="table mt-3 mb-3">
           <tbody>
               {% for installment in installmentGroup.installments %}
                   <tr>
                       {# Installment Info #}
                       <td>
                           <strong class="text-primary"><span class="js-installment-amount">{{ installment.quantity }}</span></strong>
                           <span class="text-primary">{% if installment.quantity > 1 %}{{ 'cuotas' | translate }}{% else %}{{ 'cuota' | translate }}{% endif %}</span>
                           <span>{{ 'de ' | translate }}</span>
                           <strong class="text-primary"><span class="js-installment-price">{{ installment.amountInCents | money }}</span></strong>
                           {% if installment.withoutInterest %}
                               {{ 'sin interés' | t }}
                           {% endif %}
                       </td>

                       {# Total Price #}
                       <td>
                           <strong class="text-primary"><span class="m-right-quarter">{{ 'Total:' | translate }}</span></strong>
                           <span>{{ installment.totalAmountInCents | money }}</span>
                       </td>

                       {# Description #}
                       <td>
                           <small>{{ installment.description }}</small>
                       </td>
                   </tr>
               {% endfor %}
           </tbody>
       </table>

       {# Payment Method Logos #}
       {% if installmentGroup.logos is not empty %}
           <div class="mt-2 {% if loop.last %}{{ 'mb-0' }}{% else %}{{ 'mb-3' }}{% endif %}">
           {# ... rest of the code for logos ... #}
           </div>
       {% endif %}
   {% endfor %}
{% endif %}
```

--------------------------------

### Exibir Tabela de Descontos Progressivos em Detalhe de Produto (HTML)

Source: https://docs.nuvemshop.com.br/help/descontos-progressivos

Atualiza o arquivo product/product-form.tpl para exibir uma tabela de descontos progressivos ou um único desconto, dependendo do número de parâmetros de oferta.

```Template
{% if product.promotional_offer.parameters | length > 1 %}
  {{ component('progressive-discounts-table', {
    progressive_discounts_classes: {
      title: 'text-accent mb-3',
      table: 'table mb-2',
      hidden_table: 'table-body-inverted',
      show_more_link: 'btn-link btn-link-primary mb-4',
      show_more_icon: 'icon-inline',
      hide_icon: 'icon-inline icon-flip-vertical',
      promotion_quantity: 'font-weight-light text-lowercase'
    },
    svg_sprites: false,
    custom_control_show: include("snipplets/svg/chevron-down.tpl", { svg_custom_class: "icon-inline icon-w-14 icon-md ml-2" }),
    custom_control_hide: include("snipplets/svg/chevron-up.tpl", { svg_custom_class: "icon-inline icon-w-14 icon-md ml-2" })
  }) }}
{% else %}
  {% set threshold = product.promotional_offer.parameters[0] %}
  <h4 class="mb-2 text-accent"><strong>
    {{ "¡{1}% OFF comprando {2} o más!" | translate(threshold.discount_decimal_percentage * 100, threshold.quantity) }}
  </strong></h4>
{% endif %}
```

--------------------------------

### Fancybox Initialization for Product Gallery

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Initializes Fancybox for the product gallery, configuring toolbar display and thumbnail behavior. It also includes an event listener to synchronize the Fancybox slide index with the product swiper when closing.

```javascript
Fancybox.bind('[data-fancybox="product-gallery"]', {
    Toolbar: { display: ['counter', 'close'] },
    Thumbs: { autoStart: false },
    on: {
        shouldClose: (fancybox, slide) => {
            if (!productSwiper) {
                return;
            }

            // Update position of the slider
            productSwiper.slideTo( fancybox.getSlide().index, 0 );
        },
    },
});
```

--------------------------------

### Installment Price Display

Source: https://docs.nuvemshop.com.br/help/snipplets

Displays installment payment details, including total price, within a table structure. It iterates through installment data and conditionally renders the total price using the 'money' filter.

```twig
{# Total price #}

                            <td class="js-installment-total-price text-right">
                                {{ total_value_in_cents | money }}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
```

--------------------------------

### Nuvemshop Installment and Price Update Functions

Source: https://docs.nuvemshop.com.br/help/informao-de-meios-de-pagamento-e-parcelas-jqnuvem

JavaScript functions for calculating maximum installments without and with interest, and refreshing displayed prices and installment values on the page. These functions are designed for Nuvemshop's e-commerce platform.

```javascript
{# /* // Installments */ #}

{# Installments without interest #}

function get_max_installments_without_interests(number_of_installment, installment_data, max_installments_without_interests) {
    if (parseInt(number_of_installment) > parseInt(max_installments_without_interests[0])) {
        if (installment_data.without_interests) {
            return [number_of_installment, installment_data.installment_value.toFixed(2)];
        }
    }
    return max_installments_without_interests;
}

{# Installments with interest #}

function get_max_installments_with_interests(number_of_installment, installment_data, max_installments_with_interests) {
    if (parseInt(number_of_installment) > parseInt(max_installments_with_interests[0])) {
        if (installment_data.without_interests == false) {
            return [number_of_installment, installment_data.installment_value.toFixed(2)];
        }
    }
    return max_installments_with_interests;
}

{# Refresh installments inside detail popup #}

function refreshInstallmentv2(price){
    jQueryNuvem(".js-modal-installment-price" ).each(function( el ) {
        const installment = Number(jQueryNuvem(el).data('installment'));
        jQueryNuvem(el).text(LS.currency.display_short + (price/installment).toLocaleString('de-DE', {maximumFractionDigits: 2, minimumFractionDigits: 2}));
    });
}

{# Refresh price on payments popup with payment discount applied #}

function refreshPaymentDiscount(price){
    jQueryNuvem(".js-price-with-discount" ).each(function( el ) {
        const payment_discount = jQueryNuvem(el).data('paymentDiscount');
        jQueryNuvem(el).text(LS.formatToCurrency(price - ((price * payment_discount) / 100)))
    });
}
```

--------------------------------

### Update Installment Container Class

Source: https://docs.nuvemshop.com.br/help/cores-no-item-do-produto-jq-nuvem

This change modifies the HTML class structure for the installment information container in `installments.tpl`. The goal is to ensure installment details update correctly when a product color is changed, by adjusting the class attributes for better JavaScript targeting.

```twig
<!-- Original line -->
<div class="{% if product_detail %}js-max-installments-container js-max-installments text-center text-md-left{% else %}item-installments{% endif %}">

<!-- Replaced with -->
<div class="js-max-installments-container js-max-installments {% if product_detail %}text-center text-md-left{% else %}item-installments{% endif %}">
```

--------------------------------

### Include Home Video Snippet (HTML)

Source: https://docs.nuvemshop.com.br/help/video-pagina-inicial

Demonstrates how to include the previously defined 'home-video.tpl' snippet into the main homepage template ('templates/home.tpl'). This integrates the video functionality into the store's layout.

```HTML
{% include 'snipplets/home/home-video.tpl' %}
```

--------------------------------

### Asynchronous CSS Loading Example

Source: https://docs.nuvemshop.com.br/help/static

Demonstrates how to load CSS files asynchronously using a JavaScript function `loadCSS`. It includes examples for Font Awesome and a custom stylesheet, referencing Twig template syntax for asset URLs.

```html
<script id="font-awesome-css">
    loadCSS( '{{ 'font-awesome/font-awesome-5.css' | static_url }}', document.getElementById("font-awesome-css"));
</script>
<script id="style-css">
    loadCSS( '{{ 'css/style-async.scss.tpl' | static_url }}', document.getElementById("style-css"));
</script>
```

--------------------------------

### Nuvemshop Variant Change Handler

Source: https://docs.nuvemshop.com.br/help/informao-de-meios-de-pagamento-e-parcelas-jqnuvem

JavaScript function to update product details, including price, installments, labels, and call-to-action elements, when a product variant is changed. It handles DOM manipulation and integrates with Nuvemshop's installment data.

```javascript
{# /* // Change variant */ #}

{# Updates price, installments, labels and CTA on variant change #}

function changeVariant(variant){

    jQueryNuvem(".js-product-detail .js-shipping-calculator-response").hide();
    jQueryNuvem("#shipping-variant-id").val(variant.id);

    var parent = jQueryNuvem("body");
    if (variant.element){
        parent = jQueryNuvem(variant.element);
    }

    var sku = parent.find('#sku');
    if(sku.length) {
        sku.text(variant.sku).show();
    }

    var installment_helper = function($element, amount, price){
        $element.find('.js-installment-amount').text(amount);
        $element.find('.js-installment-price').attr("data-value", price);
        $element.find('.js-installment-price').text(LS.currency.display_short + parseFloat(price).toLocaleString('de-DE', { minimumFractionDigits: 2 }));
        if(variant.price_short && Math.abs(variant.price_number - price * amount) < 1) {
            $element.find('.js-installment-total-price').text((variant.price_short).toLocaleString('de-DE', { minimumFractionDigits: 2 }));
        } else {
            $element.find('.js-installment-total-price').text(LS.currency.display_short + (price * amount).toLocaleString('de-DE', { minimumFractionDigits: 2 }));
        }
    };

    if (variant.installments_data) {
        var variant_installments = JSON.parse(variant.installments_data);
        var max_installments_without_interests = [0,0];
        var max_installments_with_interests = [0,0];
        for (let payment_method in variant_installments) {
            let installments = variant_installments[payment_method];
            for (let number_of_installment in installments) {
                let installment_data = installments[number_of_installment];
                max_installments_without_interests = get_max_installments_without_interests(number_of_installment, installment_data, max_installments_without_interests);
                max_installments_with_interests = get_max_installments_with_interests(number_of_installment, installment_data, max_installments_with_interests);
                var installment_container_selector = '#installment_' + payment_method.replace(" ", "_") + '_' + number_of_installment;

                if(!parent.hasClass("js-quickshop-container")){
                    installment_helper(jQueryNuvem(installment_container_selector), number_of_installment, installment_data.installment_value.toFixed(2));
                }
            }
        }
        var $installments_container = jQueryNuvem(variant.element + ' .js-max-installments-container .js-max-installments');
        var $installments_modal_link = jQueryNuvem(variant.element + ' #btn-installments');
        var $payments_module = jQueryNuvem(variant.element + ' .js-product-payments-container');

```

--------------------------------

### Include Filters Component

Source: https://docs.nuvemshop.com.br/help/componentes-privados

Example of how to include the filters component in a template, specifying various configuration options for its behavior and appearance.

```template
{{ component(
    'filters/filters',{
        accordion: true,
        parent_category_link: false,
        applied_filters_badge: true,
        container_classes: {
            filters_container: "visible-when-content-ready",
        },
        accordion_classes: {
            title_container: "row no-gutters align-items-center",
            title_col: "col my-1 pr-3 d-flex align-items-center",
            title: "h6 font-body font-weight-bold mb-0",
            actions_col: "col-auto my-1",
            title_icon: "icon-inline svg-icon-text font-big mr-1"
        },
        filter_classes: {
            list: "list-unstyled my-3",
            list_item: "mb-2",
            list_link: "font-small",
            badge: "h6 font-small ml-1",
            show_more_link: "d-inline-block btn-link font-small mt-1",
            checkbox_last: "m-0",
            price_group: 'price-filter-container filter-accordion',
            price_title: 'h6 font-weight-bold mb-4',
            price_submit: 'btn btn-default d-inline-block',
            applying_feedback_message: 'h5 mr-2',
            applying_feedback_icon: 'icon-inline h5 icon-spin svg-icon-text'
        },
        accordion_show_svg_id: 'plus',
        accordion_hide_svg_id: 'minus',
        applying_feedback_svg_id: 'spinner-third'
    })
}}
```

--------------------------------

### Configuration Settings

Source: https://docs.nuvemshop.com.br/help/variacoes-sem-estoque

Defines settings for the product variant display feature. It includes a title for the section and a checkbox to enable the 'show as buttons' functionality.

```ini
[title]
    title = Variantes del producto
[checkbox]
    name = bullet_variants
    description = Mostrar como botones
```

--------------------------------

### Shipping Options Selection Prompt

Source: https://docs.nuvemshop.com.br/help/calculadora-de-frete

Informs the user that they will be able to select from available shipping options before completing their purchase. This guides the checkout process.

```es
Vas a poder elegir alguna de las siguientes opciones antes de finalizar la compra:
```

```pt
Você pode escolher uma das seguintes opções antes de finalizar a compra
```

```en
You will be able to choose some of the following options before ending the purchase
```

```es_mx
Podrás elegir alguna de las siguientes opciones antes de finalizar la compra:
```

--------------------------------

### Quick Shop Snippet

Source: https://docs.nuvemshop.com.br/help/snipplets

Implements a quick shop popup for products displayed in a list. It uses a modal structure with placeholders for product details like name, price, and image. Requires the `settings.quick_shop` to be enabled.

```twig
{% if settings.quick_shop %}
    {% embed "snipplets/modal.tpl" with{modal_id: 'quickshop-modal', modal_class: 'quickshop text-center', modal_position: 'bottom modal-bottom-sheet', modal_transition: 'slide', modal_header: true, modal_footer: true, modal_width: 'centered modal-docked-md modal-docked-md-centered', modal_mobile_full_screen: 'true' } %}
        {% block modal_body %}
        <div class="js-item-product" data-product-id="">
            <div class="js-product-container js-quickshop-container js-quickshop-modal js-quickshop-modal-shell" data-variants="" data-quickshop-id="">
                <div class="js-item-variants">
                    <div class="js-item-name h1 mb-1" data-store="product-item-name-{{ product.id }}"></div>
                    <div class="item-price-container mb-4" data-store="product-item-price-{{ product.id }}">
                        <span class="js-compare-price-display h4 price-compare"></span>
                        <span class="js-price-display h4"></span>
                    </div>
                    {# Image is hidden but present so it can be used on cart notifiaction #}
                    <img srcset="" class="js-quickshop-img hidden"/>
                    <div id="quickshop-form"></div>
                </div>
            </div>
        </div>
        {% endblock %}
    {% endembed %}
{% endif %}
```

--------------------------------

### Set Default Product Quantity

Source: https://docs.nuvemshop.com.br/help/quantidade-de-produtos-por-pagina

Define o valor padrão para a quantidade de produtos por página no arquivo defaults.txt.

```config
category_quantity_products = 12
```

--------------------------------

### Embed Custom Cart Input

Source: https://docs.nuvemshop.com.br/help/campos-personalizados-no-carrinho

Example of embedding the form input snippet to add a custom field (e.g., 'Dedicatoria') to the shopping cart in Nuvemshop.

```twig
{# Custom cart inputs #}

{% embed "snipplets/forms/form-input.tpl" with{text_area: true, input_name: 'custom[Dedicatoria]', input_label_text: 'Dedicatoria' | translate }
{% endembed %}
```

--------------------------------

### jQuery Removal Warning

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Alerts developers that the jQuery library will be removed from Nuvemshop stores starting January 30, 2023, making the '$' function unavailable.

```text
A partir do dia 30 de janeiro de 2023, a biblioteca jQuery será removida do código de nossas lojas, portanto, a função "$" não poderá ser utilizada.
```

--------------------------------

### JavaScript Options and Localization System

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Provides a robust system for managing configuration options, including nested properties and localization support. The `option` method retrieves values, potentially executing functions, while `localize` formats strings using provided data.

```javascript
var O=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o(this,t),this.options=k(!0,{},e),this.plugins=[],this.events={};for(var i=0,n=["on","once"];i<n.length;i++)for(var a=n[i],s=0,r=Object.entries(this.options[a]||{});s<r.length;s++){var l=r[s];this[a].apply(this,m(l))}}return s(t,[{key:"option",value:function(t,e){t=String(t);var i=A(t,this.options);if("function"==typeof i){for(var n,o=arguments.length,a=new Array(o>2?o-2:0),s=2;s<o;s++)a[s-2]=arguments[s];i=(n=i).call.apply(n,[this,this].concat(a))}return void 0===i?e:i}},{key:"localize",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];return t=(t=String(t).replace(/\{\{(\w+).?(\w+)?\}\}/g,(function(t,n,o){var a="";o?a=e.option("".concat(n[0]+n.toLowerCase().substring(1),".l10n.").concat(o)):n&&(a=e.option("l10n.".concat(n))),a||(a=t);for(var s=0;s<i.length;s++)a=a.split(i[s][0]).join(i[s][1]);return a}))).replace(/\{\{(.*)\}}/,(function(t,e){return e}))}}])},t}()
```

--------------------------------

### Define hasInstallments variable

Source: https://docs.nuvemshop.com.br/help/melhorias-na-informacao-de-parcelas-de-meios-de-pagamento

Defines a boolean variable `hasInstallments` based on whether the `paymentMethod.installmentGroups` list is not empty. This variable is used to conditionally display installment information.

```twig
{% set hasInstallments = paymentMethod.installmentGroups is not empty %}
```

--------------------------------

### Initialize and Manage Slides

Source: https://docs.nuvemshop.com.br/help/imagem-do-detalhe-do-produto-jq-nuvem

Handles the initialization of slides from DOM elements or an array, and manages slide data structures. It also includes a utility to find the page containing a specific slide.

```javascript
initSlides: function() {
  var t = this;
  this.slides = [];
  this.$viewport.querySelectorAll(".".concat(this.option("prefix")).concat(this.option("classNames.slide"))).forEach((function(e) {
    var i = { $el: e, isDom: !0 };
    t.slides.push(i),
    t.trigger("createSlide", i, t.slides.length);
  }));
  Array.isArray(this.options.slides) && (this.slides = k(!0, m(this.slides), this.options.slides));
},
findPageForSlide: function(t) {
  t = parseInt(t, 10) || 0;
  var e = this.pages.find((function(e) {
    return e.indexes.indexOf(t) > -1;
  }));
  return e ? e.index : null;
}
```

--------------------------------

### Feature Configuration (settings.txt)

Source: https://docs.nuvemshop.com.br/help/ltimo-produto-em-estoque-jq-nuvem

Configura um checkbox e um campo de texto para ativar e personalizar a funcionalidade 'Último produto em estoque' na seção de Detalhe do Produto.

```config
title
    title = Último producto en stock
checkbox
    name = last_product
    description = Mostrar un mensaje para incentivar la compra cuando quede la última unidad de un producto
i18n_input
    description = Mensaje
    name = last_product_text
```