Inboxのラベル表示を任意のテキストに変更したい

[sabosui]

お世話になります。

表題の件、「アプリ内の設定では任意のテキストに変えられない」とShopifyサポートより回答がございましたので、
コーディング等でなんとか叶えることはできないかと思い、質問させていただきます。

こちらの画像のようなチャットボックスを開く前の表示
こちらを"ラベル"と呼ぶそうですが、これを「ご質問はお気軽に」に変更したいです。

方法をご存じの方いらっしゃいましたら、どうかご教授お願い致します。

[Jizo_Inagaki · Accepted solution]

多少興味があったので試作してみました。

検討が浅い試作ですが以下のJSでとりえあず動作はするかなと思います。

<script>
  const myChangeChatTitle = () => {
    const myChatTitleText = "ご質問はお気軽に"; 
    
    const myTargetNode = document.getElementById("ShopifyChat");
    myTargetNode.shadowRoot.querySelector(".chat-title").textContent = myChatTitleText;
    const myConfig = {
      attributes: true,
      attributeFilter: ["is-open"],
      attributeOldValue: true };
    const myCallback = (mutationList, observer) => {
      for (const mutation of mutationList) {
        if (mutation.oldValue === "true") {
          document.getElementById("ShopifyChat").shadowRoot.querySelector(".chat-title").textContent = myChatTitleText;
        }
      }
    };
    const myObserver = new MutationObserver(myCallback);
    myObserver.observe(myTargetNode, myConfig);
  };
  
  window.addEventListener("load", myChangeChatTitle,false);
</script>

テーマによっては不可能な場合がありますが簡単に確認するのであれば、テーマエディタのフッターにカスタムLiquidセクションを配置して上記JSを記載し保存すれば動作が確認できると思います。

以下留意点です。

• 動作確認はDawnテーマのみ
• ページアクセス時に元の文言が表示されてから変更されるような動作になる
• Shopify Inboxアプリが出力するDOMが変更された場合動作しない可能性がある
• 確認や想定していない不具合が存在する可能性がある
• テーマエディタ内での動作は考慮していない
• 多言語化は考慮していない

参考:

https://developer.mozilla.org/ja/docs/Web/API/ShadowRoot

https://stackoverflow.com/questions/57813144/how-to-select-element-inside-open-shadow-dom-from-docum...

https://developer.mozilla.org/ja/docs/Web/API/Node/textContent

https://developer.mozilla.org/ja/docs/Web/API/Window/load_event

https://developer.mozilla.org/ja/docs/Web/API/MutationObserver/observe

※テーマエディタ内でも動作させる場合

https://shopify.dev/docs/storefronts/themes/architecture/sections/integrate-sections-with-the-theme-...

https://shopify.dev/docs/storefronts/themes/architecture/sections/integrate-sections-with-the-theme-...

以上です。動かない場合は申し訳ありません。

解説や修正などの追加対応は行いませんのでその点ご了承ください。

試作した感じではJSである程度は対応できるかなと思いますので、ちゃんとしたものが必要な場合はご自身で学ばれるかエキスパートやパートナーに依頼することをお勧めします。

[sabosui]

Jizo_Inagakiさん 

早速ご回答いただきとても嬉しいです。
高度なコード編集はまだまだできない身ですが、ご教示いただいた内容を試してみようと思います。
ありがとうございます。

[sabosui]

ご指示いただいた方法で表示させることができました。（使用しているテーマ『Yuva』）

確かに、ぺージリロード後1秒ほどInboxで設定されている「何かお困りですか」が表示されますが、
その後「ご質問はお気軽に」に切り替わりました。
Inboxの機能も問題なく使えそうです。

ありがとうございました。