Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Automagically add a free product to the customers cart when they purchase a certain product(s)

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

  1. 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

  2. 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.

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

Remove the free product To do

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 -%}
@malachi358

This comment has been minimized.

Copy link

@malachi358 malachi358 commented Oct 19, 2016

Would i just add create a new file called product.js inside my theme assets folder? Thanks for this so much, shopify's docs are not the best.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment