jquery 如何使用Ajax渲染流动代码并输出为HTML?

ha5z0ras  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(125)

我正在我的Shopify网站上创建一个迷你购物车,并使用apache将商品添加到购物车中。对于每一行项目,我需要获取元字段数据,但jquery不允许我这样做。

下面是我的迷你购物车和line-item-list. liquid的代码。问题是,这段代码返回的是JSON字符串,但我需要它呈现为HTML。
是否可以使用Ajax来呈现流动代码并将其输出为HTML?
任何帮助将不胜感激!
谢谢你,谢谢
mini-cart.liquid

<div class="add-line-item">Add Line Item</div>
<div class="line-items"></div>

<script>
  $(document).ready(function() {
    $('.add-line-item').on('click', function() {
      $.ajax({
        url: '/?sections=line-item-list',
        type: 'GET',
        dataType: 'html',
        success: function(data) {
          $('.line-items').html(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.error("Error fetching line-item-list content:", errorThrown);
        }
      });
    });
  });
</script>

sections/line-item-list.liquid

{% for item in cart.items %}
  {% if item.product.metafields.custom.some-metafield == true %}
    {% assign is_metafield = true %}
  {% endif %}
  ...other code here
{% endfor %}
unftdfkk

unftdfkk1#

我想了想,我不得不把URL改为url:'/?section_id=line-item-list'
更新的代码

<script>
  $(document).ready(function() {
    $('.add-line-item').on('click', function() {
      $.ajax({
        url: '/?sections=line-item-list',
        type: 'GET',
        dataType: 'html',
        success: function(data) {
          $('.line-items').html(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.error("Error fetching line-item-list content:", errorThrown);
        }
      });
    });
  });
</script>

相关问题