[TUTORIAL] Webflow Ecommerce Coupon workaround

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.

Capture d’écran 2020-04-14 à 15.15.19

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à” :exploding_head:

<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. :slight_smile:

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 :slight_smile:

@webdev @PixelGeek @Brando @sabanna @Waldo : what do you guys think of this method ?

3 Likes

https://webflow.com/blog/discounts-ecommerce-beta check it out!

Thanks @dylang Yes I’ve tried it while in alpha :wink:

It doesn’t do the same thing, and since it’s not CMS linked (yet) you can’t use automation to update the discount codes for instance. Or get free delivery…
And if you want to show the discount component somewhere different than in the checkout page, I’m not sure you can use ajax magic…

It’s awesome Webflow released it, but the workaround still is useful for some use cases. That’s why I’ve posted it to the forum.

1 Like

Quick question, can offer a discount code that gives you free shipping on a specific product?

If you create a product with a enormous weight (like 1 000 000g) you can add a shipping method that is free when order weight is higher than 1 000 000g.

And if you use this workaround, you can enable customers to access this product only if they have the correct coupon code.

Hi @pepperclip!

Thanks for the workaround, this comes in handy. I am currently trying to implement this on one of my clients webshop but I do struggle with the embed code. I followed your manual step by step and even used the same title for CMS collection and IDs, only changed placeholder texts:

Maybe there is something missing with the input field I couldn’t figure out in your examples code but my input field is not leading to any results or starting functions: https://amori-coffee.webflow.io/paypal-checkout

Could you maybe dive a bit deeper into what you did there? I’m grateful for any help! Thanks in advance!

Best
Jo

Can you share your read only ?
From what I can see :slight_smile: for a start : it seems jquery isn’t declared at the right moment in your page (this means the script can’t run because it doesn’t have the right tools)

Hi @pepperclip! Thanks for your quick answer. I am doing this on the PayPal Checkout page hence we only have the PayPal option for payment at the moment:

https://preview.webflow.com/preview/amori-coffee?utm_medium=preview_link&utm_source=designer&utm_content=amori-coffee&preview=5e16daeb9d563cca0754a7fd7e8dce7a&pageId=5e70a7c1cd37aa6fcb2a723c&mode=preview

Ok, can you try the following for a start :
1 — Start by declaring jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

2 — Check your input is correctly written in html (it seems ok but just to be sure).

hey Dorian, I added it to the embedded code field but still my input field is not giving out any results (not even an error message).

I guess there might be an issue with my input field I am not seeing bc I never wrote any jquery before…

Did your solution work for PayPal Checkout on your page too?

Well, I just tried now, with the same code, and it seems to work fine on paypal checkout : https://6pack-ecom.webflow.io/paypal-checkout

I think something is preventing the script from working in your case but can’t see what (yet)…

Could you try changing your code with this one :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input style="appearance: unset;" class="coupon-input" id="coupon" placeholder="Coupon code">
<script>
  $("#coupon").change(function(){
  	var code = $("#coupon").val();
    console.log(code);
    code = code.toLowerCase();
    if ( code.length == 0) {
    	$("#coupon-result").text("");
      console.log("input empty");
    }
    else {
    	console.log("input filled");
    	$.ajax({
        url: "/promo-codes/"+code+"",
        success: function(){
          $("#coupon-result").load("/promo-codes/"+code+" #load-gifts", function(){
            // only allow 1 promo product added to cart by listening to add to cart and disabling after addition
            $(".add-promo").click(function(){
                $(".add-promo").fadeOut();
                $("#coupon").attr('disabled', 'disabled');
            });
          });
        },
        error: function(){
          $("#coupon-result").text("Coupon not valid");
        }
    	});
    }
  });
</script>

just for the sake of trying :slight_smile:

1 Like

hey dorian, thanks for your help :slight_smile: I just copy-pasted your code and published it but nothing changed unfortunately…

For some reason, your input’s content doesn’t console.log…
The problem is this part :

var code = $("#coupon").val();

The rest of the script seems fine :

Ok I think I’ve got it !!

You have the id coupon twice !

You need to remove it here

oh jeez, how stupid…
thanks a lot man :slight_smile: You really made my day!

hey Dorian, sorry to bother you again but one last thing: the selection shows up now and users can add the free products to their cart but they don’t fade out afterwards as planned in your script. Code is still the one you provided, I just changed the styling of my input field. Any idea why this occurs?

Probably because the class of your add to cart button isn’t the right one.

in my code it’s add-promo

ah yes, thanks a lot! It’s working now!

Thanks @pepperclip, really made my day as well!

Hint: for others out there trying to implement the same, remember to check div ids. If you still have issues, check the website @pepperclip shared https://6pack-ecom.webflow.io/paypal-checkout and inspect the code.