Configuration: Vouchers

Setup Checklist

This section is a comprehensive and high level summary of all tasks and prerequisites required for this feature to function properly. This section is purposed for use after an administrator is familiar with configuring this feature as an “audit” checklist. For detailed set-up instructions, jump down to “Prerequisite Tasks” and “Detailed Setup Guide” and then follow up with this checklist to ensure all steps are completed.

Prerequisite Tasks

This section describes all requirements that must be completed before you can begin setting up this feature. Once these tasks are complete continue to the next section.

POS Tasks

• Set up a Voucher Template in RTP|One, configuring the type (only product, product/discount, discount, and payment are supported), the Category, Description, usage and quantity limits, effective type, and expiration rules. Make note of the Voucher Template ID(s), you will need them in a later step.

  1. If configuring a Product or Product/Discount voucher, set up the product header code in RTP|One that will be redeemed via the product voucher ID(s). Within the Voucher Types tab of the product header, ensure Product or Product/Discount Voucher Type is added.

  2. If configuring a Product or Product/Discount voucher, add the product(s) to the voucher.

• Create the voucher numbers for your Voucher Templates.

• If a voucher should be sold through the purchase of a product, add the Voucher Template ID to the voucher product component of the initial product that “grants” access to the vouchers (e.g. A season pass is configured with a voucher component that creates X number of Buddy Passes when sold online or through RTP|One).

• In order for vouchers from RTP|One to show in My Account in Aspenware Commerce, they must have a Report defined on the Voucher Type. Add the voucher product(s) to the component.

• For Payment Value Vouchers:

  • the voucher must be sold as a transaction in RTP in order to display in the My Account page.

  • Provide AW with:

    • a voucher product header

    • voucher payment method code

    • GL voucher clearing account

  • Update RTP admin to enable vouchers payment methods available for use at AWC location

Infrastructure Tasks

• To update the logo that displays on vouchers in My Account, email support@aspenware.com with a png and svg image of your logo. This change does require a theme update and deployment.

Commerce Tasks

1. Install the Voucher Plugin

Installing the voucher plugin is required for the use of voucher redemption. This will both allow the voucher banner to be displayed and show/enable the voucher widget on the product setup.

• Go to Configuration > Local Plugins >

• Select Aspenware Commerce from the Group drop-down list. Scroll down to Plugin info for Vouchers.

• Ensure that both Installed and Is Enabled are checked.
  

  

To enable payment value vouchers in checkout ensure Vouchers are enabled in the “Additional Payments” Plugin:

• Go to Aspenware Commerce > Additional Payments > then select “Vouchers” > Click Save

To enable multiple payment value vouchers to be used in checkout, ensure “Allow multiple Additional Payments” is enabled in the “Additional Payments Plugin”. If unselected, then guests will only be able to apply one payment value voucher per transaction. To enable multiple:

• Go to Aspenware Commerce > Additional Payments > then select “Allow Multiple Additional Payments” > Click Save

2. Set Discount (If creating a discount voucher)

• In Aspenware Commerce Administration go to Promotions > Discounts

  1. Select Add New.

  2. Set up your discount according to setup documentation including the appropriate discount amount/percentage

  3. Click Save.

• If using discount vouchers and limiting usage, make sure the following plugin is installed: Discount Requirements - Cart must contain a certain amount of products by navigating to Configuration > Local plugins.

3. Ensure required products are set up.

For information about setting up products, see the Product Configuration Documentation.

4. Create a published but hidden voucher category.

This category must be published and then set up as a hidden category. See Creating Hidden Categories. This hidden category will be used to house fenced products used for product vouchers or product/discount vouchers.

5. Configure Email Voucher Template

When a deployment occurs and the vouchers plugin is installed the email vouchers template will be added to Content Management > Email Templates (if the template already exists it will not overwrite the existing template).

To configure the email template:

• Go to Content Management > Message Templates

• Search for “Vouchers.EmailVoucher”

  1. 

• Select Edit

  1. Go to “Source Tools”

  2. Find the text below and replace the [INSERT URL TO LOGO HERE] with your store’s logo image URL

  3. Adjust width and height as necessary

     1. <img src="[INSERT URL TO LOGO HERE]" alt="Logo" style="border: none; -ms-interpolation-mode: bicubic; max-width: 100%;" width="150" height="41" align="middle" />

         

     2. 

Settings, Language Strings and/or HTML Widgets for this Feature

This feature may require updates to the following settings, language strings and/or HTML Widgets. Learn more about how to update and create Settings, Language Strings, and HTML widgets follow the links to the respective section.

My Account Settings

