Shopify のギフトラッピングアプリについて調べてみた
はじめに
今回は、Shopify でギフトラッピングを行う方法について解説していきます。
コーディングを用いてギフトラッピングを実装する方法と、アプリを用いてギフトラッピングを実装する方法について解説します。
それでは、頑張っていきましょう。
ギフトラッピングとは
こちらの解説は必要ないかもしれませんが、一応解説します。
ギフトラッピングとは、商品を包装するものになります。
具体的には、陶磁器を購入する際に木箱をつける、等の設定になります。
SKU 周りの関係で、木箱自体も Shopify の商品として設定したいという需要があるため、Shopify デフォルトの機能ではギフトラッピング機能を実装するのは難しいです。
それではまず、コーディングを用いてギフトラッピングを実装する方法について解説していきます。
コーディングを用いてギフトラッピングを実装する方法
ギフトラッピング用商品の作成
まずは、ギフトラッピングに使用する商品を作成していきます。
商品管理より、ギフトラッピング用の商品を作成しましょう。
価格と在庫を記入して、保存して下さい。
商品 URL より、商品のハンドルを取得しておきましょう。今回はgift-wrappingにしておきました。
ここまでの設定が完了したら、コードの編集を行っていきましょう。
コードの編集
オンラインストアのテーマの該当のテーマの三点リーダーより、コードを編集を選択して下さい。
今回はカートページを編集するので、main-cart-item.liquidを選択して下さい。
こちらのページに編集を加えていきます。
ギフトラッピングを追加というボタンを作成して、そのボタンをクリックするとダイアログが出現するようにしましょう。
そのダイアログの中で、cart/add.jsを叩けば行けそうです。
カート追加の API の仕様については、上記のドキュメントを参照してください。
サンプルコードを載せておきます。
let formData = {
'items': [{
'id': 36110175633573,
'quantity': 2
}]
};
fetch(window.Shopify.routes.root + 'cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
return response.json();
})
.catch((error) => {
console.error('Error:', error);
});
上記のコードを実行することで、商品をカートに追加することができます。
また、以下の形にすることで商品のプロパティを設定することも可能です。
{
quantity: 1,
id: 794864229,
properties: {
'First name': 'Caroline'
}
}
]
設定したプロパティは、注文オブジェクトからも参照することができます。
ギフトラッピング追加のダイアログでフォームを出現させて、ユーザーにデータを入力させた後に、上記の API を叩く形になります。
以下のコードで、該当の商品の商品オブジェクトを取得しましょう。
assign current_product = all_products[current_handle]
こちらの商品オブジェクトの variants に商品の variants のデータが格納されているので、セレクトボックスを用いてユーザーに入力させましょう。上記のidには、variant の ID を渡してあげれば大丈夫です。
ここまでで、コーディングを用いてギフトラッピング機能を実装する方法の解説は終了です。
次に、アプリを用いてギフトラッピング機能を実現する方法について解説していきます。
使用するアプリは、シンプルギフトラッピング｜お手軽ギフト包装アプリです。
こちらのアプリについて解説していきます。
シンプルギフトラッピング｜お手軽ギフト包装アプリ
こちらは、かなりシンプルなギフトラッピングアプリです。
こちらのアプリについて解説していきます。
以下のご利用ガイドを参考にしています。
上記の公式ガイドを参考に解説していきます。
アプリのインストール後、下記のような画面になります。
赤枠のギフトラッピング商品を選択から、ギフトラッピング商品として使用する商品を選択して下さい。
設定を保存するで、ギフトラッピング商品の設定を保存しましょう。
次に、ストアにギフトラッピング機能を表示の項目から、アプリブロックをストアに追加すれば大丈夫です。
こちらのアプリを利用することで、カートページからギフトラッピング商品を追加することができるようになります。
最後に
ここまでで、Shopify にギフトラッピング商品を追加する方法の解説は終了です。お疲れさまでした。
Discussion