अपने कार्ट में डिलीवरी की तारीख का पिकर जोड़ें

आप अपने कार्ट पेज पर एक कैलेंडर शामिल कर सकते हैं, जो ग्राहकों को उनके ऑर्डर के लिए डिलीवरी की तारीख बताने की सुविधा देता है।

डिलीवरी की तारीख का पिकर

अपने theme.liquid में jQuery शामिल करें

इस अनुकूलन के काम करने के लिए, कुछ थीम में यह ज़रूरी होता है कि jQuery के लिए एक स्क्रिप्ट टैग को theme.liquid लेआउट फ़ाइल में जोड़ा जाए। अगर आप Shopify की मुफ़्त थीम का उपयोग करते हैं, तो आपको अगला चरण फ़ॉलो करना पड़ सकता है:

  1. लेआउट डायरेक्टरी में, theme.liquid पर क्लिक करें।

  2. कोड में क्लोज़िंग </head> टैग को ढूंढें। क्लोज़िंग </head> टैग के ऊपर एक नई लाइन पर, निम्नलिखित कोड पेस्ट करें:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. सेव करें पर क्लिक करें।

डिलीवरी की तारीख का स्निपेट बनाएं

अपने डिलीवरी की तारीख के पिकर के लिए एक स्निपेट बनाने के लिए:

डेस्कटॉप
  1. अपने Shopify एडमिन से, ऑनलाइन स्टोर > थीम पर जाएं।

  2. वह थीम ढूंढें जिसे आप एडिट करना चाहते हैं, एक्शन मेनू खोलने के लिए ... बटन पर क्लिक करें और फिर कोड एडिट करें पर क्लिक करें।

  3. स्निपेट डायरेक्टरी में, नया स्निपेट जोड़ें पर क्लिक करें:

  4. स्निपेट बनाएं:

  5. अपने स्निपेट को delivery-date नाम दें।

  6. स्निपेट बनाएं पर क्लिक करें। नई स्निपेट फ़ाइल कोड एडिटर में खुल जाएगी।

  7. अपने नए delivery-date.liquid स्निपेट में, निम्नलिखित कोड पेस्ट करें:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<div style="width:300px; clear:both;"> <p> <label for="date">Pick a delivery date:</label> <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" /> <span style="display:block" class="instructions"> We do not deliver during the weekend.</span> </p> </div>

<script> document.addEventListener('DOMContentLoaded', function() { if (window.jQuery) { $(function() { $("#date").datepicker({ minDate: +1, maxDate: '+2M', beforeShowDay: $.datepicker.noWeekends }); }); } }); </script>

  1. सेव करें पर क्लिक करें।
मोबाइल
  1. Shopify ऐप से, Menu आइकन पर टैप करें।

  2. बिक्री चैनल सेक्शन में, ऑनलाइन स्टोर पर टैप करें।

  3. थीम प्रबंधित करें पर टैप करें।

  4. वह थीम ढूंढें जिसे आप एडिट करना चाहते हैं, एक्शन मेनू खोलने के लिए ... बटन पर टैप करें और फिर कोड एडिट करें पर टैप करें।

  5. स्निपेट डायरेक्टरी में, नया स्निपेट जोड़ें पर टैप करें:

  6. स्निपेट बनाएं:

  7. अपने स्निपेट को delivery-date नाम दें।

  8. स्निपेट बनाएं पर टैप करें। नई स्निपेट फ़ाइल कोड एडिटर में खुल जाएगी।

  9. अपने नए delivery-date.liquid स्निपेट में, निम्नलिखित कोड पेस्ट करें:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<div style="width:300px; clear:both;"> <p> <label for="date">Pick a delivery date:</label> <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" /> <span style="display:block" class="instructions"> We do not deliver during the weekend.</span> </p> </div>

<script> document.addEventListener('DOMContentLoaded', function() { if (window.jQuery) { $(function() { $("#date").datepicker({ minDate: +1, maxDate: '+2M', beforeShowDay: $.datepicker.noWeekends }); }); } }); </script>

  1. सेव करें पर टैप करें।

अपने कार्ट पेज में स्निपेट शामिल करें

अपने कार्ट पेज में डिलीवरी की तारीख का स्निपेट शामिल करने के लिए:

  1. सेक्शन डायरेक्टरी में, main-cart-items.liquid पर क्लिक करें।

  2. कोड में क्लोज़िंग </form> टैग को ढूंढें। क्लोज़िंग </form> टैग के ऊपर एक नई लाइन पर, निम्नलिखित कोड पेस्ट करें:

{% render 'delivery-date' %}
  1. सेव करें पर क्लिक करें।

अब आपके कार्ट पेज पर डिलीवरी की तारीख का इनपुट फ़ील्ड है। जब आप टेक्स्ट फ़ील्ड के अंदर क्लिक करते हैं, तो एक कैलेंडर दिखाई देगा:

डिलीवरी की तारीख का पिकर

इस अनुकूलन में उपयोग किया गया तारीख पिकर, jQuery UI लाइब्रेरी का एक विजेट है।