तुमच्या स्टोअरवर प्रमाणाचे नियम आणि प्रमाणानुसार किंमत प्रदर्शित करणे

तुम्ही तुमच्या स्टोअरची थीम नवीनतम आवृत्तीवर अपडेट करून तुमच्या B2B कॅटलॉगसाठी प्रमाणाचे नियम आणि प्रमाणानुसार किंमत प्रदर्शित करू शकता.

जर तुम्हाला तुमची थीम बदलायची किंवा अपडेट करायची नसेल, तर प्रमाणाचे नियम आणि प्रमाणानुसार किंमत प्रदर्शित करण्यासाठी तुम्ही तुमच्या थीममध्ये खालील कोड जोडू शकता.

या पेजवर

तुमच्या थीम कोडमध्ये प्रमाणाचे नियम आणि प्रमाणानुसार किंमत जोडण्यासाठी विचारात घ्यायच्या गोष्टी

तुमच्या थीम कोडमध्ये प्रमाणाचे नियम आणि प्रमाणानुसार किंमत जोडण्यापूर्वी, खालील गोष्टी विचारात घ्या:

हे एक प्रगत ट्युटोरिअल आहे. जर तुम्हाला थीम कोड वाचणे आणि एडिट करणे अवघड वाटत असेल, तर तुम्ही डेव्हलपरसोबत काम करू शकता किंवा Shopify पार्टनरला नियुक्त करू शकता.
तुमच्या थीम फाईल्समध्ये बदल करण्यापूर्वी, खात्री करा की तुम्ही बॅकअप कॉपी तयार करण्यासाठी तुमची थीम डुप्लिकेट करता.
B2B कॅटलॉगसाठी प्रमाणाचे नियम विनामूल्य Shopify थीम्स, 8.0.0 किंवा नंतरच्या आवृत्तीवर सपोर्टेड आहेत. प्रमाणानुसार किंमत 11.0.0 किंवा नंतरच्या आवृत्तीवर सपोर्टेड आहे.

उत्पादन कार्टचे प्रमाण

उत्पादन व्हेरिएंटची कार्ट प्रमाणाची व्हॅल्यू उत्पादन पेजवर किंवा वैशिष्ट्यीकृत उत्पादन विभागात प्रदर्शित केली जाऊ शकते. Liquid वापरून ही व्हॅल्यू मिळवली जाऊ शकते.

Liquid उत्पादन कार्ट प्रमाण कोड जोडा

कार्टच्या प्रमाणाला सपोर्ट करण्यासाठी तुम्ही तुमच्या थीमीमधील खालील फाईल्समध्ये कोड जोडू शकता:

main-product.liquid किंवा समतुल्य
featured-product.liquid किंवा समतुल्य

पायऱ्या:

तुमच्या Shopify ॲडमिनमधून, ऑनलाइन स्टोअर वर जा.
तुम्हाला एडिट करायची असलेली थीम शोधा, ॲक्शन्स मेनू उघडण्यासाठी बटणावर क्लिक करा आणि त्यानंतर कोड एडिट करा वर क्लिक करा.
तुम्हाला जी फाईल एडिट करायची आहे ती उघडा.
फाईलच्या तळाशी एक नवीन ओळ तयार करा आणि खालील कोड जोडा:

{% 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>

सेव्ह करा वर क्लिक करा.

Javascript कार्ट प्रमाण कोड जोडा

जेव्हा व्हेरिएंटचे कार्टचे प्रमाण बदलते, तेव्हा उत्पादन पेजवर किंवा वैशिष्ट्यीकृत उत्पादन विभागात प्रदर्शित केलेली व्हॅल्यू अपडेट केली जाणे आवश्यक आहे. अपडेट केलेली व्हॅल्यू Javascript कोड वापरून मिळवली जाऊ शकते.

तुम्ही theme.js फाईल किंवा समतुल्य मध्ये कोड जोडू शकता.

पायऱ्या:

तुमच्या Shopify ॲडमिनमधून, ऑनलाइन स्टोअर वर जा.
तुम्हाला एडिट करायची असलेली थीम शोधा, ॲक्शन्स मेनू उघडण्यासाठी बटणावर क्लिक करा आणि त्यानंतर कोड एडिट करा वर क्लिक करा.
theme.js फाईल उघडा.
फाईलच्या तळाशी एक नवीन ओळ तयार करा आणि खालील कोड जोडा:

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;
  });

सेव्ह करा वर क्लिक करा.

प्रमाणाचे नियम

उत्पादन व्हेरिएंटचे प्रमाणाचे नियम उत्पादन पेजवर किंवा वैशिष्ट्यीकृत उत्पादन विभागात प्रदर्शित केले जाऊ शकतात. Liquid वापरून हे नियम मिळवले जाऊ शकतात.

Liquid प्रमाणाचे नियम कोड जोडा

