Exibir regras de quantidade e preços por volume em sua loja
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:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que quer editar, clique no botão ... para abrir o menu de ações e depois em Editar código.
Abra o arquivo que você quer editar.
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>
- 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:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que quer editar, clique no botão ... para abrir o menu de ações e depois em Editar código.
Abra o arquivo
theme.js
.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;
});
- 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:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que quer editar, clique no botão ... para abrir o menu de ações e depois em Editar código.
Abra o arquivo que você quer editar.
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>
-
{{- '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>
-
{{- 'products.product.quantity.maximum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.max -}}
</span>
{%- endif -%}
</div>
- 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:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que quer editar, clique no botão ... para abrir o menu de ações e depois em Editar código.
Abra o arquivo
theme.js
.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;
});
- 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:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que quer editar, clique no botão ... para abrir o menu de ações e depois em Editar código.
Abra o arquivo que você quer editar.
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 -%}
- 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:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que quer editar, clique no botão ... para abrir o menu de ações e depois em Editar código.
Abra o arquivo
theme.js
.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');
}
}
},
);
}
- 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:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que quer editar, clique no botão ... para abrir o menu de ações e depois em Editar código.
Abra o arquivo
en.default.json
.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"
}
}
}
- Clique em Salvar.