المساعدة
تسجيل الدخول

إضافة أداة تحديد تاريخ التسليم إلى سلة التسوق الخاصة بك

يمكنك تضمين تقويم في صفحة سلة التسوق يتيح للعملاء تحديد تاريخ تسليم لطلبهم.

أداة اختيار تاريخ التسليم

في هذه الصفحة

تضمين jQuery في ملف theme.liquid

لكي يعمل هذا التخصيص، تتطلب بعض القوالب إضافة علامة برنامج نصي (script tag) لـ jQuery إلى ملف تخطيط theme.liquid. إذا كنت تستخدم قالب Shopify مجانيًا، فقد تحتاج إلى اتباع الخطوة التالية:

  1. في دليل Layout، انقر على theme.liquid.

  2. ابحث عن علامة </head> الختامية في الكود. في سطر جديد أعلى علامة </head> الختامية، الصق الكود التالي:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. انقر على حفظ.

إنشاء مقتطف لتاريخ التسليم

لإنشاء مقتطف لأداة اختيار تاريخ التسليم:

سطح المكتب

  1. من مسؤول Shopify، انتقل إلى المتجر الإلكتروني > القوالب.

  2. ابحث عن القالب الذي تريد تعديله، وانقر على الزر … لفتح قائمة الإجراءات، ثم انقر على تعديل الكود.

  3. في دليل Snippets، انقر على إضافة مقتطف جديد:

  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، اضغط على الأيقونة القائمة.

  2. في قسم قنوات المبيعات، اضغط على المتجر الإلكتروني.

  3. اضغط على إدارة القوالب.

  4. ابحث عن القالب الذي تريد تعديله، واضغط على الزر … لفتح قائمة الإجراءات، ثم اضغط على تعديل الكود.

  5. في دليل Snippets، اضغط على إضافة مقتطف جديد:

  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. في دليل Sections، انقر على main-cart-items.liquid.

  2. ابحث عن علامة </form> الختامية في الكود. في سطر جديد أعلى علامة </form> الختامية، الصق الكود التالي:

{% render 'delivery-date' %}
  1. انقر على حفظ.

لديك الآن حقل إدخال لتاريخ التسليم في صفحة سلة التسوق. عند النقر داخل حقل النص، سيظهر تقويم:

أداة اختيار تاريخ التسليم

أداة اختيار التاريخ المستخدمة في هذا التخصيص هي أداة ذكية من مكتبة واجهة مستخدم jQuery.