प्रमाणाच्या नियमांना सपोर्ट करण्यासाठी तुम्ही तुमच्या थीममधील खालील फाईल्समध्ये कोड जोडू शकता:

main-product.liquid किंवा समतुल्य
featured-product.liquid किंवा समतुल्य

पायऱ्या:

तुमच्या Shopify ॲडमिनमधून, ऑनलाइन स्टोअर वर जा.
तुम्हाला एडिट करायची असलेली थीम शोधा, ॲक्शन्स मेनू उघडण्यासाठी बटणावर क्लिक करा आणि त्यानंतर कोड एडिट करा वर क्लिक करा.
तुम्हाला जी फाईल एडिट करायची आहे ती उघडा.
फाईलच्या तळाशी एक नवीन ओळ तयार करा आणि त्यानंतर खालील कोड जोडा:

{% 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>

सेव्ह करा वर क्लिक करा.

Javascript प्रमाणाचे नियम कोड जोडा

उत्पादनाच्या प्रत्येक व्हेरिएंटसाठी स्वतःचे प्रमाणाचे नियम असू शकतात. भिन्न व्हेरिएंट निवडल्यानंतर, उत्पादन पेजवर किंवा वैशिष्ट्यीकृत उत्पादन विभागात प्रदर्शित केलेले प्रमाणाचे नियम अपडेट करणे आवश्यक आहे. अपडेट केलेली व्हॅल्यू Javascript कोड वापरून मिळवली जाऊ शकते.

theme.js किंवा समतुल्य
en.default.json

पायऱ्या:

तुमच्या Shopify ॲडमिनमधून, ऑनलाइन स्टोअर वर जा.
तुम्हाला एडिट करायची असलेली थीम शोधा, ॲक्शन्स मेनू उघडण्यासाठी बटणावर क्लिक करा आणि त्यानंतर कोड एडिट करा वर क्लिक करा.
theme.js फाईल उघडा.
फाईलच्या तळाशी एक नवीन ओळ तयार करा आणि त्यानंतर खालील कोड जोडा:

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;
  });

सेव्ह करा वर क्लिक करा.

प्रमाणानुसार किंमत

Liquid प्रमाणानुसार किंमत कोड जोडा

प्रमाणानुसार किंमत प्रदर्शित करण्यासाठी तुम्ही तुमच्या थीममधील खालील फाईल्समध्ये कोड जोडू शकता:

main-product.liquid किंवा समतुल्य
featured-product.liquid किंवा समतुल्य

पायऱ्या:

तुमच्या Shopify ॲडमिनमधून, ऑनलाइन स्टोअर वर जा.
तुम्हाला एडिट करायची असलेली थीम शोधा, ॲक्शन्स मेनू उघडण्यासाठी बटणावर क्लिक करा आणि त्यानंतर कोड एडिट करा वर क्लिक करा.
तुम्हाला जी फाईल एडिट करायची आहे ती उघडा.
फाईलच्या तळाशी एक नवीन ओळ तयार करा आणि त्यानंतर खालील कोड जोडा:

{%- 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 -%}

सेव्ह करा वर क्लिक करा.

Javascript प्रमाणानुसार किंमत कोड जोडा

प्रमाणानुसार किंमत प्रदर्शित करण्यासाठी तुम्ही तुमच्या थीममधील खालील फाईलमध्ये कोड जोडू शकता:

theme.js

पायऱ्या:

तुमच्या Shopify ॲडमिनमधून, ऑनलाइन स्टोअर वर जा.
तुम्हाला एडिट करायची असलेली थीम शोधा, ॲक्शन्स मेनू उघडण्यासाठी बटणावर क्लिक करा आणि त्यानंतर कोड एडिट करा वर क्लिक करा.
theme.js फाईल उघडा.
फाईलच्या तळाशी एक नवीन ओळ तयार करा आणि त्यानंतर खालील कोड जोडा:

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');
        }
      }
    },
  );
}

सेव्ह करा वर क्लिक करा.

लोकॅल्स जोडा

तुमच्या ऑनलाइन स्टोअरच्या सर्व अनुवादित आवृत्त्यांवर प्रमाणाचे नियम आणि प्रमाणानुसार किंमत प्रदर्शित होईल याची खात्री करण्यासाठी, तुम्ही तुमच्या en.default.json फाईलमध्ये खालील JSON अनुवाद स्ट्रिंग्स जोडून लोकॅल्स जोडू शकता.

पायऱ्या:

तुमच्या Shopify ॲडमिनमधून, ऑनलाइन स्टोअर वर जा.
तुम्हाला एडिट करायची असलेली थीम शोधा, ॲक्शन्स मेनू उघडण्यासाठी बटणावर क्लिक करा आणि त्यानंतर कोड एडिट करा वर क्लिक करा.
en.default.json फाईल उघडा.
फाईलच्या तळाशी एक नवीन ओळ तयार करा आणि त्यानंतर खालील कोड जोडा:

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

सेव्ह करा वर क्लिक करा.