మీ స్టోర్‌లో పరిమాణ నియమాలు మరియు వాల్యూమ్ ప్రైసింగ్‌ని ప్రదర్శించడం

మీరు మీ స్టోర్ థీమ్‌ను తాజా వెర్షన్‌కు అప్‌డేట్ చేయడం ద్వారా మీ స్టోర్‌లోని మీ 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>

సేవ్ చేయండిపై క్లిక్ చేయండి.

జావాస్క్రిప్ట్ కార్ట్ పరిమాణం కోడ్‌ని జోడించండి

ఒక వేరియంట్ కార్ట్ పరిమాణం మారినప్పుడు, ఉత్పత్తి పేజీ లేదా ఫీచర్ చేయబడిన ఉత్పత్తి విభాగంలో ప్రదర్శించబడే విలువను తప్పనిసరిగా అప్‌డేట్ చేయాలి. అప్‌డేట్ చేసిన విలువను జావాస్క్రిప్ట్ కోడ్‌ను ఉపయోగించి పొందవచ్చు.

మీరు 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>

సేవ్ చేయండిపై క్లిక్ చేయండి.

జావాస్క్రిప్ట్ పరిమాణ నియమాల కోడ్‌ను జోడించండి

ఒక ఉత్పత్తి యొక్క ప్రతి వేరియంట్ దాని స్వంత పరిమాణ నియమాలను కలిగి ఉండవచ్చు. విభిన్న వేరియంట్ ఎంచుకోబడిన తర్వాత, ఉత్పత్తి పేజీలో లేదా ఫీచర్ చేయబడిన ఉత్పత్తి విభాగంలో ప్రదర్శించబడే పరిమాణ నియమాలను అప్‌డేట్ చేయాలి. అప్‌డేట్ చేసిన విలువను జావాస్క్రిప్ట్ కోడ్‌ని ఉపయోగించి పొందవచ్చు.

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

సేవ్ చేయండిపై క్లిక్ చేయండి.

జావాస్క్రిప్ట్ వాల్యూమ్ ప్రైసింగ్ కోడ్‌ను జోడించండి

వాల్యూమ్ ప్రైసింగ్‌ని ప్రదర్శించడానికి మీరు మీ థీమ్‌లోని ఈ కింది ఫైల్‌కు కోడ్‌ని జోడించవచ్చు:

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"
    }
  }
}

సేవ్ చేయండిపై క్లిక్ చేయండి.