【shopify】DAWN8.0に対応させるline-item-propertyの設定

DAWN8.0はけっこうliquid内容が変わっている！

noteに書くために検証用サイトのDAWN8.0でいくつかチェックしていたら、7.0から随分変更点が見つかりました。
数か月前から構築の携わっているサイトはDAWN7.0のままで開発を進めていたので、納品前に8.0にしておくか…くらいの感じでチェックしてたら商品ページのカート廻りの処理等けっこう変わっていてびっくりしました。
6.0→7.0はそれほど気にならなかったんですが、8.0はあちこち変わってます。
個人的な感想としては8.0の方が構造が分かりやすくなったような気がします。以前はややこしい感じがしたので、見積が必要な商品用に「main-product.liquid」とかをコピーして別にテンプレート作って中身変えたりしてましたが、そんなにliquid触らなくてもカスタマイズしやすくなった感じがします。まぁ、私見ですが。

DAWN8.0用にline-item-propertyを設定

DAWN8.0では「buy-button」がスニペットでの読み込みに変更になっています。
「line-item-property」の記述は、DAWN8.0ではセクション「main-product.liquidではなく、スニペット「buy-buttons.liquid」に設定します。
※「カートに入れる」ボタンの周辺に「line-item-property」を追加する時だけ。他の箇所に追加させる場合は、別の追加コードが必要になるので、ご注意ください。

スニペット「buy-buttons.liquid」の修正

<product-form class="product-form">
ここにボタンの設定が入る
</product-form>

15行あたりから89行あたりまでが「カートに入れる」に対応している「form」部分になります。
「line-item-property」はこのformの中に記述しないと基本的に動作しません。

追記コードはline-item-propertyのコードジェネレーターを使えば楽ちん！

shopifyのline-item-propertyを簡単に作れるジェネレーターです。このジェネレーターの使い方は多くのサイトで解説されているので、割愛します。

https://ui-elements-generator.myshopify.com/pages/line-item-property

上記で作成したコードを15行から89行までの上記コードの間に入れます。

「カートに入れる」ボタンの上に挿入

ここにジェネレーターで作ったコードを挿入
<button

55行あたりにある<buttonで始まるコードの上にジェネレーターで作ったコードを挿入します。

「カートに入れる」ボタンの下に挿入

</button>
ここにジェネレーターで作ったコードを挿入

82行あたりにある</button>の下にジェネレーターで作ったコードを挿入します。

line-item-propertyの項目を必須にする場合

ジェネレーターで「Required」にチェックを入れればいいのですが、これだけでは必須になりません。
ちゃんと設定していてもこのままでは必須フィールドは機能しません。
設定が間違っているのか…とけっこう焦ります…。
しかも日本語で解説されているサイトがほとんどなくて、海外のFAQサイトを活用させていただきました。

novalidate: 'novalidate',

35行あたりにあるこの記述がミソ！！
この記述はshopify特有のものではなくて、htmlのform属性によるもの。
novalidate属性があるとフォームの入力内容の検証を無効にするそうです。
ということは、line-item-propertyで必須に設定してもその入力内容は無視されるということ。
忘れてはいけないのが、line-item-propertyはform内で動作するということ。shopifyはliquidという独自コードなので、ついついshopify特有のものかなと思いがちです。
この設定に気づくのにかなりの時間を費やしてしまいました。

DAWNで必須フィールドが機能しない…時は！

上記の35行を要チェックです！
この記述を削除するだけで正常に動くはずです。

その他チェック項目

私の環境では問題なく動いたのですが、海外のサイトでは45行あたりの「<div class="product-form__buttons">」から下に挿入しないと動かないという記載がありました。
万一動作しなかった場合は挿入場所を変えてみてもいいかもしれません。

もう1つline-item-propertyのジェネレーターでは必須項目のコードは「required class="required"」と出てくるのですが、「required="required" class="required"」のコードが正しいという記述もあります。
どちらが正しいのか正直分かりませんが、私はジェネレーター通りのコードで使っています。

万一動作しなかった場合は、試してみてもいいかもしれません。
shopifyをネット上で修正するとキャッシュがすごく残るので、更新ボタンを押しても動作確認ができないことが多いです。
この項目のチェックは見た目が変わるわけではないので、キャッシュかどうか分かりにくかったりします。なので、動かないからと言ってコードをむやみに編集するより、元に戻せるように、どのコードを編集したのか、後から分かるようにしておくことが大事です。

※ご注意
このコードはshopifyのdawn8.0.0で検証しています。
保障、サポートなどは一切しておりませんので、ご自身の責任下でお試しください。
すでにカスタマイズされている場合や環境、バージョンによっては崩れたり正常に動作しないこともありますので、ご注意ください。
※dawn7.0でも「line-item-propertyの項目を必須にする場合」あたりの内容は同じなので、動作しない方は該当コードを探してみてください。