Hi there,
Here’s a new covid-19 tutorial of a nice workaround I’ve been playing around with for quite a while : Gift coupons and Free Delivery coupons for Webflow e-commerce.
I know webflow is currently testing discount codes, and this is very much needed. But if you can’t wait, here’s what you can do (I’ve been using this for a client for 4 months now, and works like a charm)
What you need to know first :
— This method doesn’t allow you to discount rates in the current cart. (you will only be able to do that with webflow’s solution which is currently work in progress)
— This method is a workaround that allows you to offer discounted or free products, and / or free delivery to add to the cart when a user enters a coupon.
Here’s the thing in action : 6-pack
With Coca cola as products and some of the valid coupons being FREECOKE and FREEDEL
How it works :
1 — You create a CMS collection of valid coupon names
2 — You create free products (with price at 0$) or discounted products or a product with a huge weight (like 1 000 000g) to act as free delivery (if you have a shipping method for free for carts over 1 000 000g). You add a reference or multireference field to the product.
3 — You create your CMS page associated to the coupons collection and add inside it a collection list of products associated to it with an add to cart button. Be sure each coupon page shows the product(s) referecing it and with the styles you want.
4 — Give the div containing the collection list an id (you will reuse that later)
5 — Go to the page you want the user to enter his coupon code, create an input (if you want to add an input in the checkout you need to add an embed element) and give it an id, create a div that will be used to display what the coupon has to offer
6 — Add some jquery / ajax magic and “voilà”
<script>
// When coupon input changes check if valid and show gift
$("#coupon").change(function(){
// get value from user input
var code = $("#coupon").val();
// clean value by forcing lowercase
code = code.toLowerCase();
// if input empty, do nothing
if ( code.length == 0) {
$("#coupon-result").text("");
}
// if input filled, check if code exists in CMS and display offer, otherwise display invalid text
else {
$.ajax({
url: "/promo-codes/"+code+"",
success: function(){
$("#coupon-result").load("/promo-codes/"+code+" #load-gifts", function(){
// only allow 1 offer added to cart by preventing more than one add to cart and disabling input after addition
$(".add-promo").click(function(){
$(".add-promo").fadeOut();
$("#coupon").attr('disabled', 'disabled');
});
});
},
error: function(){
$("#coupon-result").text("Coupon not valid");
}
});
}
});
</script>
What it does in english :
Checks what user inputs, if input not empty it looks if a cms page exists with a matching url, if yes fetches the product in it, if not tells you your coupon is not valid.
Of course you need to change your the IDs and CMS page slug url with the ones you used in your project
And just like that, you’ve got yourself a coupon functionnality inside of webflow.
In extra feature from this concept you can also :
— Use webflow’s additionnal input as the coupon input in order to have it sent with the confirmation email
— Setup shipping methods linked to a specific weight in order to offer alternative shipping methods
— Tweak it to offer as many discounted products as desired
…
It’s clean and efficient.
I hope this will help those who were really on the edge about this coupon / discounts subject
@webdev @PixelGeek @Brando @sabanna @Waldo : what do you guys think of this method ?