アプリ不要！注文履歴や注文履歴一覧ページに「再注文」ボタンを実装するチュートリアル

はじめに このカスタマイズ方法は、アカウントページの注文履歴一覧と注文履歴詳細ページに「再注文」ボタンを設置するというもので、Shopify 開発者向けドキュメントに記載されている「Cart API reference」を参照しています。 どのテーマにも実装できると思いますが、イメージ通りに設置するにはHTMLとCSSを編集できるスキルが最低限必要です。 スニペットファイルを作成 「新しいスニペットを追加する」より「reorder-button.liquid」を作成し、以下のコードを貼り付けてください。 再注文 document.addEventListener('DOMContentLoaded', function () { const button = document.querySelector('#reorder-{{ order.order_number }}'); button.addEventListener('click', function (event) { event.preventDefault(); let formData = { 'items': [ {% for line_item in order.line_items -%} {%- assign propertySize = line_item.properties | size -%} { 'id': {{ line_item.variant_id }}, 'quantity': {{ line_item.quantity }}{% if propertySize > 0 %},{% endif -%} {%- if propertySize > 0 %} 'properties': { {%- for property in line_item.properties %} '{{ property.first }}': '{{ property.last }}'{% unless forloop.last %},{% endunless -%} {%- endfor %} } {%- endif %} }{% unless forloop.last %},{% endunless -%} {%- endfor %} ] }; fetch(window.Shopify.routes.root + 'cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }) .then(response => { return response.json(); }) .then((json) => { window.location.href = '/cart'; }) .catch((error) => { console.error('Error:', error); }); }); }); 構造的にはシンプルで、ボタンのHTMLとJavascriptのみで、「再注文」ボタンをクリックすることで、注文履歴の情報が「/{locale}/cart/add.js」に送信されてカートページに遷移する仕組みです。 ボタンのHTMLはIDさえ気を付ければ、クラスや構造は自由に編集してかまいません。 注文履歴一覧にボタンを複数設置する際は、個別のIDが必要になってきますので、「reorder-{{ order.order_number }}」としています。 また、「formData」部分はドキュメントに基づいておりますが、もっとシンプルな書き方があるかもしれません。 上記コードでは「ID」「数量」「プロパティ」と3つの情報を送りますが、それ以外の情報を送りたい場合は追記してください。 セクションファイルを編集 ボタンを設置したいファイルを開き、以下のコードを追加してください。 {% render 'reorder-button', order: order %} Dawn（11.0.0）の場合、注文詳細は「sections/main-order.liquid」で注文一覧は「sections/main-account.liquid」が該当します。（バージョンによって異なります） 注文詳細は「customers/order.json」で読み込んでいるファイルなので、どこに設置しても構いません。 注文一覧の場合は{% for order in customer.orders %}内に設置する必要があり、どのテーマでも基本的には タグを編集して入れる感じになるかと思います。 最低限必要な作業は以上です。 後はボタンデザインを調整するのみなので、お好みでCSSファイルを編集してください。

カートにアイテムが追加されました

アプリ不要！注文履歴や注文履歴一覧ページに「再注文」ボタンを実装するチュートリアル

アプリ不要！注文履歴ページや注文履歴一覧ページに「再注文」ボタンを実装する方法をご紹介。

2024年12月

2025年1月