Довідка
Увійти

Відображення правил щодо кількості та ціноутворення від обсягу в магазині

Ви можете відображати правила щодо кількості та ціноутворення від обсягу для свого каталогу B2B у магазині, оновивши тему магазину до останньої версії.

Якщо ви не хочете змінювати або оновлювати тему, ви можете додати наведений нижче код до своєї теми, щоб відобразити правила щодо кількості та ціноутворення від обсягу.

На цій сторінці

Що слід врахувати перед додаванням правил щодо кількості та ціноутворення від обсягу до коду теми

Перш ніж додати правила щодо кількості та ціноутворення від обсягу до коду теми, зверніть увагу на таке:

  • Це навчальний посібник для досвідчених користувачів. Якщо ви не маєте досвіду роботи з кодом теми, ви можете залучити розробника або найняти партнера Shopify.
  • Перш ніж оновлювати файли теми, обов’язково продублюйте тему, щоб створити резервну копію.
  • Правила щодо кількості для каталогу B2B підтримуються в безкоштовних темах Shopify версії 8.0.0 або пізніших. Ціноутворення від обсягу підтримується у версії 11.0.0 або пізніших.

Кількість товарів у кошику

Кількість варіантів товару в кошику може відображатися на сторінці товару або в розділі рекомендованих товарів. Значення можна отримати за допомогою Liquid.

Додавання коду Liquid для кількості товарів у кошику

Щоб підтримувати кількість товарів у кошику, ви можете додати код до наведених нижче файлів теми.

  • main-product.liquid або еквівалентний файл
  • featured-product.liquid або еквівалентний файл

Кроки:

  1. У панелі адміністрування Shopify перейдіть у розділ Інтернет-магазин.

  2. Знайдіть потрібну тему, натисніть кнопку Горизонтальне меню, щоб відкрити меню дій, а потім виберіть Редагувати код.

  3. Відкрийте файл, який потрібно редагувати.

  4. Створіть новий рядок унизу файлу та додайте такий код:

{% 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. Натисніть Зберегти.

Додавання коду Javascript для кількості товарів у кошику

Коли змінюється кількість варіантів товару в кошику, значення, що відображається на сторінці товару або в розділі рекомендованих товарів, має оновлюватися. Оновлене значення можна отримати за допомогою коду Javascript.

Ви можете додати код у файл theme.js або еквівалентний.

Кроки:

  1. У панелі адміністрування Shopify перейдіть у розділ Інтернет-магазин.

  2. Знайдіть потрібну тему, натисніть кнопку Горизонтальне меню, щоб відкрити меню дій, а потім виберіть Редагувати код.

  3. Відкрийте файл theme.js.

  4. Створіть новий рядок унизу файлу та додайте такий код:

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. Натисніть Зберегти.

Правила щодо кількості

Правила щодо кількості варіантів товару можуть відображатися на сторінці товару або в розділі рекомендованих товарів. Правила можна отримати за допомогою Liquid.

Додавання коду Liquid для правил щодо кількості

Щоб підтримувати правила щодо кількості, ви можете додати код до наведених нижче файлів теми.

  • main-product.liquid або еквівалентний файл
  • featured-product.liquid або еквівалентний файл

Кроки:

  1. У панелі адміністрування Shopify перейдіть у розділ Інтернет-магазин.

  2. Знайдіть потрібну тему, натисніть кнопку Горизонтальне меню, щоб відкрити меню дій, а потім виберіть Редагувати код.

  3. Відкрийте файл, який потрібно редагувати.

  4. Створіть новий рядок унизу файлу та додайте такий код:

{% 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. Натисніть Зберегти.

Додавання коду Javascript для правил щодо кількості

Кожен варіант товару може мати власний набір правил щодо кількості. Після вибору іншого варіанта потрібно оновити правила щодо кількості, які відображаються на сторінці товару або в розділі рекомендованих товарів. Оновлене значення можна отримати за допомогою коду Javascript.

  • theme.js або еквівалентний файл
  • en.default.json

Кроки:

  1. У панелі адміністрування Shopify перейдіть у розділ Інтернет-магазин.

  2. Знайдіть потрібну тему, натисніть кнопку Горизонтальне меню, щоб відкрити меню дій, а потім виберіть Редагувати код.

  3. Відкрийте файл theme.js.

  4. Створіть новий рядок унизу файлу та додайте такий код:

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. Натисніть Зберегти.

Ціноутворення від обсягу

Додавання коду Liquid для ціноутворення від обсягу

Щоб відображати ціноутворення від обсягу, ви можете додати код до наведених нижче файлів теми.

  • main-product.liquid або еквівалентний файл
  • featured-product.liquid або еквівалентний файл

Кроки:

  1. У панелі адміністрування Shopify перейдіть у розділ Інтернет-магазин.

  2. Знайдіть потрібну тему, натисніть кнопку Горизонтальне меню, щоб відкрити меню дій, а потім виберіть Редагувати код.

  3. Відкрийте файл, який потрібно редагувати.

  4. Створіть новий рядок унизу файлу та додайте такий код:

{%- 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. Натисніть Зберегти.

Додавання коду Javascript для ціноутворення від обсягу

Щоб відображати ціноутворення від обсягу, ви можете додати код до наведеного нижче файлу теми.

  • theme.js

Кроки:

  1. У панелі адміністрування Shopify перейдіть у розділ Інтернет-магазин.

  2. Знайдіть потрібну тему, натисніть кнопку Горизонтальне меню, щоб відкрити меню дій, а потім виберіть Редагувати код.

  3. Відкрийте файл theme.js.

  4. Створіть новий рядок унизу файлу та додайте такий код:

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. Натисніть Зберегти.

Додавання локалей

Щоб правила щодо кількості та ціноутворення від обсягу відображалися в усіх перекладених версіях вашого інтернет-магазину, ви можете додати локалі, вставивши наведені нижче рядки перекладу JSON у файл en.default.json.

Кроки:

  1. У панелі адміністрування Shopify перейдіть у розділ Інтернет-магазин.

  2. Знайдіть потрібну тему, натисніть кнопку Горизонтальне меню, щоб відкрити меню дій, а потім виберіть Редагувати код.

  3. Відкрийте файл en.default.json.

  4. Створіть новий рядок унизу файлу та додайте такий код:

"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}
  1. Натисніть Зберегти.