stewartknapman/_shopify_add_free_product.md

## _shopify_add_free_product.md

      
    Raw
  

              _shopify_add_free_product.md
            
          
    We want to automagically add a free product to the customers cart when they purchase a certain product(s).
Note: This code will likely need to be adapted to suit your theme, however it should be enough to discribe the concept.
Add the free product


Define the free product and which products can add it.
We create some theme setting that allow us to pick the free product and a collection of products that can add it.
e.g. settings.free-product and settings.free-product-collection


Collect the free product and hand it off to the JS.
Get the current product, if we have one.
Set up some conditions for adding.
This is done inside the <head>. See theme.liquid.


Capture the form submit and add the current and free products to the cart.
See product.js


Remove the free product
To do

  
## product.js
var formId = 'product-form';
var form = document.querySelector(formId);

// functions
var cleanUp = function (cartItem) {
  // Do whatever you need to do after the item(s) have been added
  // i.e. show message/redirect to cart/etc.
};

var addFreeItemToCart = function (cartItem) {
  Shopify.addItem(theme.freeProduct.variants[0].id, 1, function (freeCartItem) {
    theme.freeProductCanBeAdded = false; // don't allow the free product to be added again this page load
    cleanUp(cartItem);
  });
};

var addItemToCart = function (e) {
  // add the current product to the cart
  Shopify.addItemFromForm(formId, function (cartItem) {
    // if we can add the free product then do it
    if (theme.freeProduct && theme.currentProductHasFreeProduct && theme.freeProductCanBeAdded) {
      addFreeItemToCart(cartItem);
    } else {
      cleanUp(cartItem);
    }
  });
};

// event listener for submit, which calls addItemToCart()
form.addEventListener('submit', function (e) {
  addItemToCart(e);
});

## theme.liquid
{%- if settings.free-product and product -%}
  {%- assign free_product = all_products[settings.free-product] -%}
  {%- assign free_product_collection = collections[settings.free-product-collection].handle -%}
  {%- assign current_products_collections = product.collections | map: 'handle' -%}
  {%- assign free_product_can_be_added = true -%}
  {%- for item in cart.items -%}
    {%- if item.product_id == free_product.id -%}
      {%- assign free_product_can_be_added = false -%}
    {%- endif -%}
  {%- endfor -%}
  <script>
    // Some themes have a theme object or similar, this is just a place to store this data so we can use it later
    var theme = theme || {};
    // Grab the free product as an object
    theme.freeProduct = {{ free_product | json }};

    // Set up some flags to be used as conditions for adding
    // - Can this product add the free product?
    theme.currentProductHasFreeProduct = {% if current_products_collections contains free_product_collection %}true{% else %}false{% endif %};
    // - Do we already have this free product in the cart?
    theme.freeProductCanBeAdded = {{ free_product_can_be_added }};
  </script>
{%- endif -%}
	var formId = 'product-form';
	var form = document.querySelector(formId);

	// functions
	var cleanUp = function (cartItem) {
	// Do whatever you need to do after the item(s) have been added
	// i.e. show message/redirect to cart/etc.
	};

	var addFreeItemToCart = function (cartItem) {
	Shopify.addItem(theme.freeProduct.variants[0].id, 1, function (freeCartItem) {
	theme.freeProductCanBeAdded = false; // don't allow the free product to be added again this page load
	cleanUp(cartItem);
	});
	};

	var addItemToCart = function (e) {
	// add the current product to the cart
	Shopify.addItemFromForm(formId, function (cartItem) {
	// if we can add the free product then do it
	if (theme.freeProduct && theme.currentProductHasFreeProduct && theme.freeProductCanBeAdded) {
	addFreeItemToCart(cartItem);
	} else {
	cleanUp(cartItem);
	}
	});
	};

	// event listener for submit, which calls addItemToCart()
	form.addEventListener('submit', function (e) {
	addItemToCart(e);
	});
	{%- if settings.free-product and product -%}
	{%- assign free_product = all_products[settings.free-product] -%}
	{%- assign free_product_collection = collections[settings.free-product-collection].handle -%}
	{%- assign current_products_collections = product.collections \| map: 'handle' -%}
	{%- assign free_product_can_be_added = true -%}
	{%- for item in cart.items -%}
	{%- if item.product_id == free_product.id -%}
	{%- assign free_product_can_be_added = false -%}
	{%- endif -%}
	{%- endfor -%}
	<script>
	// Some themes have a theme object or similar, this is just a place to store this data so we can use it later
	var theme = theme \|\| {};
	// Grab the free product as an object
	theme.freeProduct = {{ free_product \| json }};

	// Set up some flags to be used as conditions for adding
	// - Can this product add the free product?
	theme.currentProductHasFreeProduct = {% if current_products_collections contains free_product_collection %}true{% else %}false{% endif %};
	// - Do we already have this free product in the cart?
	theme.freeProductCanBeAdded = {{ free_product_can_be_added }};
	</script>
	{%- endif -%}