Shopify recently dropped a feature that allows discount codes to be shared in a url - aptly called Shareable Discount Links. I had a few people ping me on how they can access the actual code used one the storefront so let's talk about it.
Most important thing to know is that right now you can't grab the applied discount with Liquid. As cool as that would be to have, there's just no object that reveals that. I think the perfect - or crazy - world for a front end dev would be to have access to:
- the code name,
- the price rules that go along with it.
- whether it can be applied to the current cart and customer
That last one would be pure magic but can see how that breaks the flow of codes working during in the checkout - but not before. Perfect world doesn't mean it's a sound idea. Anyway, back on topic!
One handy feature that shareable discounts has, is the redirect option. We can hijack that in a way to let us pull in the some custom string data. The idea is very simple:
- Create a shareable discount.
- Use the redirect option (more info on the official docs page), making sure the url has a hash or querystring in it.
- Use JavaScript to pull that hash or querystring out, and do something with it. That could be setting a cookie, or a cart attribute (or something).
- Once you've got that code, you can then use it however you like in the theme UI.
To make it clearer you'd start with a standard shareable discount code...
https://shopify.myshopify.com/discount/fake-code
...and then add the redirect code:
https://shopify.myshopify.com/discount/fake-code?redirect=/?code=fake-code
When used the page will redirect to the home page with the querystring (?code=fake-code) let in place. Use JS to grab it and do cool stuff. Do remember that just because you have the code doesn't mean that it's valid, nor that it can apply to the cart. Always be mindful of that so you don't end up adding confusion or setting wrong expectations on cart price for the customer.
Doubt I need to add code here for this but leave a comment if you get stuck.