Feature multiple random products on your home page - or is it still the same now?

Highlighted
New Member
8 0 0

hi, i used this - https://help.shopify.com/themes/customization/showcase-products/feature-multiple-random-products

uploaded jquery.pick.js

added this 

  <!-- Feature multiple random products on your home page ================================================== -->
  {{ 'jquery.pick.js' | asset_url | script_tag }}
  
 <script>
  jQuery(function() {
    jQuery('#products > li').pick(3).each(function(i) {
      if ((i+1)%3 === 0) {
        jQuery(this).addClass('last');
      }
      else {
        jQuery(this).removeClass('last');
      }
    });
  });
</script>
  
  <!-- Feature multiple random products on your home page ================================================== -->

no change at all.

 

 

0 Likes
Highlighted
Shopify Expert
10007 116 1817

Hey Andy,

There's a few errors on your site.

Let's start with the first one to see if this fixes everything else. Take a look at your jquery.pick.js asset:
https://cdn.shopify.com/s/files/1/1404/2773/t/1/assets/jquery.pick.js?5371192545576254843

^ see all the html in there? This is a JavaScript file and shouldn't have that. It looks like you've copied the source of the linked page rather than the actual code found on that page.

You'll want to copy this into asset. Make that change and see if you see better results. I'd also suggest you do these edits in a theme copy to avoid breaking the live storefront.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
8 0 0

Many thanks Jason, for looking in to this. i am not sure how i got the code wrong but have use the one that you referenced. Unfortunatly it has not changed how it works for me at the moment. 

0 Likes
Highlighted
Shopify Expert
10007 116 1817

Small steps.

Next error you're now getting is that jQuery is not defined. You're getting this error because the code is calling that library before it's loaded into the DOM (page).

Load order with JavaScript is very important.

Using the browser debug tools I can see that you've added these scripts to just below the opening <head> tag. If you look in your theme files you'll see that jQuery loads much further down - near the closing </head> tag. Make sure these scripts are added after jQuery is loaded. 

In other words, move them to just before the closing </head> tag. This still might not fix the problem - but at least we can knock the early errors out first.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
Highlighted
New Member
8 0 0

Hi Jason, i really appreciate your help with this. i have now popped it at the end ..... :( can you guess the outcome?

0 Likes
Highlighted
Tourist
14 0 1

Hi Andy,

 

I am interested in that feature, any chance you could share your code or step by step guide ? I am using Venture theme if that's of any importance.

 

I have so far :

 

1. created the asset file  "jquery.pick.js"

2. added this line {{ 'jquery.pick.js' | asset_url | script_tag }} right before </head> section

3. Then I don't know where to insert the script : 

 

<script>
  jQuery(function() {
    jQuery('.grid--uniform .grid__item').pick(9).each(function(i) {
      if ((i+1)%9 === 0) {
        jQuery(this).addClass('last');
      }
      else {
        jQuery(this).removeClass('last');
      }
    });
  });
</script>

 

Thanks in advance.

1 Like
Highlighted

Hey! Me too im also interested did anyone found a solution, the article from shopify is now gone. So we no have instructions!

0 Likes
Highlighted
New Member
1 0 0

I'm interested as well. Can someone send me the step by step guide? 

0 Likes