The My Account section includes, for logged-in guests, a sidebar that allows access to a My Vouchers page. When a customer accesses this page, any valid RTP|One voucher assigned to the logged-in guest, or anyone in their defined RTP|One household, will be displayed. Visibility to this tab is controlled by the customersettings.hideprintvoucherstab shown below.

Each voucher can be viewed and printed. Some vouchers can be set up to be redeemed or emailed. Payment value vouchers include the balance remaining in the Other Vouchers view. Active vouchers are shown initially, and inactive vouchers can be viewed if the Inactive Vouchers section is expanded. The following settings and language strings can be used to enable or disable the functionality and customize the display of Print/View Vouchers.

Cache Product Prices Setting

For discount vouchers or product/discount vouchers, cache product prices must be unchecked. This setting can be found in Settings > Catalog Settings.

Voucher Banner Language Strings

The Voucher feature with Aspenware Commerce is highly configurable with Language Strings. Use the tables below to view and modify string resources and values by going to Configuration > Languages >Edit in Administration, searching for the appropriate string, and verifying/replacing values as desired. For more detail on these strings and screenshot examples, visit the Language Strings Library.

Update these strings to configure the voucher banner title separate from the content text:

Voucher Validation Popup Language Strings

Update these strings to configure the voucher banner title separate from the content text:

My Vouchers Language Strings

Update these strings to configure the My Vouchers tab in My Account:

Install the Voucher Banner Plugin HTML Widget

This plugin-HTML widget creates the voucher banner.

• Go to Nop-Templates > Plugins > Html Widgets > Manage HTML Widgets

• Click Add new Html Widget

• Enter the following:

  • Name: Voucher (this name is customizable)

  • Visible: checked

  • HTML Content: Select Tools dropdown and select “<> Source Code”

• Enter: <validate-code></validate-code>

• Click Save.

• Select Edit (on the newly added plugin)

• Select Widget Zones Tab

• Click Add new record.

• From Widget Zone drop-down select content_before.

• Click Update.
  

  

• Click Save.
  

Add Voucher Banner Styling HTML Widget

Although the voucher banner includes default styling from the site’s overall CSS, the following properties (all or any) can be optionally customized via the widget including banner background color, label weight, label size, button text color, button text size, button background color, and text weight.

• Go to Nop-Templates > Plugins > Html Widgets > Manage

• Select Add new Html widget and enter the following:

  • Name: Vouchers Styling (this name is customizable)

  • Visible: Checked

  • Html Content: Select Tools > Source Code

    • Within the text box popup, you can add any of the above properties using the following formatting (bold text is configurable):
      

<style>
:root {--voucher-banner-background-color: #00cc99;
--voucher-label-weight: normal;
--voucher-label-color: #4d4dff;
--voucher-label-size: 0.875rem;
--voucher-button-text-color: #99ff33;
--voucher-button-text-size: 1.5em;
--voucher-button-background-color: #ff0066;
--voucher-text-weight: 500;
}
</style>

• Add Widget Zone

  1. Select the tab Widget Zones Tab (next to Html Widget Settings)

  2. Select Add new record

  3. Select widget zone: head_html_tag

  4. Select Update

Detailed Setup Guide

Determine the type of voucher that best meets your needs (product voucher, discount voucher or product/discount voucher) and choose from the options below for configuration. For more information about the types of vouchers, please see the Vouchers Overview in this Documentation.

1. Option 1: Create Product Voucher

Product vouchers are used to give specific guests access to a fenced product. Note that Aspenware only supports single use for product vouchers. The most common use case for this type of voucher is a “Friends and Family Lift Ticket” product that is connected to a season pass holder. The pass holder can email the voucher ID to a friend or family member.

• Go to Catalog > Products and search for the fenced product you wish to associate to the voucher and click Edit.

• Scroll all the way down to the admin.catalog.products.vouchers module.

• Enter the voucher template ID (This is the one generated from RTP|One in the Prerequisite step above). Please note that

• Click Add Voucher Template ID.

• The Voucher Template ID will then be displayed below as associated with the product.

• Check “Visible” if you want the voucher to be visible in the guest’s My Account Vouchers tab.

• Check “Email”, “Redeem”, or “Print/View” depending on which options you’d like to have available to the guest in their My Account Vouchers tab.
  

  

  
  

• Click Save and Continue Edit.

• After the Voucher Template Id has been saved, scroll to the Product attributes section to verify that a new attribute called “Voucher Id” appears as an added attribute. You should not have to alter this. However, if you would like it to appear in a different area or order you may adjust this by adding [Dynamic] in the text prompt to place the voucher attribute into the dynamic component area on the PDP.

