स्क्रिप्ट के लिए अपने लिक्विड टेम्पलेट अपडेट करना

अगर आप अपने ऑनलाइन स्टोर में स्क्रिप्ट चलाते हैं, तो आपको यह जांचना होगा कि वे आपके स्टोरफ़्रंट के पेजों को कैसे प्रभावित करती हैं। कई थीम में आपकी स्क्रिप्ट को सपोर्ट करने के लिए कोड शामिल होता है, लेकिन कुछ में नहीं होता है। अगर आपकी थीम में कोड नहीं है, तो आप उसे जोड़ सकते हैं।

समस्या हल करना

स्क्रिप्ट और थीम के साथ ज़्यादातर समस्याएं उन लाइन आइटम स्क्रिप्ट से जुड़ी होती हैं जो छूट देती हैं। उदाहरण के लिए, ऑर्डर की कुल कीमत सही है, लेकिन लाइन आइटम की कीमतों में छूट नहीं दिखती है। ग्राहकों को यह समझने की ज़रूरत है कि उनकी छूट की गणना कैसे की जाती है। वे मूल और छूट वाली कीमत के साथ-साथ छूट का संक्षिप्त विवरण भी देखना चाहते हैं। अगर आपके कार्ट से इनमें से कोई भी विवरण गायब है, तो आपको लिक्विड कोड जोड़ना होगा ताकि वे दिखाई दें।

आपकी स्क्रिप्ट आपके स्टोरफ़्रंट को कैसे प्रभावित करती है, यह जांचने का एक अच्छा तरीका यह है कि आप ग्राहक के रूप में विज़िट करें और स्क्रिप्ट को ट्रिगर करने वाली कार्रवाइयां करें।

लिक्विड ऑब्जेक्ट गुण

नीचे दी गई सूचियों में वे लिक्विड ऑब्जेक्ट गुण हैं, जो आमतौर पर आपके स्टोर के कार्ट में स्क्रिप्ट को सपोर्ट करने के लिए ज़रूरी होते हैं:

कार्ट ऑब्जेक्ट गुण:

• cart.total_discount
• cart.original_total_price

लाइन आइटम गुण:

• line_item.discounts
• line_item.message
• line_item.original_price
• line_item.original_line_price
• line_item.total_discount

स्क्रिप्ट ऑब्जेक्ट:

• स्टोर की सक्रिय स्क्रिप्ट के बारे में जानकारी देने के लिए स्क्रिप्ट ऑब्जेक्ट का इस्तेमाल किया जा सकता है। स्क्रिप्ट को डीबग करते समय यह ऑब्जेक्ट उपयोगी हो सकता है।

उदाहरण

नीचे दिए गए उदाहरण में उन बदलावों के बारे में बताया गया है, जो आप लाइन आइटम स्क्रिप्ट को सपोर्ट करने के लिए अपने cart.liquid टेम्पलेट में कर सकते हैं।

उदाहरण कार्ट

उदाहरण के लिए, अगर आपके कार्ट में तीन लाइन आइटम हैं:

• सॉकर बॉल
  • मात्रा: 1
  • यूनिट कीमत: $15.00
• टेनिस बॉल
  • मात्रा: 5
  • यूनिट कीमत: $5.00
• रनिंग शू
  • मात्रा: 1
  • यूनिट कीमत: $30.00

और आपने एक स्क्रिप्ट प्रकाशित की है जो निम्नलिखित छूट लागू करती है:

• दो या दो से ज़्यादा टेनिस बॉल पर 10% की छूट
• सभी जूतों पर $5 की छूट

तो आपका cart.liquid टेम्पलेट एक साधारण टेबल हो सकता है, जिसमें लाइन आइटम और उनकी कुल राशि की समरी सूचीबद्ध हो:

<table class="cart">
  <thead class="heading">
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>

  <tbody class="line-items">
    {% for item in cart.items %}
    <tr>
      <td>{{ item.product.title }}</td>
      <td>{{ item.quantity }}</td>
      <td>{{ item.line_price | money }}</td>
    </tr>
    {% endfor %}
  </tbody>

  <tfoot class="summary">
    <tr>
      <td colspan="2">Total</td>
      <td>{{ cart.total_price | money }}</td>
    </tr>
  </tfoot>
