Page Comparison

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.

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

...

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

To implement

Within the Body module, select Tools > sourcecode
In the source, paste the following code:

Update the sourcecode with the following text:

Code Block

<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

Versions Compared

Old Version 1

New Version Current

Key