Βοήθεια
Σύνδεση

Προσθήκη επιλογέα ημερομηνίας παράδοσης στο καλάθι σας

Μπορείτε να συμπεριλάβετε ένα ημερολόγιο στη σελίδα του καλαθιού σας, το οποίο επιτρέπει στους πελάτες να καθορίσουν μια ημερομηνία παράδοσης για την παραγγελία τους.

Επιλογέας ημερομηνίας παράδοσης

Σε αυτήν τη σελίδα

Συμπερίληψη του 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, πατήστε το εικονίδιο Menu.

  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. Κάντε κλικ στην επιλογή Αποθήκευση.

Τώρα έχετε ένα πεδίο εισαγωγής ημερομηνίας παράδοσης στη σελίδα του καλαθιού σας. Όταν κάνετε κλικ μέσα στο πεδίο κειμένου, θα εμφανιστεί ένα ημερολόγιο:

Επιλογέας ημερομηνίας παράδοσης

Ο επιλογέας ημερομηνίας που χρησιμοποιείται σε αυτήν την προσαρμογή είναι ένα widget από τη βιβλιοθήκη jQuery UI.