# お気に入りボタンを設置して、お気に入りをした商品をお気に入りリストページに追加したい

**URL:** <https://community.shopify.com/t/topic/375431>\
**Category:** 技術的なQ＆A\
**Tags:** javascript, css, html\
**Created:** [November 21, 2024, 3:37am UTC](https://community.shopify.com/t/topic/375431 "2024-11-21T03:37:26Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

商品詳細ページにお気に入りボタンを設置し、選択した商品をwishlistページに表示する機能の実装方法について質問されています。

**提案された実装方法:**

1. **Local Storage利用（簡易的）:**
   - JavaScriptでお気に入り情報をlocal storageに保存
   - 実装は簡単だが、デバイス間での情報共有不可、共用端末での情報漏洩リスクあり

2. **カスタムアプリ開発（推奨）:**
   - 顧客情報更新APIを作成し、メタフィールドにお気に入り情報を保存
   - ログインが必要になるが、より安全で信頼性が高い
   - 開発難易度は高く、開発パートナーの協力が必要な可能性

3. **サードパーティアプリ利用:**
   - 既存のwishlistアプリ（例：https://apps.shopify.com/wishlist-king?locale=ja）を利用
   - 最低限の機能が揃っており、他社アプリと比較してコストが安い
   - 自作の場合の開発・運用コストや問題対応の負荷を考慮すると、アプリ利用が推奨される

質問者は開発後の運用コストを考慮し、アプリ導入が現実的と判断している様子です。

<div class="post-metadata">

**Author:** ![uf2](https://avatars.discourse-cdn.com/v4/letter/u/7ab992/32.png) [@uf2](https://community.shopify.com/u/uf2)\
**Post date:** [November 21, 2024, 3:37am UTC](https://community.shopify.com/t/topic/375431/1 "2024-11-21T03:37:26Z")

</div>

商品の詳細ページにお気に入りボタンを設置しました。

このボタンが押されている商品は「wishlist」というページで表示されるようにしたいと考えております。

 ![ufragrance_1-1732159336065.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/c/6/0/c6065bfece36455783e989eda39e7751eb68c686.png)

このボタンは押すと赤くなり、再度押すと解除されるようにしています。

すでにwishlistというテンプレートを作成し、wishlistのページも作成したのですが、

お気に入りボタンとの結び付け方がわからず…。

サードパーティは使用したくないため自力でお気に入りボタンを設置したいため、

どなたかご存知の方がいらっしゃいましたらご教示いただけますと幸いです。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [November 21, 2024, 6:09am UTC](https://community.shopify.com/t/topic/375431/2 "2024-11-21T06:09:18Z")

</div>

@uf2 様

細かいことを置いておいてそれらしく動けば十分ということでしたら、

JavaScriptで、お気に入りボタンが押された際に、お気に入りの登録情報を local storage に保存し、

wishlistページでは、そのlocal storageの情報を取り出して表示する、

とするのが簡単かと思います。

しかし、この方法ですと、下記のような問題があります。

- ユーザーが、別の端末や別のブラウザでサイトにアクセスした際に、お気に入りの情報は引き継げない
- 不特定多数が使用する端末からサイトアクセスしてお気に入りを行うと、他ユーザーにもお気に入りの情報が見えてしまう可能性がある

下記のようにした方がより良いと思います。

- カスタムアプリを作成して、顧客情報を更新するAPIを作り、お気に入りボタンが押された際に、顧客のメタフィールドに、お気に入りの商品情報を保存する
- wishlistページでは、顧客のメタフィールドから情報を取り出して商品を表示する
- 顧客情報を利用する都合上、お気に入り機能の利用にはログインを必須にする

上記のうち、

カスタムアプリを作成して、顧客情報を更新するAPIを作り、

こちらが難易度高めなので、難しい場合は、開発パートナーを探されるのが良いかと思います。

しかし、

こういったものの自作は、問題が発生しやすく、その対応の負荷などを考慮しますと、

サードパーティー性のアプリを利用した方が、コスト安になることはよくあります。

下記のアプリは最低限の機能は揃っておりコストも他社のwishlistアプリと比較すると安いのでおすすめです。

[https://apps.shopify.com/wishlist-king?locale=ja](https://apps.shopify.com/wishlist-king?locale=ja)

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![uf2](https://avatars.discourse-cdn.com/v4/letter/u/7ab992/32.png) [@uf2](https://community.shopify.com/u/uf2)\
**Post date:** [November 22, 2024, 12:43am UTC](https://community.shopify.com/t/topic/375431/3 "2024-11-22T00:43:06Z")

</div>

ご丁寧にご回答いただきありがとうございます。

仮に開発できたとして、開発後の運用コストを考えるとやはりアプリでの導入が現実的とのこと、

勉強になりました。ありがとうございます！