[Shopify]希望お届け日と時間帯を選択できる機能設置方法（前編）
こんにちは。＠まりんです。最近、1日1個断捨離してます♪
今日はShopifyのカートに配達希望日と日時を選択できる機能を設置する方法をご紹介します。配達日選択はデフォルトで設置されてない機能なので、アプリか実装する必要があります。
Shopifyの公式Developersドキュメントでも紹介されていますので、そちらを使用しつつ、日付の順番とかが日本語対応してないので、日本語版にしたサンプルコードもご紹介しています。コピペで簡単なのでプログラミングとか分からなくても一度お試しください！
また、日時もセレクトできるようにしてみました！注文管理画面にも配達希望日と日時が反映されます。
今回は、長くなりそうなので、後日、お客様に届く注文確認メールとオーナー側に届く「新しい注文」メールにも、配達希望日と日時が反映されるようにする方法をご紹介します。ぜひお楽しみにしておいてくださいね♪
今日のゴール
▼カートの右下に配送希望日と希望時間帯を選択できるようにする▼
▼クリック一つでスケジュール選択ができる▼
日本語対応にしたので曜日も日本語で表示♪
▼いろんな書式で時間帯を設定ができます▼
今回は例として、
・文字（午前中）
・文字と数字の組み合わせ（13−15時）
・数字と記号（18:00〜16:00 etc...）
で設定しても問題なく注文管理やメールに反映されました！
「指定なし」はデフォルトで一番最初に入っています。
▼時間帯はお好きな時間を設定できる▼
管理画面＞カスタマイズ＞カートページ開くと、時間帯を追加できるセクションブロックを作りました。ここに時間を入れると時間帯選択のプルダウンに表示されます。
お好きな時間を設定できます。
AM /PMの表示が好きという方は、「1pm-3pm」みたいな表示にもできる♪
▼注文管理画面にも反映される▼
項目部分は英語でも日本語でもどちらでも問題なし！
画像では、こちらで設定してます。
date （英語）
時間帯 （日本語）
▼メールにも反映(お客様への注文確認メール)▼
▼メールにも反映(オーナーに届く新規注文メール)▼
メールは後日、別の投稿でご紹介します。
✔︎Shopifyカートに配送希望日と時間帯を設置する手順
配送希望日のスケジュールの箇所は、こちらのShopifyの公式ドキュメントを使用します。正直、ここに書いてある事を丸ごとコピペして、あとは、日付を日本語表記にするだけです。
手順１ theme.liquidにJqueryのタグ入れる（日付編）
❶管理画面＞テーマ＞コード編集＞theme.liquidを開く
❷<head></head>の間に以下のコードをコピペ
{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
Jqueryもともと入ってるテーマには入れる必要はないです。
上図ではDebutで入れてみた場合です。
手順２ Snipetで新規ファイル作成する（日付編）
❶Snipetフォルダ内で新しいファイルを追加
❷ファイル名はなんでもOK：今回はdelivery-dateにしました。
❸delivery-date.liquidファイルが生成されるので以下のコードをコピペ
{{ '//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>ここまでが、Shopifyマニュアルと同じところなのですが、これだと、曜日や月とかが英語表記になります。もし、日本語が良いという場合は以下のコードをお試しください。
{{ '//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="clear:both;">
<p>
<label for="date">ご希望のお届け日:</label>
<input id="date" type="text" name="attributes[配達希望日]" value="{{ cart.attributes.date }}" placeholder="指定なし" />
</p>
</div>
<script>
window.onload = function() {
if (window.jQuery) {
let $ = window.jQuery;
$(function() {
$("#date").datepicker({
dateFormat: 'yy/mm/dd (DD)',
yearSuffix: '年',
showMonthAfterYear: true,
monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
dayNames: ['日', '月', '火', '水', '木', '金', '土'],
dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
minDate: +1,
maxDate: '+2M',
beforeShowDay: $.datepicker.noWeekends
});
});
}
}
</script>name="attributes[date]"をname="attributes[配達希望日]"にすると、注文管理画面で「配達希望日」と表示されます。
また、土日が選択できない仕様になっているので、土日も選択したい場合は、
beforeShowDay: $.datepicker.noWeekendsを削除してください。
↓削除したバージョンのScriptタグ内です。
<script>
window.onload = function() {
if (window.jQuery) {
let $ = window.jQuery;
$(function() {
$("#date").datepicker({
dateFormat: 'yy/mm/dd (DD)',
yearSuffix: '年',
showMonthAfterYear: true,
monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
dayNames: ['日', '月', '火', '水', '木', '金', '土'],
dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
minDate: +1,
maxDate: '+2M'
});
});
}
}
</script>手順３ 後は手順２のファイルをカートページに挿入するだけ（日付編）
❶Sectionファイル内のcart-template.liquidを開く
❷<form></form>タグ内のお好きなところに以下をコピペ(手順２で作成したファイル名にしてくださいね)
{% render 'delivery-date' %}※render の後ろの「’’」内は手順２のファイル名
私はDebutのチェックアウトボタンの上あたりに挿入しました♪こちらはお好きなところに入れてみてくださいね。テーマによってはcart-template.liquidというファイル名でないかもしれません。<form></form>タグ内に置くことがポイントなので「form」で検索してヒットしたカート関連ファイルに設置ください。
私はこの辺に入れました。282行目です。後からご紹介する時間帯も続いて挿入してたり、この機能自体を表示/非表示切り替えられるようにしていますので少し見にくいかもしれません。。。
これで、配送希望日を設定できるスケジュール機能の設置が完成です！
次は、希望時間帯を設定していきましょう！
手順１’ 好きな時間帯を設定できるブロック追加の設定（時間帯編）
プルダウンで時間帯を選択できるようにします。
時間帯はショップオーナーさん側でいつでも変更ができるようにセクションブロックを使用します。いくつも追加していけるので便利。
❶cart-template.liquidのShemeに以下を追記
"max_blocks": 20,"blocks": [
{
"type": "select",
"name": "時間帯",
"settings": [
{
"id": "time",
"type": "text",
"label": "時間帯",
"default": "指定なし"
}
]
}
]↓Debutデフォルトに入れる場合はこんな感じ
{% schema %}
{
"name": {
"cs": "Stránka košíku",
"da": "Side med indkøbskurv",
"de": "Warenkorb-Seite",
"en": "Cart page",
"es": "Página del carrito",
"fi": "Ostoskorisivu",
"fr": "Page du panier",
"it": "Pagina del carrello",
"ja": "カートページ",
"ko": "카트 페이지",
"nb": "Handlekurvside",
"nl": "Winkelwagenpagina",
"pl": "Strona koszyka",
"pt-BR": "Página do carrinho",
"pt-PT": "Página do carrinho",
"sv": "Varukorgssida",
"th": "หน้าตะกร้าสินค้า",
"tr": "Sepet sayfası",
"vi": "Trang giỏ hàng",
"zh-CN": "购物车页面",
"zh-TW": "購物車頁面"
},
"max_blocks": 20,
"settings": [
{
"type": "checkbox",
"id": "cart_ajax_enable",
"label": {
"cs": "Povolit automatické aktualizace košíku",
"da": "Aktivér automatisk opdatering af indkøbskurv",
"de": "Automatische Warenkorbaktualisierungen aktivieren",
"en": "Enable automatic cart updates",
"es": "Habilitar las actualizaciones automáticas del carrito",
"fi": "Ota automaattinen ostoskorin päivitykset käyttöön",
"fr": "Activer les mises à jour automatiques",
"it": "Abilita aggiornamenti automatici carrello",
"ja": "自動カートの更新を有効にする",
"ko": "자동 카트 업데이트 활성화하기",
"nb": "Aktiver automatiske oppdateringer av handlekurven",
"nl": "Automatische winkelwagen-updates inschakelen",
"pl": "Włącz automatyczne aktualizacje koszyka",
"pt-BR": "Permitir atualizações automáticas do carrinho",
"pt-PT": "Ativar atualizações automáticas do carrinho",
"sv": "Aktivera automatiska uppdateringar av varukorgen",
"th": "เปิดใช้การอัปเดตตะกร้าสินค้าอัตโนมัติ",
"tr": "Otomatik sepet güncellemelerini etkinleştir",
"vi": "Bật cập nhật giỏ hàng tự động",
"zh-CN": "启用购物车自动更新功能",
"zh-TW": "啟用自動更新購物車"
},
"info": {
"cs": "Aktualizuje košík hned, jak zákazník provede změny.",
"da": "Opdaterer indkøbskurven, så snart kunden foretager ændringer",
"de": "Aktualisiert den Warenkorb, sobald Kundenänderungen vorgenommen werden",
"en": "Updates the cart as soon as customer changes are made",
"es": "Actualiza el carrito tan pronto como el cliente realice cambios",
"fi": "Päivittää ostoskorin heti, kun asiakkaan muutokset on tehty",
"fr": "Mise à jour du panier dès que les modifications apportées aux clients ont été effectuées",
"it": "Aggiorna il carrello appena il cliente apporta le modifiche",
"ja": "お客様が変更されるとすぐにカートを更新します",
"ko": "고객 변경 시 카트를 업데이트합니다.",
"nb": "Oppdaterer handlekurven så snart kundens endringer er gjort",
"nl": "De winkelwagen wordt bijgewerkt zodra de klant wijzigingen aanbrengt",
"pl": "Aktualizuje koszyk, gdy tylko wprowadzone zostaną zmiany u klienta",
"pt-BR": "Atualiza o carrinho assim que o cliente faz alterações",
"pt-PT": "Atualiza o carrinho assim que o cliente faz alterações",
"sv": "Uppdaterar varukorgen så snart kundändringar görs",
"th": "อัปเดตตะกร้าสินค้าเมื่อลูกค้าได้ทำการเปลี่ยนแปลง",
"tr": "Müşteri değişiklikleri yapıldıktan sonra sepet güncellenir",
"vi": "Cập nhật giỏ hàng ngay khi khách hàng thay đổi",
"zh-CN": "客户做出更改后立即更新购物车",
"zh-TW": "在顧客進行變更時立即更新購物車"
},
"default": true
},
{
"type": "checkbox",
"id": "cart_notes_enable",
"label": {
"cs": "Povolit poznámky ke košíku",
"da": "Aktivér bemærkninger til indkøbskurv",
"de": "Warenkorbanmerkungen erlauben",
"en": "Enable cart notes",
"es": "Habilitar notas del carrito",
"fi": "Ota tilauskommentit käyttöön",
"fr": "Activer les notes de panier",
"it": "Abilita note carrello",
"ja": "カートメモを有効にする",
"ko": "카트 참고 사항 사용",
"nb": "Aktiver handlekurvmerknader",
"nl": "Opmerkingen voor winkelwagen inschakelen",
"pl": "Włącz uwagi dotyczące koszyka",
"pt-BR": "Habilitar observações do carrinho",
"pt-PT": "Ativar notas do carrinho",
"sv": "Aktivera varukorgsmeddelanden",
"th": "เปิดใช้หมายเหตุสำหรับตะกร้าสินค้า",
"tr": "Sepet notlarını etkinleştir",
"vi": "Bật ghi chú trong giỏ hàng",
"zh-CN": "启用购物车备注",
"zh-TW": "啟用購物車備註"
},
"default": false
},
{
"type": "checkbox",
"id": "cart_date_enable",
"label": {
"en": "Enable Date Picker",
"ja": "配達日指定を有効にする"
},
"default": true
},
{
"type": "checkbox",
"id": "cart_time_enable",
"label": {
"en": "Enable Time Picker",
"ja": "時間帯指定を有効にする"
},
"default": true
}
],
"blocks": [
{
"type": "select",
"name": "時間帯",
"settings": [
{
"id": "time",
"type": "text",
"label": "時間帯",
"default": "指定なし"
}
]
}
]
}
{% endschema %}▼これで、カスタマイズ画面の左側にブロック追加ができるようになりました！
手順２’ ブロック追加してプルダウンに反映させる（時間帯編）
手順１’ではまだプルダウンを押しても保存した時間帯が反映されません。なので、以下のコードをお好きなところにコピペください。
<select id="deliverly-time" name="attributes[時間帯]">
<option>指定なし</option>
{% for block in section.blocks %}
<option value="{{ block.settings.time }}">{{ block.settings.time }}</option>
{% endfor %}
</select>私は、スケジュールの下に設置し、さらにラベルで「お届けご希望時間帯」というタイトルをつけてみました。
以上で完成です！
フルコードです。もし良かったらコピペして使用してみてください。
（Debutで作ってるので、他のテーマだと上手くはいらないかも）
<div class="page-width" data-section-id="{{ section.id }}" data-section-type="cart-template" data-ajax-enabled="{{ section.settings.cart_ajax_enable }}">
<div {% if cart.item_count == 0 %}class="hide" {% endif %}data-cart-wrapper>
<div class="cart-header">
<h1 class="cart-header__title">{{ 'cart.general.title' | t }}</h1>
<a href="{{ routes.all_products_collection_url }}" class="text-link text-link--accent">
{{ 'cart.general.continue_shopping' | t }}
</a>
</div>
<form action="{{ routes.cart_url }}" method="post" novalidate class="cart">
<table>
<thead class="cart__row cart__row--heading">
<th scope="col">{{ 'cart.label.product' | t }}</th>
<th class="text-right" scope="col">{{ 'cart.label.price' | t }}</th>
<th class="text-right small--hide" scope="col">{{ 'cart.label.quantity' | t }}</th>
<th class="text-right small--hide" scope="col">{{ 'cart.label.total' | t }}</th>
</thead>
<tbody data-cart-line-items>
{%- for item in cart.items -%}
<tr class="cart__row" data-cart-item data-cart-item-key="{{ item.key }}" data-cart-item-url="{{ item.url }}" data-cart-item-title="{{ item.title }}" data-cart-item-index="{{ forloop.index }}" data-cart-item-quantity="{{ item.quantity }}">
<td class="cart__meta small--text-left" data-cart-table-cell>
<div class="cart__product-information">
<div class="cart__image-wrapper">
<img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ item | img_url: 'x190' }}" alt="{{ item.image.alt | escape }}" data-cart-item-image>
</div>
<div>
<div class="list-view-item__title">
<a href="{{ item.url }}" class="cart__product-title" data-cart-item-title data-role="product-title">
{{ item.product.title }}
</a>
</div>
{%- assign variant_options = 'template ' | split: ' ' -%}
{%- if item.product.has_only_default_variant != true -%}
{%- assign variant_options = item.options_with_values -%}
{%- endif -%}
{%- assign property_size = item.properties | size -%}
<ul class="product-details{% if item.product.has_only_default_variant and property_size == 0 and item.selling_plan_allocation == nil %} hide{% endif %}" data-cart-item-details aria-label="{{ 'cart.label.product_details' | t }}">
{%- for option in variant_options -%}
<li class="product-details__item product-details__item--variant-option{% if item.product.has_only_default_variant %} hide{% endif %}" data-cart-item-option>{{ option.name }}: {{ option.value }}</li>
{%- endfor -%}
<li
class="product-details__item product-details__item--property
{% if item.selling_plan_allocation == empty %} hide {% endif %}"
data-cart-item-selling-plan-name
>
{{ item.selling_plan_allocation.selling_plan.name }}
</li>
{%- comment -%}
Optional, loop through custom product line items if available
Line item properties come in as having two parts. The first part will be passed with the default form,
but p.last is the actual custom property and may be blank. If it is, don't show it.
For more info on line item properties, visit:
- http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-product-page-Like-for-a-monogram-engraving-or-customization
{%- endcomment -%}
{%- assign properties = 'template ' | split: ' ' -%}
{%- if property_size > 0 -%}
{%- assign properties = item.properties -%}
{%- endif -%}
{%- for p in properties -%}
{% assign property_first_char = p.first | slice: 0 %}
<li class="product-details__item product-details__item--property
{%if property_size == 0 or p.last == blank or property_first_char == '_' %} hide{% endif %}" data-cart-item-property>
<span class="product-details__item-label" data-cart-item-property-name>{{ p.first }}: </span>
{%- comment -%}
Check if there was an uploaded file associated
{%- endcomment -%}
<span data-cart-item-property-value>
{%- if p.last contains '/uploads/' -%}
<a href="{{ p.last }}" data-role="product-upload">{{ p.last | split: '/' | last }}</a>
{%- else -%}
{{ p.last }}
{%- endif -%}
</span>
</li>
{%- endfor -%}
</ul>
<p class="cart__remove">
<a href="/cart/change?line={{ forloop.index }}&quantity=0" class="text-link text-link--accent" aria-label="{{ 'cart.label.remove' | t: product: item.title }}" data-cart-remove data-role="product-remove">{{ 'cart.general.remove' | t }}</a>
</p>
</div>
</div>
</td>
<td class="cart__price text-right">
{%- 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.product.regular_price' | t }}</span>
</dt>
<dd>
<s data-cart-item-original-price>{{ item.original_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount" 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.product.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="order-discount 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>
{% include 'icon-saletag' %}
<span data-cart-item-discount-title>
{{- discount_allocation.discount_application.title -}}
</span> (-<span data-cart-item-discount-amount>{{ discount_allocation.amount | money }}</span>)
</li>
{%- endfor -%}
</ul>
<div class="cart__qty medium-up--hide">
<label for="updates_{{ item.key }}" class="cart__qty-label" aria-label="{{ 'cart.label.quantity' | t }}" data-quantity-label-mobile>
{{ 'cart.label.qty' | t }}
</label>
<input id="updates_{{ item.key }}" class="cart__qty-input" type="number"
value="{{ item.quantity }}" min="0" pattern="[0-9]*"
data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-mobile data-role="product-quantity-mobile">
</div>
<div class="cart__qty-error-message-wrapper cart__qty-error-message-wrapper--mobile hide" role="alert" data-cart-quantity-error-message-wrapper>
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="cart__qty-error-message" data-cart-quantity-error-message></span>
</div>
</td>
<td class="cart__quantity-td text-right small--hide">
<div class="cart__qty">
<label for="updates_large_{{ item.key }}" class="cart__qty-label" data-quantity-label-desktop>{{ 'cart.label.quantity' | t }}</label>
<input id="updates_large_{{ item.key }}" class="cart__qty-input" type="number"
name="updates[]" value="{{ item.quantity }}" min="0" pattern="[0-9]*"
data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-desktop data-role="product-quantity-desktop">
</div>
<div class="cart__qty-error-message-wrapper cart__qty-error-message-wrapper--desktop hide" role="alert" data-cart-quantity-error-message-wrapper>
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="cart__qty-error-message" data-cart-quantity-error-message></span>
</div>
</td>
<td class="cart__final-price text-right small--hide" data-cart-item-line-price>
{%- comment -%}
Markup template for discount item
{%- endcomment -%}
<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" data-cart-item-final-price>{{ item.final_line_price | money }}</span>
</dd>
</dl >
{%- comment -%}
Markup template for regular price item
{%- endcomment -%}
<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>
</td>
</tr>
{%- endfor -%}
</tbody>
</table>
<div class="cart__footer">
<div class="grid">
{%- if section.settings.cart_notes_enable -%}
<div class="grid__item medium-up--one-half cart-note">
<label for="CartSpecialInstructions" class="cart-note__label small--text-center">{{ 'cart.general.note' | t }}</label>
<textarea name="note" id="CartSpecialInstructions" class="cart-note__input" data-cart-notes>{{ cart.note }}</textarea>
</div>
{%- endif -%}
<div class="grid__item text-right small--text-center{% if section.settings.cart_notes_enable %} medium-up--one-half{% endif %}">
{%- assign cartDiscounts = 'template ' | split: ' ' -%}
{%- if cart.cart_level_discount_applications.size > 0 -%}
{%- assign cartDiscounts = cart.cart_level_discount_applications -%}
{%- endif -%}
<div{% if cart.cart_level_discount_applications.size == 0 %} class="hide"{% endif %} data-cart-discount-wrapper>
<div class="order-discount-card-wrapper" data-cart-discount>
{%- for discount_application in cartDiscounts -%}
<span class="order-discount order-discount--title order-discount--cart">
{% include 'icon-saletag' %}<span class="visually-hidden">{{ 'customer.order.discount' | t }}:</span><span data-cart-discount-title>{{- discount_application.title -}}</span>
</span>
<span class="order-discount order-discount--cart order-discount--cart-total">
-<span data-cart-discount-amount>{{ discount_application.total_allocated_amount | money }}</span>
</span>
{%- endfor -%}
</div>
</div>
<div class="cart-subtotal">
<span class="cart-subtotal__title">{{ 'cart.general.subtotal' | t }}</span>
<span class="cart-subtotal__price" data-cart-subtotal>{{ cart.total_price | money_with_currency }}</span>
</div>
{%- capture taxes_shipping_checkout -%}
{%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- elsif cart.taxes_included -%}
{{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
{%- elsif shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
{%- else -%}
{{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
{%- endif -%}
{%- endcapture -%}
<div class="cart__shipping rte">{{ taxes_shipping_checkout }}</div>
<div class="cart_select_date_time">
{%- if section.settings.cart_date_enable -%}
<div class="cart_select_date">{% render 'delivery-date' %}</div>
{%- endif -%}
{%- if section.settings.cart_time_enable -%}
<div class="cart_select_time">
<label for="deliverly-time">【 お届けご希望時間帯】</label>
<select id="deliverly-time" name="attributes[時間帯]">
<option>指定なし</option>
{% for block in section.blocks %}
<option value="{{ block.settings.time }}">{{ block.settings.time }}</option>
{% endfor %}
</select>
</div>
{%- endif -%}
</div>
<div class="cart__buttons-container">
<div class="cart__submit-controls">
{%- unless section.settings.cart_ajax_enable -%}
<input type="submit" name="update"
class="cart__submit btn btn--secondary"
value="{{ 'cart.general.update' | t }}">
{%- endunless -%}
<input type="submit" name="checkout"
class="cart__submit btn btn--small-wide"
value="{{ 'cart.general.checkout' | t }}">
</div>
<div class="cart__error-message-wrapper hide" role="alert" data-cart-error-message-wrapper>
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="cart__error-message" data-cart-error-message></span>
</div>
{%- if additional_checkout_buttons -%}
<div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{%- endif -%}
</div>
</div>
</div>
</div>
</form>
<p class="visually-hidden" data-cart-status
aria-live="polite"
role="status"
></p>
</div>
<div class="empty-page-content{% if cart.item_count > 0 %} hide{% endif %} text-center" data-empty-page-content>
<h1>{{ 'cart.general.title' | t }}</h1>
<p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
<div class="cookie-message">
<p>{{ 'cart.general.cookies_required' | t }}</p>
</div>
<a href="{{ routes.root_url }}" class="btn btn--has-icon-after cart__continue-btn">{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}</a>
</div>
</div>
{% schema %}
{
"name": {
"cs": "Stránka košíku",
"da": "Side med indkøbskurv",
"de": "Warenkorb-Seite",
"en": "Cart page",
"es": "Página del carrito",
"fi": "Ostoskorisivu",
"fr": "Page du panier",
"it": "Pagina del carrello",
"ja": "カートページ",
"ko": "카트 페이지",
"nb": "Handlekurvside",
"nl": "Winkelwagenpagina",
"pl": "Strona koszyka",
"pt-BR": "Página do carrinho",
"pt-PT": "Página do carrinho",
"sv": "Varukorgssida",
"th": "หน้าตะกร้าสินค้า",
"tr": "Sepet sayfası",
"vi": "Trang giỏ hàng",
"zh-CN": "购物车页面",
"zh-TW": "購物車頁面"
},
"max_blocks": 20,
"settings": [
{
"type": "checkbox",
"id": "cart_ajax_enable",
"label": {
"cs": "Povolit automatické aktualizace košíku",
"da": "Aktivér automatisk opdatering af indkøbskurv",
"de": "Automatische Warenkorbaktualisierungen aktivieren",
"en": "Enable automatic cart updates",
"es": "Habilitar las actualizaciones automáticas del carrito",
"fi": "Ota automaattinen ostoskorin päivitykset käyttöön",
"fr": "Activer les mises à jour automatiques",
"it": "Abilita aggiornamenti automatici carrello",
"ja": "自動カートの更新を有効にする",
"ko": "자동 카트 업데이트 활성화하기",
"nb": "Aktiver automatiske oppdateringer av handlekurven",
"nl": "Automatische winkelwagen-updates inschakelen",
"pl": "Włącz automatyczne aktualizacje koszyka",
"pt-BR": "Permitir atualizações automáticas do carrinho",
"pt-PT": "Ativar atualizações automáticas do carrinho",
"sv": "Aktivera automatiska uppdateringar av varukorgen",
"th": "เปิดใช้การอัปเดตตะกร้าสินค้าอัตโนมัติ",
"tr": "Otomatik sepet güncellemelerini etkinleştir",
"vi": "Bật cập nhật giỏ hàng tự động",
"zh-CN": "启用购物车自动更新功能",
"zh-TW": "啟用自動更新購物車"
},
"info": {
"cs": "Aktualizuje košík hned, jak zákazník provede změny.",
"da": "Opdaterer indkøbskurven, så snart kunden foretager ændringer",
"de": "Aktualisiert den Warenkorb, sobald Kundenänderungen vorgenommen werden",
"en": "Updates the cart as soon as customer changes are made",
"es": "Actualiza el carrito tan pronto como el cliente realice cambios",
"fi": "Päivittää ostoskorin heti, kun asiakkaan muutokset on tehty",
"fr": "Mise à jour du panier dès que les modifications apportées aux clients ont été effectuées",
"it": "Aggiorna il carrello appena il cliente apporta le modifiche",
"ja": "お客様が変更されるとすぐにカートを更新します",
"ko": "고객 변경 시 카트를 업데이트합니다.",
"nb": "Oppdaterer handlekurven så snart kundens endringer er gjort",
"nl": "De winkelwagen wordt bijgewerkt zodra de klant wijzigingen aanbrengt",
"pl": "Aktualizuje koszyk, gdy tylko wprowadzone zostaną zmiany u klienta",
"pt-BR": "Atualiza o carrinho assim que o cliente faz alterações",
"pt-PT": "Atualiza o carrinho assim que o cliente faz alterações",
"sv": "Uppdaterar varukorgen så snart kundändringar görs",
"th": "อัปเดตตะกร้าสินค้าเมื่อลูกค้าได้ทำการเปลี่ยนแปลง",
"tr": "Müşteri değişiklikleri yapıldıktan sonra sepet güncellenir",
"vi": "Cập nhật giỏ hàng ngay khi khách hàng thay đổi",
"zh-CN": "客户做出更改后立即更新购物车",
"zh-TW": "在顧客進行變更時立即更新購物車"
},
"default": true
},
{
"type": "checkbox",
"id": "cart_notes_enable",
"label": {
"cs": "Povolit poznámky ke košíku",
"da": "Aktivér bemærkninger til indkøbskurv",
"de": "Warenkorbanmerkungen erlauben",
"en": "Enable cart notes",
"es": "Habilitar notas del carrito",
"fi": "Ota tilauskommentit käyttöön",
"fr": "Activer les notes de panier",
"it": "Abilita note carrello",
"ja": "カートメモを有効にする",
"ko": "카트 참고 사항 사용",
"nb": "Aktiver handlekurvmerknader",
"nl": "Opmerkingen voor winkelwagen inschakelen",
"pl": "Włącz uwagi dotyczące koszyka",
"pt-BR": "Habilitar observações do carrinho",
"pt-PT": "Ativar notas do carrinho",
"sv": "Aktivera varukorgsmeddelanden",
"th": "เปิดใช้หมายเหตุสำหรับตะกร้าสินค้า",
"tr": "Sepet notlarını etkinleştir",
"vi": "Bật ghi chú trong giỏ hàng",
"zh-CN": "启用购物车备注",
"zh-TW": "啟用購物車備註"
},
"default": false
},
{
"type": "checkbox",
"id": "cart_date_enable",
"label": {
"en": "Enable Date Picker",
"ja": "配達日指定を有効にする"
},
"default": true
},
{
"type": "checkbox",
"id": "cart_time_enable",
"label": {
"en": "Enable Time Picker",
"ja": "時間帯指定を有効にする"
},
"default": true
}
],
"blocks": [
{
"type": "select",
"name": "時間帯",
"settings": [
{
"id": "time",
"type": "text",
"label": "時間帯",
"default": "指定なし"
}
]
}
]
}
{% endschema %}さいごに
上記の手順で上手く設定できましたでしょうか。
いきなり、カートの既存セクションファイルにcart-template.liquidを直接編集するのは不安という方は、新たに、cart-template2.liquidみたいな感じでセクション別で作成し、元のcart-template.liquidファイル内をコピペした上でcart-template2の方で編集してみるのもオススメ。
あとで、cart.liquid内の{% section 'cart-template' %}を{% section 'cart-template2' %}にして上手くいけばそのまま使用すれば良いし、レイアウト崩れてしまったら、元の{% section 'cart-template' %}に戻せばOKです。
また、以前対応したクライアントさんで、「今すぐ購入」ボタンを設置されていて、カートページを経由しない可能性があるということで、商品ページのカート追加ボタン前に設置したケースもありました。
ここまでできたら、後はお客様に届く「注文確認」メールとショップオーナーに通知される「新しい注文」メールに反映するだけですね。
また次回ご紹介しますね♪
【2021/7/10更新】お届け日時を注文メールにも反映させる方法はこちら
この記事が気に入ったらサポートをしてみませんか？