Ajuda
Fazer login

Exibição de regras de quantidade e preços por volume na loja

É possível exibir regras de quantidade e preços por volume para o catálogo B2B na loja ao atualizar o tema da loja para a versão mais recente.

Caso não queira alterar ou atualizar o tema, adicione o código a seguir para exibir as regras de quantidade e os preços por volume.

Nesta página

Considerações sobre como adicionar regras de quantidade e preços por volume ao código do tema

Antes de adicionar regras de quantidade e preços por volume ao código do tema, analise as seguintes considerações:

  • Este é um tutorial avançado. Se você não se sentir à vontade para ler e editar o código do tema, trabalhe com um desenvolvedor ou contrate um Parceiro da Shopify.
  • Antes de fazer atualizações nos arquivos do tema, duplique o tema para criar uma cópia de backup.
  • As regras de quantidade para o catálogo B2B são compatíveis com os temas gratuitos da Shopify da versão 8.0.0 ou posterior. Os preços por volume são compatíveis com a versão 11.0.0 ou posterior.

Quantidade do produto no carrinho

O valor da quantidade no carrinho de uma variante de produto pode ser exibido na página do produto ou na seção de produto em destaque. O valor pode ser buscado com o Liquid.

Adicionar código Liquid de quantidade do produto no carrinho

É possível adicionar código aos seguintes arquivos do tema para incluir a compatibilidade com a quantidade no carrinho:

  • 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 você quer editar, clique no botão ... para abrir o menu de ações e, em seguida, clique em Editar código.

  3. Abra o arquivo que deseja editar.

  4. Crie uma nova linha no final do arquivo e adicione o seguinte 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 de quantidade no carrinho

Quando a quantidade no carrinho de uma variante muda, o valor exibido na página do produto ou na seção de produto em destaque precisa ser atualizado. O valor atualizado pode ser buscado com código Javascript.

É possível adicionar código ao arquivo theme.js ou equivalente.

Etapas:

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

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

  3. Abra o arquivo theme.js.

  4. Crie uma nova linha no final do arquivo e adicione o seguinte 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 de uma variante de produto podem ser exibidas na página do produto ou na seção de produto em destaque. As regras podem ser buscadas com o Liquid.

Adicionar código Liquid de regras de quantidade

É possível adicionar código aos seguintes arquivos do tema para incluir a compatibilidade com 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 você quer editar, clique no botão ... para abrir o menu de ações e, em seguida, clique em Editar código.

  3. Abra o arquivo que deseja editar.

  4. Crie uma nova linha no final do arquivo e adicione o seguinte 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 de regras de quantidade

Cada variante de um produto pode ter o próprio conjunto de regras de quantidade. Depois que uma variante diferente é selecionada, as regras de quantidade exibidas na página do produto ou na seção de produto em destaque precisam ser atualizadas. O valor atualizado pode ser buscado com código Javascript.

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

Etapas:

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

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

  3. Abra o arquivo theme.js.

  4. Crie uma nova linha no final do arquivo e adicione o seguinte 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 Liquid de preços por volume

É possível adicionar código aos seguintes arquivos do tema para exibir os preços 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 você quer editar, clique no botão ... para abrir o menu de ações e, em seguida, clique em Editar código.

  3. Abra o arquivo que deseja editar.

  4. Crie uma nova linha no final do arquivo e adicione o seguinte 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 Javascript de preços por volume

É possível adicionar código ao seguinte arquivo do 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 você quer editar, clique no botão ... para abrir o menu de ações e, em seguida, clique em Editar código.

  3. Abra o arquivo theme.js.

  4. Crie uma nova linha no final do arquivo e adicione o seguinte 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 garantir que as regras de quantidade e os preços por volume sejam exibidos em todas as versões traduzidas da loja virtual, adicione localidades incluindo as seguintes strings de tradução JSON ao arquivo en.default.json.

Etapas:

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

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

  3. Abra o arquivo en.default.json.

  4. Crie uma nova linha no final do arquivo e adicione o seguinte 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.