Show Line Item Properties in Order Summary During Checkout

Line Item Properties in Checkout.md

Issue

Some Plus merchants would like line item properties displayed in the order summary during checkout.

Solution (Requires checkout.liquid and a plus plan)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

  {% assign i = 0 %}
  {% assign product_has_property = false %}

  var product = [];
  var property = [];

  {% for item in checkout.line_items %}
  {% assign i = i | plus: 1 %}
  {% capture properties %}{% for property in item.properties %}{% unless property.last == blank %}{% assign product_has_property = true %}{{ property.first }}: {{ property.last }}<br>{% endunless %}{% endfor %}{% endcapture %}
  {% if product_has_property %}

  product.push({{ i }});
  property.push('{{ properties }}');

  {% else %}

  product.push('');

  {% endif %}
  {% endfor %}

  {% if product_has_property %}

  function show_properties(){
    var $order_product = $('.order-summary .product');

    $order_product.each(function(index){
      var i = index +1;
      if ( product[index] == i) {
        $(this).find('.product__info__description').after(property[index]);
      }
    });

  }

  var poll = function() {
    if (!$("#payment").hasClass("hidden")) {
      if (!$("#payment").data('wasChanged')) {
        show_properties();
        clearInterval(orderSummary);
      }
    } else if ($('#contact-information').hasClass('step--current')) {
      show_properties();
      clearInterval(orderSummary);
    }
  }

  var orderSummary = setInterval(poll, 200);
  
  {% endif %}

});

</script>

Finished product: