購入ボタン（buy button）の商品名のbrタグについて

[te2shop]

いつもお世話になっております。

購入ボタン（buy button）の作成時に表示される「商品名」に関する質問です。

意図したところで商品名を改行したいというマーチャントの希望により、商品名内に<br>タグを設置されていて、通常の商品ページやコレクションなどでは改行されて表示できているのですが、

購入ボタン（buy button）の作成時に表示される「商品名」では、BRタグがそのまま表示されてしまいます。

吐き出されるコードでは対応が出来なさそうなのですが、改行を効かせられなくてもタグを無視するなど、なにか解決方法はありませんでしょうか。

やはりBRタグを入れないようにしてもらうしかないでしょうか。

解決方法が分かりましたら教えてください。よろしくお願いいたします。

<br>タグが表示されてしまっている

[Jizo_Inagaki]

たまたま試したらできたという状態でお勧めできる自信はないのですが、一応ご要望に沿う形にはできそうでしたので、以下記載します。

ただし購入などの動作確認はしていませんので、表示されたからといって万事解決したというわけではない点をご了承ください。

ShopifyBuy.UI.onReady(client).then(function(ui) {
      ui.createComponent('product', {
        id: '111111111111',
        node: document.getElementById('product-component-111111111111'),
        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"
                }
              }
            },
            "contents": {
              "button": false,
              "buttonWithQuantity": true,
            },
            "text": {
              "button": "Add to cart"
            }
          },

 購入ボタンのJSに上記のような箇所があります。idやnodeは適当ですのでその辺りは無視してください。

上記に一部記述を追加して以下のようにします。

ShopifyBuy.UI.onReady(client).then(function(ui) {
      ui.createComponent('product', {
        id: '111111111111',
        node: document.getElementById('product-component-111111111111'),
        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"
                }
              }
            },
            "contents": {
              "button": false,
              "buttonWithQuantity": true,
            },
           "templates": {
             "title": '<h1 class="shopify-buy__product__title" data-element="product.title">ナチュラルシャンプー<br>ミニ38ml</h1>'
            },
            "text": {
              "button": "Add to cart"
            }
          },

追加したのは以下の記述です。h1内のclassや属性に関しては、デフォルトで表示された際の記述をそのまま書いています。

"templates": {
             "title": '<h1 class="shopify-buy__product__title" data-element="product.title">ナチュラルシャンプー<br>ミニ38ml</h1>'
            },

なおWPの記事投稿欄ですと以下のようにする必要がありました。(他にバックスラッシュを使う方法でもある程度確認はできましたが)

"templates": {
            "title": '<h1' + ' class="shopify-buy__product__title" data-element="product.title"' + '>' + 'ナチュラルシャンプー<br>ミニ38ml' + '</h1' + '>'
            },

■参考URL

この件は以下のURLで情報を得ましたので参考用に記載します。

https://help.shopify.com/ja/manual/online-sales-channels/buy-button/edit-delete#part-15c35ca7a516ba9...

https://shopify.github.io/buy-button-js/customization/

https://shopify.github.io/buy-button-js/advanced/

以上ですが、動かなかったり問題があった場合は申し訳ありません。

[Jizo_Inagaki · Accepted solution]

たまたま試したらできたという状態でお勧めできる自信はないのですが、一応ご要望に沿う形にはできそうでしたので、以下記載します。

ただし購入などの動作確認はしていませんので、表示されたからといって万事解決したというわけではない点をご了承ください。

ShopifyBuy.UI.onReady(client).then(function(ui) {
      ui.createComponent('product', {
        id: '111111111111',
        node: document.getElementById('product-component-111111111111'),
        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"
                }
              }
            },
            "contents": {
              "button": false,
              "buttonWithQuantity": true,
            },
            "text": {
              "button": "Add to cart"
            }
          },

 購入ボタンのJSに上記のような箇所があります。idやnodeは適当ですのでその辺りは無視してください。

上記に一部記述を追加して以下のようにします。

ShopifyBuy.UI.onReady(client).then(function(ui) {
      ui.createComponent('product', {
        id: '111111111111',
        node: document.getElementById('product-component-111111111111'),
        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"
                }
              }
            },
            "contents": {
              "button": false,
              "buttonWithQuantity": true,
            },
           "templates": {
             "title": '<h1 class="shopify-buy__product__title" data-element="product.title">ナチュラルシャンプー<br>ミニ38ml</h1>'
            },
            "text": {
              "button": "Add to cart"
            }
          },

追加したのは以下の記述です。h1内のclassや属性に関しては、デフォルトで表示された際の記述をそのまま書いています。

"templates": {
             "title": '<h1 class="shopify-buy__product__title" data-element="product.title">ナチュラルシャンプー<br>ミニ38ml</h1>'
            },

なおWPの投稿欄(クラシックエディタ)ですと以下のようにする必要がありましたので、もしもエラーが出る場合はHTML部分をいろいろ書き換えてみてください。classや属性を削除するとエラーはでないと思いますので、そこから色々調査や変更を試みると解決できるかもしれません。

"templates": {
            "title": '<h1' + ' class="shopify-buy__product__title" data-element="product.title"' + '>' + 'ナチュラルシャンプー<br>ミニ38ml' + '</h1' + '>'
            },

■参考URL

この件は以下のURLで情報を得ましたので参考用に記載します。

https://help.shopify.com/ja/manual/online-sales-channels/buy-button/edit-delete#part-15c35ca7a516ba9...

https://shopify.github.io/buy-button-js/customization/

https://shopify.github.io/buy-button-js/advanced/

以上ですが動かなかったり問題があった場合は申し訳ありません。

※不正投稿のエラーが出たのでモデレータに連絡しましたが、一応再投稿しました。

[te2shop]

ご返信いただいた内容、参考URLにて一先ずは実現できそうです。

分かりやすく記載いただき、誠にありがとうございました！