Ohje
Kirjaudu sisään

Määräsääntöjen ja volyymihinnoittelun näyttäminen kaupassasi

Voit näyttää B2B-luettelon määräsäännöt ja volyymihinnoittelun kaupassasi päivittämällä kauppasi teeman uusimpaan versioon.

Jos et halua vaihtaa tai päivittää teemaasi, voit lisätä seuraavan koodin teemaasi, jolla näytetään määräsäännöt ja volyymihinnoittelu.

Tällä sivulla

Huomioitavia seikkoja määräsääntöjen ja volyymihinnoittelun lisäämisessä teemakoodiin

Ennen kuin lisäät määräsäännöt ja volyymihinnoittelun teemakoodiisi, tutustu seuraaviin huomioitaviin seikkoihin:

  • Tämä on edistynyt tutoriaali. Jos teemakoodin lukeminen ja muokkaaminen ei ole sinulle tuttua, voit työskennellä kehittäjän kanssa tai palkata Shopify Partnerin.
  • Ennen kuin teet päivityksiä teematiedostoihisi, varmista, että monistat teemasi luodaksesi siitä varmuuskopion.
  • B2B-luettelon määräsääntöjä tuetaan Shopifyn ilmaisissa teemoissa, joiden versio on 8.0.0 tai uudempi. Volyymihinnoittelua tuetaan versiossa 11.0.0 tai uudemmissa.

Tuotteen ostoskorimäärä

Tuoteversion ostoskorimäärä voidaan näyttää tuotesivulla tai esittelytuoteosiossa. Arvo voidaan hakea Liquid-kielellä.

Lisää Liquid-koodi tuotteen ostoskorimäärälle

Voit lisätä koodia seuraaviin teemasi tiedostoihin ostoskorimäärän tukemiseksi:

  • main-product.liquid tai vastaava
  • featured-product.liquid tai vastaava

Vaiheet:

  1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

  2. Etsi teema, jota haluat muokata, klikkaa ...-painiketta avataksesi toimintovalikon ja klikkaa sitten Muokkaa koodia.

  3. Avaa tiedosto, jota haluat muokata.

  4. Luo uusi rivi tiedoston loppuun ja lisää seuraava koodi:

{% 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. Klikkaa Tallenna.

Lisää Javascript-koodi ostoskorimäärälle

Kun version ostoskorimäärä muuttuu, tuotesivulla tai esittelytuoteosiossa näkyvä arvo on päivitettävä. Päivitetty arvo voidaan hakea Javascript-koodilla.

Voit lisätä koodia theme.js-tiedostoon tai vastaavaan.

Vaiheet:

  1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

  2. Etsi teema, jota haluat muokata, klikkaa ...-painiketta avataksesi toimintovalikon ja klikkaa sitten Muokkaa koodia.

  3. Avaa theme.js-tiedosto.

  4. Luo uusi rivi tiedoston loppuun ja lisää seuraava koodi:

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. Klikkaa Tallenna.

Määräsäännöt

Tuoteversion määräsäännöt voidaan näyttää tuotesivulla tai esittelytuoteosiossa. Säännöt voidaan hakea Liquid-kielellä.

Lisää Liquid-koodi määräsäännöille

Voit lisätä koodia seuraaviin teemasi tiedostoihin määräsääntöjen tukemiseksi:

  • main-product.liquid tai vastaava
  • featured-product.liquid tai vastaava

Vaiheet:

  1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

  2. Etsi teema, jota haluat muokata, klikkaa ...-painiketta avataksesi toimintovalikon ja klikkaa sitten Muokkaa koodia.

  3. Avaa tiedosto, jota haluat muokata.

  4. Luo uusi rivi tiedoston loppuun ja lisää sitten seuraava koodi:

{% 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. Klikkaa Tallenna.

Lisää Javascript-koodi määräsäännöille

Jokaisella tuotteen versiolla voi olla omat määräsääntönsä. Kun toinen versio valitaan, tuotesivulla tai esittelytuoteosiossa näkyvät määräsäännöt on päivitettävä. Päivitetty arvo voidaan hakea Javascript-koodilla.

  • theme.js tai vastaava
  • en.default.json

Vaiheet:

  1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

  2. Etsi teema, jota haluat muokata, klikkaa ...-painiketta avataksesi toimintovalikon ja klikkaa sitten Muokkaa koodia.

  3. Avaa theme.js-tiedosto.

  4. Luo uusi rivi tiedoston loppuun ja lisää sitten seuraava koodi:

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. Klikkaa Tallenna.

Volyymihinnoittelu

Lisää Liquid-koodi volyymihinnoittelulle

Voit lisätä koodia seuraaviin teemasi tiedostoihin volyymihinnoittelun näyttämiseksi:

  • main-product.liquid tai vastaava
  • featured-product.liquid tai vastaava

Vaiheet:

  1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

  2. Etsi teema, jota haluat muokata, klikkaa ...-painiketta avataksesi toimintovalikon ja klikkaa sitten Muokkaa koodia.

  3. Avaa tiedosto, jota haluat muokata.

  4. Luo uusi rivi tiedoston loppuun ja lisää sitten seuraava koodi:

{%- 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. Klikkaa Tallenna.

Lisää Javascript-koodi volyymihinnoittelulle

Voit lisätä koodia seuraavaan teemasi tiedostoon volyymihinnoittelun näyttämiseksi:

  • theme.js

Vaiheet:

  1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

  2. Etsi teema, jota haluat muokata, klikkaa ...-painiketta avataksesi toimintovalikon ja klikkaa sitten Muokkaa koodia.

  3. Avaa theme.js-tiedosto.

  4. Luo uusi rivi tiedoston loppuun ja lisää sitten seuraava koodi:

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. Klikkaa Tallenna.

Lisää kieliversiot

Varmistaaksesi, että määräsäännöt ja volyymihinnoittelu näkyvät kaikissa verkkokauppasi käännetyissä versioissa, voit lisätä kieliversioita lisäämällä seuraavat JSON-käännösmerkkijonot en.default.json-tiedostoosi.

Vaiheet:

  1. Siirry Shopifyn ohjausnäkymässä kohtaan Verkkokauppa > Teemat.

  2. Etsi teema, jota haluat muokata, klikkaa ...-painiketta avataksesi toimintovalikon ja klikkaa sitten Muokkaa koodia.

  3. Avaa en.default.json-tiedosto.

  4. Luo uusi rivi tiedoston loppuun ja lisää sitten seuraava koodi:

"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}
  1. Klikkaa Tallenna.