Shopify add-ons (e.g. engraving)

Shopify add-ons (e.g. engraving)

{% comment %}
	Create product for engraving and add to collection with handle "utility"
	Add "add-to-cart" class to product form
	Add "quantity" class to quantity field
	Create a test for engraving product -- I like adding a product tag
	
		{% for tag in product.tags %}
			{% assign t = tag | downcase %}
			{% if t contains 'engrave' %}{% assign engrave = true %}{% endif %}
		{% endfor %}
{% endcomment %}


{% if engrave %}
	<label>Engraving</label>
	<input type="text" class="engraving" />
{% endif %}


{% if engrave %}
	<a href="javascript:void(0)" class="customize">Add to cart</a>
{% else %}
    <input type="submit" value="Add to cart" />
{% endif %}


{% if engrave %}
	<script>
		$('.customize').click(function() {
			customize();
		});

		{% for product in collections.utility.products %}
			{% if product.handle == 'engraving' %}
				{% assign engraveID = product.variants[0].id %}
			{% endif %}
		{% endfor %}

		function customize() {
			var engraving = $('.engraving').val();
			if(engraving.length !== 0) {
				var qty = $('.quantity').val();
				var request1 = new XMLHttpRequest();
				request1.open("POST", "/cart/add.js", false);
				request1.setRequestHeader("Content-type","application/x-www-form-urlencoded");
				jQuery.post('/cart/add.js', {
					quantity: qty,
					id: {{ engraveID }},
					properties: {
						'Product': '{{ product.title }}',
						'Engraving': engraving
					}
				});
			}
			$('.add-to-cart').submit();
		}
	</script>
{% endif %}