猫头鹰旋转木马将所有项目加载到垂直列中。我在这里缺少什么？

Question

我正在为 Shopify 设置一个最近查看的产品脚本，从这里的 Github 获取代码：https://github.com/lucky110209/shopify-recent-viewed-products 我尝试使样式符合我当前的主题，并将最近查看的项目放置在与“相关产品”中的类似的 Owl 轮播中。问题是它以垂直线显示所有项目，请看一下商店，我必须编辑链接以在未发布的主题副本中重现错误，请参阅一些产品来构建最近查看的产品轮播在产品页面底部：https://alqamaru.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=44568838215

我尝试更改猫头鹰轮播位置，将其放置在脚本上方的 {% raw %} 标记内，仔细检查部分架构设置，尝试将 {% include 'product-card-grid' %} 包含在其中原始标签，但它不起作用，任何解决此问题的帮助将不胜感激。

最近查看的液体：

{{ 'jquery.products.min.js' | asset_url | script_tag }}
{% assign column1 = section.settings.column1-rv | plus:0 %}
{% assign column2 = section.settings.column2-rv | plus:0 %}
{% assign column3 = section.settings.column3-rv | plus:0 %}
{% assign column4 = section.settings.column4-rv | plus:0 %}
{% assign column5 = section.settings.column5-rv | plus:0 %}
{% assign relateCol = 4 %}
{% assign relateLimit = section.settings.product_recent_limit | plus: 0 %}
{% assign currentProduct = product %}
<section class="section-related">
  <div id="related" class="related-products">
   <h3 class="detail-title font-ct"><strong><span>Recently Viewed Products</span></strong></h3>
   <div class="products-listing grid ss-carousel ss-owl">
    <div class="product-layout owl-carousel"
      {% if settings.enable_rtl %}data-rtl ="true"{% endif %}
      data-nav="{{ section.settings.recent_navigation-rv }}"
      data-margin    ="{{ section.settings.margin-rl }}" 
      data-lazyLoad    ="true"
      data-column1=" {{ column1 }}" 
      data-column2=" {{ column2 }}" 
      data-column3=" {{ column3 }}" 
      data-column4=" {{ column4 }}" 
      data-column5=" {{ column5 }}">
     <div id="recently-viewed-products" style="display:none"> 
     </div>
    {% raw %}
    <script id="recently-viewed-product-template"  type="text/x-jquery-tmpl">
      <div class="item">
       <div id="product-${handle}">
              <div >
                {{if compare_at_price}}
                <span class="bt-sale">Sale</span>
                {{/if}}
                <a href="${url}">
                  <img src="${Shopify.Products.resizeImage(featured_image, "medium")}" />
                </a>
              </div>
              <div class="caption">
                <h4><a href="${url}" title="${title}">${title}</a></h4>
                <p class="price">
                  <span class="price-new">${Shopify.formatMoney(price)}</span>
                  <span class="price-old">{{if compare_at_price}}${Shopify.formatMoney(compare_at_price)}{{/if}}</span>
                </p>
              </div>
       </div>
    </script>
    {% endraw %}
   </div>
  </div>
</div>
<script>
  var limit_product = {{ section.settings.product_recent_limit }};
  Shopify.Products.showRecentlyViewed( { howManyToShow: product_recent_limit } );
</script>
</div>
</section>```

Answer 1

你能改变这个脚本吗

<script>
  var limit_product = {{ section.settings.product_recent_limit }};
  Shopify.Products.showRecentlyViewed( { howManyToShow: product_recent_limit } );
</script>

与下面的一个

<script>
 $(document).ready(function () {
         setTimeout(function () {
  var limit_product = {{ section.settings.product_recent_limit }};
  Shopify.Products.showRecentlyViewed( { howManyToShow: product_recent_limit } ); }, 5000); 
});
</script>