Ajax Cart in Shopify keeps loading when inserting an <img> in code

Question

I'm trying to add a small image under the Check Out button in Shopify. Tried in multiple places. Using Brooklyn theme.

I'm using liquid tags and trying to add it inside the ajax-cart-template.liquid. This is the section where I'm adding it:

<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>

When I do this the cart just keeps loading and hangs. The "add to cart" button from a product page doesn't work also.

I'm unfamiliar with AJAX and just touched Javascript recently. Do I need to declare this image tag somewhere else too?

Thank you!

You don't need the <img> tag as {{ 'image.png' | asset_url | img_tag }} generates it for you. It creates a <img> with the corresponding src property. Liquid Img Tag — Ernesto Andres Gutierrez

Dave B Dave B · Accepted Answer · 2017-08-17T16:27:38

I think I can see two mistakes in your implementation here:

First, you're trying to put Liquid tags inside of a {% raw %} ... {% endraw %} block - this will make your liquid tags render as literal strings and might be breaking the template interpretation (Brooklyn uses a javascript template library called Handlebars, which has similar syntax to Liquid). In order to get your image to appear, try:

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

Second, if you note the above code you'll see that I took out the img_tag filter. img_tag will take whatever the preceding string is and turn it into an HTML tag for you - and it doesn't make sense to have a tag as the source for a tag. You should use either a manual image tag or the img_tag filter, but using both will result in bad HTML.

If implementing these two updates doesn't fix your code, please open your console and let us know if there are any errors. To open the dev tools, press F12 on most browsers (if using Windows) then click on the 'Console' tab.

Hope this helps!

Ajax Cart in Shopify keeps loading when inserting an <img> in code

1 Answers