Abi
Logi sisse

Kogusereeglite ja mahupõhise hinnakujunduse kuvamine poes

Saad poes kuvada B2B-kataloogi kogusereegleid ja mahupõhist hinnakujundust, uuendades poe teema uusimale versioonile.

Kui sa ei soovi oma teemat muuta ega uuendada, saad lisada kogusereeglite ja mahupõhise hinnakujunduse kuvamiseks teemasse järgmise koodi.

Sellel lehel

Mida arvestada kogusereeglite ja mahupõhise hinnakujunduse lisamisel teema koodi

Enne kogusereeglite ja mahupõhise hinnakujunduse lisamist teema koodi tutvu järgmisega:

  • See on edasijõudnutele mõeldud õpetus. Kui teema koodi lugemine ja muutmine pole sulle tuttav, saad teha koostööd arendajaga või palgata Shopify partneri.
  • Enne teemafailide uuendamist dubljeeri oma teema, et luua varukoopia.
  • B2B-kataloogi kogusereegleid toetatakse tasuta Shopify teemades alates versioonist 8.0.0. Mahupõhist hinnakujundust toetatakse alates versioonist 11.0.0.

Toote kogus ostukorvis

Toote variandi ostukorvi koguse väärtust saab kuvada tootelehel või esiletõstetud toote jaotises. Väärtuse toomiseks saab kasutada keelt Liquid.

Ostukorvis oleva toote koguse Liquid-koodi lisamine

Saad lisada ostukorvi koguse toetamiseks koodi järgmistesse teemafailidesse:

  • main-product.liquid või sarnane
  • featured-product.liquid või sarnane

Sammud:

  1. Ava oma Shopify administraatoris Veebipood.

  2. Otsi üles teema, mida soovid muuta, klõpsa toimingute menüü avamiseks nuppu Horizontal menu ja seejärel valikut Muuda koodi.

  3. Ava fail, mida soovid muuta.

  4. Loo faili lõppu uus rida ja lisa järgmine kood:

{% 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. Klõpsa nuppu Salvesta.

Ostukorvi koguse JavaScripti koodi lisamine

Kui variandi ostukorvi kogus muutub, tuleb tootelehel või esiletõstetud toote jaotises kuvatavat väärtust uuendada. Uuendatud väärtuse toomiseks saab kasutada JavaScripti koodi.

Koodi saab lisada faili theme.js või sarnasesse.

Sammud:

  1. Ava oma Shopify administraatoris Veebipood.

  2. Otsi üles teema, mida soovid muuta, klõpsa toimingute menüü avamiseks nuppu Horizontal menu ja seejärel valikut Muuda koodi.

  3. Ava fail theme.js.

  4. Loo faili lõppu uus rida ja lisa järgmine kood:

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. Klõpsa nuppu Salvesta.

Kogusereeglid

Toote variandi kogusereegleid saab kuvada tootelehel või esiletõstetud toote jaotises. Reeglite toomiseks saab kasutada keelt Liquid.

Kogusereeglite Liquid-koodi lisamine

Saad lisada kogusereeglite toetamiseks koodi järgmistesse teemafailidesse:

  • main-product.liquid või sarnane
  • featured-product.liquid või sarnane

Sammud:

  1. Ava oma Shopify administraatoris Veebipood.

  2. Otsi üles teema, mida soovid muuta, klõpsa toimingute menüü avamiseks nuppu Horizontal menu ja seejärel valikut Muuda koodi.

  3. Ava fail, mida soovid muuta.

  4. Loo faili lõppu uus rida ja lisa järgmine kood:

{% 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. Klõpsa nuppu Salvesta.

Kogusereeglite JavaScripti koodi lisamine

Igal toote variandil võivad olla omad kogusereeglid. Pärast teise variandi valimist tuleb tootelehel või esiletõstetud toote jaotises kuvatavaid kogusereegleid uuendada. Uuendatud väärtuse toomiseks saab kasutada JavaScripti koodi.

  • theme.js või sarnane
  • en.default.json

Sammud:

  1. Ava oma Shopify administraatoris Veebipood.

  2. Otsi üles teema, mida soovid muuta, klõpsa toimingute menüü avamiseks nuppu Horizontal menu ja seejärel valikut Muuda koodi.

  3. Ava fail theme.js.

  4. Loo faili lõppu uus rida ja lisa järgmine kood:

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. Klõpsa nuppu Salvesta.

Mahupõhine hinnakujundus

Mahupõhise hinnakujunduse Liquid-koodi lisamine

Saad lisada mahupõhise hinnakujunduse kuvamiseks koodi järgmistesse teemafailidesse:

  • main-product.liquid või sarnane
  • featured-product.liquid või sarnane

Sammud:

  1. Ava oma Shopify administraatoris Veebipood.

  2. Otsi üles teema, mida soovid muuta, klõpsa toimingute menüü avamiseks nuppu Horizontal menu ja seejärel valikut Muuda koodi.

  3. Ava fail, mida soovid muuta.

  4. Loo faili lõppu uus rida ja lisa järgmine kood:

{%- 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. Klõpsa nuppu Salvesta.

Mahupõhise hinnakujunduse JavaScripti koodi lisamine

Saad lisada mahupõhise hinnakujunduse kuvamiseks koodi järgmisesse teemafaili:

  • theme.js

Sammud:

  1. Ava oma Shopify administraatoris Veebipood.

  2. Otsi üles teema, mida soovid muuta, klõpsa toimingute menüü avamiseks nuppu Horizontal menu ja seejärel valikut Muuda koodi.

  3. Ava fail theme.js.

  4. Loo faili lõppu uus rida ja lisa järgmine kood:

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. Klõpsa nuppu Salvesta.

Lokaatide lisamine

Et kogusereegleid ja mahupõhist hinnakujundust kuvataks sinu e-poe kõigis tõlgitud versioonides, saad lisada lokaate, lisades faili en.default.json järgmised JSON-i tõlkesõned.

Sammud:

  1. Ava oma Shopify administraatoris Veebipood.

  2. Otsi üles teema, mida soovid muuta, klõpsa toimingute menüü avamiseks nuppu Horizontal menu ja seejärel valikut Muuda koodi.

  3. Ava fail en.default.json.

  4. Loo faili lõppu uus rida ja lisa järgmine kood:

"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}
  1. Klõpsa nuppu Salvesta.