Yardım
Oturum aç

Sepetinize teslimat tarihi seçici ekleme

Sepet sayfanıza, müşterilerin siparişleri için bir teslimat tarihi belirtmelerine olanak tanıyan bir takvim ekleyebilirsiniz.

Teslimat tarihi seçici

Bu sayfada

theme.liquid dosyanıza jQuery'yi ekleme

Bu kişiselleştirmenin çalışması için bazı temalar, theme.liquid düzen dosyasına jQuery için bir komut dosyası etiketinin eklenmesini gerektirir. Ücretsiz bir Shopify teması kullanıyorsanız sonraki adımı uygulamanız gerekebilir:

  1. Düzen dizininde theme.liquid dosyasına tıklayın.

  2. Kodda kapanış </head> etiketini bulun. Kapanış </head> etiketinin üzerindeki yeni bir 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. Kaydet'e tıklayın.

Teslimat tarihi parçacığı oluşturma

Teslimat tarihi seçiciniz için bir parçacık oluşturmak üzere:

Masaüstü

  1. Shopify yöneticinizden Online Mağaza > Temalar bölümüne 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.

  3. Parçacıklar dizininde Yeni parçacık ekle'ye tıklayın:

  4. Parçacığı oluşturun:

  5. Parçacığınıza delivery-date adını verin.

  6. Parçacık oluştur'a tıklayın. Yeni parçacık dosyası kod düzenleyicide açılır.

  7. Yeni delivery-date.liquid parçacığınıza 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/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. Kaydet'e tıklayın.
Mobil

  1. Shopify app üzerinden Menu simgesine 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 dokunun.

  5. Parçacıklar dizininde Yeni parçacık ekle'ye dokunun:

  6. Parçacığı oluşturun:

  7. Parçacığınıza delivery-date adını verin.

  8. Parçacık oluştur'a dokunun. Yeni parçacık dosyası kod düzenleyicide açılır.

  9. Yeni delivery-date.liquid parçacığınıza 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/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. Kaydet'e dokunun.

Parçacığı sepet sayfanıza ekleme

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

  1. Bölümler dizininde main-cart-items.liquid dosyasına tıklayın.

  2. Kodda kapanış </form> etiketini bulun. Kapanış </form> etiketinin üzerindeki yeni bir satıra aşağıdaki kodu yapıştırın:

{% render 'delivery-date' %}
  1. Kaydet'e tıklayın.

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

Teslimat tarihi seçici

Bu kişiselleştirmede kullanılan tarih seçici, jQuery UI kitaplığından bir widget'tır.