Customising the Add to Cart Button Component

customise the "add to cart" button to keep customers on the page or redirect them straight to the checkout flow with a "buy now" button prerequisites this article assumes you've already added a "cart add" button to a layout if you've not already done this, you can read the following articles to learn more product list layouts product detail layouts introduction although we've had an "add to cart" button for a while now, we've recently added the ability to add a custom layout for this component this will allow you to change the style of the button change the style of the button when the product is out of stock change the behaviour of javascript when adding to the cart is successful specifying a layout you can add a layout to the cart add button by adding a component layout parameter to the liquid {% include 'ecommerce/cart add', component layout 'my custom layout' %} this feature is backwards compatible, so if you have a site which does not specify a layout for these buttons, the default layout will be chosen automatically and this will be identical to the style and behaviour you are used to layout files we store these layout files at the following path layouts/modules/module 14/components/add to cart button/my custom layout liquid you can either edit the default layout or create your own by right clicking on the "my custom layout" folder code looking at the default layout, you can see that it has some key characteristics you may wish to keep in your new layout checking if the product is in stock running the javascript function checking if the product is in stock (or no inventory limit is set) you can use a liquid if statement to check if the product is in stock {% if this inventory id == blank or this inventory quantity != '0' %} {% else %} {% endif %} running the javascript function to achieve the functionality of adding a product to the cart, you'll need to run a javascript function when the button is clicked the first argument is mandatory you must pass in the id of the product using liquid onclick="s e cart add({{this id}})" customising the success alert adding your own function the second argument in the javascript function is optional if you like, you can add in the name of a function you've defined on your page this will run instead of the default "alert" message when a product is successfully added \<button class="btn btn primary" onclick="s e cart add({{this id}}, my success function)">add to cart\</button> \<script> function my success function() { alert('ajouter au panier '); } \</script> as in the example above, you can use this to add a different alert message with a different message or you could run any other javascript you like instead customising the success alert along with live cart update remember, you also have access to the function s e live cart update() which will return the number of items now in the cart you could incorporate this number into the message \<button class="btn btn primary" onclick="s e cart add({{this id}}, my success function)">add to cart\</button> \<script> function my success function() { var carttotal = s e live cart update(); alert('success! you now have '+carttotal+' items in your cart'); } \</script> buy now button some ecommerce sites require a "buy now" button which adds the product to the cart and then sends them directly into the checkout flow you can turn your "add to cart" button into a "buy now" button using customisation options \<button class="btn btn primary" onclick="s e cart add({{this id}}, my success function)">buy it now!\</button> \<script> function my success function() { window\ location href = "/cart"; } \</script>