【実績紹介】 Shopify"まとめ買い制限機能"の実装
株式会社アイオウプラス様が運営されているアニメグッズ通販サイト「アニメユニバーシティコープ」の「まとめ買い制限機能」を開発しました。
開発の背景
アニメユニバーシティコープ（以下、AU-COOP）は、アニメグッズを中心としたECを運営されています。
運用の中で、まとめ買いを制限する機能が欲しい」という要望がありました。これは、配送の関係から「この商品は必ず単品で購入させたい」という要望や、キャンペーンの関係から「カートに同じグループの商品だけになるようにしたい」などです。
弊社の関わり方
ECPowerはShopifyエンジニアとしてAU-COOPのECチームにジョインをして、開発実働や、バグ調査、運用・グロース改善を日々行なっております。今回はその中での開発タスクでした。
要望に対する問題点
Shopifyの開発においては、基本的に「アプリ」を導入することで、機能追加を行います。しかし、調査したところ今回の要望に完全に合致するアプリは、日本製はもちろん、海外製のアプリも存在しませんでした。
要望に対する解決策・アウトプットイメージ
テーマのLiquidコードの中にJavaScriptのコードを独自にコーディング・埋め込みを行いました。
制御の大枠の流れは以下になります。
1. 商品を「カートに追加する」ボタンを押すことをトリガーとしてJavaScriptのコードが発火する
2. 現在のカートの最新の中身をAjax通信で取得する。
3. カート内商品のタグを確認する
4. 特定のルールに基づいたタグを確認することで「この商品は他の商品と一緒に購入できない」「この商品は同一グループの商品以外と一緒に購入できない」と判断する
5. カートに商品が追加されないようにする
6. お客様にはどのような理由で購入ができないのかをモーダルという形で示す
こちらを開発、テストを行なった上で、リリースを行いました。今まで、要件を手動で処理していた部分や、バグが原因でCSの稼働が必要だった部分を、システムによって自動化することが可能になりました。
※ こちらはテスト画面です。
開発期間・リソース
・約1ヶ月（2021年8月〜9月）
・弊社Shopifyエンジニア2名
AU-COOP EC担当責任者からのメッセージ
パルフィットさんとは日頃から円滑にコミュニケーションを取らせていただいています。本件をご相談した際も実現するための課題を正確に把握するところからはじまり、機能要件の整理から、実装方法、お客様のお買い物体験を向上させるUXまで配慮してベストな形でご提案いただきました。
また、リリース前に関してもエンジニア視点ならではのテスト項目を作成いただき、双方で確認を実施できたため、リリースまで不安もなく、安心してお任せすることができました。ありがとうございました。
ECPower（イーシーパワー）について
ECPower（イーシーパワー）はECストアの構築・運用グロース事業を行う、Shopify Partner企業です。Shopifyエンジニアによるチームアップを強みとしています。ECやShopifyでお困りの方は是非ご相談下さい。