</table>

स्क्रिप्ट द्वारा लागू की गई छूट के साथ, यह टेम्पलेट आपके कार्ट के लिए नीचे दी गई टेबल बनाता है:

लाइन आइटम अपडेट करें

स्क्रिप्ट द्वारा लागू छूट दिखाने के लिए, हमें लाइन आइटम को अपडेट करने की ज़रूरत है, ताकि वे तीन मुख्य जानकारी दिखाएं:

• छूट से पहले लाइन की कीमत
• छूट के बाद लाइन की कीमत
• लागू की गई छूट का विवरण देने वाला एक संदेश।

ऐसा करने के लिए, निम्नलिखित लिक्विड ऑब्जेक्ट गुणों का उपयोग करें:

• line_item.total_discount लाइन आइटम पर लागू की गई छूट की राशि देता है
• line_item.original_line_price छूट से पहले लाइन आइटम की कीमत देता है
• line_item.message एक संदेश देता है जो लाइन आइटम पर लागू की गई छूट का वर्णन करता है।

स्ट्राइकथ्रू इफ़ेक्ट का उपयोग करके मूल लाइन कीमत और छूट वाली लाइन कीमत के बीच अंतर करने में मदद मिल सकती है:

<tbody class="line-items">
  {% for item in cart.items %}
  <tr>
    <td>{{ item.product.title }}</td>
    <td>{{ item.quantity }}</td>
    <td>
      {{ item.line_price }}
      {% if item.total_discount > 0 %}
        <s>{{ item.original_line_price }}</s>
        ( {{ item.message }} )
      {% endif %}
    </td>
  </tr>
  {% endfor %}
</tbody>

अब आपका कार्ट ऐसा दिखना चाहिए:

कार्ट समरी अपडेट करें

ग्राहक को उनके ऑर्डर की कीमत ट्रैक करने में मदद करने के लिए, आपको यह भी दिखाना चाहिए:

• कार्ट का मूल सबटोटल, ताकि ग्राहक छूट से पहले और बाद के कुल योग की तुलना कर सकें
• ग्राहक को उनके कार्ट पर मिली कुल बचत।

फिर से, यह जानकारी जोड़ने के लिए, निम्नलिखित लिक्विड ऑब्जेक्ट गुणों का उपयोग करें:

• cart.total_discount कार्ट में आइटम पर लागू की गई छूट की राशि देता है
• cart.original_total_price छूट से पहले कार्ट का सबटोटल देता है।

इस जानकारी के साथ, आपका अपडेट किया गया .summary ब्लॉक ऐसा दिख सकता है:

<tfoot class="summary">
  <tr>
    <td colspan="2">Subtotal</td>
    <td>{{ cart.original_total_price | money }}</td>
  </tr>
  <tr>
    <td colspan="2">Discount Savings</td>
    <td>{{ cart.total_discount | money }}</td>
  </tr>
  <tr>
    <td colspan="2">Total</td>
    <td>{{ cart.total_price | money }}</td>
  </tr>
</tfoot>

अब आपकी कार्ट टेबल ऐसी दिखनी चाहिए:

अपने टेम्पलेट में कुछ नए लिक्विड ऑब्जेक्ट जोड़कर, आप अपने ग्राहकों को यह समझने में मदद कर सकते हैं कि उनकी छूट की गणना कैसे की जाती है।

अन्य उदाहरण

निम्नलिखित लिक्विड उदाहरण प्रत्येक लाइन आइटम के लिए छूट दिखाता है:

{% if item.original_line_price != item.line_price %}
  <small class="original-price"><s>{{ item.original_line_price | money }}</s></small>
  {% endif %}
  {{ item.line_price | money }}
  {% for discount in item.discounts %}
  <small class="discount">{{ discount.title }}</small>
  {% endfor %}

एक और छूट का उदाहरण देखें, जिसमें लिक्विड कोड में किए गए बदलाव शामिल हैं.