2. Option 2: Create Discount Voucher

Discount vouchers are configured in the Discount module and are used on visible products, but are guest-specific. They are different than discount codes which are generic for any guest. Discount vouchers can be set up on any product in the store. In this two-step process, the voucher template ID is assigned to a discount and then assigned to any eligible products.

Configure Discount Voucher

• Go to Promotions > Discounts in Admin.

• Click Add New and enter the following:

  1. Name: Enter the name of your discount.

  2. Discount type: Choose ‘Assigned to Products’

  3. Percentage: Check if you want the product to be discounted by a certain percentage.

     1. Discount Percentage: Enter the discount percentage that will be applied.

     2. Maximum Discount Amount: leave blank

  4. Percentage: Leave unchecked if you would like the product to be discounted by a certain dollar amount.

     1. Discount Amount: Enter the amount of the discount.

  5. The rest of the fields can be left blank.

• Click Save and Continue Edit.
  

  

• Scroll down to the Requirements tab.

• In Discount Requirement Type, select ‘Vouchers’. The Voucher Template ID field will then display.

• Enter the Voucher Template ID and click Update Template ID.

• The requirement will then be displayed.
  

  

• Scroll down to the Applied to products section.

• Click Add a new product.

• Search for the product you would like to associate with the Discount Voucher.

• Check it and click Save.
  

  

• The product is now listed in the Applied to products section.
  

  

• Discount Vouchers can be applied to many products.

  

• Click Save.

(Optional) Set Limits on Number of Products in the Cart

If you would like to set a limit on the minimum or maximum number of products in the cart, you can add another discount requirement.

• On the Discount, scroll back to the Requirements section and, under ‘Add a new discount requirement’ enter:

  1. Discount requirement type: 'Cart must contain certain amount of products'

  2. Minimum Quantity: Enter a minimum number of products the cart must contain (optional)

  3. Maximum Quantity: Enter a maximum number of products the cart must contain (optional)

  4. Products: Click Add product to add any products that are associated with this requirement.
     

     

  5. Click Save.

• The additional requirement will now appear under Requirements for the product.
  

  

3. Option 3: Create Product/Discount Voucher

As the name implies, Product/Discount vouchers are vouchers that allow both access to fenced products and discount pricing. The products are not available to the general public and are set up as full-price products. The associated discount voucher will change the pricing. The Voucher Template ID is assigned at both the Product level AND the Discount level. These can only be configured for one product and only for single use.

Configure Product Portion of Product/Discount Voucher

• Go to Catalog > Products and search for the fenced product you wish to associate to the voucher and click Edit.

• Scroll all the way down to the admin.catalog.products.vouchers module.

• Enter the voucher template ID (This is the one generated from RTP|One in the Prerequisite step above.)

• Click Add Voucher Template ID.

• The Voucher Template ID will then be displayed below as associated with the product.

• Check “Visible” if you want the voucher to be visible in the guest’s My Account Vouchers tab.

• Check “Email”, “Redeem”, or “Print/View” depending on which options you’d like to have available to the guest in their My Account Vouchers tab.
  

  

• Click Save and Continue Edit.

• After the Voucher Template Id has been saved, scroll to the Product attributes section to verify that a new attribute called “Voucher Id” appears as an added attribute. You should not have to alter this. However, if you would like it to appear in a different area or order you may adjust this by adding [Dynamic] in the text prompt to place the voucher attribute into the dynamic component area on the PDP.

Configure Discount Portionof Product/Discount Voucher

• Go to Promotions > Discounts in Admin.

• Click Add New and enter the following:

  1. Name: Enter the name of your discount.

  2. Discount type: Choose ‘Assigned to Products’

  3. Percentage: Check if you want the product to be discounted by a certain percentage.

     1. Discount Percentage: Enter the discount percentage that will be applied.

     2. Maximum Discount Amount: leave blank

  4. Percentage: Leave unchecked if you would like the product to be discounted by a certain dollar amount.

     1. Discount Amount: Enter the amount of the discount.

  5. The rest of the fields can be left blank.

• Click Save and Continue Edit.
  

  

• Scroll down to the Requirements tab.

• In Discount Requirement Type, select ‘Vouchers’. The Voucher Template ID field will then display.

• Enter the Voucher Template ID and click Update Template ID.

• The requirement will then be displayed.
  

  

• Scroll down to the Applied to products section.

• Click Add a new product.

• Search for the product you would like to associate with the Discount Voucher.

• Check it and click Save.
  

  

• The product is now listed in the Applied to products section.

• Click Save.

4. (Optional) Create a Dedicated Voucher Redemption Page

Whether you opt to use the voucher banner or just want to be able to send your guests to a special redemption page straight from your resort’s home page, you can use native Aspenware Commerce functionality to create a dedicated voucher redemption page. Follow the instructions below on how to create this page as well as customize styling that will pull in your resort’s theme.

• Go to Admin > Content Management > Topics (pages)

• Select Add New.

• Make sure the Advanced tab is selected and

  1. Enter the title of your page in the text entry field, this will not show on the page but will be part of the URL e.g. https://shop.yourresort.com/redeemvoucher

  2. Note the name of your URL at the bottom of the module

  3. Add a System Name under the Display module as well (this is the title that will show on your list of Topics (pages))

     

• To implement

  1. Within the Body module, select Tools > sourcecode

  2. In the source, paste the following code:

<div class="custom-page--redeemvouchers">
<div class="body-inner">
<div id="wrapper" class="bg-style-default">
<div id="hero" class="full-hero">
<div id="hero-image">
<div id="dynamic-hero" style="background-image: url('HERO IMAGE');" class="active"></div>
</div>
</div>
<div id="content">
<div id="commerce-store" class="container page">
<div class="redeem-form">
<h1>Voucher Validation</h1>
<p>Validate your voucher by entering your voucher ID below.</p>
<p class="sub">Think your account has vouchers but dont know your ID? You can also redeem your vouchers directly from your <a href="https://shop.jacksonhole.com/customer/printvouchers">My Vouchers</a> tab in My Account.</p>
<div class="field-container"><input data-v-ef155ca0="" id="input--voucher-page" inputmode="text" type="text" class="ax--input input" placeholder="Enter Voucher ID" /> <button class="btn btn-primary" id="btn--voucher-page" onclick="redeemVoucher()">Validate</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
<style type="text/css"><!--
#ph-title {
    display: none
 }

#ph-topic.page {
    padding-bottom: 0;
    margin-bottom: 0;
    min-height: 0 !important;
    top: 0 !important;
    box-shadow:none !important;
}
.custom-page--redeemvouchers{
    margin-top:0;
}
.custom-page--redeemvouchers #hero{
    padding-bottom:15% !important;
}
.custom-page--redeemvouchers  .container.page{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: flex-start;
}
.redeem-form{
   max-width:600px;
   text-align:center;
   margin-top:30px;
   padding-left:15px;
   padding-right:15px;
}
.redeem-form p{font-size:1.2em;}
.redeem-form p.sub{
   font-size:1em;
   margin:30px 0;
}
.redeem-form .field-container{
   max-width:400px;
   display:flex;
   margin:0 auto;
}
.redeem-form input{
   height:44px !important;
   flex: 1 1 auto;
}
.redeem-form .btn{
   margin-left:10px;
   flex: 0 1 auto;
}
--></style>
<script>// <![CDATA[
var input_el = document.getElementById("input--voucher-page");

  function redeemVoucher() {
    var id = input_el.value;
    if (!id) {
      alert('Please enter a voucher ID and try again.')
      return false;
    }
    let origin = window.location.origin;
    let path = origin + "/?code=" + id;
    window.location = path;
  }
// ]]></script>

• Then, in the source code, update the following paths:

  1. Update the path to the hero image (example below)

     1. <div id="dynamic-hero" style="background-image: url('https://yourresort.com/images/thumbs/0000661_lift-tickets_1700.jpeg);" class="active"></div>

  2. Update the path to the print vouchers page (example below)

     1. <p class="sub">Think your account has vouchers but dont know your ID? You can also redeem your vouchers directly from your <a href="https://shop.yourresort.com/customer/printvouchers"> My Vouchers</a> tab in My Account.</p>

  3. Update any of the page copy directly in the markup. No language strings are needed.

• Save and test the new page

For Resorts with Styles that Override the Dedicated Voucher Page

Once you have implemented your dedicated voucher page, test the redemption process to ensure that the voucher modal displays correctly. If the messaging does not appear centered in the modal you may add the following HTML widget:

In Aspenware Commerce administration dashboard navigate to

• Nop Templates > Plugins > Html Widgets > Manage html widgets

• Select Add New Html Widget

• Name the voucher modal (e.g. Fix Voucher Modal)

• Select Tools --> <> Source Code

• Enter the following code in the text entry field:

<style>
.ax--box.full-width {    
width: 100% !important;    
margin-left:inherit !important;
}
</style>

• Select Save and Continue Edit

• Select Widget Zones

• From the dropdown select body_start_html_tag_after

• Select Update