HPにEC機能を埋め込む際、Nuxt.js様のおかげで乗り切れた話

HPにEC機能を埋め込む際、 Nuxt.js様のおかげで乗り切れた話 keigo (@Kspace_trk) Vue.js v-tokyo Meetup #16

Vue.js v-tokyo Meetup #16 Keigo Nakao (23) b 2022年4月にGMOペパボに新卒入i b
カラーミーショップのエンジニP b 趣味、好きなこX b DTM (作曲), DJ, カメラ, マジック, ロケットリーグ @Kspace_trk

Vue.js v-tokyo Meetup #16 #1 Vue.jsでカラーミーショップのフロントエンド開発をしている話 #2 カラーミーショップAPI +
Nuxt.js 本日は2本立てで

Vue.js v-tokyo Meetup #16 #1 カラーミーショップの開発でVue.jsを導入している話

Vue.js v-tokyo Meetup #16 #1 カラーミーショップの開発でVue.jsを導入している話フロントエンド：Smarty バックエンド：PHP 従来までのカラーミーショップ

Vue.js v-tokyo Meetup #16 #1 カラーミーショップの開発でVue.jsを導入している話フロントエンド：Smarty + Vue.js バックエンド：PHP
現在のカラーミーショップ

Vue.js v-tokyo Meetup #16 #1 カラーミーショップの開発でVue.jsを導入している話現在のカラーミーショップ大体こんな感じ ... Vue
Smarty PHP public dist Vueのdist

Vue.js v-tokyo Meetup #16 #1 カラーミーショップの開発でVue.jsを導入している話現在のカラーミーショップ最近Vue3を導入 ... Vue
Vue3 Smarty PHP public dist Vueのdist

Vue.js v-tokyo Meetup #16 #1 カラーミーショップの開発でVue.jsを導入している話現在のカラーミーショップ最近Vue3を導入現在Vue3に移行中 ...
Vue Vue3 Smarty PHP public dist Vueのdist

Vue.js v-tokyo Meetup #16 #1 Vue.jsでカラーミーショップのフロントエンド開発をしている話 #2 カラーミーショップAPI +
Nuxt.js 本日は2本立てで

Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js クライアントさんクライアントさん
クライアントさんクライアントさんうちのHPにEC機能埋め込んでよ！笑こんなデザインで！フリーランスもしくはWeb制作会社を運営していると、このようなことがあるかと思います。

Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js 色々なAPIがある https://developer.shop-pro.jp/docs/colorme-api

Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js 作るもの (ざっくり)
LOGO menu menu menu LOGO menu menu menu https://hoge.com/products https://hoge.com/product/{productId} 商品名 1,000円いい感じのTシャツです。サイズ：M カートに入れる

Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js 作るもの (APIでいい感じにやるだけかと思いきや)
LOGO menu menu menu LOGO menu menu menu https://hoge.com/products https://hoge.com/product/{productId} ここがちょっとクセモノ商品名 1,000円いい感じのTシャツです。サイズ：M カートに入れる

Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこサイズ
M カートに入れる

Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこサイズ
M カートに入れる埋め込みscriptが発行できる

Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ色々ついてくるし、Nuxt側でスタイリングしたい

Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ <form
action=”カートのURL”> 色々端折っています </form> <input type=”submit”> <option value=”サイズID”>

Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ <form
action=”カートのURL”> </form> <input type=”submit”> <option value=”サイズID”>

Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこカラーミーが生成するページを見に行った

Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ謎の値が、、しかも謎のカンマが、、

Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ ←options[num].idかもしれない
APIドキュメントみにきた

Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ ←options[num].idかもしれない
そうだった APIドキュメントみにきた

Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこしかしAPIで取れるのは、81654775の数字
右のカンマ以降はロジックで錬成しなければ

Vue.js v-tokyo Meetup #16 #2 カラーミーショップAPI + Nuxt.js ちょっとクセがあったとこ <option
v-for=”第2引数でindexとる” :value=”APIで取った数字 + ‘,’ + index”> 都合よすぎワロタ

まとめ Vue.js v-tokyo Meetup #16 U カラーミーAPI × Nuxt.jsで、見た目フルカスタムECサイトができF U
今回このようなECサイトを制作したことで、ドキュメントのなさに驚いたc U もっとスムーズに開発できるよう、たくさん発信や改善していきたい

HPにEC機能を埋め込む際、Nuxt.js様のおかげで乗り切れた話

HPにEC機能を埋め込む際、Nuxt.js様のおかげで乗り切れた話

Keigo Nakao

More Decks by Keigo Nakao

Other Decks in Programming

Featured

Transcript