むーさん 以前にLine Item Propertyの追記方法を解説した記事を書いていますが、最近のOS2.0対応のテーマでは割と従来の方法で追加できないパターンが見られるので、OS2.0用の追記方法を解説します！
以前は殆どのテーマで商品ページのボタンなどが固定位置だったのでformタグ自体が固定されていたですよね。今は移動式なので、この記事の方式が主流になってるかもです。
※2023年2月現在
そもそも「Line Item Property」ってなんじゃらほい？と言う方は以前の記事からご覧下さいませ。これを知ってない場合はこの記事だけ読んでもほぼ意味不明と思いますので、先に読んでくださいませ。
im-sosleepy.com以前のテーマとの違いから理解しよう
さて、なんて前と変わっちまったのか？そこから解説していきましょう。
下の画像は最新の無料テーマ「Dawn」の商品テンプレートカスタマイズ画面です。
左側のセクションをコントロールする所に「購入ボタン」「タイトル」「価格」等々を自由に上下できるblockが沢山出来ているのがわかるでしょうか？
これ「OS2.0」になる前のテーマではあまり見られなかった仕様なのですが、この仕様のせいでテーマによっては 「Line Item Property」 がめちゃくちゃ追記し辛くなってるんですよね。
ちなみにですが、これはセクションではなくてブロックです！
以前のテーマでもLiquidを書き換えれば実装出来るので、別に新機能ではないのですが、無料テーマのDawnがこれを実装したので、他の有料テーマも続々と実装しています。
そしてこの実装方法がテーマによって違うので非常に面倒くさい 。
以前の解説で 「Line Item Property」 はformタグの中に書きましょう。と解説しているのですが、この仕様のせいで、formタグで囲われてない事が多々見受けられるようになってきました。
Dawnも無料テーマにしてその代表格です！！
絵にすると以前の構造は
右側のオレンジ部分全部がformタグの中に囲われているような構造でした。なので、 「Line Item Property」 はこのformタグ内のどこかに書けば、しっかりと送信できる仕組みだったのですが、現在のDawnの構造は
こんな感じで「カートに追加」ボタン周辺だけがformタグの中にある感じです。実際Dawnのコードを見ると
<product-form class="product-form">
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
<div class="product-form__buttons">
<button
type="submit"
name="add"
class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
{% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
>
{%- if product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</button>
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
</div>
{%- endform -%}
</product-form>カートボタン周辺を抜き出すとこんな感じです。ここに{% form %}の部分が来ちゃっているので、ここがformタグの中と言う事になります。
実際この中に 「Line Item Property」 を追記するばやすやすと動いてくれます！なのでどうしてもわからない場合はここに追記してやりましょう！カートボタンの上から下なら楽勝です！！
新しい追記方法
せっかくDawnの用に上下自由に動かせるブロック機能が搭載されているんだから 「Line Item Property」 もこの流れの中に乗せてあげたいですよね？
ここから少し面倒な事なのですが、今回解説するのはあくまでもDawn専用の方法です！！実際他にいくつかのOS2.0テーマのコードを見てみましたが、似ている方法で出来るのは「Exspanse」がほぼほぼ同じやり方で出来ます。「Prestige」は何ならもう少し難易度が低めで「Pipeline」はそもそもDawn程自由にブロックが上下できない等を確認しています。
ではDawnでの追記方法を解説します。まずは追記したい 「Line Item Property」 のコードを適当に用意します。今回はテキストでも用意しましょうか。
例によってUIジェネレーターを使用してサクッと作ったコードが
<p class="line-item-property__field">
<label for="">お名前</label>
<input id="" type="text" name="properties[お名前]">
</p>こんなのだとしましょう。そしたらDawnの場合はセクションフォルダ内の「main-product.liquid」に追記していきます。
{%- case block.type -%}
と言うコードが見るかるはずです。その下には
{%- when '@app' -%}
{% render block %}
{%- when 'text' -%}
<p class="product__text{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}" {{ block.shopify_attributes }}>
{{- block.settings.text -}}
</p>こんな感じのコードが続いてるはずなのですが、この「case + when」のコードが味噌です！
こう言ったケースの場合にはこれを出力してね
って言う意味なので、例えば「text」の時は下記を出力してね。
<p class="product__text{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}" {{ block.shopify_attributes }}> {{- block.settings.text -}}
</p>でこれが出力されるわけです。なので 「Line Item Property」 もこの書き方で書いてやると
{%- when 'lineitem' -%}
<p class="line-item-property__field">
<label for="">お名前</label>
<input id="" type="text" name="properties[お名前]">
</p>とでも書いてやればいい訳ですが、これだけだとカスタマイズ画面でブロックを追加しようと思っても出てきません！！
そこで同じ「main-product.liquid」内のschemaも編集してあげる必要が出てきます。追記するコードは簡単で
{
"type": "lineitem",
"name": "アイテムだよ"
},これを”blocks”: [] の中に追記してあげればいいので前後も一緒に書くとこんな感じです。
"blocks": [
{
"type": "@app"
},
{
"type": "lineitem",
"name": "アイテムだよ"
},
{
"type": "text",
"name": "t:sections.main-product.blocks.text.name",
"settings": [
{そうすると下の画像の用に・・・
さくっと追加されるわけです。
がしかーし！！ここからが問題です！！
最初に言った通りここはformタグの中じゃありません。外です。formタグ外にあるinputフィールドなのでそのままではsubmitしてくれません。
ここがテーマ毎の悩みなのですが、テーマ毎にこのsubmitボタンを押した後、このinpuフィールドの値を拾いに行く動作が違います。
Dawnの場合はinputタグの中にform属性を付けて管理している仕様です。見分けるポイントはformタグ外にあるinputフィールドを調査する事です。Dawnの場合はquantity(数量)のinputタグが見やすかったですね。
<input class="quantity__input"
type="number"
name="quantity"
id="Quantity-{{ section.id }}"
min="1"
value="1"
form="product-form-{{ section.id }}"
>おおっ！成程！！【 form=”product-form-{{ section.id }}” 】でformに投げてんだな！って事がわかるので 「Line Item Property」 にもこれを追記してこうしてやります
<p class="line-item-property__field">
<label for="">お名前</label>
<input id="" type="text" name="properties[お名前]" form="product-form-{{ section.id }}" >
</p>これでDawnの場合は 「Line Item Property」 が動作します！！
ちなみにExspanseの場合は【form=”{{ form_id }}”】こんな属性になっていましたし、Prestigeはタイトルも価格もすべてをformタグで囲っているので、特に属性の追記は必要ありませんでしたよ！
テーマによってはここをJSなんかで制御している可能性もあるので・・・そん時はドンマイです！！
まとめ
最終的にははOS2.0とは関係ない機能ではあるわけですが、OS2.0になってからこう言った複雑な仕様になっている物が増えている印象ではあります。
ノーコードで出来る事は増えてきている代わりに、コードをいじる為にはこんな 「Line Item Property」 を追記するぐらいでも以前みたいに気軽にコピペでは出来ないケースが増えてくることが予想されていますので、しっかり開発者としてはshopifyについて行きながら、コードも理解出来るようになっていかないとアプリの費用ばかりがかさむサイト構築になっちゃいますよ！！
って話ですした。ちゃんちゃん
