Sign up
Quick links
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

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

‎08-07-2016 03:12 AM
Andy_Mantle
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
Reply
‎08-07-2016 11:34 AM
Jason
Shopify Expert
10008 116 1844

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
Reply
‎08-07-2016 12:58 PM
Andy_Mantle
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
Reply
‎08-07-2016 01:55 PM
Jason
Shopify Expert
10008 116 1844

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
Reply
‎08-07-2016 11:16 PM
Andy_Mantle
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
Reply
‎05-11-2020 07:39 PM
JP30
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.

Reply
‎05-16-2020 11:52 AM
Andre_Borges
Tourist
8 0 1

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
Reply
‎10-30-2020 12:07 AM
LANDLORDD
New Member
1 0 0

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

0 Likes
Reply
Most Liked Authors
View all badges
Quick links
Facebook Twitter Youtube Instagram Linkedin Pinterest
Terms of Service Privacy Policy