Auto-Fill Discount From URL

Highlighted
Shopify Partner
4 0 0

hello,

First of all thanks for sharing the code to pass the discount code to checkout page. But is there any way to hide the discount code that does not visible to any user. The code is same in our whole site so if the discount code will be visible then any one can use the code. I need some digit like ****** on check out page to hide the code. Please help me to solve this issue.

Thanks in advance!

0 Likes
Highlighted
Excursionist
34 0 9

Hey Ryan,

I’ve been trying to figure out how to autofill a hidden input field using a Query String but so far no luck. Any way you could list the basic steps needed to get this done?

We want to keep a discount code in the hidden input box all throughout the site so that when a customer reaches the checkout page the discount code is automatically applied. Thanks!!

0 Likes
Highlighted
Shopify Expert
195 0 25

Hi rx,

Where is the discount code orginally comming from? User input, url, somehting else?

If you want to presist the discount code across page views you will have to store it in a cookie or soemthing like like local store. When a page is reloaded you will have to read this storage source and place the discount code into the input.

To do tha actual placement you can use val(): http://api.jquery.com/val/

Ex:

<input id="discount_input" type="hidden" name="discount" value="">
<script>
  $("#discount_input").val("your_discount_code);
</script>

 

-Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
1 Like
Highlighted
Excursionist
34 0 9

Here’s an example: We want to send an Email to our customers that has a big “Click here for 15% off” button on it. A customer would click on that button and it would bring them to www.OurWebsite.com/?discount=15PercentOff

We want to fill that hidden input using the Query String and have it persist throughout the customers entire visit so that whenever the customer actually reaches our Shopify checkout page the discount code is already applied.

Edit: Hey Ryan, not sure sure if this is a better/easier option but can we use some javascript to dynamically append ?discount=OurVariable (where OurVariable is set to the contents of the hidden input box) to every link the customer might click? That way it would persist without the need to store it?

0 Likes
Highlighted
Shopify Expert
195 0 25

You can find this info on Stackoverflow but the general prodess would be:

1. Detect discount code query parameter from url or from storage source

   From query param: 

   

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

var yourDiscount = getParameterByName(discount); 

   Source: http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript

   From local storeage

var discount = localStorage.getItem("discount")

 

2. Store discount code in storage source if found

localStorage.setItem("discount", yourDiscount)

3. Update hidden input with value

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
Shopify Expert
195 0 25

Local storage is easier and just appending the url will probably prove troublesome. You would have to append all of the links on each page to correctly have the query parameter show up in each page view request. 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
Excursionist
34 0 9

Awesome explanation, Ryan!

It will take me a bit to hack and butcher through this process but at least I have some solid direction now. I’ll post here again when it's working and I’ll include a link to the live site. Thanks a ton for the help!!

Sincerely,

Mark

0 Likes
Highlighted
Shopify Expert
166 0 41

Remember to be careful with expiring the locally stored data or discount code with this method. Otherwise you may find the same code is applied every time the same customer comes back to make a purchase. You could set a cookie with an expiration or use a single use coupon code.

-- edit --

Actually HTML5 "sessionStorage" is probably the best option.

Elkfox - The eCommerce Experts
1 Like
Highlighted
Shopify Expert
195 0 25

Cam that is an excelent point and should definately be implemented as part of the described solution.  

Rx, here is how you would set and get the discount from sessionStorage:

// Set discount code in session storage
sessionStorage.setItem("discount", yourDiscount)

// Get discount code from session storage
var discount = sessionStorage.getItem("discount");

 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
Excursionist
34 0 9

Hello everyone, I have pieced together a fairly simple solution to the Auto-Fill discount from URL problem and I have it working well on my store but I would like to know if any of you would do some further testing for me.

I’m rubbish at programming and regardless of how well it’s working I would prefer to have other humans look it over before posting it in the main forum.

If you are willing to do the testing (and you have at least an elementary understanding of liquid / Javascript) then please reach out and I will share the code snippets. I will post the whole tutorial here on the forum once we make sure my code doesn’t have the ability to create self-aware robots who rule the world.

My email is [mark]-[at]-[roxspeedfx]-[dot]-[com]

0 Likes