Configuration: Vouchers

Setup Checklist

1. POS Tasks

 

RTP|One only

  • Set up a Voucher Template in RTP|One, (only product, product/discount, discount, and payment voucher types are supported). required

    1. If configuring a Product or Product/Discount voucher, set up the product header in RTP|One that will be redeemed via the product voucher ID(s).

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

  • Create the voucher numbers for your Voucher Templates. required

  • If a voucher should be sold through the purchase of a product, add the voucher template to the voucher product component of the initial product that “grants” access to the vouchers. optional

  • In order for vouchers from RTP|One to show in AWC’s My Account page, they must have a Report defined on the voucher type. add the voucher product(s) to the component. optional

Prerequisite

2. 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.

 

3. Aspenware Commerce Tasks

 

1. Install Voucher Plugin required

  • Go to Configuration > Local Plugins and select the Group Aspenware Commerce

  • Scroll to the Plugin Info for Vouchers.

  • Ensure that Installed and Is Enabled are both checked.

2. Configure Language Strings, Settings, and HTML widgets - optional

  • Update the approrpiate language strings:
    This feature includes many language strings for a highly customizable user interface. See below for an extensive list of these strings.

  • Configure the following settings:

    1. customersettings.hideprintvoucherstab

    2. vouchersettings.showbanner

  • Install the following HTML Widgets if you want to utilize the Voucher Banner.

    1. Voucher Banner Plugin HTML Widget

    2. Voucher Banner Styling HTML Widget

    3. Voucher/Gift Card Help HTML Widget

3. Set Discount. optional

  • In Aspenware Commerce Administration go to Promotions > Discounts

    1. Select Add New.

    2. Set up your discount including the appropriate discount amount/percentage.

    3. Click Save.

prerequisite

1. Enable Print/View Vouchers in My Account Required

  • Update customersettings.hideprintvoucherstab to ‘False’.

  • (Optional) Customize Language Strings (see below.)

2. Set Up the Voucher Product required

  • Go to Catalog > Products and click Add new.

  • Enter the product details and click Save and Continue Edit.

  • In the Vouchers section of the product page, enter the Voucher Template ID (from RTP|One) and click Add Voucher Template ID.

  • Aspenware Commerce will validate that the voucher template is not being used on any other Commerce product.

  • If you would like the voucher to be visible in My Account, make sure that visible is selected AND the appropriate instructions for displaying vouchers via RTP|One have been followed (i.e. a report has been added to the voucher type.)

  • Check and uncheck the My Account button options (to hide/display the presented buttons view/print, redeem, email.)

  • Click Save.

  • Check and uncheck the My Account button options to hide/display the presented buttons.

  • After the Voucher Template ID has been saved, you should find a new attribute called “Voucher ID” on your product. 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 (e.g. adding [Dynamic] in the text prompt would place the voucher attribute into the dynamic component area on the PDP.) Verify that the voucher attribute has been added.

3. Configure Email Voucher Template optional

  • Go to Content Management > Message Templates

  • Search for “Vouchers.EmailVoucher”

  • 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

