اپنے کارٹ میں ڈیلیوری ڈیٹ پکر شامل کریں

آپ اپنے کارٹ پیج پر ایک کیلنڈر شامل کر سکتے ہیں جو کسٹمر کو ان کے آرڈر کے لیے ڈلیوری کی تاریخ مخصوص کرنے کی اجازت دیتا ہے۔

اس صفحہ پر

اپنے theme.liquid میں jQuery شامل کریں

اس کسٹمائزیشن کے کام کرنے کے لیے، کچھ تھیم کو یہ درکار ہوتا ہے کہ jQuery کا اسکرپٹ ٹیگ theme.liquid لے آؤٹ فائل میں شامل کیا جائے۔ اگر آپ ایک مفت Shopify تھیم استعمال کرتے ہیں، تو آپ کو اگلے قدم پر عمل کرنے کی ضرورت ہو سکتی ہے:

لے آؤٹ ڈائرکٹری میں، theme.liquid پر کلک کریں۔
کوڈ میں اختتامی </head> ٹیگ کو `تلاش کریں`۔ اختتامی </head> ٹیگ کے اوپر ایک نئی لائن پر، درج ذیل کوڈ پیسٹ کریں:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

محفوظ کریں پر کلک کریں۔

ڈلیوری کی تاریخ کا اسنیپٹ بنائیں

اپنی ڈلیوری کی تاریخ کے پکر کے لیے اسنیپٹ بنانے کے لیے:

ڈیسک ٹاپ

اپنے Shopify ایڈمن سے، آن لائن سٹور > تھیم پر جائیں۔
وہ تھیم تلاش کریں جس میں آپ ترمیم کرنا چاہتے ہیں، ایکشن مینو کھولنے کے لیے … بٹن پر کلک کریں، اور پھر کوڈ میں ترمیم کریں پر کلک کریں۔
اسنیپٹ ڈائرکٹری میں، نیا اسنیپٹ شامل کریں پر کلک کریں:
اسنیپٹ بنائیں:
اپنے اسنیپٹ کو delivery-date کا نام دیں۔
اسنیپٹ بنائیں پر کلک کریں۔ کوڈ ایڈیٹر میں نئی اسنیپٹ فائل کھلے گی۔
اپنے نئے 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>

محفوظ کریں پر کلک کریں۔

موبائل

Shopify ایپ سے، آئیکن پر ٹیپ کریں۔
سیلز چینل سیکشن میں، آن لائن سٹور پر ٹیپ کریں۔
تھیم کا نظم کریں پر ٹیپ کریں۔
وہ تھیم تلاش کریں جس میں آپ ترمیم کرنا چاہتے ہیں، ایکشن مینو کھولنے کے لیے … بٹن پر ٹیپ کریں، اور پھر کوڈ میں ترمیم کریں پر ٹیپ کریں۔
اسنیپٹ ڈائرکٹری میں، نیا اسنیپٹ شامل کریں پر ٹیپ کریں:
اسنیپٹ بنائیں:
اپنے اسنیپٹ کو delivery-date کا نام دیں۔
اسنیپٹ بنائیں پر ٹیپ کریں۔ نئی اسنیپٹ فائل کوڈ ایڈیٹر میں کھلے گی۔
اپنے نئے 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>

محفوظ کریں پر ٹیپ کریں۔

اپنے کارٹ پیج میں اسنیپٹ شامل کریں

اپنے کارٹ پیج میں ڈلیوری کی تاریخ کا اسنیپٹ شامل کرنے کے لیے:

سیکشن ڈائرکٹری میں، main-cart-items.liquid پر کلک کریں۔
کوڈ میں اختتامی </form> ٹیگ کو `تلاش کریں`۔ اختتامی </form> ٹیگ کے اوپر ایک نئی لائن پر، درج ذیل کوڈ پیسٹ کریں:

{% render 'delivery-date' %}

محفوظ کریں پر کلک کریں۔

اب آپ کے کارٹ پیج پر ڈلیوری کی تاریخ کی ان پٹ فیلڈ موجود ہے۔ جب آپ ٹیکسٹ فیلڈ کے اندر کلک کریں گے، تو ایک کیلنڈر ظاہر ہوگا:

اس کسٹمائزیشن میں استعمال ہونے والا ڈیٹ پکر jQuery UI لائبریری کا ایک ویجیٹ ہے۔