Need Help Random Related Products in Debut

New Member
19 0 0

I have followed all the instructed links that I have found in the forums but just can't get the random related product section to work. I can display the first 4 products with no problem but thats it. No random products when refreshing page.

This is the related-products.liquid

<hr>
<div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
 
{% comment %}
  Number of related items per row,
  and number of rows.
{% endcomment %}

{% assign number_of_related_products_per_row = 4 %}
{% assign number_of_rows = 1 %}

{% comment %}
  Heading.
  Leave blank if you don't need one.
{% endcomment %}

{% assign heading = "You might also like" %}

{% comment %}
  Set either or both to true, if you want
  to limit yourself to items with same vendor, and/or type.
{% endcomment %}

{% assign same_vendor = false %}
{% assign same_type = false %}

{% comment %}
  Collections to ignore.
  Never pick related items from those.
{% endcomment %}

{% assign exclusions = 'frontpage,all' | split: ',' %}

{% comment %}
  Looking for a relevant collection.
{% endcomment %}

{% if product.metafields.c_f['Related Products'] %}
  {% assign collection = collections[product.metafields.c_f['Related Products']] %}
{% endif %}

{% assign found_a_collection = false %}
{% if collection and collection.all_products_count > 1 %}
  {% unless exclusions contains collection.handle %}
    {% assign found_a_collection = true %}
  {% endunless %}
{% endif %}
{% unless found_a_collection %}
  {% for c in product.collections %}
    {% unless exclusions contains c.handle or c.all_products_count < 2 %}
      {% assign found_a_collection = true %}
      {% assign collection = c %}
      {% break %}
    {% endunless %}
  {% endfor %}
{% endunless %}

{% comment %}
  If we have a relevant collection.
{% endcomment %}

{% if found_a_collection %}

  {% assign counter = 0 %}
  {% assign break_at = number_of_rows | times: number_of_related_products_per_row | times: 1 %}
  {% assign current_product = product %}
  
  {% case number_of_related_products_per_row %}
    {% when '1' %}
      {% assign grid_item_width = '' %}
  {%- assign max_height = 700 -%}
    {% when '2' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-half' %}
  	  {%- assign max_height = 530 -%}
    {% when '3' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-third' %}
      {%- assign max_height = 345 -%}
    {% when '4' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-quarter' %}
  {%- assign max_height = 250 -%}
    {% when '5' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-fifth' %}
  {%- assign max_height = 195 -%}
    {% when '6' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-sixth' %}
  {%- assign max_height = 195 -%}
    {% else %}
      {% assign grid_item_width = 'small--one-half medium-up--one-quarter' %}
  {%- assign max_height = 195 -%}
  {% endcase %}


  {% capture related_items %}
<div class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">

  {% for product in collection.products %}
  {% unless product.handle == current_product.handle %}
  {% unless same_vendor and current_product.vendor != product.vendor %}
  {% unless same_type and current_product.type != product.type %}
  <div class="grid__item {{ grid_item_width }}">
    {% include 'product-card-grid', max_height: max_height %}
  </div>
  {% assign counter = counter | plus: 1 %}
  {% if counter == break_at %}
  {% break %}
  {% endif %}
  {% endunless %}
  {% endunless %}
  {% endunless %}
  {% endfor %}
</div>
  {% endcapture %}

  {% assign related_items = related_items | trim %}

  {% unless related_items == blank %}

  <aside class="grid">
    <div class="grid__item">
      {% unless heading == blank %}
      <header class="section-header">
        <h2 class="section-header__title">{{ heading }}</h2>
      </header>
      {% endunless %}
      <div class="grid-uniform">
        {{ related_items }}
      </div>
    </div>
  </aside>

  {% endunless %}
     
{% endif %}
  
</div>

<script type="text/javascript" charset="utf-8">
//<![CDATA[

jQuery(function() {
  jQuery('.grid__item .grid-product').pick(howMany);
});
//]]>
</script>

This is the jquery.pick.js

/*
 * Pick (for jQuery)
 * version: 1.0 (10/07/2010)
 * @requires any version of jQuery
 *
 * Licensed under the MIT:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2010, 2010 Caroline Hill [ mllegeorgesand@gmail.com ]
 *
 * Usage:
 *
 *  jQuery(document).ready(function() {
 *    jQuery('#gallery li').pick(6);
 *  })
 *
 *  The above will randomly pick 6 elements from the wrapped set, and
 *  remove others from the document.
 *
 *  What is returned is the wrapped set of picked elements.
 *  The removed elements are no longer in that set.
 *
 *  Ex:
 *
 *  var how_many = jQuery('#gallery li').pick(6).size(); // Will return 6.
 *
 */

(function( $ ){
  $.fn.pick = function(how_many) {
    
    var how_many = how_many || 4;
  
    // Picking random numbers without repeating. 
    var index_array = [];
    var original_obj_size = this.size();
    for (var i=0; i<original_obj_size; i++) {
      index_array.push(i);
    }
    //+ Jonas Raoni Soares Silva
    //@ http://jsfromhell.com/array/shuffle [rev. #1]
    var shuffle = function(v) {
      for (var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
      return v;
    };
    var new_index_array = shuffle(index_array).slice(0,how_many);
    
    // 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;
      }
    });

  };
})( jQuery );

 

0 Likes
Highlighted
New Member
19 0 0

Hello?

0 Likes
Shopify Expert
9981 85 1493

It's always important to have a sense for what the code does to know if it suits your needs. What do you think it does?

I can see that your code is showing 4 items, so a random selection from those would result in the same list each time.

{% assign number_of_related_products_per_row = 4 %}
{% assign number_of_rows = 1 %}

This looks to be quite relevant. You're setting 4 products per row, and just 1 row. What happens if you adjust that?

It also helps to provide a link to the page in question.

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

Hi Jason

I was hoping to display 4 random products so when the user refreshes the page or selects another product page then the related products would generate different random products.

Right now it only picks the first 4 and never changes.

If I change {% assign number_of_related_products_per_row = 8 %}

Then it brings back 8 products in 2 rows even when the row count is 1.

Changing {% assign number_of_rows = 2 %}

Returns 2 rows no matter what you put into the products per row count

Thanks

0 Likes