Sepetinize teslim tarihi seçicisi ekleme

Not

Shopify'ın ücretsiz bir temasını kullanıyorsanız bu eğitimle ilgili yardım almak için Shopify Destek ekibi ile iletişime geçebilirsiniz. 15 dakikalık tasarım süresi gerekir. Daha fazla bilgi edinmek için Temalar için destek bölümüne bakın.

Not

Bu özelleştirme, vintage Shopify temaları içindir ve Online Store 2.0 temalarına uygulanmaz.

• Temanızın mimari sürümünü öğrenin
• Online Store 2.0 tema özelleştirmelerini keşfedin

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

Dikkat

Bu özelleştirme, sepet çekmecesi veya açılır sepet stilleri için çalışmayacak ve yalnızca (your-store.com/cart URL'sindeki) sepet sayfası için çalışacaktır. Sepet çekmecesi veya açılır sepet kullanıyorsanız, sepet stilinizi tema düzenleyicisinden Sayfa olarak değiştirmeniz gerekmektedir. Tema önizlemenizde sepetinize ürün ekleyin ve sepet ayarlarınızı görmek için tema düzenleyicisindeki Sepet sayfası sekmesine tıklayın.

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 dosyası etiketinin eklenmesini gerektirir. Boundless, Debut sürüm 17.2.0 veya daha yenisi, Express, Narrative veya 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

Teslim tarihi seçiciniz için bir parçacık oluşturmak için:

Masaüstü

1. Shopify yöneticinizden Online Mağaza > Temalar'a gidin.

2. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.

iPhone

1. Shopify uygulamasındanMağaza'ya 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 ve ardından Kodu düzenle'ye tıklayın.

Android

1. Shopify uygulamasındanMağaza'ya 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 ve ardından Kodu düzenle'ye tıklayın.

1. Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.

2. Parçacık oluşturun:

3. 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:

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.