Appending variable to Class with For Loop

Question

I need some help with my code below.

Basically all I need to do is append a number to ul.cartRecommend class like so:

ul.cartRecommend1, ul.cartRecommend2, ul.cartRecommend3, etc.

This needs to happen each time the loop occurs.

The line in question is: var list = jQuery('ul.cartRecommend');

My problem is that regardless which loop the variable items being appended to the ul.cartRecommend belong to, all the items are being added. I need them to be in seperate lists.

{% for item in cart.items reversed %}
{% if item.product.metafields.recommendations.productHandles %}
{% assign cartRecommend = item.product.metafields.recommendations.productHandles | split: ',' %}
<div class="recommendColumn hide-mobile">
      <div class="cart-recommend-contain">
        <h5>Customers who bought the "{{item.title}}", also bought:</h5>
      </div>
        <ul class="cartRecommend[someNumber]">
        </ul>
    </div>

{% assign image_size = "thumb" %}
<script type="text/javascript" charset="utf-8">
//<![CDATA[
  var recommendations = [];
  {% if cartRecommend %}
  recommendations = jQuery.trim({{ cartRecommend | json }}).split(/[\s,;]+/);
  {% endif %}

  if (recommendations.length && recommendations[0] !== '') {
    var list = jQuery('ul.cartRecommend[correspondingNumberForLoop]');
    for (var i=0; i<5; i++) {
      jQuery.getJSON( '/products/' + recommendations[i] + '.js', function(product) {
        list.append('<a class="cartRecommend" href="' + product.url +'"><li class="cartRecommend"><img style="padding:0 0.75em 100% 0;" align="left" src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_{{ image_size }}$1') + '" />' + product.title + '<br /><span class="money" style="color:#f03d04;">' + Shopify.formatMoney(product.price, '{{ shop.money_format }}') + '</span></li></a>');
        });
    }
  }
//]]>
</script>
{% endif %}
{% endfor %}

After the code generates it looks like this:

//<![CDATA[
  var recommendations = [];
  var num = ['one', 'two', 'three'];

  recommendations = jQuery.trim(["two-rock-studio-pro-plus-50-head","two-rock-studio-pro-35-head-wine-taurus"]).split(/[\s,;]+/);


  if (recommendations.length && recommendations[0] !== '') {
    var list = jQuery('ul.cartRecommend');
    for (var i=0; i<5; i++) {
      jQuery.getJSON( '/products/' + recommendations[i] + '.js', function(product) {
        list.append('<a class="cartRecommend" href="' + product.url +'"><li class="cartRecommend"><img style="padding:0 0.75em 100% 0;" align="left" src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_thumb$1') + '" />' + product.title + '<br /><span class="money" style="color:#f03d04;">' + Shopify.formatMoney(product.price, '$ {{amount}}') + '</span></li></a>');
        });
    }
  }
//]]>

//<![CDATA[
  var recommendations = [];
  var num = ['one', 'two', 'three'];

  recommendations = jQuery.trim(["cuspcafordrz","drzbrlimiaia","lacablde20ft","lacaso20ftst","stslpaco1xca"]).split(/[\s,;]+/);


  if (recommendations.length && recommendations[0] !== '') {
    var list = jQuery('ul.cartRecommend');
    for (var i=0; i<5; i++) {
      jQuery.getJSON( '/products/' + recommendations[i] + '.js', function(product) {
        list.append('<a class="cartRecommend" href="' + product.url +'"><li class="cartRecommend"><img style="padding:0 0.75em 100% 0;" align="left" src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_thumb$1') + '" />' + product.title + '<br /><span class="money" style="color:#f03d04;">' + Shopify.formatMoney(product.price, '$ {{amount}}') + '</span></li></a>');
        });
    }
  }
//]]>

As you can see the recommendations variables changes with each loop that's generated, however they are all put into the list. So every ul looks identical.

I know there is a simple solution to this. Please help!

Answer 1

Alright so with the help of some liquid I was able to designate a specific ul class to send the data to. Trouble is it's only sending the loop to the last ul.

Like such:

SOURCE:

      <div class="cart-recommend-contain">
        <h5>Customers who bought the these items, also bought:</h5>
      </div>
{% for item in cart.items %}
{% if item.product.metafields.recommendations.productHandles %}
{% assign cartRecommend = item.product.metafields.recommendations.productHandles | split: ',' %}

    <div class="recommendColumn hide-mobile">
        <ul class="cartRecommend cart{{forloop.index}}">
        </ul>
    </div>

{% assign image_size = "thumb" %}
<script type="text/javascript" charset="utf-8">
//<![CDATA[
  var recommendations = [];
  {% if cartRecommend %}
  recommendations = jQuery.trim({{ cartRecommend | json }}).split(/[\s,;]+/);
  {% endif %}

  if (recommendations.length && recommendations[0] !== '') {
    var list = jQuery('ul.cartRecommend.cart{{ forloop.index }}');
    for (var i=0; i<5; i++) {
      jQuery.getJSON( '/products/' + recommendations[i] + '.js', function(product) {
        list.append('<a class="cartRecommend" href="' + product.url +'"><li class="cartRecommend"><img style="padding:0 0.75em 2.5em 0;" align="left" src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_{{ image_size }}$1') + '" />' + product.title + '<br /><span class="money" style="color:#f03d04;">' + Shopify.formatMoney(product.price, '{{ shop.money_format }}') + '</span></li></a>');
        });
    };
  };

//]]>
</script>
{% endif %}
{% endfor %}

OUTPUT:

//<![CDATA[
  var recommendations = [];

  recommendations = jQuery.trim(["two-rock-studio-pro-plus-50-head","two-rock-studio-pro-35-head-wine-taurus"]).split(/[\s,;]+/);


  if (recommendations.length && recommendations[0] !== '') {
    var list = jQuery('ul.cartRecommend.cart1');
    for (var i=0; i<5; i++) {
      jQuery.getJSON( '/products/' + recommendations[i] + '.js', function(product) {
        list.append('<a class="cartRecommend" href="' + product.url +'"><li class="cartRecommend"><img style="padding:0 0.75em 2.5em 0;" align="left" src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_thumb$1') + '" />' + product.title + '<br /><span class="money" style="color:#f03d04;">' + Shopify.formatMoney(product.price, '$ {{amount}}') + '</span></li></a>');
        });
    };
  };

//]]>


//<![CDATA[
  var recommendations = [];

  recommendations = jQuery.trim(["cuspcafordrz","drzbrlimiaia","lacablde20ft","lacaso20ftst","stslpaco1xca"]).split(/[\s,;]+/);


  if (recommendations.length && recommendations[0] !== '') {
    var list = jQuery('ul.cartRecommend.cart4');
    for (var i=0; i<5; i++) {
      jQuery.getJSON( '/products/' + recommendations[i] + '.js', function(product) {
        list.append('<a class="cartRecommend" href="' + product.url +'"><li class="cartRecommend"><img style="padding:0 0.75em 2.5em 0;" align="left" src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_thumb$1') + '" />' + product.title + '<br /><span class="money" style="color:#f03d04;">' + Shopify.formatMoney(product.price, '$ {{amount}}') + '</span></li></a>');
        });
    };
  };

//]]>

Answer 2

You're selecting the same items ( 'ul.cartRecommend' ) each time, and looping it for each response - all of your .cartRecommend UL elements will end up with all of the items added all of the time, in whatever order the JS resolved. You need to select some subset of ul.cartRecommend on which you want to append your result.