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

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.
     

     

• 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

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.

Settings

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:

• 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 My Vouchers:

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

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”

  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. 

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:

<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