Sepetinize teslim tarihi seçicisi ekleme

Bu sayfanın yazdırılma zamanı: Apr 26, 2024. Geçerli sürüm için https://help.shopify.com/tr/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-date-picker adresini ziyaret edin.

Sepet sayfanıza, müşterilerin siparişleri için teslim tarihi belirtmelerini sağlayan bir takvim ekleyebilirsiniz.

Teslimat tarihi seçicisi

Bu sayfada

theme.liquid temanıza jQuery ekleme

Bu özelleştirmenin çalışması için bazı temalar, theme.liquid düzen dosyasına jQuery için bir komut etiketi eklenmesini gerektirir. Boundless, Debut 17.2.0 veya sonraki sürümleri, Express, Narrative ya da Venture kullanıyorsanız bir sonraki adımı uygulamanız gerekebilir:

  1. Düzen dizininde theme.liquid seçeneğine tıklayın.

  2. Koddaki kapatma </head> etiketini bulun. Kapatma </head> etiketinin tam üzerindeki yeni satıra aşağıdaki kodu yapıştırın:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. Kayıtyap ' a tıklayın.

Teslim tarihi parçacığı oluşturma

  1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
  2. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
  3. Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.

  4. Parçacık oluşturun:

    1. Parçacığınızı adlandırın delivery-date
    2. Parçacık oluştur'a tıklayın. Yeni parçacık dosyası, kod düzenleyicisinde açılır.

  5. Yeni delivery-date.liquid parçacığınız içerisine aşağıdaki kodu yapıştırın:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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 week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
  1. Kayıtyap ' a tıklayın.
  1. Shopify uygulamasında, … düğmesine dokunun.
  2. Satış Kanalları bölümünde online mağaza' ya dokunun.
  3. Temaları Yönet' e dokunun.
  4. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
  5. Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.

  6. Parçacık oluşturun:

    1. Parçacığınızı adlandırın delivery-date
    2. Parçacık oluştur'a tıklayın. Yeni parçacık dosyası, kod düzenleyicisinde açılır.

  7. Yeni delivery-date.liquid parçacığınız içerisine aşağıdaki kodu yapıştırın:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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 week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
  1. Kayıtyap ' a tıklayın.
  1. Shopify uygulamasında, … düğmesine dokunun.
  2. Satış Kanalları bölümünde online mağaza' ya dokunun.
  3. Temaları Yönet' e dokunun.
  4. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
  5. Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.

  6. Parçacık oluşturun:

    1. Parçacığınızı adlandırın delivery-date
    2. Parçacık oluştur'a tıklayın. Yeni parçacık dosyası, kod düzenleyicisinde açılır.

  7. Yeni delivery-date.liquid parçacığınız içerisine aşağıdaki kodu yapıştırın:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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 week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
  1. Kayıtyap ' a tıklayın.

Parçacığı sepet sayfanıza ekleme

Teslim tarihi parçacığınızı sepet sayfanıza eklemek için:

  1. Bölümler dizininde cart-template.liquid öğesine tıklayın. Temanızda bu dosya yoksa, Şablonlar dizinindeki cart.liquid öğesine tıklayın.

  2. Koddaki kapatma </form> etiketini bulun. Kapatma </form> etiketinin tam üzerindeki yeni satıra aşağıdaki kodu yapıştırın:

{% render 'delivery-date' %}
  1. Kayıtyap ' a tıklayın.

Artık sepet sayfanızda bir teslim tarihi giriş alanı vardır. Metin alanının içine tıkladığınızda bir takvim görünecektir:

Teslimat tarihi seçicisi

Bu özelleştirmede kullanılan tarih seçici, jQuery UI kitaplığından gelen bir widget'dır. Bu blog gönderisi, tarih seçici takviminde belirli tarihlerin nasıl devre dışı bırakıldığını açıklar.

Shopify ile satış yapmaya hazır mısınız?

Ücretsiz olarak dene