Question 11893 in Shopify Question posted in
The Shopify help center can be found here.

Related Product JS Code not working unless number of items 5 or greater – Shopify

I have some related code on my Shopify site written by a previous developer whom I am no longer able to get in contact with and for some reason, whilst the code works fine when there is 5 or more related products, when there are 4 or fewer it causes a strange zoom out effect on the products.

This is easier to show with images:

Good version (URL here: https://www.sconch.com/collections/yarn/products/king-cole-timeless-chunky):

enter image description here

Bad version ()https://www.sconch.com/collections/yarn/products/james-c-brett-marble-chunky:

enter image description here

Any help with where to even start would be much appreciated!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have been able to solve this by implementing the following CSS code:

    .slick-list.draggable {
    width: 100%;
}

    This means the JS correctly calculates the size of each element regardless of how many are in the slider.

    This CSS edit was suggested by @kenwheeler in this post: https://github.com/kenwheeler/slick/issues/1504#issuecomment-489618312


  2. 0

    you are using slick-slide, the plug-in set the width of the items

    this is the script from your webpage,

    the slick-slide is code for 5 items with different break point;

    ;(function(limit, products0) {
  const products = products0.filter(p => p !== "james-c-brett-marble-chunky");
    const rands = [];
    console.log(products, limit);
    while(rands.length < limit && rands.length < products.length) {
      const rand = Math.floor(Math.random() * products.length);
      if (!rands.includes(rand)) rands.push(rand);
    }
    Promise.all(rands.map(rand =>
                          fetch(`/products/${products[rand]}?view=item`)
                          .then(res => console.log(`/products/${products[rand]}?view=item`) || res)
                          .then(res => res.text())
                          .then(html =>  (new DOMParser()).parseFromString(html, 'text/html'))
                          .then(container => {
                                container.querySelectorAll('figure').forEach(figure => {
                                  const image = figure.querySelector(".productitem--image-primary");
                                
                                  figure.style.backgroundImage = `url(${image.src})`;
                                  figure.innerHTML = "";
                                  figure.style.backgroundSize = "contain";
                                  figure.style.backgroundRepeat = "no-repeat";
                                  figure.style.backgroundPosition = "center";
                                });
                                return container;
                          })
                          .then(doc => console.log(doc, doc.querySelector(".hc-extract")) || doc)
                          .then(doc => doc.querySelector(".hc-extract").innerHTML)))
    .then(cont => cont.join('n'))
    .then(html => document.querySelector('[data-dynamic-related]').innerHTML = html)
    .then(() => {
      $0('[data-dynamic-related]').slick({
        infinite: true,
        slidesToShow: 5,
        slidesToScroll: 5,
        prevArrow: `<div class="hc-arrow hc-prev"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M14.71 6.71c-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41z"/></svg></div>`,
        nextArrow: `<div class="hc-arrow hc-prev"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z"/></svg></div>`,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    slidesToScroll: 3,
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToScroll: 2,
                    slidesToShow: 2
                }
            }
        ]
      });
    });
    
})(20, ["james-c-brett-marble-chunky","james-c-brett-marble-chunky-jackets-jb768","james-c-brett-marble-chunky-hoodies-jb767","james-c-brett-marble-chunky-jacket-sweater-jb766","james-c-brett-marble-chunky-throw-cushion-covers-jb765"]);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search