Question

我试图在Shopify的Check Out按钮下添加一个小图片。在多个地方尝试过。使用布鲁克林主题。

我使用液体标签并尝试将其添加到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>

当我这样做时，购物车只是不停地装载和挂起。＆＃34;加入购物车＆＃34;产品页面上的按钮也不起作用。

我对AJAX不熟悉，最近刚刚触及了Javascript。我是否还需要在其他地方声明此图片代码？

谢谢！

Answer 1

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

首先，您尝试将Liquid标记放在{% raw %} ... {% endraw %}块内 - 这会使您的液体标记呈现为文字字符串，并可能会破坏模板解释（Brooklyn使用名为javascript的模板库把手，其语法与Liquid相似）。为了让您的图片显示，请尝试：

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

其次，如果你注意到上面的代码，你会发现我拿出了img_tag过滤器。 img_tag将获取前面的字符串，并将其转换为HTML标记 - 将标记作为标记的来源并不合理。您应该使用手动图像标记或img_tag过滤器，但使用这两种标记会导致HTML格式不正确。

如果实施这两个更新并未修复您的代码，请打开您的控制台，如果有任何错误，请告知我们。要打开开发工具，请在大多数浏览器上按F12（如果使用Windows），然后单击“控制台”。标签

希望这有帮助！

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

1 个答案: