FROM CACHE - jp_header
解決済

カートに追加済み のページの<br>タグを非表示にする方法

ATKI
観光客
8 0 1

Debutを使用しております。

商品タイトルを<br>タグを用いて改行しているのですが、その際

商品をカートに追加した際に右上に表示される『カートに追加済み』のページに、追加した商品タイトルと<br>タグごと表示されてしまう為、

<br>タグを非表示にする方法を探しております。

よろしくお願い致します。

1 件の受理された解決策
KOICHI_KAMIZURU
Shopify Partner
56 21 62

成功

ご確認ありがとうございます。

<br>が複数存在するパターンがあるとのことで、jsの一部修正をお願いします。

 

target.innerHTML  = document.getElementById('cart-popup-item__title').innerHTML.replace('&lt;br&gt;', '<br>');

↓以下に変更

target.innerHTML  = document.getElementById('cart-popup-item__title').innerHTML.replace(/&lt;br&gt;/g, '<br>');

 

こちらに変更いただき、ご確認を宜しくお願い致します。 

上水流 弘一 (Kamizuru Koichi)
アプリ開発、テーマのカスタマイズ承っております。
お気軽にご相談ください。

元の投稿で解決策を見る

12件の返信12

KOICHI_KAMIZURU
Shopify Partner
56 21 62

カートに追加済みのページに表示する商品タイトルについてですが、JavaScriptで動的にテキストがセットされるようになっており、テキストセット時にHTMLタグをエスケープ(無害化)している為<br>がそのまま表示される形になっているようです。

このテキストセット処理はShopify本体側で行なっており変更することができません。

 

そこで、若干強引に実現してみました。

以下、手順になります。

 

1. Debutのコードを編集する画面から、cart-popup.liquidファイルを開く

2. ファイルの先頭に以下のコードを追加

 

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const config = { 
      childList : true
    };
    const target = document.getElementById('cart-popup-item__title')
    const observer = new MutationObserver(records => {
      observer.disconnect();
      target.innerHTML  = document.getElementById('cart-popup-item__title').innerHTML.replace('&lt;br&gt;', '<br>');
      // ↑<br>を非表示にする場合は'<br>'の部分を''にしてください
      observer.observe(target, config);
    })

    observer.observe(target, config)
  });
</script>

 

3. 商品タイトルがセットされるh3タグにid属性を追加

 

<h3 class="cart-popup-item__title" data-cart-popup-title></h3>
↓に変更
<h3 id="cart-popup-item__title" class="cart-popup-item__title" data-cart-popup-title></h3>

 

 4. 変更を保存

 

以上の手順で<br>タグで改行されるようになります。

やっていることは、h3タグに商品タイトルがセット(変更)されるのを監視し、変更された場合はエスケープされたbrタグを「<br>」に戻すということをしています。

 

ご参考になれば幸いです。

上水流 弘一 (Kamizuru Koichi)
アプリ開発、テーマのカスタマイズ承っております。
お気軽にご相談ください。
ATKI
観光客
8 0 1

ご返信ありがとうございます。

ご教示いただいた手順2までは問題なく実施しましたが、手順3のh3タグがcart-popup.liquidファイル内に見当たりませんでした。

しかし酷似している箇所はありました。それが以下太字・赤にしている部分です。

<script>
document.addEventListener('DOMContentLoaded', function() {
const config = {
childList : true
};
const target = document.getElementById('cart-popup-item__title')
const observer = new MutationObserver(records => {
observer.disconnect();
target.innerHTML = document.getElementById('cart-popup-item__title').innerHTML.replace('&lt;br&gt;', '<br>');
// ↑<br>を非表示にする場合は'<br>'の部分を''にしてください
observer.observe(target, config);
})

observer.observe(target, config)
});
</script>

{%- 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 -%}

