show random products on home page from one collection

Highlighted
Shopify Expert
177 0 15

Hello,

I have been trying to show random products on home page from one colleciton.

I have followed https://docs.shopify.com/themes/customization/showcase-products/feature-multiple-random-products this guide, but problem is, it's not showing random products.

Each time I refresh the page, it shows me the same products.

Can please anyone help me with this?

It's a bit urgent.

Thanks for your help.!

0 Likes
Highlighted
Shopify Expert
177 0 15

I forgot to mention that,

.pick(NUMBER) is not working properly. If I mention .pick(10) it doesn't show up 10 items each time, sometime it shows 5, sometimes 7 and so on.

here is the link http://webbie-ninjas.myshopify.com/

I want to do for 'Women' collection.

Below is the code for that collection. Theme Supply.

<div id="products" class="grid-uniform row-negative-bottom">
  {% for product in collections[featured_row].products limit: row_limit %}
    {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
    {% assign current_collection = collections[featured_row] %}
    {% include 'product-grid-item' %}
  {% endfor %}
</div>

Please help.

Thanks for your help.!

0 Likes
Highlighted
Shopify Partner
2294 116 353

10 elements have to pre-exist,  the pick library chooses among existing elements and discards unchosen elements. It is up to the developer to decide what to do with the excess before the page finishes and the script is ran.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
Shopify Expert
177 0 15

Hello Paul,

Thanks for your reply. I am getting your point. Can you please suggest me what should I do if I want to show 10 random products each time from the collection? 

Which number should I set in .pick() function? or can you suggest me the change in js, which I can do and show those number of products which mentioned in .pick()  each time?

Thanks.

0 Likes
Highlighted
Shopify Partner
2294 116 353

There has to be a set of elements larger than the number of elements to be picked randomly.

the front page i viewed 1366x768 only has space for 4-5 elements per row, so

  • just render out say ~3 time the desired amount in index.liquid(or relative file) 
  • make  all elements greater then the pick() amount pre-hidden, or just hide them all.
  • pick()
  • display the remaining
Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
Shopify Expert
177 0 15

Yes. I got the point. As I want to show 10 products (5 products per row so 2 rows).

I debug the whole jquery.pick.js and found that, pick is taking the set of collection from the loop which added in index.liquid below is the code for collection loop.

<div id="product-row" class="grid-uniform row-negative-bottom">
  {% for product in collections[featured_row].products %}
    {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
    {% assign current_collection = collections[featured_row] %}
    {% include 'product-grid-item' %}
  {% endfor %}
</div>

I haven't set any limit on for because, the collection elements must have grater then the pick as pick is taking this collection elements each time, so in this loop I will get the whole collection and 

Now, I set pick(10) to show 10 products, but it show 7 or 8 products.

I have debug the js and found that, there is some issue in below code,

// Ditching unpicked elements and removing those from the returned set.
    return this.each(function(i) {
       if ($.inArray(i,new_index_array) === -1) {
          $(this).remove();
       }
    }).filter(function() {
      if (this.parentNode === null) {
        return false;
      }
      else {
        return true;
      }
    });

Thank you for help me so far.

0 Likes
Highlighted
Shopify Partner
2294 116 353

what's the issue with the ditching logic?

also the jquery selector may be to broad in tandem with having non-unique DOM ids:

jQuery('#product-row > div').pick(10);

so .. '#product-row > div'  to '#product-row > #random-products'

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
Shopify Expert
177 0 15

Thanks Paul,

I resolved the issue.

0 Likes
Highlighted
Shopify Partner
2294 116 353

I resolved the issue.

Don't leave us hanging, what was the fix? 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
Shopify Expert
177 0 15

Hello Paul,

I haven't done any changes in pick.js file. I just changed the location of jQuery('#product-row > div').pick(10); from product.liquid to themes.liquid before </body> tag.

I hope this helps to other who are facing the same issue.

Regards

1 Like