તમારા સ્ટોર પર જથ્થાના નિયમો અને વૉલ્યુમ પ્રાઇસિંગને પ્રદર્શિત કરવા

તમે તમારા સ્ટોરની થીમને નવીનતમ સંસ્કરણમાં અપડેટ કરીને તમારા સ્ટોર પર તમારા B2B કૅટેલોગ માટે જથ્થાના નિયમો અને વૉલ્યુમ પ્રાઇસિંગ પ્રદર્શિત કરી શકો છો.

જો તમે તમારી થીમને બદલવા અથવા અપડેટ કરવા માંગતા ન હોવ, તો તમે જથ્થાના નિયમો અને વૉલ્યુમ પ્રાઇસિંગને પ્રદર્શિત કરવા માટે તમારી થીમમાં નીચેનો કોડ ઉમેરી શકો છો.

આ પૃષ્ઠ પર

તમારા થીમ કોડમાં જથ્થાના નિયમો અને વૉલ્યુમ પ્રાઇસિંગ ઉમેરવા માટે ધ્યાનમાં લેવા જેવી બાબતો

તમે તમારા થીમ કોડમાં જથ્થાના નિયમો અને વૉલ્યુમ પ્રાઇસિંગ ઉમેરો તે પહેલાં, નીચેની ધ્યાનમાં લેવા જેવી બાબતોની સમીક્ષા કરો:

આ એક ઍડવાન્સ્ડ ટ્યુટોરિયલ છે. જો તમે થીમ કોડ વાંચવામાં અને એડિટ કરવામાં અનુકૂળ ન હોવ, તો તમે કોઈ ડેવલપર સાથે કામ કરી શકો છો અથવા Shopify પાર્ટનરને કામે રાખી શકો છો.
તમે તમારી થીમ ફાઇલો અપડેટ કરો તે પહેલાં, ખાતરી કરો કે તમે બૅકઅપ કૉપિ બનાવવા માટે તમારી થીમને ડુપ્લિકેટ કરો.
B2B કૅટેલોગ માટે જથ્થાના નિયમો, સંસ્કરણ 8.0.0 અથવા તેના પછીની મફત Shopify થીમ પર સપોર્ટેડ છે. વૉલ્યુમ પ્રાઇસિંગ સંસ્કરણ 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"
    }
  }
}

સેવ કરો પર ક્લિક કરો.