Adicionar regras de quantidade ao tema da Shopify

As regras de quantidade para o catálogo B2B são compatíveis apenas na versão 8.0.0 ou posterior dos temas gratuitos da Shopify. Se você não quiser alterar ou atualizar o tema, também é possível o código abaixo a ele para exibir essas regras.

Faça sua empresa crescer

Este é um tutorial avançado. Caso você não queira ler e editar o código do tema, trabalhe com um desenvolvedor ou contrate um Especialista da Shopify.

Quantidade no carrinho de produtos

O valor da quantidade no carrinho para uma variante pode ser exibido na página do produto ou na seção de produto em destaque. Vale destacar que é possível usar o Liquid para buscar esse valor.

Adicionar código Liquid para quantidade do carrinho de produtos

O código correspondente à quantidade do carrinho pode ser incluído nestes arquivos:

• main-product.liquid ou equivalente
• featured-product.liquid ou equivalente

Etapas:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

1. Abra o arquivo que você quer editar.
2. Crie uma linha nova no final do arquivo e inclua este código:

{% comment %} Cart quantity {% endcomment %}
<span id="CartQuantity-{{ section.id }}" data-product-url="{{ product.url }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
    {%- assign cart_qty = cart | item_count_for_variant: product.selected_or_first_available_variant.id -%}
    {{- 'products.product.quantity.in_cart' | t: quantity: cart_qty -}}
</span>

1. Clique em Salvar.

Adicionar código Javascript para de quantidade do carrinho

Quando a quantidade do carrinho de uma variante muda, o valor exibido na página do produto ou na seção do produto em destaque precisa ser atualizado. Nesse caso, é possível usar um código Javascript para buscar o valor atualizado.

Adicione o código ao arquivo theme.js ou equivalente.

Etapas:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

1. Abra o arquivo theme.js.
2. Crie uma linha nova no final do arquivo e inclua este código:

let productUrl = document.querySelector('[data-product-url]').dataset.productUrl;
let sectionId = document.querySelector('[data-section-id]').dataset.sectionId;
let variantId = document.querySelector('[data-variant-id]').dataset.variantId;

// Fetch updated HTML from Section Rendering API
fetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`)
    .then((response) => response.text())
    .then((responseText) => {
        // Replace the current HTML in DOM with the updated HTML

        const updatedHtml = new DOMParser().parseFromString(responseText, 'text/html');

        // Update the cart quantity
        const currentCartQuantity = document.querySelector(`#CartQuantity-${sectionId}`);
        const updatedCartQuantity = updatedHtml.querySelector(`#CartQuantity-${sectionId}`);
        currentCartQuantity.innerHTML = updatedCartQuantity.innerHTML;
    });

1. Clique em Salvar.

Regras de quantidade

As regras de quantidade para uma variante podem ser exibidas na página do produto ou na seção de produto em destaque. Vale destacar que é possível usar o Liquid para buscar essas regras.

Adicionar código do Liquid para regras de quantidade

O código correspondente à quantidade do carrinho de produtos pode ser incluído nestes arquivos do tema:

• main-product.liquid ou equivalente
• featured-product.liquid ou equivalente

Etapas:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

1. Abra o arquivo que você quer editar.
2. Crie uma linha nova no final do arquivo e inclua este código:

{% comment %} Quantity rules {% endcomment %}
<div id="QuantityRules-{{ section.id }}" data-product-url="{{ product.url }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
    {%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
        <span>
        {{- 'products.product.quantity.multiples_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.increment -}}
        </span>
    {%- endif -%}
    {%- if product.selected_or_first_available_variant.quantity_rule.min > 1 -%}
        <span>
        &nbsp;-&nbsp;
        {{- 'products.product.quantity.minimum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.min -}}
        </span>
    {%- endif -%}
    {%- if product.selected_or_first_available_variant.quantity_rule.max != null -%}
        <span>
        &nbsp;-&nbsp;
        {{- 'products.product.quantity.maximum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.max -}}
        </span>
    {%- endif -%}
</div>

1. Clique em Salvar.

Adicionar código Javascript para regras de quantidade

Cada variante de um produto pode ter seu próprio conjunto de regras de quantidade. Depois que uma variante diferente for selecionada, é preciso atualizar as regras exibidas em uma página do produto ou uma seção de produto em destaque. Nesse caso, é possível usar um código Javascript para buscar o valor atualizado.

• theme.js ou equivalente
• en.default.json

Etapas:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

1. Abra o arquivo theme.js.
2. Crie uma linha nova no final do arquivo e inclua este código:

let productUrl = document.querySelector('[data-product-url]').dataset.productUrl;
let sectionId = document.querySelector('[data-section-id]').dataset.sectionId;
let variantId = document.querySelector('[data-variant-id]').dataset.variantId;
// `variantId` is set to the current variant's id. Replace this value with the updated variant's id

// Fetch updated HTML from Section Rendering API
fetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`)
    .then((response) => response.text())
    .then((responseText) => {
        // Replace the current HTML in DOM with the updated HTML

        const updatedHtml = new DOMParser().parseFromString(responseText, 'text/html');

        // Update the quantity rules
        const currentQuantityRules = document.querySelector(`#QuantityRules-${sectionId}`);
        const updatedQuantityRules = updatedHtml.querySelector(`#QuantityRules-${sectionId}`);
        currentQuantityRules.innerHTML = updatedQuantityRules.innerHTML;
    });

1. Clique em Salvar.

Adicionar localidades

Adicionar strings de tradução JSON

Etapas:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

1. Abra o arquivo en.default.json.
2. Crie uma linha nova no final do arquivo e inclua este código:

{
   "products":{
      "quantity":{
         "minimum_of":"Minimum of ",
         "maximum_of":"Maximum of ",
         "multiples_of":"Increments of ",
         "in_cart": " in cart"
      }
   }
}

1. Clique em Salvar.