ShopifyのAjax Cartは、<img>をコードに挿入するときに読み込みを続ける

Question

Shopifyの[チェックアウト]ボタンの下に小さな画像を追加しようとしています。複数の場所で試しました。ブルックリンのテーマを使用しています。

私は液体タグを使用しています。これをajax-cart-template.liquidの内側に追加しようとしています。これは私がそれを追加しているセクションです：

<div class="ajaxcart__footer ajaxcart__footer--fixed"> 
     <div class="grid--full"> 
      <div class="grid__item two-thirds"> 
      <p class="ajaxcart__subtotal">{% endraw %}{{ 'cart.general.subtotal' | t }}{% raw %}</p> 
      </div> 
      <div class="grid__item one-third text-right"> 
      <p class="ajaxcart__subtotal">{{{totalPrice}}}</p> 

      1. <img src="{{ 'image.png' | asset_url | img_tag }}"/> 

      </div> 
     </div> 
     {{#if totalCartDiscount}} 
      <p class="ajaxcart__savings text-center">{{{totalCartDiscount}}}</p> 
     {{/if}} 
     <p class="ajaxcart__note text-center">{% endraw %}{{ 'cart.general.shipping_at_checkout' | t }}{% raw %}</p> 
     <button type="submit" class="btn--secondary btn--full cart__checkout" name="checkout"> 
      {% endraw %}{{ 'cart.general.checkout' | t }}{% raw %} <span class="icon icon-arrow-right" aria-hidden="true"></span> 
     </button> 

2. <img src="{{ 'image.png' | asset_url | img_tag }}"/> 


</div> 

これを行うと、カートはロードされ続けてハングします。商品ページの「カートに追加」ボタンも機能しません。

私はAJAXに慣れておらず、最近Javascriptに触れています。 このイメージタグを別の場所に宣言する必要がありますか？

ありがとうございました！

Answer 1

私はここにあなたの実装に2つのミス見ることができると思う：

まず、あなたは{% raw %} ... {% endraw %}ブロックの内部の液体のタグを入れしようとしている - これはあなたの液体タグは、リテラル文字列をレンダリングし、破壊される可能性がありますようになりますテンプレートの解釈（Brooklynは、Liquidと似た構文を持つHandlebarsというjavascriptテンプレートライブラリを使用します）。あなたの画像を表示するために取得するためには、試してみてください。

{% endraw %}<img src="{{ 'image.png' | asset_url }}"/>{% raw %} 

第二に、あなたは上記のコードを注意している場合、あなたは私がimg_tagフィルタを出したことがわかります。 img_tagは、前の文字列が何であってもそれをHTMLタグに変換します。タグのソースとしてタグを持つことは意味がありません。手動イメージタグまたはimg_tagフィルタを使用する必要がありますが、両方を使用するとHTMLが不良になります。

これら2つのアップデートを実装してもコードが修正されない場合は、コンソールを開いてエラーがある場合はお知らせください。開発ツールを開くには、ほとんどのブラウザでF12キーを押し（Windowsの場合）、[コンソール]タブをクリックします。

希望すると便利です。