Pomocník
Prihlásiť sa

Zobrazenie pravidiel pre množstvo a množstevných cien v obchode

Pravidlá pre množstvo a množstevné ceny pre B2B katalóg môžete vo svojom obchode zobraziť aktualizáciou témy obchodu na najnovšiu verziu.

Ak svoju tému nechcete meniť ani aktualizovať, na zobrazenie pravidiel pre množstvo a množstevných cien môžete do témy pridať nasledujúci kód.

Na tejto stránke

Čo treba zvážiť pri pridávaní pravidiel pre množstvo a množstevných cien do kódu témy

Pred pridaním pravidiel pre množstvo a množstevných cien do kódu témy zvážte nasledujúce skutočnosti:

  • Toto je pokročilý tutoriál. Ak vám čítanie a úprava kódu témy robí problémy, môžete spolupracovať s vývojárom alebo si najať partnera Shopify.
  • Pred úpravou súborov témy si duplikujte tému, čím vytvoríte jej záložnú kópiu.
  • Pravidlá pre množstvo pre B2B katalóg sú podporované v bezplatných témach Shopify verzie 8.0.0 alebo novšej. Množstevné ceny sú podporované vo verzii 11.0.0 alebo novšej.

Množstvo produktu v košíku

Množstvo variantu produktu v košíku sa môže zobraziť na stránke produktu alebo v sekcii odporúčaných produktov. Túto hodnotu možno načítať pomocou jazyka Liquid.

Pridať kód Liquid pre množstvo produktu v košíku

Kód na podporu množstva v košíku môžete pridať do nasledujúcich súborov vo svojej téme:

  • main-product.liquid alebo ekvivalentný súbor
  • featured-product.liquid alebo ekvivalentný súbor

Kroky:

  1. V administrátorovi Shopify prejdite na Online obchod > Témy.

  2. Nájdite tému, ktorú chcete upraviť, kliknutím na tlačidlo ... otvorte ponuku akcií a potom kliknite na položku Upraviť kód.

  3. Otvorte súbor, ktorý chcete upraviť.

  4. Na koniec súboru pridajte nový riadok a vložte nasledujúci kód:

{% 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. Kliknite na Uložiť.

Pridať kód JavaScript pre množstvo v košíku

Pri zmene množstva variantu v košíku sa musí aktualizovať hodnota zobrazená na stránke produktu alebo v sekcii odporúčaných produktov. Aktualizovanú hodnotu možno načítať pomocou kódu JavaScript.

Kód môžete pridať do súboru theme.js alebo jeho ekvivalentu.

Kroky:

  1. V administrátorovi Shopify prejdite na Online obchod > Témy.

  2. Nájdite tému, ktorú chcete upraviť, kliknutím na tlačidlo ... otvorte ponuku akcií a potom kliknite na položku Upraviť kód.

  3. Otvorte súbor theme.js.

  4. Na koniec súboru pridajte nový riadok a vložte nasledujúci kód:

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. Kliknite na Uložiť.

Pravidlá pre množstvo

Pravidlá pre množstvo variantu produktu sa môžu zobraziť na stránke produktu alebo v sekcii odporúčaných produktov. Tieto pravidlá možno načítať pomocou jazyka Liquid.

Pridať kód Liquid pre pravidlá pre množstvo

Kód na podporu pravidiel pre množstvo môžete pridať do nasledujúcich súborov vo svojej téme:

  • main-product.liquid alebo ekvivalentný súbor
  • featured-product.liquid alebo ekvivalentný súbor

Kroky:

  1. V administrátorovi Shopify prejdite na Online obchod > Témy.

  2. Nájdite tému, ktorú chcete upraviť, kliknutím na tlačidlo ... otvorte ponuku akcií a potom kliknite na položku Upraviť kód.

  3. Otvorte súbor, ktorý chcete upraviť.

  4. Na koniec súboru pridajte nový riadok a potom vložte nasledujúci kód:

{% 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. Kliknite na Uložiť.

Pridať kód JavaScript pre pravidlá pre množstvo

Každý variant produktu môže mať vlastnú skupinu pravidiel pre množstvo. Po výbere iného variantu sa musia pravidlá pre množstvo zobrazené na stránke produktu alebo v sekcii odporúčaných produktov aktualizovať. Aktualizovanú hodnotu možno načítať pomocou kódu JavaScript.

  • theme.js alebo ekvivalentný súbor
  • en.default.json

Kroky:

  1. V administrátorovi Shopify prejdite na Online obchod > Témy.

  2. Nájdite tému, ktorú chcete upraviť, kliknutím na tlačidlo ... otvorte ponuku akcií a potom kliknite na položku Upraviť kód.

  3. Otvorte súbor theme.js.

  4. Na koniec súboru pridajte nový riadok a potom vložte nasledujúci kód:

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. Kliknite na Uložiť.

Množstevné ceny

Pridať kód Liquid pre množstevné ceny

Ak chcete zobraziť množstevné ceny, môžete do nasledujúcich súborov vo svojej téme pridať kód:

  • main-product.liquid alebo ekvivalentný súbor
  • featured-product.liquid alebo ekvivalentný súbor

Kroky:

  1. V administrátorovi Shopify prejdite na Online obchod > Témy.

  2. Nájdite tému, ktorú chcete upraviť, kliknutím na tlačidlo ... otvorte ponuku akcií a potom kliknite na položku Upraviť kód.

  3. Otvorte súbor, ktorý chcete upraviť.

  4. Na koniec súboru pridajte nový riadok a potom vložte nasledujúci kód:

{%- 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. Kliknite na Uložiť.

Pridať kód JavaScript pre množstevné ceny

Ak chcete zobraziť množstevné ceny, môžete do nasledujúceho súboru vo svojej téme pridať kód:

  • theme.js

Kroky:

  1. V administrátorovi Shopify prejdite na Online obchod > Témy.

  2. Nájdite tému, ktorú chcete upraviť, kliknutím na tlačidlo ... otvorte ponuku akcií a potom kliknite na položku Upraviť kód.

  3. Otvorte súbor theme.js.

  4. Na koniec súboru pridajte nový riadok a potom vložte nasledujúci kód:

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. Kliknite na Uložiť.

Pridať jazyky a regióny

Ak chcete zabezpečiť, že sa pravidlá pre množstvo a množstevné ceny zobrazia vo všetkých preložených verziách vášho online obchodu, môžete pridať jazyky a regióny pridaním nasledujúcich prekladových reťazcov vo formáte JSON do súboru en.default.json.

Kroky:

  1. V administrátorovi Shopify prejdite na Online obchod > Témy.

  2. Nájdite tému, ktorú chcete upraviť, kliknutím na tlačidlo ... otvorte ponuku akcií a potom kliknite na položku Upraviť kód.

  3. Otvorte súbor en.default.json.

  4. Na koniec súboru pridajte nový riadok a potom vložte nasledujúci kód:

"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}
  1. Kliknite na Uložiť.