Liquid、JavaScriptなどに関する質問
Debutを使用しております。
商品タイトルを<br>タグを用いて改行しているのですが、その際
商品をカートに追加した際に右上に表示される『カートに追加済み』のページに、追加した商品タイトルと<br>タグごと表示されてしまう為、
<br>タグを非表示にする方法を探しております。
よろしくお願い致します。
解決済! ベストソリューションを見る。
成功
ご確認ありがとうございます。
<br>が複数存在するパターンがあるとのことで、jsの一部修正をお願いします。
target.innerHTML = document.getElementById('cart-popup-item__title').innerHTML.replace('<br>', '<br>');
↓以下に変更
target.innerHTML = document.getElementById('cart-popup-item__title').innerHTML.replace(/<br>/g, '<br>');
こちらに変更いただき、ご確認を宜しくお願い致します。
カートに追加済みのページに表示する商品タイトルについてですが、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('<br>', '<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>」に戻すということをしています。
ご参考になれば幸いです。
ご返信ありがとうございます。
ご教示いただいた手順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('<br>', '<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>
当方がコード編集において知識がほとんどない為、お手を煩わせてしまい申し訳ありません。
お忙しいところご面倒をおかけ致しますが、解決策をご提案頂ければ幸いです。
h3タグとdivタグの読み替え、ありがとうございます。
見た感じ設定いただいたコードは問題なさそうです。
商品名に含まれているのは「<br/>」や「<br />」ではなく、「<br>」でしょうか?
可能であればストアフロントを確認させていただけるともう少し解決策の幅が広がるかと思います。
宜しくお願い致します。
ストアフロントを確認させていただきましたところ、提案のJavaScriptが読み込まれておらず、商品名表示部分も以下のようにidが追加されていない状態でした。
<div class="cart-popup-item__title" data-cart-popup-title=""></div>
念のため確認させていただきたいのですが、コードの変更は保存されておりますでしょうか?
大変失礼いたしました。また、ご返信が遅くなりました。
先日添付したURLが現在公開中のもので、今回編集しているのはコピーを取ったものでした。
以下がコピーしたストアフロントのURLです。
https://porito.coffee/?_ab=0&_fd=0&_sc=1
こちらではご提案いただいたJavaScriptの読み込みと、商品名表示部分にidを追加しております。
お忙しいところ度々お手数おかけ致しますが、改めて対策をご教示願います。
URLありがとうございます。
こちらのURLで確認してみましたが、やはり変更が反映されていないようでした。
変更の確認は、Google Chromeのデベロッパーツールという機能で確認することができます。
以下、簡単な確認手順になります。
1. Google Chrome ヘッダーメニューの[表示]→[開発 / 管理]→[デベロッパーツール]
2. デベロッパーツール メニュー一番左のカーソルアイコンをクリック(選択モードになります)
3. 選択モードの状態で、<br>が表示されてしまっているタイトル部分をクリック
ご確認を宜しくお願い致します。
こちら読んでて思ったんですが、商品名に「<br>」は使わずに、「 」(半角スペース)などにしておいて、
改行したいテンプレートの中で半角スペースを<br>に置き換えればいいのではないでしょうか?
{{ product.title | replace: " ", "<br>" }}
ご意見ありがとうございます。
ご提案いただいた「改行したいテンプレート」とはどのテンプレートを指していますでしょうか。
Templates内にあるcart.liquidのことでしょうか。
知識不足で申し訳ありません。お手隙の際で構いませんのでご返信いただければ幸いです。
変更箇所の確認をしました。以下に一例を記載いたします。
商品名:エミリオ・ロペス 中煎り エルサルバドル
選択モードで問題の箇所をクリックし表示されたのが以下です。
<div id="cart-popup-item__title" class="cart-popup-item__title" data-cart-popup-title="">エミリオ・ロペス<br>中煎り<br>エルサルバドル</div>
上記で赤色にしている箇所について補足します。
他商品も全て確認しわかったことは、
ということでした。
また、なぜか商品名の最初の<br>の前に不要な全角スペース、商品名の最後に不要な<br>が入っていたので全商品修正済みです。
ご確認を宜しくお願い致します。
成功
ご確認ありがとうございます。
<br>が複数存在するパターンがあるとのことで、jsの一部修正をお願いします。
target.innerHTML = document.getElementById('cart-popup-item__title').innerHTML.replace('<br>', '<br>');
↓以下に変更
target.innerHTML = document.getElementById('cart-popup-item__title').innerHTML.replace(/<br>/g, '<br>');
こちらに変更いただき、ご確認を宜しくお願い致します。
ありがとうございました、改善致しました。
なにぶん始めたばかりで知識が無く、ご迷惑ばかりおかけしましたことをお詫び申し上げます。
大変長い間お付き合いいただき、誠にありがとうございました。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024