カートページへ「配送日時指定」機能の実装を試みていますが、上手く動作しません。
Datepickerのカレンダーが上手く表示されません。
別のセクションなどに、「snippet/date-picker.liquid」を埋め込むと、カレンダーが表示されますが、当然「cart.attributes」が管理画面へ反映されません。
恐縮ですが、アドバイス頂けますと大変嬉しいです。
snippet/cart-form.liquid↓
<form class="ajax-cart__cart-form grid__wrapper edge js-cart-form {{ formEmpty }}"
action="{{ routes.cart_url }}"
method="post">
{% render 'date-picker' %}
<div class="ajax-cart__cart-items span-12 auto">
{% for item in cart.items %}
<ul class="item_{{ item.id | append: '-' | append: forloop.index }} ajax-cart__cart-item grid__wrapper edge">
<a class="ajax-cart__item-remove--no-js" style="display:none;" href="/cart/change?line={{ forloop.index }}&quantity=0" data-role="product-remove">
{% render 'snip-icons',
wrapper: '.ajax-cart__item-remove--no-js',
type: 'apollo',
icon: 'close',
classes: 'ajax-cart__item-remove--icon',
size: '10px',
fill: 'var(--text-color)',
hover: 'var(--text-color)' %}
</a>
<li class="remove_{{ item.id | append: '-' | append: forloop.index }} ajax-cart__item-remove mb0 js-cart-remove"
{% if no_js_cart %}style="display: none;"{% endif %}
data-item-id="{{ item.id | append: '-' | append: forloop.index }}"
data-item-key="{{ item.key }}"
data-line-item="{{ forloop.index }}">
{% render 'snip-icons',
wrapper: '.ajax-cart__item-remove',
type: 'apollo',
icon: 'close',
classes: 'ajax-cart__item-remove--icon',
size: '10px',
fill: 'var(--text-color)',
hover: 'var(--text-color)' %}
</li>
<li class="ajax-cart__item-image v-start">
<div class="ajax-cart__item-image__wrapper">
<a href="{{ item.url }}" title="{{ item.product.title | escape }}">
{% if item.image != blank %}
{%
render 'basic-responsive-image',
type: item.image,
width: 1200
%}
{% else %}
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
</a>
</div>
</li>
<li class="ajax-cart__item-details v-center">
<div class="ajax-cart__cart-title__wrapper inline-block v-center">
<p class="ajax-cart__title"><a href="{{ item.product.url }}">{{ item.product.title }}</a></p>
<div class="ajax-cart__cart-variants">
{% if item.selling_plan_allocation %}
<p>{{ item.selling_plan_allocation.selling_plan.name }}<p>
{% endif %}
{%- unless item.variant.title contains 'Default' -%}
{% for option in item.product.options %}
<strong>{{ option }}:</strong> {{ item.variant.options[forloop.index0] }}<br/>
{% endfor %}
{%- endunless -%}
{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
<p>
{% for p in item.properties %}
{% unless p.last == blank %}
<strong>{{ p.first }}:</strong>
{% comment %}
Check if there was an uploaded file associated
{% endcomment %}
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
</p>
{% endif %}
</div>
</div>
</li>
<li class="ajax-cart__item-price v-center">
{%- assign hasDiscount = false -%}
{%- if item.original_price != item.final_price -%}
{%- assign hasDiscount = true -%}
{%- endif -%}
<div data-cart-item-price>
<dl data-cart-item-price-list>
{%- comment -%}
Markup template for discount item
{%- endcomment -%}
<div {% unless hasDiscount %}class="hide" {% endunless %}data-cart-item-discounted-price-group>
<dt>
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
</dt>
<dd>
<s data-cart-item-original-price>{{ item.original_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount onsale" data-cart-item-final-price>{{ item.final_price | money }}</span>
</dd>
</div>
{%- comment -%}
Markup template for regular price item
{%- endcomment -%}
<div {% if hasDiscount %}class="hide" {% endif %}data-cart-item-regular-price-group>
<dt>
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
</dt>
<dd data-cart-item-regular-price>
{{ item.original_price | money }}
</dd>
</div>
{%- comment -%}
Markup template for unit price
{%- endcomment -%}
<div {% unless item.unit_price_measurement %}class="hide" {% endunless %}data-unit-price-group>
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
</dt>
<dd>
<span class="price-unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{- item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
</span>
</dd>
</div>
</dl>
</div>
{%- assign itemDiscounts = 'template ' | split: ' ' -%}
{%- if item.line_level_discount_allocations != blank -%}
{%- assign itemDiscounts = item.line_level_discount_allocations -%}
{%- endif -%}
<ul class="ajax-cart__order-discount mb0 order-discount--list order-discount--title order-discount--cart{% if item.line_level_discount_allocations == blank %} hide{% endif %}" aria-label="{{ 'customer.order.discount' | t }}" data-cart-item-discount-list>
{%- for discount_allocation in itemDiscounts -%}
<li class="order-discount__item" data-cart-item-discount>
<p class="onsale">
{% render 'snip-icons',
wrapper: '.order-discount__item',
type: 'apollo',
icon: 'sale-tag',
classes: 'vi-center',
size: '10px',
fill: 'var(--sale-color)',
hover: 'var(--sale-color)' %}
<span class="vi-center sale-color" data-cart-item-discount-title>
{{- discount_allocation.discount_application.title -}}
</span> (-<span data-cart-item-discount-amount>{{ discount_allocation.amount | money }}</span>)
</p>
</li>
{%- endfor -%}
</ul>
</li>
<li class="ajax-cart__item-qty v-center js-item-quantity">
<div class="ajax-cart__item-quantity a-left">
<button data-ajax-qty-decrease="{{ item.id | append: '-' | append: forloop.index }}" data-item-key="{{ item.key }}" class="downer-{{ item.id | append: '-' | append: forloop.index }} ajax-cart__qty-control--down mb0 v-center" type="button"><span class="visuallyhidden">{{ 'cart.general.decrease' | t: product: item.title | escape }}</span>-</button>
<input class="updates_{{ item.id | append: '-' | append: forloop.index }} {% if no_js_cart %}ajax-cart__qty-input--no-js{% else %}ajax-cart__qty-input{% endif %} v-center a-center"
data-item-qty
data-item-id="{{ item.id | append: '-' | append: forloop.index }}"
data-item-key="{{ item.key }}"
data-item-line="{{ forloop.index }}"
type="number"
name="updates[]"
value="{{ item.quantity }}"
min="0"
data-limit="{% if item.variant.inventory_management == 'shopify' %}{% unless item.variant.inventory_policy == 'continue' %}{{ item.variant.inventory_quantity }}{% endunless %}{% endif %}" />
<button data-ajax-qty-increase="{{ item.id | append: '-' | append: forloop.index }}" class="up-{{ item.id | append: '-' | append: forloop.index }} ajax-cart__qty-control--up mb0 v-center" type="button"><span class="visuallyhidden">{{ 'cart.general.increase' | t: product: item.title | escape }}</span>+</button>
</div>
<input class="ajax-cart__item-update--no-js button-as-link" type="submit" name="update" style="display:none;" value="{{ 'cart.general.update' | t }}">
</li>
<li class="ajax-cart__item-line-price v-center">
<dl {% unless item.original_line_price != item.final_line_price %}class="hide" {% endunless %}data-cart-item-discounted-price-group>
<dt>
<span class="visually-hidden">{{ 'cart.label.regular_total' | t }}</span>
</dt>
<dd>
<s data-cart-item-original-price>{{ item.original_line_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'cart.label.discounted_total' | t }}</span>
</dt>
<dd>
<span class="order-discount onsale" data-cart-item-final-price>{{ item.final_line_price | money }}</span>
</dd>
</dl >
<div {% if item.original_line_price != item.final_line_price %}class="hide" {% endif %}data-cart-item-regular-price-group>
<span data-cart-item-regular-price>{{ item.original_line_price | money }}</span>
</div>
</li>
</ul>
{% endfor %}
</div>
<div class="ajax-cart__info-wrapper a-left {% if cart.item_count < 1 %}hide{% endif %} js-cart-info">
<ul class="ajax-cart__accordion js-cart-accordion">
{% if settings.show_cart_notes %}
<li class="tlink has_sub_menu closed">
<a class="closed" aria-haspopup="true" aria-expanded="false" href="">{{ 'cart.general.note' | t }}</a>
<span class="icon inactive-arrow">+</span>
<span class="icon active-arrow">-</span>
</li>
<ul class="accordion-content sub closed">
<div class="a-left">
<label class="visuallyhidden" for="note">{{ 'cart.general.note' | t }}</label>
<textarea name="note" id="note" rows="5" cols="60" class="js-cart-note">{{ cart.note }}</textarea>
</div>
</ul>
{% endif %}
{% if settings.show_shipping_calculator %}
<li class="tlink2 has_sub_menu closed ajax-cart__accordion--shipping-calc">
<a class="closed" aria-haspopup="true" aria-expanded="false" href="">{{ 'cart.general.calc_heading' | t }}</a>
<span class="icon inactive-arrow">+</span>
<span class="icon active-arrow">-</span>
</li>
<ul class="accordion-content2 sub closed">
{% render 'cart-shipping-calculator', cart %}
</ul>
{% endif %}
</ul>
{% if settings.show_shipping_countdown %}
<div class="ajax-cart__free-shipping">
{% render 'cart-shipping-countdown', cart %}
</div>
{% endif %}
</div>
<div class="ajax-cart__summary-wrapper {% if cart.item_count < 1 %}hide{% endif %} js-cart-summary">
<div class="ajax-cart__final-details">
<div class="subtotal">
<p class="title a-left mb0">{{ 'cart.general.subtotal' | t }}</p>
<p class="subtotal-price a-right mb0"><span class="cart-original-total cart-price block js-cart-subtotal">{{ cart.items_subtotal_price | money }}</span></p>
</div>
{%- if settings.show_tax_note -%}
<div class="tax">
<p class="title a-left mb0">{{ 'cart.general.tax' | t }}</p>
<p class="a-right mb0">{{ 'cart.general.at_checkout' | t }}</p>
</div>
{%- endif -%}
{%- if settings.show_shipping_note -%}
<div class="shipping">
<p class="title a-left mb0">{{ 'cart.general.shipping' | t }}</p>
<p class="a-right mb0">{{ 'cart.general.at_checkout' | t }}</p>
</div>
{%- endif -%}
<div class="discounts">
{%- if cart.cart_level_discount_applications != blank -%}
<p class="a-left">{{ 'cart.general.discounts' | t }}</p>
<ul class="a-right">
{%- for discount_application in cart.cart_level_discount_applications -%}
<li>
{% render 'snip-icons',
wrapper: '.discounts',
type: 'apollo',
icon: 'sale-tag',
classes: 'vi-center',
size: '10px',
fill: 'var(--sale-color)',
hover: 'var(--sale-color)' %}
<span class="vi-center sale-color">{{ discount_application.title }}(-{{ discount_application.total_allocated_amount | money }})</span>
</li>
{%- endfor -%}
</ul>
{%- else -%}
{% if cart.total_discounts > 0 %}
<div class="cart_savings onsale">
<p class="a-left"><em>{{ 'cart.general.savings' | t }}</em></p>
<p class="cart-savings-amount a-right"><em>{{ cart.total_discounts | money }}</em></p>
</div>
{% endif %}
{%- endif -%}
</div>
<hr />
<div class="total">
<p class="title a-left">{{ 'cart.general.total' | t }}</p>
<p class="total-price a-right"><span class="cart-original-total cart-price block">{{ cart.total_price | money }}</span>
<span class="cart-total"></span></p>
</div>
</div>
<div class="ajax-cart__buttons">
<a class="ajax-cart__button-view_cart button secondary-button" href="{{ routes.cart_url }}">{{ 'products.product.view_cart' | t }}</a>
<input class="ajax-cart__button-submit" type="submit" name="checkout" id="checkout" value="{{ 'cart.general.checkout' | t }}" />
{%- unless request.design_mode -%}
{% if additional_checkout_buttons %}
<p class="sm-caps or-divider mt2 mb2 a-center"><span>Or</span></p>
<div class="ajax-cart__buttons-additional">
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}
{%- endunless -%}
</div>
</div>
</form>
snippet/date-picker.liquid↓
{% comment %}
/**配送日時の指定**/
{% endcomment %}
<div style="width:200px; margin: 20px auto 20px 0;">
<span style="display:block; margin-bottom: 5px;">配送希望日</span>
<input type="radio" name="attributes[配送日指定の有無]" value="指定しない" id="datePicker__label--false" {% unless cart.attributes["配送指定の有無"] == "指定する" %} checked{% 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/>
</div>
<div style="width:200px; margin: 20px auto 20px 0;">
<span style="display:block; margin-bottom: 5px;">配送希望時間帯</span>
<select id="delivery-time" name="attributes[配送希望時間帯]">
<option value="指定なし" {% if cart.attributes["配送希望時間帯"] == "指定なし" %} selected{% endif %}>指定なし</option>
<option value="午前中" {% if cart.attributes["配送希望時間帯"] == "午前中" %} selected{% endif %}>午前中</option>
<option value="14時から16時" {% if cart.attributes["配送希望時間帯"] == "14時から16時" %} selected{% endif %}>14時から16時</option>
<option value="16時から18時" {% if cart.attributes["配送希望時間帯"] == "16時から18時" %} selected{% endif %}>16時から18時</option>
<option value="18時から20時" {% if cart.attributes["配送希望時間帯"] == "18時から20時" %} selected{% endif %}>18時から20時</option>
<option value="19時から21時" {% if cart.attributes["配送希望時間帯"] == "19時から21時" %} selected{% endif %}>19時から21時</option>
</select>
</div>
<script>
//土日祝日指定
$.get("https://holidays-jp.github.io/api/v1/date.json", function(holidaysData) {
$("#datepicker").datepicker({
minDate: '+3D',
maxDate: '+5M',
beforeShowDay: function(date) {
if (date.getDay() == 0) {
return [false, 'day-sunday', null];//trueで土曜日を選択可に変更
} else if (date.getDay() == 6) {
return [false, '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 [false, 'day-holiday', null];//trueで祝日を選択可に変更
}
}
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>