Помощ
Влизане

Показване на правила за количества и ценообразуване според обем във Вашия магазин

Можете да показвате правила за количества и ценообразуване според обем за Вашия B2B каталог във Вашия магазин, като актуализирате темата на магазина си до най-новата версия.

Ако не искате да променяте или актуализирате темата си, можете да добавите следния код към нея, за да показвате правила за количества и ценообразуване според обем.

На тази страница

Съображения при добавяне на правила за количества и ценообразуване според обем към кода на Вашата тема

Преди да добавите правила за количества и ценообразуване според обем към кода на Вашата тема, прегледайте следните съображения:

  • Това е обучение за напреднали. Ако не се чувствате уверени в четенето и редактирането на код на тема, можете да работите с разработчик или да наемете Shopify Partner.
  • Преди да направите актуализации на файловете на темата си, уверете се, че сте дублирали темата си, за да създадете резервно копие.
  • Правилата за количества за 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. Щракнете върху Запазване.