Exibir regras de quantidade e preços por volume em sua loja

Esta página foi impressa em Apr 28, 2024. Para a versão mais recente, acesse https://help.shopify.com/pt-BR/manual/b2b/theme-code/quantity-pricing.

As regras de quantidade para o catálogo B2B são compatíveis com temas gratuitos da Shopify, na versão 8.0.0 ou posteriores, e com preços por volume, na versão 11.0.0 ou posteriores. Para exibir regras de quantidade e preços por volume na loja, é recomendável atualizar o tema para a versão mais recente.

Se não quiser alterar nem atualizar o tema, adicione o código a seguir ao tema para exibir regras de quantidade e preços por volume. Antes de atualizar os arquivos do tema, duplique o tema para criar uma cópia de backup.

Nesta página

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:

  1. No admin da Shopify, acesse Loja virtual > Temas.
  2. Encontre o tema que quer editar, clique no botão ... para abrir o menu de ações e depois em Editar código.
  3. Abra o arquivo que você quer editar.
  4. 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 }}">
    {{ cart | line_items_for: product | sum: 'quantity' }}
    {{- '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:

  1. No admin da Shopify, acesse Loja virtual > Temas.
  2. Encontre o tema que quer editar, clique no botão ... para abrir o menu de ações e depois em Editar código.
  3. Abra o arquivo theme.js.
  4. 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

É possível adicionar o código aos seguintes arquivos do seu tema conforme as regras de quantidade:

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

Etapas:

  1. No admin da Shopify, acesse Loja virtual > Temas.
  2. Encontre o tema que quer editar, clique no botão ... para abrir o menu de ações e depois em Editar código.
  3. Abra o arquivo que você quer editar.
  4. 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:

  1. No admin da Shopify, acesse Loja virtual > Temas.
  2. Encontre o tema que quer editar, clique no botão ... para abrir o menu de ações e depois em Editar código.
  3. Abra o arquivo theme.js.
  4. 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.

Preços por volume

Adicionar código de preços por volume do Liquid

Adicione o código aos seguintes arquivos em seu tema para exibir o preço por volume:

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

Etapas:

  1. No admin da Shopify, acesse Loja virtual > Temas.
  2. Encontre o tema que quer editar, clique no botão ... para abrir o menu de ações e depois em Editar código.
  3. Abra o arquivo que você quer editar.
  4. Crie uma linha nova no final do arquivo e inclua este código: 
{%- if product.quantity_price_breaks_configured? -%}
  <div class="volume-pricing-note">
    <span>{{ 'products.product.volume_pricing.note' | t }}</span>
  </div>
  <volume-pricing class="parent-display" id="Volume-{{ section.id }}">
    {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
      <span class="caption-large">{{ 'products.product.volume_pricing.title' | t }}</span>
      <ul class="list-unstyled no-js-hidden">
        <li>
          <span>{{ product.selected_or_first_available_variant.quantity_rule.min }}+</span>
          {%- assign price = product.selected_or_first_available_variant.price
            | money_with_currency
          -%}
          <span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }}">
            {{ 'sections.quick_order_list.each' | t: money: price -}}
          </span>
        </li>
        {%- for price_break in product.selected_or_first_available_variant.quantity_price_breaks -%}
          {%- assign price_break_price = price_break.price | money_with_currency -%}
          <li class="{%- if forloop.index >= 3 -%}show-more-item hidden{%- endif -%}">
            <span>
              {{- price_break.minimum_quantity -}}
              <span aria-hidden="true">+</span></span
            >
            {%- assign price = price_break.price | money_with_currency -%}
            <span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: price_break_price }}">
              {{ 'sections.quick_order_list.each' | t: money: price -}}
            </span>
          </li>
        {%- endfor -%}
      </ul>
      {%- if product.selected_or_first_available_variant.quantity_price_breaks.size >= 3 -%}
        <show-more-button>
          <button
            class="button-show-more link underlined-link no-js-hidden"
            id="Show-More-{{ section.id }}"
            type="button"
          >
            <span class="label-show-more label-text"
              ><span aria-hidden="true">+ </span>{{ 'products.facets.show_more' | t }}
            </span>
          </button>
        </show-more-button>
      {%- endif -%}
    {%- endif -%}
  </volume-pricing>
{%- endif -%}
  1. Clique em Salvar.

Adicionar código de preços por volume em JavaScript

Adicione um código ao seguinte arquivo no tema para exibir os preços por volume:

  • theme.js

Etapas:

  1. No admin da Shopify, acesse Loja virtual > Temas.
  2. Encontre o tema que quer editar, clique no botão ... para abrir o menu de ações e depois em Editar código.
  3. Abra o arquivo theme.js.
  4. Crie uma linha nova no final do arquivo e inclua este código: 
if (!customElements.get('show-more-button')) {
  customElements.define(
    'show-more-button',
    class ShowMoreButton extends HTMLElement {
      constructor() {
        super();
        const button = this.querySelector('button');
        button.addEventListener('click', (event) => {
          this.expandShowMore(event);
          const nextElementToFocus = event.target
            .closest('.parent-display')
            .querySelector('.show-more-item');
          if (
            nextElementToFocus &&
            !nextElementToFocus.classList.contains('hidden') &&
            nextElementToFocus.querySelector('input')
          ) {
            nextElementToFocus.querySelector('input').focus();
          }
        });
      }
      expandShowMore(event) {
        const parentDisplay = event.target
          .closest('[id^="Show-More-"]')
          .closest('.parent-display');
        const parentWrap = parentDisplay.querySelector('.parent-wrap');
        this.querySelectorAll('.label-text').forEach((element) =>
          element.classList.toggle('hidden'),
        );
        parentDisplay
          .querySelectorAll('.show-more-item')
          .forEach((item) => item.classList.toggle('hidden'));
        if (!this.querySelector('.label-show-less')) {
          this.classList.add('hidden');
        }
      }
    },
  );
}
  1. Clique em Salvar.

Adicionar localidades

Para que as regras de quantidade e os preços por volume sejam exibidos em todas as versões traduzidas da loja virtual, inclua as strings de tradução JSON abaixo no arquivo en.default.json para adicionar as localidades.

Etapas:

  1. No admin da Shopify, acesse Loja virtual > Temas.
  2. Encontre o tema que quer editar, clique no botão ... para abrir o menu de ações e depois em Editar código.
  3. Abra o arquivo en.default.json.
  4. Crie uma linha nova no final do arquivo e inclua este código: 
"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}
  1. Clique em Salvar.

Tudo pronto para começar a vender com a Shopify?

Experimente de graça