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.

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.

Open

1. Navigate to Admin > Content Management > Topics (pages)

2. Select Add New

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

      Open

      

4. To implement

   1. Within the Body module, select Tools > sourcecode

   2. In the source, paste the following code:

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

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

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

1. Nop Templates > Plugins > Html Widgets > Manage html widgets

2. Select Add New Html Widget

3. Name the voucher modal (e.g. Fix Voucher Modal)

4. Select Tools --> <> Source Code

5. Enter the following code in the text entry field

   1. <style> .ax--box.full-width {     width: 100% !important;     margin-left:inherit !important; } </style>

6. Select Save and Continue to Edit

7. Select Widget Zones

8. From the dropdown select body_start_html_tag_after

9. Select Update