購入ボタンのバリエーション名の末尾に（Sold out）と表示させたい。

日本語 ディスカッション 技術的なQ＆A
1

Liteプランで購入ボタンを外部のwordpressに埋め込んで運用しています。

在庫の無いバリエーションの場合、Add to cartボタンがOut of stockとなるのは良いのですが、バリエーションが多い商品だと、プルダウンで1つ1つ選択していかないと在庫の有無がわからないので、プルダウンをクリックした時に表示される選択肢の在庫の無いバリエーション名の後ろに“（Sold out）”と付け加えたいのですが、可能でしょうか？

商品管理で在庫が無くなったバリエーション名を「〇〇〇〇（Sold out）」の様に書き換えることで、同じ見た目は実現できますが、1つ1つ在庫を追って作業しなければならないので、できれば在庫数に連動して自動的にSold outがつく様にしたいです。

もし可能であれば、方法をアドバイスしていただけると助かります。

2

下記のように埋め込みコードをカスタマイズされるとどうでしょうか？

ShopifyBuy.UI.onReady(client).then(function (ui) {
        console.log(ui);
        ui.createComponent('product', {
          id: '6574139670688',
          node: document.getElementById('product-component-1653907257261'),
          moneyFormat: '%C2%A5%7B%7Bamount_no_decimals%7D%7D',
          options: {
    "product": {
      "styles": {
        "product": {
          "@media (min-width: 601px)": {
            "max-width": "calc(25% - 20px)",
            "margin-left": "20px",
            "margin-bottom": "50px"
          }
        },
      },
      "text": {
        "button": "Add to cart"
      }
    },
    "productSet": {
      "styles": {
        "products": {
          "@media (min-width: 601px)": {
            "margin-left": "-20px"
          }
        }
      }
    },

カスタマイズ状況によってコードは異なりますが、上記のコードを下記のようにします。

ShopifyBuy.UI.onReady(client).then(function (ui) {
        console.log(ui);
        ui.createComponent('product', {
          id: '6574139670688',
          node: document.getElementById('product-component-1653907257261'),
          moneyFormat: '%C2%A5%7B%7Bamount_no_decimals%7D%7D',
          options: {
    "product": {
      "styles": {
        "product": {
          "@media (min-width: 601px)": {
            "max-width": "calc(25% - 20px)",
            "margin-left": "20px",
            "margin-bottom": "50px"
          }
        },
      },
      "text": {
        "button": "Add to cart"
      },
      "events": {
        "afterRender": function(component) {
          const selectElements = component.node.childNodes[0].contentWindow.document.querySelectorAll('[data-element="option.select"]');
          const optionElements = selectElements[0].querySelectorAll('option');
          component.model.variants.forEach((variant,index) => {
            if (!variant.available) {
              optionElements[index].innerText = optionElements[index].innerText + " (Sold Out)";
            }
          });
        }
      }
    },
    "productSet": {
      "styles": {
        "products": {
          "@media (min-width: 601px)": {
            "margin-left": "-20px"
          }
        }
      }
    },

具体的に言うと、

options.productに下記を追加しました。

"events": {
        "afterRender": function(component) {
          const selectElements = component.node.childNodes[0].contentWindow.document.querySelectorAll('[data-element="option.select"]');
          const optionElements = selectElements[0].querySelectorAll('option');
          component.model.variants.forEach((variant,index) => {
            if (!variant.available) {
              optionElements[index].innerText = optionElements[index].innerText + " (Sold Out)";
            }
          });
        }
      }

なお、下記は注意点です。

  • オプションが1つしか存在しないことを前提としたコードになっている。(アパレルの「色」と「サイズ」のように、オプションが2つ以上存在しない)
  • とり急ぎ、試してみただけなので、思わぬ不具合があるかもしれない。

もし、オプションが2つ以上存在する場合は、上記のコードは全く意味をなしません。

オプションが2つ以上存在する場合の実装が少し大変なので割愛させていただきましたが、

もし必要であれば、このスレッドにご返信ください。

即答はできないかもしれませんが、カスタマイズを考えてみます。

ご参考まで。

(キュー田辺)

3

教えていただいたコードを追加したらうまく動きました！ありがとうございます。

今の所、バリエーションは1種類しかないのですが、2つになった場合は、またご相談させていただきたいと思います。