Pomoć
Prijavi se

Prikazivanje pravila za količinu i određivanja cena na osnovu količine u prodavnici

Možete da prikažete pravila za količinu i cene na osnovu količine za svoj B2B katalog u prodavnici ažuriranjem teme prodavnice na najnoviju verziju.

Ako ne želite da promenite ili ažurirate temu, možete da joj dodate sledeći kod kako biste prikazali pravila za količinu i cene na osnovu količine.

Na ovoj stranici

Stvari koje treba uzeti u obzir pri dodavanju pravila za količinu i cena na osnovu količine u kod teme

Pre nego što dodate pravila za količinu i cene na osnovu količine u kod teme, pregledajte sledeće napomene:

  • Ovo je napredno uputstvo. Ako niste sigurni u to kako se čita i uređuje kod teme, možete da sarađujete sa programerom ili da angažujete Shopify partnera.
  • Pre nego što ažurirate datoteke teme, duplirajte temu kako biste napravili rezervnu kopiju.
  • Pravila za količinu za B2B katalog su podržana u besplatnim Shopify temama, verzija 8.0.0 ili novija. Cene na osnovu količine su podržane u verziji 11.0.0 ili novijoj.

Količina proizvoda u korpi

Vrednost količine varijante proizvoda u korpi može da se prikaže na stranici proizvoda ili u odeljku sa istaknutim proizvodima. Vrednost se može preuzeti pomoću usluge Liquid.

Dodavanje Liquid koda za količinu proizvoda u korpi

Možete da dodate kod u sledeće datoteke teme da biste podržali količinu u korpi:

  • main-product.liquid ili ekvivalentno
  • featured-product.liquid ili ekvivalentno

Koraci:

  1. U Shopify adminu idite na Onlajn prodavnica.

  2. Pronađite temu koju želite da uredite, kliknite na dugme Horizontal menu da biste otvorili meni radnji, a zatim kliknite na Uredi kod.

  3. Otvorite datoteku koju želite da uredite.

  4. Kreirajte novi red na dnu datoteke i dodajte sledeći kod:

{% 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 Sačuvaj.

Dodavanje Javascript koda za količinu u korpi

Kada se količina varijante u korpi promeni, mora se ažurirati vrednost prikazana na stranici proizvoda ili u odeljku sa istaknutim proizvodima. Ažurirana vrednost se može preuzeti pomoću Javascript koda.

Kod možete dodati u datoteku theme.js ili njen ekvivalent.

Koraci:

  1. U Shopify adminu idite na Onlajn prodavnica.

  2. Pronađite temu koju želite da uredite, kliknite na dugme Horizontal menu da biste otvorili meni radnji, a zatim kliknite na Uredi kod.

  3. Otvorite datoteku theme.js.

  4. Kreirajte novi red na dnu datoteke i dodajte sledeći kod:

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 Sačuvaj.

Pravila za količinu

Pravila za količinu varijante proizvoda mogu da se prikažu na stranici proizvoda ili u odeljku sa istaknutim proizvodima. Pravila se mogu preuzeti pomoću usluge Liquid.

Dodavanje Liquid koda za pravila za količinu

Možete da dodate kod u sledeće datoteke teme da biste podržali pravila za količinu:

  • main-product.liquid ili ekvivalentno
  • featured-product.liquid ili ekvivalentno

Koraci:

  1. U Shopify adminu idite na Onlajn prodavnica.

  2. Pronađite temu koju želite da uredite, kliknite na dugme Horizontal menu da biste otvorili meni radnji, a zatim kliknite na Uredi kod.

  3. Otvorite datoteku koju želite da uredite.

  4. Kreirajte novi red na dnu datoteke, a zatim dodajte sledeći kod:

{% 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 Sačuvaj.

Dodavanje Javascript koda za pravila za količinu

Svaka varijanta proizvoda može da ima svoj set pravila za količinu. Kada izaberete drugu varijantu, potrebno je ažurirati pravila za količinu prikazana na stranici proizvoda ili u odeljku sa istaknutim proizvodima. Ažurirana vrednost se može preuzeti pomoću Javascript koda.

  • theme.js ili ekvivalentno
  • en.default.json

Koraci:

  1. U Shopify adminu idite na Onlajn prodavnica.

  2. Pronađite temu koju želite da uredite, kliknite na dugme Horizontal menu da biste otvorili meni radnji, a zatim kliknite na Uredi kod.

  3. Otvorite datoteku theme.js.

  4. Kreirajte novi red na dnu datoteke, a zatim dodajte sledeći kod:

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 Sačuvaj.

Cene na osnovu količine

Dodavanje Liquid koda za cene na osnovu količine

Možete da dodate kod u sledeće datoteke teme da biste prikazali cene na osnovu količine:

  • main-product.liquid ili ekvivalentno
  • featured-product.liquid ili ekvivalentno

Koraci:

  1. U Shopify adminu idite na Onlajn prodavnica.

  2. Pronađite temu koju želite da uredite, kliknite na dugme Horizontal menu da biste otvorili meni radnji, a zatim kliknite na Uredi kod.

  3. Otvorite datoteku koju želite da uredite.

  4. Kreirajte novi red na dnu datoteke, a zatim dodajte sledeći kod:

{%- 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 Sačuvaj.

Dodavanje Javascript koda za cene na osnovu količine

Možete da dodate kod u sledeću datoteku teme da biste prikazali cene na osnovu količine:

  • theme.js

Koraci:

  1. U Shopify adminu idite na Onlajn prodavnica.

  2. Pronađite temu koju želite da uredite, kliknite na dugme Horizontal menu da biste otvorili meni radnji, a zatim kliknite na Uredi kod.

  3. Otvorite datoteku theme.js.

  4. Kreirajte novi red na dnu datoteke, a zatim dodajte sledeći kod:

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 Sačuvaj.

Dodavanje lokaliteta

Da biste se uverili u to da se pravila za količinu i cene na osnovu količine prikazuju u svim prevedenim verzijama vaše internet prodavnice, možete da dodate lokalitete tako što ćete dodati sledeće JSON stringove prevoda u datoteku en.default.json.

Koraci:

  1. U Shopify adminu idite na Onlajn prodavnica.

  2. Pronađite temu koju želite da uredite, kliknite na dugme Horizontal menu da biste otvorili meni radnji, a zatim kliknite na Uredi kod.

  3. Otvorite datoteku en.default.json.

  4. Kreirajte novi red na dnu datoteke, a zatim dodajte sledeći kod:

"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}
  1. Kliknite na Sačuvaj.