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

日本語 ディスカッション 技術的なQ＆A
1

Debutを使用しております。

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

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


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

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

2

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

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

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

以下、手順になります。

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

  2. ファイルの先頭に以下のコードを追加
  1. 商品タイトルがセットされるh3タグにid属性を追加
### 
↓に変更
###
  1. 変更を保存

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

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

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

1 Like
3

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

ご教示いただいた手順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属性を以下のように追記しましたが
    は消えませんでした。

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

    4

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

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

    商品名に含まれているのは「
    」や「
    」ではなく、「
    」でしょうか？

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

    宜しくお願い致します。

    5

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

    https://porito.coffee/

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

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

    6

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

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

    7

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

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

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

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

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

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

    8

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

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

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

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

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

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

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

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

    9

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

    {{ product.title | replace: " ", "
" }}
    10

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

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

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

    エミリオ・ロペス
    中煎り
    エルサルバドル

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

    1. =“”
      デベロッパツールで見るとこの部分は表示されていませんが、選択モードでクリックした箇所をコピーするとこのような記述がされていました。

    2. このブレイクはカート追加時の表示できちんと消えています。

    3. デベロッパツール内の表示は
      です。これが商品をカートに追加した際表示されているため消したい部分です。

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


    • を1つしか使っていない商品（\ お得！ //
      リキッドコーヒー ＋ ドリップバッグ おまかせ１０個セット、手作り『ドリップバッグ』
      おまかせ飲み比べ５個セット）は問題解消

    • を2つ使っている商品の2つ目の
      が消えていない

    ということでした。

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

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

    11

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

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

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

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

    12

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


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

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

    ↓以下に変更

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

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

    13

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

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

    1 Like