Plugin: Accepting Promo/Coupon Codes in Clickfunnels Order Form Page

Hello,

I want to integrate a promo code field on the checkout page in ClickFunnels.
The code that i’m using is:

<script>
var mainProd = '75958';
var promoProd = '76333';
var promoCodes = ['CODE10']; //PROMO CODES SHOULD ALWAYS BE UPPER CASE
//var head = '<div class="de elHeadlineWrapper de-editable" id="headline-72651" data-de-type="headline" data-de-editing="false" data-title="headline" data-ce="true" data-trigger="none" data-animate="fade" data-delay="500" style="margin-top: 20px; cursor: pointer; outline: none; display: block;"><div class="ne elHeadline lh3 elMargin0 elBGStyle0 hsTextShadow0 elFont_raleway hsSize27" style="text-align: left;" data-bold="inherit" contenteditable="false"><b>Kortingscode?</b></div></div>';
var head = '';
var field = '<input type=\'text\' id=\'promo_code\' name=\'promo_code\' placeholder=\'Voer kortingscode in...\' class=\'elInput elInput100 elAlign_left elInputSmall elInputStyl0 elInputBG1 elInputBR5 elInputI0 elInputIBlack elInputIRight elInputStyle1 elInputSmall garlic-auto-save\' />';
$(document).ready(function () {
	$('.elOrderProductOptions').last().after(head + field);
	$('.elOrderProductOptinProductName [value='+promoProd+']').closest('.elOrderProductOptinProducts').hide();
	$('#promo_code').on('keyup', function (ev) {
		if ($.inArray($('#promo_code').val().toUpperCase(),promoCodes) > -1) {
			$('.elOrderProductOptinProductName [value='+promoProd+']').click();
			$('.elOrderProductOptinProductName [value='+mainProd+']').closest('.elOrderProductOptinProducts').hide();
			$('.elOrderProductOptinProductName [value='+promoProd+']').closest('.elOrderProductOptinProducts').show();
		} else {
			$('.elOrderProductOptinProductName [value='+mainProd+']').click();
			$('.elOrderProductOptinProductName [value='+promoProd+']').closest('.elOrderProductOptinProducts').hide();
			$('.elOrderProductOptinProductName [value='+mainProd+']').closest('.elOrderProductOptinProducts').show();
		}
	});
});
</script>

unfortunately this code isn’t working with Funnelish.

https://go.bycoachelle.com/order-formulier1614612389391

Can you help me out with a promocode code ?

Thanks :slight_smile:

1 Like

Hello @Info_Business2People

First of all, very sorry that this took a some days to get it done for you (it has been quite a busy week for us here at @Funnelish),

Here is a custom code that can do Promo code for you regardless whether you use Funnelish or not and can work in all cases with no limitation, it also does not require much inputs as the above.

<script>

let defaultProductIndices = [1,2]; // Order number of the products to show by default eg. 1st and 2nd Products will be shown by default.
let promoProductIndices = [3,4,5]; // Order number of the products to show by default eg. 3rd, 4th and 5th Products will be shown by default.
let promoCodes = ["CODE#1", "CODE#2"];
let fieldName = 'promo_code_box';
$(function () {
  function updatePromos(code){
	let promo = ($.inArray(code, promoCodes)>=0);
    $('.elOrderProductOptions:first input[name="purchase[product_id]"]:not([id="lbl-01"])').each((i,x)=> {
    let p = $(x).closest('.elOrderProductOptinProductName');
      if ($.inArray(i+1, (promo ? promoProductIndices : defaultProductIndices))>=0) p.show();
      else p.hide();
    });
  }
	$(`input[data-custom-type="${fieldName}"]`).on('keyup', (ev) => {
		updatePromos($(ev.target).val());
	});
});
</script>

How it works?

The code above will hide/show products when the given promo code(s) are matched with the given promotional product indices. The promo code “box” can be added anywhere on your page using the Clickfunnels page editor (you can also add it to your two step order form through a one line of code).

How to use the code above?

  1. Copy the code above as it is, into your Clickfunnels page Footer Tracking Code box.

  2. Change first line let defaultProductIndices = [1,2]; to the actual product indices you want to be shown by default when the page loads.
    1 refers to 1st product in the list, 2 refers to the 2nd product in the list and so on.

Indices are separated by the comma within the two brackets [1,2,3…etc]

  1. Change the second line promoProductIndices = [3,4,5]; the same as the first one, but this time add the indices of the products to be “shown” when a customer enters a valid promotional code.

  2. Add your valid promo code in the 3rd line let promoCodes = ["CODE#1", "CODE#2"];, Replace “CODE#1” and “CODE#2” with your actual promo codes, you can as many valid promo codes as you want, comparison will be case sensitive ie. “CODE#1” and “code#1” are not the same.

  3. Add a custom input field box into your order form page, name it any custom name.
    This box will be used to input the Promotional code by your customers.
    Copy the box custom name and replace “promo_code_box” in 4th line.

  4. That’s it, save changes and test it out.

Let us know if the code above needs altering or you face any challenges while using it,

@yassine

1 Like

The code works, however it’s only for one code. I have different audiences and would like to offer different discounts.

10%: Code 1, Code 2
20%: Code 1, Code 2

Abd ideally: charge shipping to specific products (I’m selling digital and physical products) to US customers only.
[This might be another code]

Hi! This code works brilliantly, thanks!

EXCEPT…when the page first loads it shows all products - including promo products.

The instant a single keystroke is made in the promo code box it performs exactly as it should.

Is there a way to ensure promo product are hidden on page load?