הוספת בורר תאריכי אספקה לסל שלך

אפשר לכלול לוח שנה בדף הסל המאפשר ללקוחות לציין תאריך אספקה עבור ההזמנה שלהם.

בדף זה

הכללת jQuery ב-theme.liquid שלך

כדי שהתאמה אישית זו תעבוד, כמה ערכות נושא דורשות הוספה של תג סקריפט עבור jQuery לקובץ הפריסה theme.liquid. אם אתה משתמש בערכת נושא חינמית של Shopify, ייתכן שתצטרך לבצע את השלב הבא:

בתיקייה Layout, לחץ על theme.liquid.
מצא את תג </head> הסוגר בקוד. בשורה חדשה מעל תג </head> הסוגר, הדבק את הקוד הבא:

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

לחץ על שמירה.

יצירת קטע תאריך אספקה

כדי ליצור קטע עבור בורר תאריכי האספקה שלך:

מחשב שולחני

מלוח המנהל של Shopify, עבור אל חנות מקוונת > ערכות נושא.
מצא את ערכת הנושא שברצונך לערוך, לחץ על הלחצן … כדי לפתוח את תפריט הפעולות, ולאחר מכן לחץ על עריכת קוד.
בתיקייה Snippets, לחץ על הוספת קטע חדש:
צור את הקטע:
תן לקטע את השם 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, הקש על הסמל .
במקטע ערוצי מכירות, הקש על חנות מקוונת.
הקש על ניהול ערכות נושא.
מצא את ערכת הנושא שברצונך לערוך, הקש על הלחצן … כדי לפתוח את תפריט הפעולות, ולאחר מכן הקש על עריכת קוד.
בתיקייה Snippets, הקש על הוספת קטע חדש:
צור את הקטע:
תן לקטע את השם 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>

הקש על שמירה.

הכללת הקטע בדף הסל שלך

כדי לכלול את קטע תאריך האספקה בדף הסל שלך:

בתיקייה Sections, לחץ על main-cart-items.liquid.
מצא את תג </form> הסוגר בקוד. בשורה חדשה מעל תג </form> הסוגר, הדבק את הקוד הבא:

{% render 'delivery-date' %}

לחץ על שמירה.

כעת יש לך שדה קלט של תאריך אספקה בדף הסל שלך. כאשר תלחץ בתוך שדה הטקסט, יופיע לוח שנה:

בורר התאריכים שבו נעשה שימוש בהתאמה אישית זו הוא וידג'ט מתוך ספריית jQuery UI.