Liquid、JavaScriptなどに関する質問
お世話になっております。
テーマを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>
DawnにはjQueryが入っていないので、デートピッカー用に読み込む必要があるんじゃないでしょうか?
jQuery及びjQueryUIが正しく読み込まれているか、開発ツールなどでご確認ください。
https://jquery.com/
https://jqueryui.com/datepicker/
速度に影響がでますので、カート部分だけ読み込めばいいと思います。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024