Autofill Discount via URL - A Step by Step Walkthrough (eg. Auto Apply discount code using a Link!)

Shopify Partner
8 0 1

yes you can see in my code above i have

<form action="/cart" method="post" id="cartform" class="cartform">

 

0 Likes
Excursionist
34 0 9

Sorry, it’s been a long week…I should have noticed that at the top.

The code you posted above should have had the discount value appended to the form action parameter if everything was working properly, so as far as I can tell that’s where we should start looking.

I’ll have to look at this some more tomorrow but on quick glance you have a few odd characters in your code.

<!-- BEGIN: Autofill Discount via URL, with IIFE. PART 3 -->

<script> = $0

What is the = $0 part?

0 Likes
Shopify Partner
8 0 1

I don't see "$0" anywhere

0 Likes
Excursionist
34 0 9

Take a look at the video below. Looks like the problem has something to do with the fact that you have 2 separate Checkout buttons on your cart page. The first checkout button in your code (the one that shows whenever you hover over the cart text at the top of the page) actually works as expected.

Link to video: https://vid.me/WhVg

1 Like
Shopify Partner
8 0 1

Oh wow thanks so much man, never thought about that, great debugging skills! I'm wondering why the cart button on the cart page won't pass the variable, that's where I put the code in. Let me investigate and I'll get back to you ;)

Thanks again, this issue was driving nuts.

1 Like
Shopify Partner
8 0 1

Ok I got it work! I had two cartform ids on my page because of the 2 checkout buttons so i did this:

if (sessionStorage.getItem("discount").length != 0) {
   document.getElementById('cartform').action = "/cart?discount=" + sessionStorage.getItem("discount");
   document.getElementById('cartform-mast').action = "/cart?discount=" + sessionStorage.getItem("discount");
};

and now it's working!

Thankyou

0 Likes
Excursionist
34 0 9

Awesome! Way to go, Greg. Glad you got everything working correctly.  - Mark

0 Likes
New Member
12 0 0

Thanks a lot, this is what I had been looking for. I've made 2 adjustments though to make it work (using the Kickstand template):

  1. I've removed the hidden input on step 1 and 2. Reasoning: the code that's added in `theme.liquid` gets executed both on the homepage and on /cart. When accessing the homepage with the discount code as parameter, all works fine, but (at least with the Kickstand template) when clicking on the link to the Cart, the discount parameter is not set anymore in the URL. And because `$("#discount_input").val() != urlParams["discount"]` the value in the sessionStorage gets reset to an empty value.
    So I've gotten rid of the hidden input, now whenever a discount value is given it gets set and remembered for the length of the session in the sessionStorage. If the page gets called with a different discount code, that new discount code is what gets remembered. Because the JavaScript code to handle the hidden input is gone, step 2 in the original post is not needed anymore.
  2. The default Kickstand template's cart page comes with a form that has no `id` set, only `name`:
    <form action="/cart" method="post" name="cartform" class="clearfix">
    So I've had to change the third step to be
    document.getElementsByName("cartform")[0].action
    instead of
    document.getElementById('cartform').action

 

I'm coming from the angle of supporting discount codes not only as actual discount codes, but also as affiliate codes, and thus want to display a message of the type "Welcome to the listeners of the Mixergy podcast." on the homepage, and on the cart page a "Your 20% discount is not shown here, but will be applied on the next step" messages. I'll most likely create a new forum thread (linking to this one) when I've got that code as user-friendly as I want.

Anyway, thanks, thanks a lot Mark-RX for sharing this step-by-step!

0 Likes
New Member
9 0 0

This is really good work I'm trying to figre out the best way to get this to work with cart.js for the Parallax theme making this work in the ajax cart without the need for a page reload.

Does anyone know what javascript would need to be in the code below to append the discount code onto <form> url="checkout/" </form> when the cart is updated?

 

$(document).on('cart.requestComplete', function(event, cart) {
    // Event handling here.
});

I believe the code above listens for cart updates thefor I would need some code that looked to see if the cart total is grater then 1999 if so append the discount code to to <form> url. 

0 Likes
New Member
2 0 0

Hi!! I have this script in form <script> /* If the length of sessionStorage "discount" is NOT 0 then add our sessionStorage value to the end of our Checkout link */ /* Link: http://stackoverflow.com/a/4704786 */ if (sessionStorage.getItem("discount").length != 0) { document.getElementById('cartform').action = "/cart?discount=" + sessionStorage.getItem("discount"); }; </script>

and Form action is also fine :

<form action="/cart?discount=tenpercent" method="post" id="cartform">

but when its redirecting to checkout page then its not applying automatic discount code on checkout page. Please help asap.

discount code flow is working fine to cart page but after that its not working on checkout page.

0 Likes