Shopify中的Ajax Cart在插入<img>代码时继续加载

问题描述：

我试图在Shopify中的Check Out按钮下添加一个小图像。尝试了多个地方。使用布鲁克林主题。Shopify中的Ajax Cart在插入<img>代码时继续加载

我正在使用液体标签并试图将其添加到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。我是否需要在其他地方声明此图片标签？

谢谢！

您不需要标记作为{{'image.png'| asset_url | img_tag}}为你生成它。它创建一个与相应的src属性。 [液体图标]（https://help.shopify.com/themes/liquid/filters/html-filters#img_tag） –

答

我想我可以看到你在这里实现两个错误：

首先，你试图把液体的标签的{% raw %} ... {% endraw %}块内 - 这会让你的液体标签显示为文字字符串，并可能被打破模板解释（布鲁克林使用一个名为Handlebars的JavaScript模板库，其语法与Liquid类似）。为了让您的形象出现，请尝试：

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

第二，如果你注意上面的代码，你会看到我拿出img_tag过滤器。 img_tag将采取任何前面的字符串，并把它变成一个HTML标签为你 - 并没有任何意义，有一个标签作为标签的来源。您应该使用手动图片标记或img_tag过滤器，但使用两者都会导致错误的HTML。

如果执行这两个更新不能修复您的代码，请打开您的控制台并告诉我们是否有任何错误。要打开开发工具，请在大多数浏览器上按F12（如果使用Windows），然后单击“控制台”选项卡。

希望这会有所帮助！

Shopify中的Ajax Cart在插入代码时继续加载

相关推荐