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

Navigate to Admin > Content Management > Topics (pages)
Select Add New
Make sure the advanced tab is selected and
1. Name your page
2. 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:

Update the sourcecode with the following text:

<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.
  1. Note: No CSS changes should be necessary as styles for the page will pull from the client theme.
Save and test the new page