4. Add Voucher Requirement (Product/Discount Voucher ONLY) optional

  • Go to Promotions > Discounts > Edit the desired discount.

  • From the Discount requirement type field, select ‘Vouchers’

    1. Once entered you will see the text field to enter the voucher template ID

  • Enter the ‘voucher template ID’ from RTP|One from which the voucher codes will be issued.

  • Assign the product to the discount (you may only assign one product to this discount

  • Click Save

5. Limit Discount Application (Product/Discount Voucher ONLY) optional

  • Go to Promotions > Discounts, select the discount, and click Edit to update the desired discount.

  • On the Edit discount details page, scroll down to Requirements and select ‘cart must contain a certain amount of products’ from the discount requirement type dropdown.

    1. Set Maximum Quantity = 1 and Minimum Quantity = 1

  • Click Add Product

  • Add the appropriate products to which the discount voucher and the discount applies.

  • Click Save.

6. Create a Dedicated Voucher Redemption Page optional

Detailed Setup

HINT: Want to take it a step further? Check out our voucher training webinar here.

Prerequisite Tasks

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. Note the Voucher Template ID(s).

    1. If configuring a Product or Product/Discount voucher, set up the product header 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 to the voucher product component of the initial product that “grants” access to the vouchers i.e. A season pass is configured with a voucher component that creates X amount of Buddy Passes when sold online or through RTP.

  • In order for vouchers from RTP|One to show in my account, they must have a Report defined on the voucher type. add the voucher product(s) to the component.

HINT: For more detail on RTP voucher setup, reference this guide.

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

  • 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.

    1. Go to Configuration > Local Plugins >

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

    3. Ensure that both Installed and Is Enabled are checked.

       

NOTE: If the voucher toolbar is missing, you can add this plugin-HTML widget by following the instructions found in the 2.12.5 Release Guide.

 

  • 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.

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

Settings

Configuration Step

Setting Name

Value

Print/View Vouchers in My Account

customersettings.hideprintvoucherstab

False = Enable Print/View Vouchers

True = Disable Print/View Vouchers

Install Banner Plugin HTML Widget

vouchersettings.showbanner

True = show the banner

False= do not show banner

 

For discounts, cache product prices must be unchecked. This setting can be found in Settings > Catalog Settings.

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.

  • Voucher Banner Language Strings: Update these strings to configure the voucher banner title separate from the content text:

Description

Language String Resource

Default Value

(Can be Customized)

Placement

Description

Language String Resource

Default Value

(Can be Customized)

Placement

Voucher banner title text

voucher.plugin.cta.title

Have a voucher to redeem?

Left side of voucher banner.

Voucher banner content text

voucher.plugin.cta.text

Check your voucher ID and redeem here.

Second sentence in voucher banner.

Page Banner Input Box

voucher.plugin.input.text

YOUR VOUCHER NUMBER

Inside text entry box in banner

 

  • Voucher Validation Popup Language Strings: Update these strings to configure the voucher banner title separate from the content text:

Description

Language String Resource

Default Value

(Can be Customized)

Placement

Description

Language String Resource

Default Value

(Can be Customized)

Placement

Voucher Popup

voucher.plugin.modalheader.text

Voucher Validation

Title of voucher popup

Voucher Popup

voucher.plugin.validationwait.text

Please wait while we validate your voucher ID.

Appears within popup if validation is not immediate.

Voucher Popup

voucher.plugin.validationsuccess.text

Voucher ID successfully verified. Click redeem to continue.

Appears within popup once voucher ID successfully verified.

Voucher Popup

voucher.plugin.invalidcode.text

Voucher ID is invalid.

Appears within popup if ID is invalid or other error occurs.

Voucher Popup

voucher.plugin.continuebutton.text

Redeem

Appears within popup - button

Voucher Popup

voucher.plugin.button.label

CONFIRM VALUE

Appears within banner- button

Discount voucher message

voucher.plugin.discount.message

Discount will be applied to the highest priced eligible item in your cart

Beneath the Voucher name within the voucher redemption modal

 

  • My Vouchers Language Strings: Update these strings to configure My Vouchers:

Description

Language String Resource

Default Value

(Can be Customized)

Placement

Description

Language String Resource

Default Value

(Can be Customized)

Placement

Product vouchers tab

account.myvouchers.productvoucherstab

My Product Vouchers

Product/Other Toggle underneath heading

Other vouchers tab

account.myvouchers.othervoucherstab

My Other vouchers

Product/Other Toggle underneath heading

My vouchers subheader message

account.myvouchers.productvouchers.description

Find your vouchers and take action below.

Text underneath My Vouchers title

Print/view

account.myvoucher.title

%Guest%'s Vouchers

Heading above list of available vouchers

My account column title

account.printvouchers

My Vouchers

Title at the top of page

Email voucher popup message

account.myvouchers.emailpopup.sendvoucher

Enter an email address to send this voucher.

Email Voucher popup window

Email voucher popup text entry box

account.myvouchers.emailpopup.textentry

Email address

Email Voucher popup window - email field

Email voucher popup send button

account.myvouchers.emailpopup.send

Send

Button on Email Voucher popup

Print/View vouchers method

account.printvouchers.terms

Non-transferable. No cash value.

Description on the voucher detail page

Voucher effective date (forthcoming)

account.myvouchers.effectivedate

Effective Date

(Forthcoming)

Voucher expiration date

account.myvouchers.expirationdate

Expiration Date

Voucher detail page

Email voucher popup success confirmation

account.myvouchers.emailpopup.success

Voucher successfully sent!

Successful Send popup

Email voucher popup success message

account.myvouchers.emailpopup.success.message

%recipient% will receive your voucher momentarily.

Successful Send popup

Email voucher popup fail message

account.myvouchers.emailpopup.fail

Unfortunately, we were unable to send your voucher.

Fail to send popup

email voucher popup success continue/exit button

account.myvouchers.emailpopup.success.button

Ok

Button on successful send popup

email voucher popup fail continue/exit button

account.myvouchers.emailpopup.fail.button

Ok

Button on fail to send popup

print voucher popup

account.printvouchers

Print Vouchers

Button

print voucher popup

account.printvouchers.description

Vouchers assigned to members of your can be viewed and printed below.

Print popup page

print voucher popup

account.printvouchers.terms

Vouchers are non-refundable and non-transferable.

Print popup page

print voucher popup

account.novouchers

There are no vouchers on your account.

Print popup/no vouchers

Print/View vouchers method

account.printvouchers.terms

Non-transferable. No cash value.

Print popup

 

HTML Widgets

1. Voucher Banner Plugin HTML Widget

2. Voucher Banner Styling HTML Widget

3. Voucher/Gift Card Help HTML Widget

 

1. 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.

2. 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>

<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>

1. Add Voucher/Gift Card Help HTML Widget

This widget appears on mobile devices to help provide guests with info on using gift cards and vouchers.

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

  • Select Add new Html widget and enter the following:

    • Name: Voucher/Gift Card Help

    • Visible: Checked

    • Html Content: Select Tools > Source Code

      • Within the text box popup, you add

<div style="opacity: 0.65; font-style: italic; line-height: 1.2em;" vcloak="">Gift card numbers are on the back of your gift card under the magnetic strip</div>

 

Detailed Setup Guide

  1. Enable Print/View Vouchers from My Account

  2. Set Up the Voucher Product

  3. Configure Email Voucher Template

  4. Add Voucher Requirement (For Product/Discount Voucher ONLY)

  5. (Optional) Limit Discount Application (For Product/Discount Voucher ONLY)

1. Enable Print/View Vouchers from My Account

The My Account section of the Peak site includes, for logged-in guests, a sidebar that allows access to a Print Vouchers page. When a customer accesses this page, any RTP|One voucher assigned to the logged-in guest, or anyone in their defined RTP|One household, will be displayed. 

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 voucher 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.

  • Go to Configuration > Settings > All Settings (advanced) and search for the setting customersettings.hideprintvoucherstab in the name field.

    1. Edit the setting, and change the Value to 'False; to enable Print/View Vouchers in My Account. 

    2. Change the Value to ‘True’ to disable Print/View Vouchers in My Account. 

  • Language strings are available to customize the text on the My Vouchers page. See above in Settings, Language Strings, and HTML Widgets for details and specific strings.

 

2. Set Up the Voucher Product (For Product or Product/Discount Vouchers)

  • Go to Catalog > Products and click Add new. Enter the product details and click Save and Continue Edit.

  • If you have successfully installed the voucher plugin, there will be a new widget at the bottom of your product setup page named “Vouchers” as well as a new (automatically injected) voucher attribute.

  • In the Vouchers section of the product page, enter the Voucher Template ID (from RTP|One) and click Add Voucher Template ID.

  • Aspenware Commerce will validate that the voucher template is not being used on any other Commerce product.

  • If you would like the voucher to be visible in My Account, make sure that visible is selected AND the appropriate instructions for displaying vouchers via RTP|One have been followed (i.e. a report has been added to the voucher type.)

  • Check and uncheck the My Account button options (to hide/display the presented buttons view/print, redeem, email.)

  • Click Save.

  • Check and uncheck the My Account button options to hide/display the presented buttons

  • After the Voucher Template ID has been saved, you should find a new attribute called “Voucher ID” on your product. 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 (e.g. adding [Dynamic] in the text prompt would place the voucher attribute into the dynamic component area on the PDP.) Verify that the voucher attribute has been added.

3. 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”

  • 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" />

         

4. Add Voucher Requirement (For Product/Discount Voucher ONLY)

Once you have your discount preliminarily set up you will need to add the voucher requirement and the voucher template ID for the selected voucher product.

  • Go to Promotions > Discounts > Edit the desired discount.

  • From the Discount requirement type field, select ‘Vouchers’

    1. Once entered you will see the text field to enter the voucher template ID

  • Enter the ‘voucher template ID’ from RTP|One from which the voucher codes will be issued.

  • Assign the product to the discount (you may only assign one product to this discount

  • Click Save

 

5. (Optional) Limit Discount Application (For Product/Discount Voucher ONLY)

To prevent a discount from being applied to more than one eligible item in the cart another requirement must be added to the product.

  • Go to Promotions > Discounts, select the discount, and click Edit to update the desired discount.

  • On the Edit discount details page, scroll down to Requirements and select ‘cart must contain a certain amount of products’ from the discount requirement type dropdown.

    1. Set Maximum Quantity = 1 and Minimum Quantity = 1

  • Click Add Product

  • Add the appropriate products to which the discount voucher and the discount applies.

  • Click Save.

6. (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. Below find instructions on how to create this page as well as styling that will pull in your resort’s theme.

Notes:

  • This page will be accessible via the url only and will not be part of a shop dropdown menu.

  • Some resorts may have headers that override Aspenware Commerce styles; if this causes issues with your UI please follow the instructions below to ensure that your styles do not override those needed for the dedicated voucher page.

 

  • Navigate 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:

  • Select Save and Continue Edit

  • Select Widget Zones

  • From the dropdown select body_start_html_tag_after

  • Select Update