# カートに追加済み のページの\タグを非表示にする方法 **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [May 13, 2021, 9:08am UTC](https://community.shopify.com/t/br/46408 "2021-05-13T09:08:13Z")\ **Posts on this page:** 13\ **Page:** 1 ## AI-generated summary Debutテーマで、商品タイトルに入れた「
」が、カート追加時のポップアップ内でも文字列として表示される問題への対応。原因は、ポップアップの商品名がShopify本体のJavaScriptで動的に挿入され、HTMLタグがエスケープ（無害化）されるためでした。 提案された対処は、`cart-popup.liquid` にJavaScriptを追加し、商品名表示要素の内容変更を監視して、エスケープ済みの `
` を置換する方法です。あわせて、商品名表示用の要素に `id="cart-popup-item__title"` を付与する必要がありました。 途中で、公開中テーマではなくコピーしたテーマを編集していたことや、変更が反映されているかの確認方法としてChromeデベロッパーツールの利用が案内されました。確認の結果、`
` が1つの商品は解消した一方、複数ある場合は2つ目以降が残ることが判明しました。 最終的に、JavaScriptの `replace('
', ...)` を `replace(/
/g, ...)` に修正し、複数の `
` も一括置換できるようになって解決済みです。別案として、商品名自体に `
` を入れず、テンプレート側で空白を改行へ置換する方法も提案されました。
**Author:** ![ATKI](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@ATKI](https://community.shopify.com/u/ATKI)\ **Post date:** [May 13, 2021, 9:08am UTC](https://community.shopify.com/t/br/46408/1 "2021-05-13T09:08:13Z")
Debutを使用しております。 商品タイトルを タグを用いて改行しているのですが、その際 商品をカートに追加した際に右上に表示される『カートに追加済み』のページに、追加した商品タイトルと タグごと表示されてしまう為、 タグを非表示にする方法を探しております。 よろしくお願い致します。 ---
**Author:** ![KOICHI\_KAMIZURU](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/koichi_kamizuru/32/120990_2.png) [@KOICHI\_KAMIZURU](https://community.shopify.com/u/KOICHI_KAMIZURU)\ **Post date:** [May 19, 2021, 12:30am UTC](https://community.shopify.com/t/br/46408/2 "2021-05-19T00:30:01Z")
カートに追加済みのページに表示する商品タイトルについてですが、JavaScriptで動的にテキストがセットされるようになっており、テキストセット時にHTMLタグをエスケープ(無害化)している為 がそのまま表示される形になっているようです。 このテキストセット処理はShopify本体側で行なっており変更することができません。 そこで、若干強引に実現してみました。 以下、手順になります。 1. Debutのコードを編集する画面から、cart-popup.liquidファイルを開く 2. ファイルの先頭に以下のコードを追加 ```javascript ``` 1. 商品タイトルがセットされるh3タグにid属性を追加 ```markup ### ↓に変更 ### ``` 1. 変更を保存 以上の手順で タグで改行されるようになります。 やっていることは、h3タグに商品タイトルがセット(変更)されるのを監視し、変更された場合はエスケープされたbrタグを「 」に戻すということをしています。 ご参考になれば幸いです。 ---
**Author:** ![ATKI](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@ATKI](https://community.shopify.com/u/ATKI)\ **Post date:** [May 20, 2021, 3:07am UTC](https://community.shopify.com/t/br/46408/3 "2021-05-20T03:07:37Z")
ご返信ありがとうございます。 ご教示いただいた手順2までは問題なく実施しましたが、手順3のh3タグがcart-popup.liquidファイル内に見当たりませんでした。 しかし酷似している箇所はありました。それが以下太字・赤にしている部分です。 {%- style -%} {% assign cart\_popup\_box\_shadow = settings.color\_borders | color\_modify: ‘alpha’, 0.5 %} .cart-popup { box-shadow: 1px 1px 10px 2px {{ cart\_popup\_box\_shadow }}; } {%- endstyle -%} ## {{ 'cart.popup.added\_to\_cart' | t }} {% include 'icon-close' %} \*\* \*\* {{ 'cart.popup.quantity' | t }}: {{ 'products.product.view\_cart' | t }} () {{ 'cart.general.continue\_shopping' | t }} これにid属性を以下のように追記しましたが は消えませんでした。 当方がコード編集において知識がほとんどない為、お手を煩わせてしまい申し訳ありません。 お忙しいところご面倒をおかけ致しますが、解決策をご提案頂ければ幸いです。 ---
**Author:** ![KOICHI\_KAMIZURU](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/koichi_kamizuru/32/120990_2.png) [@KOICHI\_KAMIZURU](https://community.shopify.com/u/KOICHI_KAMIZURU)\ **Post date:** [May 20, 2021, 8:54am UTC](https://community.shopify.com/t/br/46408/4 "2021-05-20T08:54:02Z")
h3タグとdivタグの読み替え、ありがとうございます。 見た感じ設定いただいたコードは問題なさそうです。 商品名に含まれているのは「 」や「 」ではなく、「 」でしょうか？ 可能であればストアフロントを確認させていただけるともう少し解決策の幅が広がるかと思います。 宜しくお願い致します。 ---
**Author:** ![ATKI](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@ATKI](https://community.shopify.com/u/ATKI)\ **Post date:** [May 21, 2021, 6:12am UTC](https://community.shopify.com/t/br/46408/5 "2021-05-21T06:12:41Z")
以下がストアフロントです。 [https://porito.coffee/](https://porito.coffee/) 商品名に含まれるのは「 」のみです。 大変お手数おかけしますが、よろしくお願いいたします。 ---
**Author:** ![KOICHI\_KAMIZURU](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/koichi_kamizuru/32/120990_2.png) [@KOICHI\_KAMIZURU](https://community.shopify.com/u/KOICHI_KAMIZURU)\ **Post date:** [May 21, 2021, 8:54am UTC](https://community.shopify.com/t/br/46408/6 "2021-05-21T08:54:24Z")
ストアフロントを確認させていただきましたところ、提案のJavaScriptが読み込まれておらず、商品名表示部分も以下のようにidが追加されていない状態でした。 ```markup ``` 念のため確認させていただきたいのですが、コードの変更は保存されておりますでしょうか？ ---
**Author:** ![ATKI](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@ATKI](https://community.shopify.com/u/ATKI)\ **Post date:** [May 30, 2021, 1:33am UTC](https://community.shopify.com/t/br/46408/7 "2021-05-30T01:33:38Z")
大変失礼いたしました。また、ご返信が遅くなりました。 先日添付したURLが現在公開中のもので、今回編集しているのはコピーを取ったものでした。 以下がコピーしたストアフロントのURLです。 [https://porito.coffee/?\_ab=0&\_fd=0&\_sc=1](https://porito.coffee/?_ab=0&_fd=0&_sc=1) こちらではご提案いただいたJavaScriptの読み込みと、商品名表示部分にidを追加しております。 お忙しいところ度々お手数おかけ致しますが、改めて対策をご教示願います。 ---
**Author:** ![KOICHI\_KAMIZURU](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/koichi_kamizuru/32/120990_2.png) [@KOICHI\_KAMIZURU](https://community.shopify.com/u/KOICHI_KAMIZURU)\ **Post date:** [May 30, 2021, 11:49pm UTC](https://community.shopify.com/t/br/46408/8 "2021-05-30T23:49:37Z")
URLありがとうございます。 こちらのURLで確認してみましたが、やはり変更が反映されていないようでした。 変更の確認は、Google Chromeのデベロッパーツールという機能で確認することができます。 以下、簡単な確認手順になります。 1. Google Chrome ヘッダーメニューの[表示]→[開発 / 管理]→[デベロッパーツール] 2. デベロッパーツール メニュー一番左のカーソルアイコンをクリック(選択モードになります) 3. 選択モードの状態で、 が表示されてしまっているタイトル部分をクリック ご確認を宜しくお願い致します。 ---
**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\ **Post date:** [May 31, 2021, 12:48am UTC](https://community.shopify.com/t/br/46408/9 "2021-05-31T00:48:42Z")
こちら読んでて思ったんですが、商品名に「 」は使わずに、「 」（ **半角スペース** ）などにしておいて、 改行したいテンプレートの中で**半角スペースを に置き換えれば**いいのではないでしょうか？ ```ruby {{ product.title | replace: " ", " " }} ``` ---
**Author:** ![ATKI](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@ATKI](https://community.shopify.com/u/ATKI)\ **Post date:** [May 31, 2021, 4:55am UTC](https://community.shopify.com/t/br/46408/10 "2021-05-31T04:55:24Z")
変更箇所の確認をしました。以下に一例を記載いたします。 商品名：エミリオ・ロペス 中煎り エルサルバドル 選択モードで問題の箇所をクリックし表示されたのが以下です。 エミリオ・ロペス 中煎り エルサルバドル 上記で赤色にしている箇所について補足します。 1. =“” デベロッパツールで見るとこの部分は表示されていませんが、選択モードでクリックした箇所をコピーするとこのような記述がされていました。 2. このブレイクはカート追加時の表示できちんと消えています。 3. デベロッパツール内の表示は です。これが商品をカートに追加した際表示されているため消したい部分です。 他商品も全て確認しわかったことは、 - を1つしか使っていない商品（\ お得！ // リキッドコーヒー ＋ ドリップバッグ おまかせ１０個セット、手作り『ドリップバッグ』 おまかせ飲み比べ５個セット）は問題解消 - を2つ使っている商品の2つ目の が消えていない ということでした。 また、なぜか商品名の最初の の前に不要な全角スペース、商品名の最後に不要な が入っていたので全商品修正済みです。 ご確認を宜しくお願い致します。 ---
**Author:** ![ATKI](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@ATKI](https://community.shopify.com/u/ATKI)\ **Post date:** [May 31, 2021, 5:15am UTC](https://community.shopify.com/t/br/46408/11 "2021-05-31T05:15:33Z")
ご意見ありがとうございます。 ご提案いただいた「改行したいテンプレート」とはどのテンプレートを指していますでしょうか。 Templates内にあるcart.liquidのことでしょうか。 知識不足で申し訳ありません。お手隙の際で構いませんのでご返信いただければ幸いです。 ---
**Author:** ![KOICHI\_KAMIZURU](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/koichi_kamizuru/32/120990_2.png) [@KOICHI\_KAMIZURU](https://community.shopify.com/u/KOICHI_KAMIZURU)\ **Post date:** [May 31, 2021, 8:02am UTC](https://community.shopify.com/t/br/46408/12 "2021-05-31T08:02:52Z")
ご確認ありがとうございます。 が複数存在するパターンがあるとのことで、jsの一部修正をお願いします。 ```javascript target.innerHTML = document.getElementById('cart-popup-item__title').innerHTML.replace('
', ' '); ``` ↓以下に変更 ```javascript target.innerHTML = document.getElementById('cart-popup-item__title').innerHTML.replace(/
/g, ' '); ``` こちらに変更いただき、ご確認を宜しくお願い致します。 ---
**Author:** ![ATKI](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@ATKI](https://community.shopify.com/u/ATKI)\ **Post date:** [May 31, 2021, 9:15am UTC](https://community.shopify.com/t/br/46408/13 "2021-05-31T09:15:00Z")
ありがとうございました、改善致しました。 なにぶん始めたばかりで知識が無く、ご迷惑ばかりおかけしましたことをお詫び申し上げます。 大変長い間お付き合いいただき、誠にありがとうございました。