<div class="cart-popup-wrapper cart-popup-wrapper--hidden" role="dialog" aria-modal="true" aria-labelledby="CartPopupHeading" data-cart-popup-wrapper>
<div class="cart-popup" data-cart-popup tabindex="-1">
<div class="cart-popup__header">
<h2 id="CartPopupHeading" class="cart-popup__heading">{{ 'cart.popup.added_to_cart' | t }}</h2>
<button class="cart-popup__close" aria-label="{{ 'general.accessibility.close_modal' | t }}" data-cart-popup-close>{% include 'icon-close' %}</button>
</div>
<div class="cart-popup-item">
<div class="cart-popup-item__image-wrapper hide" data-cart-popup-image-wrapper>
<div class="cart-popup-item__image cart-popup-item__image--placeholder" data-cart-popup-image-placeholder>
<div data-placeholder-size></div>
<div class="placeholder-background placeholder-background--animation"></div>
</div>
</div>
<div class="cart-popup-item__description">
<div>
<div class="cart-popup-item__title" data-cart-popup-title></div>
<ul class="product-details" aria-label="{{ 'cart.popup.product_details' | t }}" data-cart-popup-product-details></ul>
</div>
<div class="cart-popup-item__quantity">
<span class="visually-hidden" data-cart-popup-quantity-label></span>
<span aria-hidden="true">{{ 'cart.popup.quantity' | t }}:</span>
<span aria-hidden="true" data-cart-popup-quantity></span>
</div>
</div>
</div>

<a href="{{ routes.cart_url }}" class="cart-popup__cta-link btn btn--secondary-accent">
{{ 'products.product.view_cart' | t }} (<span data-cart-popup-cart-quantity></span>)
</a>

<div class="cart-popup__dismiss">
<button class="cart-popup__dismiss-button text-link text-link--accent" data-cart-popup-dismiss>
{{ 'cart.general.continue_shopping' | t }}
</button>
</div>
</div>
</div>

 

これにid属性を以下のように追記しましたが<br>は消えませんでした。

<div id="cart-popup-item__title" class="cart-popup-item__title" data-cart-popup-title></div>


当方がコード編集において知識がほとんどない為、お手を煩わせてしまい申し訳ありません。
お忙しいところご面倒をおかけ致しますが、解決策をご提案頂ければ幸いです。

KOICHI_KAMIZURU
Shopify Partner
56 21 62

h3タグとdivタグの読み替え、ありがとうございます。

見た感じ設定いただいたコードは問題なさそうです。

商品名に含まれているのは「<br/>」や「<br />」ではなく、「<br>」でしょうか?

可能であればストアフロントを確認させていただけるともう少し解決策の幅が広がるかと思います。

宜しくお願い致します。

上水流 弘一 (Kamizuru Koichi)
アプリ開発、テーマのカスタマイズ承っております。
お気軽にご相談ください。
ATKI
観光客
8 0 1

以下がストアフロントです。

https://porito.coffee/

 

商品名に含まれるのは「<br>」のみです。

大変お手数おかけしますが、よろしくお願いいたします。

KOICHI_KAMIZURU
Shopify Partner
56 21 62

ストアフロントを確認させていただきましたところ、提案のJavaScriptが読み込まれておらず、商品名表示部分も以下のようにidが追加されていない状態でした。

<div class="cart-popup-item__title" data-cart-popup-title=""></div>

念のため確認させていただきたいのですが、コードの変更は保存されておりますでしょうか?

上水流 弘一 (Kamizuru Koichi)
アプリ開発、テーマのカスタマイズ承っております。
お気軽にご相談ください。
ATKI
観光客
8 0 1

大変失礼いたしました。また、ご返信が遅くなりました。

先日添付したURLが現在公開中のもので、今回編集しているのはコピーを取ったものでした。

以下がコピーしたストアフロントのURLです。

https://porito.coffee/?_ab=0&_fd=0&_sc=1

 

こちらではご提案いただいたJavaScriptの読み込みと、商品名表示部分にidを追加しております。

