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

Shopify Expert
9974 84 1491

You can just add it as the discount value in hidden field in the form cart form.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Shopify Expert
196 0 23

Tomas,

I'd keep it simple and use discount codes without special characters.

-Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Tourist
7 0 1

Thanks, guys! I'll keep the discount codes simple. :)

In the meantime, I have found out that Shopify themes aren't updated automatically. That cares care of question b) above. @Ryan Bennick, if you dont'mind. How about question a) and c)?

0 Likes
Shopify Expert
196 0 23

Hi Tomas,

a) Outside. The input is html and should not even be in the <script> tags or else you will get en error. 

c) If it's working for you than yes. If you do come across any errors let us know.

-Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Tourist
7 0 1

Hi, I tried to implement the above code on a store with the "Supply" theme. A few questions:

1) The instructions for part 2 is "Copy and paste the following code into your theme.liquid file right after the opening <body> tag". In the theme, there isn't a "clean" <body> tag. Instead it looks like this:

<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}" >

I guess part 2 of the code is to be inserted right after this code?

2) The instructions for part 3 is "Copy and paste the following code into your cart.liquid file right after the <form action="/cart" method="post" id="cartform"> tag". In the Supply theme, that tag is found in an if-statement (see below!) Where exactly should I paste the third code snippet in the below code?

{% if cart.item_count > 0 %}
  <form action="/cart" method="post" novalidate>

    <h1 class="h2">{{ 'cart.general.title' | t }}</h1>

    {% for item in cart.items %}
    <div class="cart-row" data-id="{{ item.id }}">
      <div class="grid">

        <div class="grid-item large--seven-twelfths">
          <div class="grid">

            <div class="grid-item one-third large--one-quarter">
              <a href="{{ item.url }}" class="cart-image">
                <img src="{{ item | img_url: 'medium' }}"  alt="{{ item.title | escape }}">
              </a>
            </div>

            <div class="grid-item two-thirds large--three-quarters">
              <a href="{{ item.url }}">
                {{ item.product.title }}
              </a>
              {% unless item.variant.title contains 'Default' %}
                <br>
                <small>{{ item.variant.title }}</small>
              {% endunless %}

              {% assign property_size = item.properties | size %}
              {% if property_size > 0 %}
                {% for p in item.properties %}
                  {% if forloop.first %}<br>{% endif %}
                  {% unless p.last == blank %}
                    {{ p.first }}:

                    {% if p.last contains '/uploads/' %}
                      <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                    {% else %}
                      {{ p.last }}
                    {% endif %}

                    <br>
                  {% endunless %}
                {% endfor %}
              {% endif %}
            </div>

          </div>
        </div>

        <div class="grid-item large--five-twelfths medium--two-thirds push--medium--one-third">
          <div class="grid">

            <div class="grid-item one-half medium-down--one-third text-right">
              <input type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" data-id="{{ item.id }}">
            </div>

            <div class="grid-item one-third medium-down--one-third medium-down--text-left text-right">
              <span class="h2">
                {% include 'price' with item.price %}
              </span>
            </div>

            <div class="grid-item one-sixth medium-down--one-third text-right">
              <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" data-id="{{ item.id }}" class="icon-fallback-text btn-secondary remove">
                <span class="icon icon-x" aria-hidden="true"></span>
                <span class="fallback-text">{{ 'cart.general.remove' | t }}</span>
              </a>
            </div>

          </div>
        </div>

      </div>
    </div>

    {% endfor %}

    <div class="cart-row">
      <div class="grid">

        {% if settings.cart_notes_enable %}
          <div class="grid-item large--one-half">
            <label for="cartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
            <textarea name="note" class="input-full" id="cartSpecialInstructions">{{ cart.note }}</textarea>
          </div>
        {% endif %}

        <div class="grid-item text-right {% if settings.cart_notes_enable %}large--one-half{% endif %}">

          <div class="cart-subtotal">
            {{ 'cart.general.subtotal' | t }}
            <span class="h1 cart-subtotal--price">
              {% include 'price' with cart.total_price %}
            </span>
          </div>

          <input type="submit" name="update" class="btn-secondary update-cart" value="{{ 'cart.general.update' | t }}">

          <button type="submit" name="checkout" class="btn">
            <span class="icon icon-cart"></span>
            {{ 'cart.general.checkout' | t }}
          </button>

          {% if additional_checkout_buttons %}
            <div>{{ content_for_additional_checkout_buttons }}</div>
          {% endif %}

        </div>

      </div>
    </div>

  </form>

{% else %}

  <h2>{{ 'cart.general.empty' | t }}</h2>
  <p>{{ 'cart.general.continue_browsing_html' | t }}</p>

{% endif %}

 

0 Likes
Shopify Expert
196 0 23

1. That whole thing is still the body tag. It just has some attributes and liquid code in it. Place part 2 after this. 

2. That is fine. Place the code after the form tag. All that if statement is doing is making sure you have items in your cart before showing the form. 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Tourist
7 0 1

@Ryan

I installed the Supply theme & implemented the code. Problem is, the discount code isn't applied in the check-out. I've been looking into sessionsStorage. It shows the discount code on all other pages, but its then "lost" on the check-out page. 

This is the where i put the code in cart.liquid:

{% if cart.item_count > 0 %}
  <form action="/cart" method="post" class="cart-form" novalidate>

<!-- The <form action="/cart" method="post" id="cartform"> code is right above -->
<!-- BEGIN: Autofill Discount via URL, with IIFE. PART 3 -->
<script>

  (function() {
/* 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>
<!-- END: Autofill Discount via URL, with IIFE. PART 3 -->
    
    <h1 class="h2">{{ 'cart.general.title' | t }}</h1>

The if statment continues further. Any ideas?

0 Likes
Shopify Expert
196 0 23

Hi Tomas,

This line in the JS sets a new action on the form so the discount will be applied to the checkout. 

document.getElementById('cartform').action = "/cart?discount=" + sessionStorage.getItem("discount");

It is looking for an element in the DOM with an id of cartform. Thereform you need to change the form element to have this id.

Change this

<form action="/cart" method="post" class="cart-form" novalidate>

to this

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

Cheers,


Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Tourist
7 0 1

Hi, Ryan! 

First of all, thanks for your help! I feel we are getting closer to a solution.

I did test the above code on a developer version of Shopify with the "Supply" theme. It did work!

However, when I used the same code on my actual store it didn't. The same thing happened again, the discount code is present in sessionsStorage but it disappears on the actual checkout page. 

I don't know if it is relevant, but I did notice a difference in the pre-change code between the developer version:

<form action="/cart" method="post" class="cart-form" novalidate>

and the actual store:

<form action="/cart" method="post" novalidate>

Any ideas?

 

 

 

0 Likes
Tourist
23 0 3

Just a question, would these codes work with conditional coupons, like 10% when you spend more than $200 etc? Or will the codes still try to apply (and not work), if the cart is <$200.

And..is there an existing solution to show the discounted prices or "you have saved $XX" in the cart before someout checks out?

Thanks for all the work you guys shared. Was about to setup an email autoresponder and then I realised this problem. Wow, shopify sure has quite alot of limitations w.r.t coupons, stuff I expected to be basic amongst e-commerce sites. Shopify was the first recommendation I got and I didn't look elsewhere..like woocommerce or magneto. So..why shopify? Wondering if i made a wrong choice here.

0 Likes