こんにちは、エンジニアの神山です。 今回はShopifyの改修作業を行なっている中で、ハマった「properties」機能についてです。

「properties」について

まず、「properties」についてですが、商品ページに独自のフォームを追加でき、その内容を注文管理の詳細ページで確認ができる機能となります。 ※liquidファイルを修正することになります  

悩んだ点

すごく便利な機能なのですが、Theme2.0からコードを記述する場所が変わったようで、 間違えると、フォームは表示されるのですが、まったく動作しなくなります・・・ フォームが表示されるのに、なぜデータとして保存されないのか・・・とすごく悩みました

解決策

Chromeのデベロッパーツールでよく見ると、 このように「form」タグが2つあり前方の「form」タグ内にフォームを追加しても、入力されたデータは注文管理画面で確認することができません。 追加する位置は2つ目の「form」タグ内になります。 main-product.liquid

{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
// ここの中にフォームを追記
{%- endform -%}

Chormeのデベロッパーコンソールで確認した際の区別としては、「data-type=”add-to-cart-form」の記述があるかないかになります。 Shopifyではこのような「properties」や「attribute」機能のコードを生成してくれるツールもありますので、コピペで、カスタマイズすることも可能です。 https://ui-elements-generator.myshopify.com/ Shopifyに関しては、まだまだ知識が浅いので、これから深めていきたいと思います。