Shopifyテーマ「Dawn」に配送日時のコードを入れたい

[Masayuki]

閲覧いただきありがとうございます。

Dawnのテーマに配送日時のコードを入れたいと思っております。

こちらの記事を参考に、section/main-cart-items.liquidの</form>の上に下記コードを挿入しました。

https://torublog.com/shopify-delivery-time/

{% render 'cart-deliverytime' %}

記事通り、snippets内にもcart-deliverytimeliquidを入れて書きコードを挿入しました。

<p class="cart-attribute__field">
  <label>配送時間指定</label><br>
  <select id="" name="attributes[配送時間指定]">
    <option value="指定なし"{% if cart.attributes["配送時間指定"] == "指定なし" %} selected{% endif %}>指定なし</option>
    <option value="午前中"{% if cart.attributes["配送時間指定"] == "午前中" %} selected{% endif %}>午前中</option>
    <option value="12:00-14:00"{% if cart.attributes["配送時間指定"] == "12:00-14:00" %} selected{% endif %}>12:00-14:00</option>
    <option value="14:00-16:00"{% if cart.attributes["配送時間指定"] == "14:00-16:00" %} selected{% endif %}>14:00-16:00</option>
    <option value="16:00-18:00"{% if cart.attributes["配送時間指定"] == "16:00-18:00" %} selected{% endif %}>16:00-18:00</option>
    <option value="18:00-20:00"{% if cart.attributes["配送時間指定"] == "18:00-20:00" %} selected{% endif %}>18:00-20:00</option>
    <option value="19:00-21:00"{% if cart.attributes["配送時間指定"] == "19:00-21:00" %} selected{% endif %}>19:00-21:00</option>
  </select>
</p>

実際にカート画面で配送日時を選択すると、次のようなエラーが出てしまいます。

このエラーを出さない方法がありましたらご教授いただけますと幸いです。

なお、購入時には配送日時は反映されます。

[toooru]

Dawnテーマの場合はDebutとは構造が異なり、セクションも2つに分かれているため、 sections/main-cart-items.liquid ではなく sections/main-cart-footer.liquid に入れる必要があるかと思いますのでご確認ください。おそらく <div class="cart__ctas" の直前あたりに入れるのがよろしいかと思います。

[Masayuki]

toooru様

ご返信ありがとうございます。

こちらの方法を試してみたのですが、配送日時が反映されない状態です。
（注文管理画面にも表示されませんでした。）

<form> </form> の外に配置しているのが反映されない原因だと思っているのですが、だからと言って中に入れると、最初のように「もう一度お試しください」というエラーが出てしまいます...

他に良い対処方法はありますでしょうか？

[toooru]

失礼しました、確かにDawnですとfooterはform外のため位置の問題ではないですね。

DawnでのCart Attributesは私の方でもまだ検証できていないため、他の方の回答を待たれるか、対応アプリの利用を検討されるか、サポートにお問い合わせいただく方が早いかもしれません。

[Masayuki]

ご返信ありがとうございます。

了解しました。それでは他の方の回答を待ちたいと思います。

いつも丁寧なご回答をしてくださりありがとうございます。

[Jizo_Inagaki]

興味があったので調べてみましたが、 main-cart-items.liquid にあるformの終了タグ直前に直接書きましたら動きました。

なおrenderで読み込ませる方法は試していないので、そちらが動作しない理由などは未確認です。

 

 

[mimi6520]

横からすいません
私も同じところでつまづいています。

同じように追記したのですが、カートページにはセレクトは表示されるのすが、
時間を選んで購入しても同じように注文管理に表示されないのですが
どうされたのか詳しく教えていただけないでしょうか？

また、商品購入完了ページにも選択した項目を表示することはできますでしょうか？
よろしくお願いいたします。

[Jizo_Inagaki]

> Masayukiさん

申し訳ありません。エラーの件を見をとしていましたが確かにエラーがでますね...。

役に立たない回答となり申し訳ありません。

> mimi6520さん

エラーが出ていますので、回答とならず申し訳ありません。

[Jizo_Inagaki · Accepted solution]

IEでは動かないようですが、<cart-items></cart-items>の外側に以下のように記述すればエラーなく動作するようです。
※以下はわかりやすくするためにmain-cart-items.liquid内の</cart-items>の下に追加する例です。

</cart-items>

<p class="cart-attribute__field">
  <label>配送時間指定</label><br>
  <select id="" name="attributes[配送時間指定]" form="cart">
    <option value="指定なし"{% if cart.attributes["配送時間指定"] == "指定なし" %} selected{% endif %}>指定なし</option>
    <option value="午前中"{% if cart.attributes["配送時間指定"] == "午前中" %} selected{% endif %}>午前中</option>
    <option value="12:00-14:00"{% if cart.attributes["配送時間指定"] == "12:00-14:00" %} selected{% endif %}>12:00-14:00</option>
    <option value="14:00-16:00"{% if cart.attributes["配送時間指定"] == "14:00-16:00" %} selected{% endif %}>14:00-16:00</option>
    <option value="16:00-18:00"{% if cart.attributes["配送時間指定"] == "16:00-18:00" %} selected{% endif %}>16:00-18:00</option>
    <option value="18:00-20:00"{% if cart.attributes["配送時間指定"] == "18:00-20:00" %} selected{% endif %}>18:00-20:00</option>
    <option value="19:00-21:00"{% if cart.attributes["配送時間指定"] == "19:00-21:00" %} selected{% endif %}>19:00-21:00</option>
  </select>
</p>

おそらくエラーが出た原因は<cart-items></cart-items>内の要素の変更がJSで監視されているためかと思います。
「商品の削除」「数量の変更」など<cart-items>内で想定されているもの以外が変更されたのでエラーと認識されたのではと。

この点を変更するのは難しそうだったので、監視対象外の場所(つまり<cart-items></cart-items>の外側)にselectタグを設置し、以下のようにform属性にカート用formのidを設定することで、form内にあるのと同様に動作させる方法を検討しました。

<select id="" name="attributes[配送時間指定]" form="cart">

参考:
https://kiwasalog.com/caprice/html-input-form-attr.html

この方法はチェックアウトボタンにも利用されていると思いますが、JSを併用してIE対策がなされていると思います。
こちらに関してはまだ全体の流れが把握できていないので仕組みの説明はできませんが。

[Masayuki]

Jizo_Inagaki様

ご返信ありがとうございます。

form="cart"を指定することで、<form></form>の外でも反映させることができました。

詳しい解説ありがとうございました。

[takahirotakeuch]

当方「配送マネージャー」アプリを実装しておりまして、その場合の対応についてこのフォーラムの内容を確認して私の解決方法も共有しますのでご覧ください。

const haisosm = document.getElementById('haisosm');
const after_change_haisosm = new MutationObserver(records => {
  const haisoyamatoshippingtime = document.getElementById('haisoyamatoshippingtime');
  haisoyamatoshippingtime.setAttribute('form', 'cart');
});
after_change_haisosm.observe(haisosm, {
  childList: true
});

上記はMutationObserverを使って、アプリでdomが生成されたタイミングを検知しつつ、当該の#

haisoyamatoshippingtimeに対して、Attributeを追加する事で、日時の指定を反映させる事に成功しています。

フォーラムの皆様の知恵に感謝します！

[Masayuki]

ご返信ありがとうございます。

なるほど、こちらの方法でもいけるのですね！

参考になりました。ありがとうございます。