Tying mandatory agreement in Shopify ../cart page to multiple products

Question

I've added a mandatory acknowledgment to my Shopify cart page that is displayed when I'm running pre-order sales for certain products.

{% for item in cart.items %}    
  {% if item.product.tags contains 'DECEMBER' %}
  <div class="sixteen columns">
  <p style="float:none; text-align:left; clear: both; margin: 10px 0;">
  <input style="float:none; vertical-align:middle;" type="checkbox" id="agree" />
  <label style="display:inline; float:none" for="agree">
    <b>I acknowledge that Company Name will charge my credit card at checkout, even though the {{item.product.title}} may not ship until December.</b>
  </label>
</p>
 </div>
  {% endif %}
  {% endfor %}

<script>
$('[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
  if($('#agree').is(':checked')){
    $(this).submit();
  }
  else{
    alert("You must agree with the Sales Terms to check out.");
    return false;
  }
});
</script>

The checkbox agreement will only show up if there is a product with a DECEMBER tag in the cart.

Everything works great for one product, but I would like to get it working for a cart that contains more than one product with the DECEMBER tag.

For example, if there were three different products with the DECEMBER tag, I would like the label text to read "I acknowledge that Company Name will charge my credit card at checkout, even though the Product and Product2 and Product3 may not ship until December.

What would be the best way to set this up?

Thanks!

Steph Sharp Steph Sharp · Accepted Answer · 2014-09-11T08:48:09

I would approach the problem like this:

{% assign preorder = false %}
{% assign preorder_products = "" %}
{% for item in cart.items %}    
  {% if item.product.tags contains 'DECEMBER' %}
    {% assign preorder = true %}
    {% capture preorder_products %}{{ preorder_products | append: item.product.title | append: "|" }}{% endcapture %}
  {% endif %}
{% endfor %}

{% if preorder %}
  {% assign preorder_products = preorder_products | split: "|" | join: ", " %}
  <div class="sixteen columns">
    <p style="float:none; text-align:left; clear: both; margin: 10px 0;">
      <input style="float:none; vertical-align:middle;" type="checkbox" id="agree" />
      <label style="display:inline; float:none" for="agree">
        <b>I acknowledge that Company Name will charge my credit card at checkout, even though the following products may not ship until December: {{ preorder_products }} </b>
      </label>
    </p>
  </div>
{% endif %}

Loop through all the items in the cart, and if the product has the tag 'DECEMBER' append it to a string with a separator (e.g. '|').
Then if there is at least one pre-order product, use split and join to format the string for output. This is handy to get rid of the trailing separator and avoid output like "Product1, Product2, Product3, ".

Tying mandatory agreement in Shopify ../cart page to multiple products

1 Answers