Introduction


We're introducing Discount Codes to our eCommerce Module. 

Your Client will be able to define and manage codes in the Admin- and manage their offers by setting the release and expiry dates, as well as the maximum number of uses in advance.

You'll be able to implement options in the Cart and Checkout for entering discount codes and the Module will work out the discounted costs for you.

Managing Codes in the Admin


You can see a list of all Discount Codes under the eCommerce Menu.

Available Fields


You can set the following fields when you create or edit a Discount Code:

  • Item Name - Gives the discount a name
  • Weighting - (optional) - Used in sorting
  • Release Date - When should the discount code start being valid?
  • Expiry Date - When should the discount code stop being valid?
  • Enabled - Should the discount code be enabled or disabled?
  • Code - A String of characters for the code a customer will need to enter for the discount to be valid.
  • Type - Should the discount be a percentage of the total Cart value, or a fixed amount?
  • Discount Value - How much of a discount should be given when this code is entered? Choose a value appropriate to the type you selected e.g. 20 for 20% or 20.00 for $20.00 
  • Minimum Spend - Often your Client will want to use the offer to up-sell to the customer. By setting a minimum spend, the customer will need to spend this amount before the offer can be used. The offer will apply to the entire value of the Cart still, not the difference between the minimum spend and the Cart value. 
  • Uses Remaining - This sets a total number of uses before the offer automatically expires. This does not measure the number of times an individual customer uses the offer, rather it measures the number of times the offer has been used globally. If your Client does not want to set a limit, you can set a very large number- or your Client can increase the number when it runs low. 

Create a New Discount Code

From the List View, you can create a new Discount Code.

Edit an Existing Discount Code

Find your code in the List, and use the pencil icon to edit.

Delete a Discount Code

From the Edit screen, you can delete a Discount Code.

Orders


If customers have used a Discount Code to make a purchase, you'll be able to see this against their Order. You can see customers' Orders under the eCommerce Menu in Admin.

Adding an Input Field for Codes in the Cart Layout

A Discount Code Layout will typically sit inside a Cart Layout. It contains:

  • An input field for the customer to enter a discount code
  • A button which allows them to submit the code
  • Feedback to the user regarding successful and unsuccessful attempts to apply their discount code.
  • Essential HTML, JavaScript and Liquid which controls functionality

Step 1) Include a Discount Code Layout in your Cart Layout's wrapper.liquid file. 

{% include 'ecommerce/discount_code', layout: "siteglide_example" %}


The only parameter you'll need will be layout which refers to the file name of the Layout. We'll look at how to build the Discount Code Layout next.

If you need a refresher on building Cart Layouts, you can find the doc here.

Step 2) Build the Discount Code Layout

Discount Code Layouts will be stored here, inside: layouts/modules/module_14/discount_code 

You'll just need a single Liquid file.

You can use siteglide_example.liquid if you like, but it's locked for editing so we can push updates to it. If you'd like to create your own custom Layout, right click on the discount_code folder and add the name of your new Layout file.

If you haven't already, make sure your layout parameter in the Liquid tag matches the name of your Layout File.

For steps 3 onwards, you may find it easier to copy and edit the code from the example Layout, but we'll break this down into steps here so you can see all the elements you'll need.

Step 3) Add HTML and Liquid to allow a Customer to enter a Discount Code

<label for="s_e_discount_code">Discount Code:</label>
<div class="form-group">
<input id="s_e_discount_code" data-s-e-discount-code value="{%- if discount_code != blank -%}{{discount_code}}{%- endif -%}">
<button class="btn btn-secondary" id="s_e_discount_apply" onclick="s_e_cart_discount_code('{{context.exports.cart_base_price.data | json}}', s_e_discount_error)">Apply Code</button>
</div>


Notes:

You'll need to keep the following HTML Attributes, with their Liquid values where appropriate, in order for the code to function properly.

  • data-s-e-discount-code should be added to the input element used for entering the Code.
  • onclick="s_e_cart_discount_code('{{context.exports.cart_base_price.data | json}}', s_e_discount_error)" should be added to the submit button. This calls the JavaScript when the User enters a code.
  • value="{%- if discount_code != blank -%}{{discount_code}}{%- endif -%}"  - A successfully added code will display as the default value on refresh.

Step 4) Add HTML and Liquid to give the customer feedback


On Page refresh after the Customer adds the Code for an existing Discount, the following Liquid will explain the minimum spend needed and the discount available.

{%- if discount_code != blank -%}
  {%- if discount_minimum -%}
    <p>This code will only be valid on orders over: {{context.exports.cart_currency.data}}{%- include 'modules/siteglide_ecommerce/ecommerce/price_formatter', price_data: discount_minimum -%}</p>
  {%- endif -%}
  <p>Discount: <span style="color: red;">-{{context.exports.cart_currency.data}}{%- include 'modules/siteglide_ecommerce/ecommerce/price_formatter', price_data: discount_amount -%}</span></p>
{%- endif -%}

Notes:

  • discount_code is a variable which contains the Discount Code successfully applied after page refresh
  • discount_minimum is a variable which contains the minimum spend needed for this Discount Code to be valid.
  • discount_amount is a variable which stores the calculated saving on the current Cart value. 
  • {{context.exports.cart_currency.data}}  will output the currency symbol
  • {%- include 'modules/siteglide_ecommerce/ecommerce/price_formatter', price_data: discount_minimum -%} You can use this Liquid tag to format any Liquid price variable with the correct decimalisation. To use, set the price_data  parameter to the variable you wish to format.

Step 5) Add JavaScript to handle errors


There are lots of reasons why the customer may enter a code but be refused a discount. For example, the code may have expired, or the Cart's value may not be above the minimum spend.


You can start with the JavaScript function below and make your own changes to decide how these errors are displayed to the customer:

<script>
  function s_e_discount_error(error) {
    console.log(error.type);
    /* an error code which you can use in your logic. */
    console.log(error.message); /* A ready-drafted error message */
    alert(error.message);
  }
</script>


As the comments in the example mention, each error returned from a failed discount code will give both a code and a default message. You can choose which one you will use.

Here are the full list:

  • error.type: no_code -  error.message: Error: This Discount Code does not exist.
  • error.type: expired - error.message: Error: This Discount Code has expired.
  • error.type: below_min_spend={min-spend} - error.message: Error: This Discount Code has a minimum spend of {min-spend}  
  • error.type: used_up - error.message: Error: This Discount Code has already been used the maximum number of times. 

If you want to change the message, you can use logic to display different messages using the error code:

<script>
  function s_e_discount_error(error) {
    if (error.type == 'no_code' ) {
      alert('Better luck next time. Discount Code not found!');
    } elsif (error.type.indexOf('below_min_spend=') != -1 ) {
      //As the below min_spend code can vary depending on the value, this code checks for the substring.
      alert('You'll need to spend more before using this code.');
    }

</script>




Did this answer your question?