FROM CACHE - jp_header

テーマDawnでの日時指定について

marin-online
Shopify Partner
2 0 0

お世話になっております。

テーマをDebutからDawnに変更中なのですが、Debutで出来た日時指定が出来ません。

配送希望日を選択してもカレンダーが出て来ません。

下記のコードをSections/main-cart-items.liquidの

</form>
</cart-items>

の下に記入しております。

お忙しい中申し訳ございませんがご教授お願いします。

 

 

<p class="cart-attribute__field" style="margin-left:50px;">
<label>配送希望日</label><br>
<span id="" name="attributes[配送希望日]" form="cart"></span>
<input type="radio" name="attributes[配送日指定の有無]" value="指定しない" id="datePicker__label--false" {% unless cart.attributes["配送指定の有無"] == "指定する" %} checked style="margin-left:10px;"{% endunless %}>
<label for="datePicker__label--false">指定なし</label>
<input type="radio" name="attributes[配送日指定の有無]" value="指定する" id="datePicker__label--true" {% if cart.attributes["配送指定の有無"] == "指定する" %} checked{% endif %}>
<label for="datePicker__label--true">指定する</label>
<input id="datepicker" type="text" name="attributes[配送希望日]" value="{{ cart.attributes.date }}" placeholder="配送希望日を選択 " readonly disabled/>

</p>


<script>
//土日祝日指定
$.get("https://holidays-jp.github.io/api/v1/date.json", function(holidaysData) {
$("#datepicker").datepicker({
minDate: '+3D', //最短日の指定*3日後から指定可能
maxDate: '+2M', //最長日の指定*2ヶ月後まで指定可能
beforeShowDay: function(date) {
if (date.getDay() == 0) {
return [true, 'day-sunday', null];//trueで土曜日を選択可に変更
} else if (date.getDay() == 6) {
return [true, 'day-saturday', null];//trueで日曜日を選択可に変更
}

var holidays = Object.keys(holidaysData);
for (var i = 0; i < holidays.length; i++) {
var holiday = new Date(Date.parse(holidays[i]));
if (holiday.getYear() == date.getYear() &&
holiday.getMonth() == date.getMonth() &&
holiday.getDate() == date.getDate()) {
return [true, 'day-holiday', null];//trueで祝日を選択可に変更falseで不可
}
}
return [true, 'day-weekday', null];
}
});
});

//配送指定がない場合に配送希望日を選択できないようにする
$(function(){
$( 'input[name="attributes[配送日指定の有無]"]:radio' ).change( function() {
var radioval = $(this).val();
if(radioval == "指定する"){
$('#datepicker').removeAttr('disabled');
}else{
$('#datepicker').attr('disabled','disabled').val("");
}
});
});
</script>

2件の返信2

mrtc
Shopify Partner
47 20 27

DawnにはjQueryが入っていないので、デートピッカー用に読み込む必要があるんじゃないでしょうか?

jQuery及びjQueryUIが正しく読み込まれているか、開発ツールなどでご確認ください。

https://jquery.com/
https://jqueryui.com/datepicker/

速度に影響がでますので、カート部分だけ読み込めばいいと思います。

自社サイトでShopifyテーマのカスタマイズ方法を紹介しています。
お困り事がありましたら、お気軽にメッセージをください。
marin-online
Shopify Partner
2 0 0
お忙しい中有難う御座います。

早速試してみます。