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

解決済
ATKI
観光客
8 0 1

Debutを使用しております。

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

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

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

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

0 件の「いいね!」
KOICHI_KAMIZURU
探検家
53 18 54

カートに追加済みのページに表示する商品タイトルについてですが、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>


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

0 件の「いいね!」
KOICHI_KAMIZURU
探検家
53 18 54

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

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

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

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

宜しくお願い致します。

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

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

https://porito.coffee/

 

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

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

0 件の「いいね!」
KOICHI_KAMIZURU
探検家
53 18 54

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

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

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

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

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

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

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

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

 

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

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

0 件の「いいね!」
KOICHI_KAMIZURU
探検家
53 18 54

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

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

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

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

 

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

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

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

 

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

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

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

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

 

0 件の「いいね!」
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>が入っていたので全商品修正済みです。

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

0 件の「いいね!」