お忙しいところ度々お手数おかけ致しますが、改めて対策をご教示願います。

KOICHI_KAMIZURU
Shopify Partner
56 21 62

URLありがとうございます。

こちらのURLで確認してみましたが、やはり変更が反映されていないようでした。

変更の確認は、Google Chromeのデベロッパーツールという機能で確認することができます。

以下、簡単な確認手順になります。

 

1. Google Chrome ヘッダーメニューの[表示]→[開発 / 管理]→[デベロッパーツール]

2. デベロッパーツール メニュー一番左のカーソルアイコンをクリック(選択モードになります)

3. 選択モードの状態で、<br>が表示されてしまっているタイトル部分をクリック

 

ご確認を宜しくお願い致します。

上水流 弘一 (Kamizuru Koichi)
アプリ開発、テーマのカスタマイズ承っております。
お気軽にご相談ください。
_osamu_iwasaki_
Shopify Partner
185 47 193

こちら読んでて思ったんですが、商品名に「<br>」は使わずに、「 」(半角スペース)などにしておいて、
改行したいテンプレートの中で半角スペースを<br>に置き換えればいいのではないでしょうか?

{{ product.title | replace: " ", "<br>" }}

 

ATKI
観光客
8 0 1

ご意見ありがとうございます。

ご提案いただいた「改行したいテンプレート」とはどのテンプレートを指していますでしょうか。

Templates内にあるcart.liquidのことでしょうか。

知識不足で申し訳ありません。お手隙の際で構いませんのでご返信いただければ幸いです。

ATKI
観光客
8 0 1

変更箇所の確認をしました。以下に一例を記載いたします。

 

商品名:エミリオ・ロペス 中煎り エルサルバドル

選択モードで問題の箇所をクリックし表示されたのが以下です。

<div id="cart-popup-item__title" class="cart-popup-item__title" data-cart-popup-title="">エミリオ・ロペス<br>中煎り&lt;br&gt;エルサルバドル</div>

 

上記で赤色にしている箇所について補足します。

  1. =""
    デベロッパツールで見るとこの部分は表示されていませんが、選択モードでクリックした箇所をコピーするとこのような記述がされていました。
  2. <br>
    このブレイクはカート追加時の表示できちんと消えています。
  3. &lt;br&gt;
    デベロッパツール内の表示は<br>です。これが商品をカートに追加した際表示されているため消したい部分です。

 

他商品も全て確認しわかったことは、

  • <br>を1つしか使っていない商品(\\ お得! //<br>リキッドコーヒー + ドリップバッグ おまかせ10個セット、手作り『ドリップバッグ』<br>おまかせ飲み比べ5個セット)は問題解消
  • <br>を2つ使っている商品の2つ目の<br>が消えていない

ということでした。

また、なぜか商品名の最初の<br>の前に不要な全角スペース、商品名の最後に不要な<br>が入っていたので全商品修正済みです。

ご確認を宜しくお願い致します。

KOICHI_KAMIZURU
Shopify Partner
56 21 62

成功

ご確認ありがとうございます。

<br>が複数存在するパターンがあるとのことで、jsの一部修正をお願いします。

 

target.innerHTML  = document.getElementById('cart-popup-item__title').innerHTML.replace('&lt;br&gt;', '<br>');

↓以下に変更

target.innerHTML  = document.getElementById('cart-popup-item__title').innerHTML.replace(/&lt;br&gt;/g, '<br>');

 

こちらに変更いただき、ご確認を宜しくお願い致します。 

上水流 弘一 (Kamizuru Koichi)
アプリ開発、テーマのカスタマイズ承っております。
お気軽にご相談ください。
ATKI
観光客
8 0 1

ありがとうございました、改善致しました。

なにぶん始めたばかりで知識が無く、ご迷惑ばかりおかけしましたことをお詫び申し上げます。
大変長い間お付き合いいただき、誠にありがとうございました。