CODEWITHSUNDEEP
jquerycssshopifyliquidowl-carousel
Mostapha Marbouh
Mostapha Marbouh

Reputation: 33

Owl carousel loading all items in a vertical column. What am I missing here?

I am setting up a recently viewed products script for Shopify, got the code from Github here: https://github.com/lucky110209/shopify-recent-viewed-products I tried to make styles match my current theme, and place the recently viewed items inside an Owl carousel similar to the one in the "related products". The problem is that it shows all the items in a vertical line, please take a look at the store, I had to edit the link to reproduce the error in a non published theme copy, kindly see few products to build the recently viewed products carousel in the bottom of the product pages: https://alqamaru.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=44568838215

I tried to change the owl carousel location, place it above the script, inside the {% raw %} tag, double-checked the section schema settings, tried to include the {% include 'product-card-grid' %} inside the raw tags, but it's not working, any help on fixing this will be appreciated.

recently-viewed.liquid:

{{ '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>```

Upvotes: 1

Views: 617

Answers (1)

viraj Chaudhary
viraj Chaudhary

Reputation: 126

Can you change this script

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

with below one

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

Upvotes: 0

Related Questions