Shopify appで改造するときの方法はいくつかあります
List of app extensions
Online Store(ユーザーが触る画面)を拡張できるShopify theme extension
を試してみました
Web Pixel
はJavascript埋め込むだけなので実質改造できるのはShopify theme extension
だけ
app以外でやるならShopify theme改造ですね
Build theme app extensions を参考にやります
https://shopify.dev/docs/apps/build/online-store/theme-app-extensions/build#requirements を準備します
Shopify appのコードが必要なので用意します
shopify app init
用意したappのディレクトリ内で
shopify app generate extension
これで生成されるコードでは商品を☆0-5で評価できるようになります
Product metafieldが必要なので、Shopifyの管理画面からmetafieldを追加しておきます
Settings > Custom data > Products > Add definition
demo.avg_rating
をIntegerで追加します
動作確認用にいくつかの商品のmetafield demo.avg_rating
に1-5の値を入れておきます
app立ち上げ
shopify app dev
Shopifyパートナーアカウントにログインしたり指示にしたがうと起動
app blocks
が用意されてるようなのでTheme editorでブロックを設置します
app block
-> themeのblockに使う
embed block
-> 右下にでてくるフローティングボタンとかに使う
違いは Theme app extension configuration
Productページ用のブロック Star Rating
が用意されているので、Productページに設置します
保存したら、レーティングを設定したProductページを開くと☆が表示されます
よくできたチュートリアルは助かりますね
PR
このリンクは、アフィリエイトリンクです