【Shopify】Color Picker を JS で実装したい | Yunosuke Yoshino Portfolio

お久しぶりです。

アプリなしでバリエーションピッカーを実装したいなーって思ったので、
ShopifyのメタフィールドとJSで実装できることがわかったので共有します！

コードは簡素です。
Liquidでも出来ると思うのですが、自分はJSで実装しちゃいました

対象者

ShopifyでLIquidをある程度書いたことがある
JS 初級者

コード

Shopifyでメタフィールドを作成。
商品管理画面で色を設定してください。

{% if product.metafields.custom.colors %}//メタフィールドに色があるかどうか確認する
let colors = {{ product.metafields.custom.colors }} //メタフィールドから色を取得
//output 例 : (3) ['#ff00ef', '#b4b4b4', '#6366fa'] 
{% endif %}


window.addEventListener('DOMContentLoaded', function () {
  if(colors){//カラーがあれば実行するぞ
    const data = [...document.querySelectorAll('.variant__input')]//カラーで置き換えたいDOMを取得
    data.map((node, index) => {
        node.style.backgroundColor = `${colors[index]}`// index..0,1,2 colors[0],colors[1],colors[2]が取れる。
    })
  }
});

おわりに

以上で簡単に実装ができると思います。
Shopifyで商品ページに色見本を追加をJSで追加できることを記述しました。
これからもShopifyは進化を続けていくと思うので、引き続きキャッチアップしていく必要がありますね。

少しでもお役に立てれば幸いです。

コード

Shopifyでメタフィールドを作成。
商品管理画面で色を設定してください。

{% if product.metafields.custom.colors %}//メタフィールドに色があるかどうか確認する let colors = {{ product.metafields.custom.colors }} //メタフィールドから色を取得 //output 例 : (3) ['#ff00ef', '#b4b4b4', '#6366fa'] {% endif %} window.addEventListener('DOMContentLoaded', function () { if(colors){//カラーがあれば実行するぞ const data = [...document.querySelectorAll('.variant__input')]//カラーで置き換えたいDOMを取得 data.map((node, index) => { node.style.backgroundColor = `${colors[index]}`// index..0,1,2 colors[0],colors[1],colors[2]が取れる。 }) } });

おわりに