Order Form and Line Item Properties

Tourist
34 0 2

 I have one thing that I am trying to do with the order form and am hoping someone can help.  I am using a slightly customized version of this gist and am trying to use the line item properties to capture some additional info I need from each variant ordered through the order form. I have the order form included on a product page (testing on only one page) and it works but when I add an input named properties[test] that additional property does not show up in the cart. From the main product section it does show up.  For testing purposes I have included a property field on both the order form  and the product page.  The page on which I have included the order form with a property field and also the  product with a property field is on this page.     One thing that I am seeing that is different is that the product page uses /cart/add for the form and the order form is using just /cart  If anyone can help it would be greatly appreciated as I've spent a number of days trying to figure this out.  I am using the Brooklyn theme.

{% comment %}
Source: https://gist.github.com/carolineschnapp/9122054
If you are not on a collection page, do define which collection to use in the order form.
Use the following assign statement, replace 'your-collection-handle-here' with your collection handle.
{% assign collection = collections.yourcollection %}
Use the assign statement outside of this comment block at the top of your template.
{% endcomment %}

{% paginate collection.products by 100 %}

<form action="/cart" method="post">

  {% if collection.products_count > 0 %}
    <div style="padding-top: 15px;">
    {% comment %}  <h1>{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1> {% endcomment %}
      <input type="submit" value="Add to Cart" class="add-or-update-button" /><br>
    </div>
  {% else %}
    <h1>{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
  {% endif %}

  {% if template contains 'page' and page.content.size > 0 %}
    <div class="rte">
      {{ page.content }}
    </div>
  {% elsif collection.description.size > 0 %}
    <div class="rte">
      {{ collection.description }}
    </div>
  {% endif %}

  {% if collection.products_count > 0 %}

    <table>
      <tbody>
      {% for product in collection.products %}
	{% if product.available  %}
	<h2> {{ product.title }} </h2>

	  {% assign tempoption = "" %}
	  {% for variant in product.variants %}
	    {% if variant.available %}
	      {% if variant.option1 != tempoption %}
		 <tr><td style="font-weight: 600;"><u>{{ variant.option1 }}</u></td></tr>
		 {% assign tempoption = variant.option1 %}
	      {% endif %}
	      <tr class="{% cycle 'pure-table-odd', '' %}">

		{% unless product.tags contains "options" %}

		<td>
		  <a href="{{ variant.url | collection }}">
		    <img src="{{ variant.image | default: product.featured_image | img_url: 'small' }}" alt="{{ variant.title | escape }}" />
		  </a>
		</td>
		{% endunless %}
		<td>
		  <a href="{{ variant.url | collection }}">
		  {% comment %} {{ product.title }}{% unless variant.title contains 'Default' %} - {{ variant.title }}{% endunless %} {% endcomment %} {{ variant.option2 }} {% unless variant.sku == blank %} - {{ variant.sku }}{% endunless %}
		  </a>
		</td>
		<td>
		   {{ variant.price | money }}
		</td>
            
		<td>
		   <input type="text" id="test_{{variant.id}}"  name="properties[test]"  style="height: 30px; width: 125px;">
            <input type="hidden" id="variant_{{ variant.id }}" name="id" value=" {{ variant.id }}" >
          </td> 

		<td style="text-align:right;">
		  <input name="updates[{{ variant.id }}]" onfocus="this.select()"  id="{{ variant.id }}" class="quantity field" min="0" {% unless variant.inventory_management == blank or variant.inventory_policy == 'continue' %} max="{{ variant.inventory_quantity }}" {% endunless %} type="text" value="0" tabindex="1" style="width: 45px; height: 30px;"/>
		</td>
	      </tr>
	    {% endif %}
	  {% endfor %}
	{% endif %}
      {% endfor %}
      </tbody>
    </table>
    {% comment %}
    <div>
      <input type="submit" class="btn add-to-cart" value="Add to Cart"  />
    </div>
    {% endcomment %}
  {% else %}
    <p>There are no products in this view.</p>
  {% endif %}

</form>

{% endpaginate %}

{% if collection.products_count > 0 %}
<script>
jQuery(function($) {
  // Prevent zeroing out of existing cart quantities:
  $.getJSON('/cart.js', response => {
    // Get list of items currently in cart, initialize updateFlag
    var items = response.items,
	updateFlag = null;
    // Cycle through cart items
    for (var i = 0; i < items.length; i++) {
      let thisItem = items[i],
	  thisQty = thisItem.quantity,
	  thisId = thisItem.id,
	  targetInput = $(`input#${thisId}`) || null;
      // If current cart item has a qty picker on this page,
      // update picker to match cart qty & set updateFlag
      if (targetInput.length) {
	targetInput.val(thisQty);
	updateFlag = true;
      }
      // Otherwise, qty picker for that item stays at 0
    }
    // If one or more visible items is already in the cart, disambiguate
    // by changing button text from "Add..." to "Update..."
    if (updateFlag) {
      $('.add-or-update-button').val('Update Cart');
    }
    return;
  });
  $('table .quantity:first').focus();
  $('[max]').change(function() {
    var max = parseInt($(this).attr('max'), 10);
    var value = parseInt($(this).val(), 10) || 0;
    if (value > max) {
      alert('We only have ' + max + ' of this item in stock');
      $(this).val(max);
    }
  });
});
</script>
{% endif %}

 

0 Likes
Tourist
34 0 2

Does anyone have an answer to this or an idea I could try?

 

0 Likes
Tourist
34 0 2

Solved this.  For future reference I added the order form to a product page and added line item properties to each variant.  I could not get the current code in this gist to work with line item properties for individual variants.  I had to revert to code prior to 2016 from the revisions and add it with the jquery code.  First I added a dropdown on the order form in addition to the standard quantity field. (this was for a line item property where the customer chooses the style type for the drapery)      

  <td>
    <select id="{{ variant.id }}" name="headerprop">
       <option value="Please Choose" selected>Please Choose</option>
       <option value="Tab Top">Tab Top</option>
       <option value="Rod Pocket">Rod Pocket</option>
       <option value="Grommet">Grommet</option>
    </select>
  </td> 

I put that code before the quantity, you could use a text box instead of a drop down.

I then modified the jquery to add the line item property to the cart when a variant is ordered.  The problem that I originally encountered was that the current version of the order form would add the quantity as expected but I was unable to add the values from the drop down as line item properties on the order form.  Remember I am using this on a product page not on a collection page.  This is for ordering a related item that has lots of variants.   

 Shopify.itemsToAdd = [];
    $('.quantity').each(function() {
      var quantity = parseInt($(this).val(), 10);
      if (quantity) {
        testid = "#"+ $(this).attr('data-id');
        Shopify.itemsToAdd.push( { id: $(this).attr('data-id'), quantity: quantity, properties: {
     Option: $(testid).val()
  } } );
      }
    }); 

 

 

1 Like
Shopify Partner
107 0 11

Awesome, thank you!

 

Has anyone run into the 500 item limit?

 

If I have a collection with more than 500 items, when trying to add even a single item from the order form to the cart I get an error that the cart is limited to 500 items, so it seems it is including a count of all of the items, not just the ones that are added to the cart.

Shopify expert, software developer and designer.
0 Likes