🗒️

手順２. テーマを編集する

💡

※ご利用のテーマに対して、アプリの機能を適用させる必要がございます。

※本ページの手順は、アプリ版のShopifyからだと正常にテーマの編集が反映されない場合があります。恐れ入りますが、パソコンのブラウザで行っていただきますようお願い申し上げます。

1. 全てのテーマにおける共通手順
2.「アプリでテーマを拡張する」と出てきた場合の手順
※アプリブロックで意図する配置ができない場合
3. Liquidコードを自動編集
※参考：自動編集機能で挿入されるコードの詳細
4.カートページのLiquidコードを手動で編集する場合の手順

1. 全てのテーマにおける共通手順

Shopify管理画面のメニューからアプリ管理＞配送日時指定.amp＞導入手順をクリックします。

インストール先のテーマを選択します。現在ショップでご利用中のOS2.0対応のテーマにインストールする場合は「アプリでのテーマを拡張」を選択します。

現在ショップでご利用中ではないテーマにインストールする場合は、「テーマ一覧から選択して導入」を選択し、インストールするテーマを選択し「次へ」を選択してください。

以降の手順は、ご利用のテーマにより異なります。画面に従って、以下のいずれかの手順にお進みください。　

2.「アプリでテーマを拡張する」と出てきた場合の手順

OS2.0対応の一部のテーマでは、コードを編集せずに簡単に導入することが可能です。

1.　アプリでテーマを拡張するをクリックします。

2.　ストアのカスタマイズ画面 > カートマークをクリックして、カート画面のカスタマイズ画面開きます。

3.　左側メニューのブロックを追加 > アプリより、「配送日時指定.amp」を選択してください。

💡

「配送日時指定.amp」とだけ書かれたブロックをご選択ください。「最短お届け希望日時」ではございませんのでご注意ください。

4.　プレビューを見ながら、モジュールの位置を調整します。

5.　保存するをクリックして完了です。

※アプリブロックで意図する配置ができない場合

💡

OS2.0対応のテーマは、基本的に全てアプリブロックでの導入が前提となっております。ただ、テーマによってはアプリブロックでのモジュールの配置に融通が効かない場合もあり、アプリブロックで設置できる以上に細かく配置を調整したい場合は、Liquidコードを手動で編集していただく必要がございます。 OS2.0対応のテーマですとデフォルトでは、Liquidコードを手動で編集するために必要なテンプレートが入っていない状態でございます。ですので、アプリ管理画面のアドバンスド設定 > テーマスニペットの再設置をクリックして、それを完了させた上で、 4.カートページのLiquidコードを手動で編集する場合の手順 をお試しください。なお、テーマスニペットの再設置はライブテーマのみに反映されるものとなっておりますので、その点はご注意ください。

もしライブテーマに影響を与えず、控えのテーマのみで本手順を実行する必要がある場合は、控えのテーマに以下の4つのテンプレートを追加してください。（確認して、すでに同名のテンプレートが設置されていた場合は、対応不要です。）

‣

snippets/cart-attributes.liquid

{{ 'cart-attributes.scss.css' | asset_url | stylesheet_tag }}
<div class="cart-attribute__field cart-attributes-delivery-datetime cart-attribute-delivery-date" style="display: none;">
    <label for="delivery-date">配送希望日</label>
    <input type="radio" class="delivery-date-boolean" name="attributes[配送日の指定]" value="なし" onChange="changeDeliveryDateBoolean()" id="delivery-date-boolean-false" {% unless cart.attributes["配送日の指定"] == "指定する" %} checked{% endunless %}>
    <label  for="delivery-date-boolean-false" class="delivery-date-boolean-label">指定しない</label>
    <input type="radio" class="delivery-date-boolean" name="attributes[配送日の指定]" value="指定する" onChange="changeDeliveryDateBoolean()" id="delivery-date-boolean-true" {% if cart.attributes["配送日の指定"] == "指定する" %} checked{% endif %}>
    <label for="delivery-date-boolean-true" class="delivery-date-boolean-label">指定する</label>
    <input id="delivery-date" type="date" name="attributes[配送希望日]" value="{{ cart.attributes["配送希望日"] }}" min='{{ "now" | date: "%Y-%m-%d" }}'>
</div>

<div class="cart-attribute__field cart-attributes-delivery-datetime cart-attribute-delivery-time" style="display: none;">
    <label for="delivery-time">配送時間帯</label>
    <select id="delivery-time" name="attributes[配送時間帯]">
        <option value="指定なし" {% if cart.attributes["配送時間帯"] == "指定なし" %} selected{% endif %}>指定なし</option>
        {% for  delivery_timezone in shop.metafields.cart_delivery_app['delivery_timezones_key'] %}
        <option value="{{ delivery_timezone }}" {% if cart.attributes["配送時間帯"] == delivery_timezone %} selected{% endif %}>{{ delivery_timezone }}</option>
        {% endfor %}
    </select>
</div>

<script>
    window.onload = function() {
        var ua = window.navigator.userAgent.toLowerCase();
        var is_chrome = ua.indexOf('chrome') > -1;
        var is_pc_safari = !is_chrome && ua.indexOf('safari') > -1 && ua.indexOf('mobile') == -1;
        var is_ie = ua.indexOf('trident') > -1 || ua.indexOf('msie') > -1;
        if (is_ie) {
            // カレンダー機能を使えない
            $('#delivery-date').remove();
            var select_tag = "<select id=\"delivery-date\" name=\"attributes[配送希望日]\">\n";
            {% if cart.attributes["配送希望日"] == "" %}
            select_tag += "<option value=\"\" selected>指定なし</option>"
            {% else %}
            select_tag += "<option value=\"\">指定なし</option>"
            {% endif %}
            {% for i in (0..30) %}
            {% assign plus_seconds = 86400 | times:i %}
            {% assign option_date = "now" | date:'%s' | plus:plus_seconds | date:"%Y-%m-%d" %}
            {% assign option_date_string = "now" | date:'%s' | plus:plus_seconds | date:"%Y-%m-%d (%a)" %}
            {% if cart.attributes["配送希望日"] == option_date %}
            select_tag += "<option value='{{ option_date }}' selected>{{ option_date_string }}</option>"
            {% else %}
            select_tag += "<option value='{{ option_date }}'>{{ option_date_string }}</option>"
            {% endif %}
            {% endfor %}
            select_tag += "</select>";
            $('.cart-attribute-delivery-date').append(select_tag)
        }
    }
</script>

‣

snippets/cart-attributes-noscript.liquid

{{ 'cart-attributes.scss.css' | asset_url | stylesheet_tag }}
<div class="cart-attribute__field cart-attributes-delivery-datetime cart-attribute-delivery-date" style="display: none;">
    <label for="delivery-date">配送希望日</label>
    <input type="radio" class="delivery-date-boolean" name="attributes[配送日の指定]" value="なし" onChange="changeDeliveryDateBoolean()" id="delivery-date-boolean-false" {% unless cart.attributes["配送日の指定"] == "指定する" %} checked{% endunless %}>
    <label  for="delivery-date-boolean-false" class="delivery-date-boolean-label">指定しない</label>
    <input type="radio" class="delivery-date-boolean" name="attributes[配送日の指定]" value="指定する" onChange="changeDeliveryDateBoolean()" id="delivery-date-boolean-true" {% if cart.attributes["配送日の指定"] == "指定する" %} checked{% endif %}>
    <label for="delivery-date-boolean-true" class="delivery-date-boolean-label">指定する</label>
    <input id="delivery-date" type="date" name="attributes[配送希望日]" value="{{ cart.attributes["配送希望日"] }}" min='{{ "now" | date: "%Y-%m-%d" }}'>
</div>

<div class="cart-attribute__field cart-attributes-delivery-datetime cart-attribute-delivery-time" style="display: none;">
    <label for="delivery-time">配送時間帯</label>
    <select id="delivery-time" name="attributes[配送時間帯]">
        <option value="指定なし" {% if cart.attributes["配送時間帯"] == "指定なし" %} selected{% endif %}>指定なし</option>
        {% for  delivery_timezone in shop.metafields.cart_delivery_app['delivery_timezones_key'] %}
        <option value="{{ delivery_timezone }}" {% if cart.attributes["配送時間帯"] == delivery_timezone %} selected{% endif %}>{{ delivery_timezone }}</option>
        {% endfor %}
    </select>
</div>

‣

assets/cart-attributes.scss.liquid

.cart-attribute__field {
  text-align: right;
  margin-top: 20px;
  margin-bottom: 20px;

  input, select, textarea, label {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    display: block;
  }

  .delivery-date-boolean {
    display: inline-block;
    width: auto;
    margin-left: 20px;
  }
  .delivery-date-boolean-label {
    display: inline-block;
    width: auto;
  }
}

‣

snippets/cart-attributes-os1.liquid

<div id="cart-delivery-datetime_section" data-os="1.0" data-timezones="{% for  delivery_timezone in shop.metafields.cart_delivery_app['delivery_timezones_key'] %}'{{delivery_timezone}}',{%endfor%}"></div>

3. Liquidコードを自動編集

Liquidコードの自動編集の自動編集を実行するをクリックします。その次の画面で、「選択したテーマへのインストールが完了しました」と表示されていたら反映完了です。

※この手順は、OS2.0未対応の無料テーマのみに対応しています。(以下一覧)

Debut / Venture / Simple / Boundless / Supply / Narrative / Brooklyn / Minimal / Express

‣

※参考：自動編集機能で挿入されるコードの詳細

本機能対象の各テーマにおいて、コードの編集内容は以下となっております。挿入されているコードを手動で削除することでモジュールを非表示にしたり、位置を手動で変更することでモジュールの配置を変えることも可能です。

・Debut