Configuration: Vouchers
- 1 Setup Checklist
- 2 Prerequisite Tasks
- 2.1 POS Tasks
- 2.2 Infrastructure Tasks
- 2.3 Commerce Tasks
- 2.4 Settings, Language Strings and/or HTML Widgets for this Feature
- 2.4.1 Settings
- 2.4.2 Language Strings
- 2.4.3 HTML Widgets
- 3 Detailed Setup Guide
- 3.1 1. Enable Print/View Vouchers from My Account
- 3.2 2. Set Up the Voucher Product (For Product or Product/Discount Vouchers)
- 3.3 3. Configure Email Voucher Template
- 3.4 4. Add Voucher Requirement (For Product/Discount Voucher ONLY)
- 3.5 5. (Optional) Limit Discount Application (For Product/Discount Voucher ONLY)
- 3.6 6. (Optional) Create a Dedicated Voucher Redemption Page
Setup Checklist
1. POS Tasks |
|
RTP|One only
| Prerequisite |
2. Infrastructure Tasks |
|
---|---|
|
|
3. Aspenware Commerce Tasks |
|
1. Install Voucher Plugin required
2. Configure Language Strings, Settings, and HTML widgets - optional
3. Set Discount. optional
| prerequisite |
1. Enable Print/View Vouchers in My Account Required
2. Set Up the Voucher Product required
3. Configure Email Voucher Template optional
4. Add Voucher Requirement (Product/Discount Voucher ONLY) optional
5. Limit Discount Application (Product/Discount Voucher ONLY) optional
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).
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.
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.
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.
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
Select Add New.
Set up your discount according to setup documentation including the appropriate discount amount/percentage
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 |
---|---|---|---|
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 |
---|---|---|---|
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 |
---|---|---|---|
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 { } </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
Enable Print/View Vouchers from My Account
Set Up the Voucher Product
Configure Email Voucher Template
Add Voucher Requirement (For Product/Discount Voucher ONLY)
(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.
Edit the setting, and change the Value to 'False; to enable Print/View Vouchers in My Account.
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
Go to “Source Tools”
Find the text below and replace the [INSERT URL TO LOGO HERE] with your store’s logo image URL
Adjust width and height as necessary
<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’
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.
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
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
Note the name of your url at the bottom of the module
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
Within the Body module, select Tools > sourcecode
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:
Update the path to the hero image (example below)
<div id="dynamic-hero" style="background-image: url('https://yourresort.com/images/thumbs/0000661_lift-tickets_1700.jpeg);" class="active"></div>
Update the path to the print vouchers page (example below)
<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>
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