There are several “zones” on Aspenware Commerce where custom HTML, also known as HTML Widgets, can be added on Aspenware Commerce. Aspenware provides a set of supported HTML widgets to use on your site that perform various functions. Non-supported custom HTML may be possible to add to these “zones”, but Aspenware does not guarantee or certify that non-supported HTML will be able to be added without causing bugs and will not provide code changes in order to enable non-supported HTML in these zones.
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.
1. Aspenware Commerce Tasks | |
|---|---|
Identify whether the HTML widget you are evaluating makes sense or is supported for your configuration of Aspenware Commerce and contact Aspenware Support team if needed (support@aspenware.com.) REQUIRED | PREREQUISITE |
Create/Edit the HTML Widget - REQUIRED | DETAILED SETUP |
Prerequisite Tasks
HTML widgets have specific purposes, review the table below to identify whether the HTML widget you are evaluating makes sense or is supported for your configuration of Aspenware Commerce. As always, our Aspenware Support team is here to answer any questions. Email support@aspenware.com with questions about implementing HTML widgets.
Detailed Setup Guide
1. Find the Desired HTML Widget
To access the HTML Widgets screen, log in to Aspenware Commerce admin and go to Nop-Templates> Plugins > HTML Widgets > Manage HTML Widgets.
Once on the Manage HTML Widgets page, use the table below to define/check the correct widget zone, code, and name for the HTML widget being modified when editing and/or setting up the widgets.
IMPORTANT: Aspenware provides the following supported HTML widgets to enhance functionality. Non-supported custom HTML may be able to be added to these “zones”, but Aspenware does not guarantee or certify that non-supported HTML will be able to be added without causing bugs. If bugs result from adding non-supported HTML widgets, Aspenware will not provide code changes in order to enable non-supported HTML in these zones.
2. Editing/Creating HTML Widgets
Find the HTML Widget to be modified and click “Edit” to make changes to the HTML Widget Settings, Widget Zones, Scheduling, Conditions, Override Product Conditions, and Override Customer Conditions by selecting the appropriate tab.
If the desired supported widget is not already created, select Add new HTML Widget. Name it according to the table below if it is an Aspenware supported widget.
IMPORTANT: When possible, avoid deleting HTML widgets as they may cause adverse impacts to your store. If you are unaware of what the purpose of a widget is, contact your Aspenware representative who can check how it is being used and confirm whether or not it can be removed.
Widget zones can also be disabled, so if you are aware of the function of a widget zone and wish to temporarily “turn it off” instead of deleting it, choose to uncheck the Visible setting to disable it. Again if you aren’t sure whether something can be disabled, check with your Aspenware Representative.
When creating a new widget, it will be turned on by default. To enable/disable a widget, check/uncheck the Visible checkbox.
Update the HTML by going to Tools > <>Source Code from the HTML Content menu. Enter the code from the table below into the modal. Everything in ALL CAPS can be customized, but avoid making changes to the code elements.
If the HTML widget should only be visible on specific stores, limit the HTML widget to those stores by adding the desired store(s) to the Limited to Stores setting in the Mappings section below. If the HTML widget should be visible on all stores, do not limit the widget by store or define a store.
Once the name and code are defined, select Save and Continue Edit. This enables you to save and continue making changes.
To update or define the widget zone select the Widget Zones tab after saving.
Select Add new record and choose the widget zone that is defined for the supported Aspenware HTML widget from the table below.
Once the widget name, code, and widget zone are defined according to the directory below with the desired code customizations, select Save to save changes made to your widget.
NOTE: If you would like to have more advanced configurations, such as limiting the widget to only customers of certain roles or logged in statuses, limiting widget zones to only appear during certain times, etc., contact your Aspenware representative to help you determine if this is possible via HTML widget zones and assist you in setting it up.
Library
Below is a comprehensive list of supported HTML Widgets utilized in Aspenware Commerce. The directory columns provide:
The HTML widget name though naming conventions may vary from store to store.
The widget zone where it must be added.
Acceptable HTML to add as code.
A description of the HTML widget;s function.
An image example of the HTML in the store (where applicable.)
Additional notes on what is configurable. Within the Code column, all text in ALL CAPS is configurable.
NOTE: Anything in between code like this <!-- COMMENT --> is a comment meant to explain the code and how to edit it, it will not appear on your site.
HINT: You can sort each column A to Z by hovering over the right corner of the column and clicking the arrow that appears. You can also use control+F (PCs) or command+F (Macs) to search this page for keywords.
Checkout Support Info
What it’s used for: Checkout Help info at the bottom of the checkout with links back to the shopping cart to update cart Category/Location Checkout Configuration Options Fully configurable using HTML formatting for text Widget Zones checkout_footer Additional Notes Required for all stores and often set up in store branding. Code <footer class="checkout-footer"> <div class="edit-cart-message"> <h3>CHANGE YOUR ORDER</h3> <!--This is next section is optional and is a description under change your order--> <p>NEED TO MAKE CHANGES TO YOUR ORDER?<br />YOU CAN REMOVE OR RE-ADD ITEMS FROM YOUR CART.</p> <!--This is the end of the optional section that is a description under change your order--> <a class="btn btn-primary" href="/?cart=true">VIEW CART</a></div> <div class="support-message"> <div class="message-title"> <div class="icon-support"></div> <h3>HELP CENTER</h3> </div> <!--This is the end of the optional section that is a description under Help center--> <p>NEED HELP, CONTACT OUR ORDER SPECIALIST AT THE NUMBER BELOW AND WE'LL HAVE YOU ON YOUR WAY!</p> <!--This is the end of the optional section that is a description under Help center--> <div class="phone-number">(555)555-5555</div> </div> </footer> | Example(s) (Click to expand)    |
HTML Widget Name | What it’s used for | Example(s) (Click to expand) | Category/Location | Configuration Options | Widget Zones | Additional Notes | Code |
|---|---|---|---|---|---|---|---|
Checkout Support Info | Checkout Help info at the bottom of the checkout with links back to the shopping cart to update cart | | Checkout | Fully configurable using HTML formatting for text | checkout_footer | Required for all stores and often set up in store branding. | <footer class="checkout-footer"> <div class="edit-cart-message"> <h3>CHANGE YOUR ORDER</h3> <!--This is next section is optional and is a description under change your order--> <p>NEED TO MAKE CHANGES TO YOUR ORDER?<br />YOU CAN REMOVE OR RE-ADD ITEMS FROM YOUR CART.</p> <!--This is the end of the optional section that is a description under change your order--> <a class="btn btn-primary" href="/?cart=true">VIEW CART</a></div> <div class="support-message"> <div class="message-title"> <div class="icon-support"></div> <h3>HELP CENTER</h3> </div> <!--This is the end of the optional section that is a description under Help center--> <p>NEED HELP, CONTACT OUR ORDER SPECIALIST AT THE NUMBER BELOW AND WE'LL HAVE YOU ON YOUR WAY!</p> <!--This is the end of the optional section that is a description under Help center--> <div class="phone-number">(555)555-5555</div> </div> </footer> |
Confirm Order - More Info - Widget Zone | There are now two new custom widget zones on the order completed page, where resorts can add custom HTML to link guests to another location after they completed their order. | .png?version=1&modificationDate=1634313981240&cacheVersion=1&api=v2) | ‘CheckoutCompletedTop’ OR 'CheckoutCompletedBottom'. | Custom | |||
Explain Assignment Limitations - New Group Member | Clarify for guests on the assignment step of checkout - when adding a new group member - why the guests that can be assigned to a product setup this way are more limited |  | Checkout - Assign Page | Text | group_members_after_add_member_inputs | <p style="padding: 1rem 1rem 0 1rem;">ASSIGNMENT OFTEN HAS AGE RESTRICTIONS, SO ONLY GUESTS OF THE CORRECT AGE WILL APPEAR IN THE THE DROP DOWNS TO BE ASSIGNED TO PRODUCTS.</p> | |
Explain Assignment Limitations - Assignment Page | Clarify for guests on the assignment step of checkout why the guests that can be assigned to a product setup this way are more limited |  | Checkout - Assign Page | Text | checkout_assignmentpage_top | <p><span vcloak=""> PRODUCTS OFTEN HAVE AGE RESTRICTIONS, SO ONLY GUESTS OF THE CORRECT AGE CAN BE ASSIGNED TO SPECIFIC PRODUCTS.</span></p> | |
Ability Info | Unique information about how to prompt customers to fill out the Ability portion of the rental profile |  | Checkout - Personalize Page | Fully configurable using HTML formatting for text | checkout_rentalability_after | Option B meant to link to and open up a web-hosted pdf hosted on your brand site | Option A without linking to PDF <p>Be sure to provide accurate information, as an error may increase your risk of injury.</p> <ul> <li><strong>Skier Type I:</strong> Prefers easy moderate slopes and slower speeds.</li> <li><strong>Skier Type II:</strong> Ski Moderately. Prefer a Variety of speeds.</li> <li><strong>Skier Type III:</strong> Skis Aggressively. Normally ski at high speeds.</li> </ul> Option B linking to PDF <a href="YOUR_URL_GOES_HERE" target="_blank">Click to view</a> this information on identifying your skier type. |
Voucher Banner Widget | Enables the voucher banner entry box |  | Store Banner | n/a | content_before | <validate-code></validate-code> | |
Voucher Banner Styling | Styles the Voucher Banner Widget | | Store Banner | colors and sizing can be modified | <style><!--
:root {
--voucher-banner-background-color: #00cc99;
--voucher-label-weight: normal;
--voucher-label-color: #4d4dff;
--voucher-label-size: 0.875rem;
--voucher-button-text-color: #99ff33;
--voucher-button-text-size: 1.5em;
--voucher-button-background-color: #ff0066;
--voucher-text-weight: 500;
}
--></style>
| ||
Mobile Gift Card and Stored Value Link | On mobile it enables customers to easily add gift cards and stored value and vouchers to an otherwise hidden section |  | Checkout - Payment Page | Can edit the phrasing of Click here message | checkout_payment_info_bottom | Based on which alternate payments you accept, update text. Options for alternate payment include
Do not include unless utilizing alternate payments | <div class="giftcard-message show-mobile">Do you have a <a v-on:click="showCheckoutProducts">gift card or stored value</a> to apply?</div> |
Gift Card and Voucher Help | Message under gift card and stored value box to help guests with entry |  | Checkout - Payment Page | Text | checkout_giftcard_after | Based on which alternate payments you accept, update text. Options for alternate payment include
Do not include unless utilizing alternate payments | <div style="opacity: 0.65; font-style: italic; line-height: 1.2em;">CONFIGURABLE GIFT CARD AND VOUCHER ENTRY TEXT HERE.</div> |
Credit Card Payment Plan | Used to communicate that a credit card is being collected and stored for later charges. Can also be used to link to terms and conditions, but note there is no required guest engagement to continue, so if resorts want terms to require a guest check box, set up a waiver. |  | Checkout - Payment Page | Can edit the text that appears on the payment step and even add links, | checkout_payment_method_bottom | Only displays when guest has a Payment Plan product in their cart | <div class="payment-message" style="position: relative; top: -10px; padding: 1.6rem; background: #e8edf0; margin: 0 25px 25px 25px; line-height: 1.5;" v-if="personalization.HasPaymentPlan">By completing this purchase, I agree to the <a href="https://YOURURLFORTERMSANDCONDITIONSGOESHERE" target="_blank">Terms & Conditions</a> for the payment plan products in my cart. The “Order Total” excludes amounts to be charged later on the payment plan.</div> |
Order Processing Message | Shows on the checkout confirm order step. Because refreshing the page amidst order completion can create failed orders, this message is meant to warn guests against behaviors that could create order issues. |  | Checkout - Order Confirm Page | Text | checkout_confirm_bottom | <div style="border: 1px solid #307cb9; padding: 1rem; text-align: center; background: #f2f2f2;"> <h4>Do not refresh this page</h4> <p style="line-height: 1.3; margin-bottom: 0;">Processing the order may take a few moments. After clicking 'Confirm Order' do not refresh the page until the order is processed.</p> </div> | |
Golf Reservation Message | Because Tee-Times are $0 down products, this explains why a credit card is being collected for carts with tee-times |  | Checkout - Payment Page | Can edit some phrasing | checkout_payment_method_bottom | Only used for stores that have an EZLinks integration to sell tee times online | <div class="payment-message" style="padding: 1.6rem; background: #e8edf0; margin: 0 1.2rem; line-height: 1.5;" v-if="requiresCreditCard">A credit card is being collected to reserve your tee time. {{ personalization.TotalPriceDisplay }} is due online. {{ personalization.TotalCustomerEnteredPriceValue | currency }} will be due at the course.</div>
|
Golf Confirmation Page Message | Reiterate the amount due at course and highlight terms and conditions before guest completes booking |  | Checkout - Order Confirm Page | Must edit cancellation policy to match own policy | checkout_confirm_bottom | Only used for stores that have an EZLinks integration to sell tee times online | <div class="payment-message" style="padding: 1.6rem; background: #e8edf0; margin: 0 1.2rem; line-height: 1.5;" v-if="requiresCreditCard"><strong>{{ personalization.TotalCustomerEnteredPriceValue | currency }} DUE AT COURSE<br /><br />
Cancellation/No Show Policy:</strong><br />All guests are responsible for their reserved tee times. No payment will be collected to reserve a tee time; in the event of a no show, the credit card associated with the tee time reservation will be charged as follows:
Tee time cancelled more than 48 hours before tee time, no fee charged. Tee time canceled 24 - 48 hours before tee time, 50% of greens fee will be charged. Tee time canceled less than 24 hours before tee time will be charged 100% of greens fees.
This cancellation policy and associated penalties is applicable to all non-Full Golf Member players.</div>
|
Golf Tee Times Check-in Help | If online check-in enabled for golf, this widget zone gives instructions for how to use online tee time check in on the Tee Time Check in page | NEED TO ADD | Tee Time Check-In Page | Text | checkin_teetimes_bottom | Only used for stores that have an EZLinks integration to sell tee times online | <div id="“maincontent”"> <h2>How to Check In For Your Round</h2> <hr class="“bluelinerule”" /> <div class="“introdescription" intro-body=""> <div class="”" introdesctext=""> <p><i>Online check-in is only available on day of play from midnight up to your tee time.</i></p> <h3>How to Check In For Your Round:</h3> <ol> <li>Choose your course, enter your confirmation number and your last name. If you clicked on the <i>Check In</i> link in your email, these fields will be pre-populated.</li> <li>Choose one or more slots to check in and pay in a single transaction, click Next.</li> <li>You may choose to check out as a guest or login with your account. If you are a BoyneRewards member, please log in to receive your points.</li> <li>Playing with friends on your reservation? Simply forward your confirmation email with the link to them or copy the link above and they can check in their slot and pay online too.</li> <li>Show up and enjoy your round of golf!</li> </ol></div> </div> </div> |
Announcement Banner | Share any news or CTA messages to guests on your shop. |  | Shop Banner | Text | content_before | Note you can have the renewal banner and announcement banner both displayed. Use the display order to control which shows on top. | <div class="renewal-banner" vcloak=""><h2 class="hdg hdg_28 hdg_48Md mix-hdg_color7" style="text-align: center;"><b>ANNOUNCEMENT HEADER</b></h2><div style="text-align: center;"><p class="xmsonormal" align="center"><span style="font-size: 12pt;">Announcement Text </span><span><o:p></o:p></span></p></div></div> |
Renewal Homepage Banner | displays below the ecommerce category bar and shows configurable messaging that links to the renewal or linked products page for logged in customers and to the login page for users who are not signed in. |  | Shop Banner | Text | content_before | If the banner is missing styling to appear similar to the example, contact your Aspenware Representative via support@aspenware.com | <div class="renewal-banner" vcloak=""> <h2 class="requires-signin">Renew Your Products Now!</h2> <h2 class="requires-signout"><b><a href="/login?ReturnUrl=/linkedproducts">Login</a></b> to Renew Your Passes!</h2> <p class="requires-signin">Visit the <a href="/linkedproducts">renew products</a> page to see your eligible products.</p> </div> |
Reload/Reservation Sign In Message | Covers up either reload product attribute value (if supporting reload on the product detail page) OR the reservation product sign in attribute so that users who aren’t signed in, can’t add a reload or reservation product to their cart. |  | Product detail page if reload on PDP OR reservation product. | Can edit some phrasing | reloadsigninmessage | May need to contact Aspenware support to help adding this widget zone. Email support@aspenware.com | Reload messaging <div class="reloadSignInMessage"> <div class="message-description"> <h3 class="title">Reload your MEDIA NAME and save time!</h3> <h4 class="subhead">Already have a MEDIA NAME? Save time by reloading here.</h4> </div> <a class="btn btn-primary flat" :href="https://shop.jacksonhole.com/login?1080=2214&1081=2217&1082=2231&ReturnUrl=%2Fs%2Flift-tickets%2Fp%2Flift-ticket-full-day">Sign In</a></div> Reservation messaging <div class="reloadSignInMessage"> <div class="message-description"> <h3 class="title">Sign in before you can reserve your passholder days!</h3> <h4 class="subhead">Sign in using the account you used to purchase your pass.</h4> </div> <a class="btn btn-primary flat" :href="loginLink">Sign In</a></div> |
Add Temporary/Anonymous Media to a Customer Account | Allows guest to have helpful information so they can type in a temporary RFID media number to assign temp media to a member of their household |   | Group Members Modal when Add Media is selected and Media step of checkout when add media is selected. | Fully configurable using HTML formatting for text | add_media_help | The image of media with RFID # displayed here should be either hosted on your brand site or uploaded to the widget via Insert > Insert Image > Source > Add. Also note that for RTP|ONE only the RFID # can be entered here. For both RTP and Siriusware media uploads will only work if the guest on the media being attached is a temporary guest/anonymous customer. | <h2>Assign MEDIA NAME card</h2> <p>Add a new MEDIA NAME card to this group member.</p> <img src="ADD_IMAGE_URL" /> |
Login Help | Additional detail to help customers login |  | Login | Text | sign_in_brand_snippet | <div style="background: #ffffff; padding: 10px; text-transform: none;" vcloak=""><span style="font-size: 9pt;">Need Help? You may need to reset your password or <br />find your account with your email or card.</span><br /><br /> <span style="font-size: 9pt;"><a id="FindMeBtn" href="/register/findbyemail" style="border: 0px none; margin: 0px; padding: 0px; line-height: inherit; white-space: normal; font-style: normal; font-weight: bold; font-stretch: inherit; font-family: Avenir; font-size: 13.6px; vertical-align: baseline; cursor: pointer; text-decoration: underline ! important; color: inherit; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; background-color: #ffffff;"> CLICK HERE TO FIND YOUR ACCOUNT</a></span></div> | |
Login with Card Help | Should be added and updated with a photo of your media with the correct number highlighted. |  | Login Help | Text and image link | sign_in_help | The image of media with Card # displayed here should be either hosted on your brand site or uploaded to the widget via Insert > Insert Image > Source > Add. | <label class="axIdentity-FieldLabel">Finding Your Card Number</label> <p>Your Card Number can be found in the highlighted areas below:<br /> <img alt="Card Back" src="IMAGE LINK" /></p> |
My Account Link | Link to another page on your brand website or somewhere else from my account within Commerce |  | My Account | Text, button link | body_my_account_html_tag | <div style="padding-bottom: 8px;">Access your CUSTOM PAGE.</div> <a href="YOUR_LINK_GOES_HERE" class="btn btn-primary flat narrow" target="_blank" style="margin-bottom: 20px;">CTA HERE</a> | |
Store Closed Styling | Use Admin to close your store |  | Closed Store | DO NOT CHANGE | body_start_html_tag_after | <style><!-- .page.store-closed-page { top: 17vh !important; left: 50%; right: 100px; padding: 1rem !important; max-width: 450px; transform: translatex(-50%); min-height: 0px !important; z-index: 10000 !important; width: 90vw; text-align: center; } .html-store-closed-page primary-header, .html-store-closed-page primary-footer { opacity: 0.5; } --></style>
| |
Static Category Image | Disable swapping out product photos for category hero |  | Category Pages | DO NOT CHANGE | body_start_html_tag_after | <style><!-- .html-category-page #dynamic-hero { display: none !important; } --></style>
| |
Swap out Hero Image | Swap out your hero image yourself |  | Category pages | Image URL | body_start_html_tag_after | Note, confirm that hero image dimensions are exactly 1700 x 700 px and 275 KB. Check with your Aspenware Representative before updating via support@aspenware.com | <style><!-- #body #hero-image #dynamic-hero { opacity: 1; top: 110px; } #body #hero-image { background-image: url("YOUR_HERO_IMAGE_URL_GOES-HERE"); } @media only screen and (max-width:959px) { #body #hero-image #dynamic-hero { top: 90px; } } --></style>
|
Queue-It JavaScript | Enable Queue-It if you have licensed to use Queue-it when capacity is reached for your shop. |  | When Queue-It Configured throughput threshold exceeded for 90 seconds | Resort Value (must use correct Value | body_start_html_tag_after AND head_html_tag | <script type='text/javascript' src='//static.queue-it.net/script/queueclient.min.js'></script><script data-queueit-c='RESORT'data-queueit-spa='true'type='text/javascript'src='//static.queue-it.net/script/queueconfigloader.min.js'></script> | |
Browse Happy | Message that shows to guests browsing your shop on an outdated browser. I.e. IE 11 and earlier. |  | When guest browses shop on an outdated browser. | Text | body_start_html_tag_after | <script>// <![CDATA[ function getInternetExplorerVersion() { var rv = -1; if (navigator.appName == 'Microsoft Internet Explorer') { var ua = navigator.userAgent; var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); if (re.exec(ua) != null) rv = parseFloat(RegExp.$1); } else if (navigator.appName == 'Netscape') { var ua = navigator.userAgent; var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})"); if (re.exec(ua) != null) rv = parseFloat(RegExp.$1); } return rv; } var ieVersion = getInternetExplorerVersion(); if (ieVersion > 0 && ieVersion < 11) { $('html').addClass('upgrade-browser') } // ]]></script> <div class="browsehappy"> <h1>Whoa there!</h1> <p>You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/" target="_blank">upgrade your browser</a> or use a different browser to improve your experience.</p> </div>
| |
Reservation Product Calendar Styling | Only use on Reservation Category products |   | Category Calendar view of reservation products | Swap out everywhere that | body_start_html_tag_after | Only use if leveraging Aspenware’s reservation product configuration |
<style>[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--nav {
margin-bottom: 30px;
position: relative;
}
[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .date-wrapper.full-width-calendar .inventory-low-wrapper .inventory-low-message {
flex-basis: 10%;
background-color: #d6973e;
color: white;
text-align: center;
padding: 3px;
font-size: 0.75rem !important;
}
[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .price-major {
display: none;
}
[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--nav::after {
content: 'Click on any available calendar date to reserve';
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
background: #f2f2f2;
padding: 5px 10px;
border-radius: 3px;
white-space: nowrap;
}
[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper::after {
content: " ";
position: absolute;
margin-bottom: 20px;
text-align: center;
height: 40px;
background-image: url('https://shop.woodwardparkcity.com/images/uploaded/reservations-inventory-key.png');
background-size: 320px auto;
background-repeat: no-repeat;
width: 90%;
background-position: center;
left: 50%;
transform: translateX(-50%);
}
[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--cell-day {
background: none !important;
}
@media screen and (min-width: 768px) {
[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--cell-day:not(.-disabled-) .price::after {
content: 'Reserve';
font-size: 0.8em !important;
font-weight: normal !important;
text-transform: uppercase;
padding: 2px 10px;
}
[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--cell-day {
background: #88C583 !important;
}
[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .datepicker--cell-day .price::after {
color: #4A4A4A !important;
background: none !important;
font-size: 0.8em !important;
}
[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .-lowinventory- {
background: #F7AD44 !important;
}
[data-category="CATEGORY_SEO_NAME"] .product-pricing-calendar-wrapper .-lowinventory- .price::after {
content: 'Reserve';
font-size: 0.8em !important;
font-weight: normal !important;
text-transform: uppercase;
padding: 2px 10px;
color: #4A4A4A !important;
}
}
@media screen and (max-width: 767px) {
[data-category="CATEGORY_SEO_NAME"] #commerce-store .product-pricing-calendar-wrapper .datepicker--nav::after {
font-size: 0.75rem;
}
[data-category="CATEGORY_SEO_NAME"] #commerce-store .product-pricing-calendar-wrapper .date-wrapper.full-width-calendar .date-day {
font-size: 0.65rem !important;
}
[data-category="CATEGORY_SEO_NAME"] #commerce-store .product-pricing-calendar-wrapper .date-wrapper.full-width-calendar .datepicker--cell-day:not(.-disabled-) .date-day {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
height: 90%;
width: 90%;
max-height: 32px;
max-width: 32px;
line-height: 32px;
border-radius: 10px;
background: #88C583;
color: #222;
}
[data-category="CATEGORY_SEO_NAME"] #commerce-store .product-pricing-calendar-wrapper .date-wrapper.full-width-calendar .datepicker--cell-day.-lowinventory- .date-day {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
height: 90%;
width: 90%;
max-height: 32px;
max-width: 32px;
line-height: 32px;
border-radius: 10px;
background: #F7AD44;
color: #222;
}
}
</style>
|
Aspenware Payment Plan - Credit Card Payment Plan | Message displayed on payment step of checkout when payment plans in order |  | Checkout Payment Step when Payment Plan Product in Cart | Text and HTML | checkout_payment_method_bottom | ONLY for Resorts using Aspenware payment plans | <div class="payment-message" style="position: relative; top: -10px; padding: 1.6rem; background: #e8edf0; margin: 0 25px 25px 25px; line-height: 1.5;" v-if="personalization.HasPaymentPlan"> A credit card is being collected to collect payments. Payments will be collected monthly for products you are purchasing. </div> |
Aspenware Payment Plan - Override Payment Plan Verbiage | Disclaimer text on my account page where payment plans are viewed |  | My Account - Payment Plans | Text | body_end_html_tag_before | ONLY for Resorts using Aspenware payment plans | <script>// <![CDATA[ (function() { // the DOM will be available here if this is placed at the end of the body tag console.log('TEMPORARY FIX FOR PAYMENT PLAN VERBIAGE') let paymentPlansAdminElement= document.getElementById("payment-plans-admin"); let innerParagraphs = paymentPlansAdminElement.getElementsByTagName("p"); //Should only be one paragraph innerParagraphs[0].innerHTML = "The following orders were purchased with payment plans. These indicated credit cards will be automatically charged the amount shown on the payment date; payments using the same card will be grouped together into one payment on your credit card statement. You may update the credit cards below if necessary. If you have had a failed payment and update your credit card, the new card will be immediately charged for any failed payments." })(); // ]]></script>
|
RTP Native Payment Plan - Credit Card Payment Plan | Used to communicate that a cc is being collected and stored for later charges. Can also be used to link to terms and conditions, but note there is no required guest engagement to continue, so if resorts want terms to require a guest check box, set up a waiver | | Checkout Payment Step when Payment Plan Product in Cart | Can edit the text that appears on the payment step and even add links, | checkout_payment_method_bottom | ONLY for Resorts using native RTP payment plans | <div class="payment-message" style="position: relative; top: -10px; padding: 1.6rem; background: #e8edf0; margin: 0 25px 25px 25px; line-height: 1.5;" v-if="personalization.HasPaymentPlan"> A credit card is being collected to collect payments. Payments will be collected monthly for products you are purchasing. </div> |
RTP Native Payment Plan - PDP Payment Plan Schedule Widget | One of three widgets that needs to be set up to display the payment plan schedule on the PDP for payment plan products. |  | On Product Detail page of payment plan product | DO NOT UPDATE | addtocart_card_bottom | ONLY for Resorts using native RTP payment plans - See Details on Editing PDP Payment Plan Schedule Data | <payment-details-schedule></payment-details-schedule> |
PDP Payment Plan Schedule Vue Component | One of three widgets that needs to be set up to display the payment plan schedule on the PDP for payment plan products. |  | On Product detail page of payment plan product | Configured to language on the pdp, set dates, products and attribute value ids and payment plan amounts - For HTML and configuration notes, see RTP Payment Plan Messaging Customization | body_end_html_tag_before | <script>// <![CDATA[
Vue.component('payment-details-schedule', {
data: function () {
return {
monthlyPayment: 0,
paymentTableHeaders: [
{ text: 'Date', value: 'Date', align: 'center' },
{ text: 'Amount', value: 'Amount', align: 'center' },
],
processing: false,
showModal: false,
paymentPlanProductIds: [],
dates: null,
paymentPrices: [],
paymentDetails: [],
paymentRemainder: 0,
modalDescription: null,
widgetDescription: null,
totalPaymentPrice: 0,
totalDeposit: 0
}
},
template: '<div class="payment-plan-details" v-if="paymentDetails.length && isPaymentPlanProduct"> <p>You will be billed in 4 easy payments <span v-if="paymentRemainder == 0">of ${{ monthlyPayment.toFixed(2) }}</span>.<div v-if="widgetDescription">{{widgetDescription}}</div><span class="ax--btn ax--btn--secondary viewSchedule" @click="showModal = true">View Payment Schedule</span></p><ax-modal v-if="showModal" modalType="message" size="medium" @close="showModal = false" style="top: 100px;"><template v-slot:header><h3>Payment Plan Schedule</h3><div>{{modalDescription}}</div><div>${{totalDeposit.toFixed(2)}} will be charged now. The remaining ${{totalPaymentPrice.toFixed(2)}} will be charged on the following schedule:</div></template><template v-slot:body><ax-loader v-if="processing" size="lg" position="fixed" loader-color="#222" /><ax-data-table v-if="!!paymentDetails.length" :allow-row-selection="false" break-width="large" :headers="paymentTableHeaders" :items="paymentDetails"/><div style="margin: 10px 0; font-style: italic;">Product total with deposit: ${{(totalPaymentPrice + totalDeposit).toFixed(2)}}</div></template></ax-modal></div>',
created() {
this.dates = window.datesArray
this.paymentPrices = window.priceArray
this.paymentPlanProductIds = window.productArray
this. })
if (_this.totalPaymentPrice > 0) {
//Determine monthly payment
let thisPayment = +(_this.totalPaymentPrice / _this.dates.length)
_this.monthlyPayment = Math.floor(thisPayment * 100) / 100
//Determine if there is a remainder amount
_this.paymentRemainder = +(_this.totalPaymentPrice - (_this.monthlyPayment * _this.dates.length)).toFixed(2)
//Then we create payment record for each configured date
_this.dates.forEach(function (paymentDate, index) {
if (index === _this.dates.length - 1 && _this.paymentRemainder > 0) {
let lastPayment = _this.monthlyPayment + _this.paymentRemainder
_this.paymentDetails.push({ date: paymentDate, amount: `$${lastPayment.toFixed(2)}` })
}
else {
_this.paymentDetails.push({ date: paymentDate, amount: `$${_this.monthlyPayment.toFixed(2)}` })
}
})
//Add a total amount row
_this.paymentDetails.push({ date: '<b>TOTAL</b>', amount: `<b>$${_this.totalPaymentPrice.toFixed(2)}</b>` })
}
},
},
watch: {
selectedAttributeValueIds: {
immediate: true,
deep: false,
handler(newValue, oldValue) {
this.buildPaymentSchedule()
},
},
}
})
// ]]></script>
<style><!--
.payment-plan-details p {
margin-bottom: 5px;
}
.payment-plan-details .viewSchedule.ax--btn {
display: block;
text-align: center;
text-transform: uppercase;
max-width: 300px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.addtocart-card .viewSchedule {
margin-top: 10px;
}
.payment-plan-details .ax--modal-container .ax--modal-body {
max-height: 125vh;
overflow-y: visible;
margin-bottom: 0;
}
.payment-plan-details .ax--modal-container .ax--data-table {
margin: 0.35rem 0;
}
--></style>modalDescription = window.modalDescription
this.widgetDescription = window.widgetDescription
this.buildPaymentSchedule()
},
computed: {
productId() {
return this.$store.getters['products/selectedProduct'].Id
},
selectedAttributeValueIds() {
return this.selectedAttributes
.filter(function (attribute) {
return !attribute.IsDisabled
})
.map(function (obj) {
return obj.SelectedValueId;
});
},
selectedAttributes() {
return this.$store.getters['products/selectedProductAttributes']
},
numberOfPayments() {
return this.dates.length
},
isPaymentPlanProduct() {
let _this = this
let foundProductId = this.paymentPlanProductIds.find(function (pid) {
return pid === _this.productId;
});
if (foundProductId){
return true
}
else {
return false
}
},
},
methods: {
buildPaymentSchedule() {
this.paymentDetails = []
let paymentPriceRecord = null
this.totalPaymentPrice = 0
this.totalDeposit = 0
//First we must determine which of the selected attributes have payment prices and calculate a total payment price for them
let _this = this
this.selectedAttributeValueIds.forEach(function (attributeId, index) {
paymentPriceRecord = null
paymentPriceRecord = _this.paymentPrices.filter(p => {
return p.id.toString() === attributeId
})
if (paymentPriceRecord && paymentPriceRecord.length > 0) {
_this.totalPaymentPrice += paymentPriceRecord[0].paymentPrice
_this.totalDeposit += paymentPriceRecord[0].deposit
}
| |
PDP Payment Plan Schedule Data |     | On Product Detail Page of Payment Plan Product | body_start_html_tag_after | <script>// <![CDATA[
//ADD WIDGET DESCRIPTION HERE
// Description must be in single quotes.
var widgetDescription='This is configurable:'
//ADD MODAL DESCRIPTION HERE
// Description must be in single quotes.
var modalDescription='You will be billed on the following schedule:'
//ADD PAYMENT DATES HERE
// Format is 'mm/dd/yyyy' and must be in single quotes.
// Commas are required between dates
var datesArray = [
'06/01/2020',
'07/01/2020',
'08/01/2020',
'09/01/2020'
];
//ADD PRiCES FOR ATTRIBUTES IDS HERE
// Each record is an object in the format {id: 12345, paymentPrice: 100.25}F
// id and paymentPrice are numeric (no quotes or $)
// Commas are required between objects
var priceArray = [
{ id: 10790, paymentPrice: 499.00, deposit: 100.00 },
{ id: 10791, paymentPrice: 349.00, deposit: 80.00 },
{ id: 10792, paymentPrice: 229.00, deposit: 60.00 },
{ id: 10794, paymentPrice: 349.00, deposit: 80.00 },
{ id: 10796, paymentPrice: 319.00, deposit: 80.00 },
{ id: 10797, paymentPrice: 399.00, deposit: 100.00 },
];
//ADD PAYMENT PLAN PRODUCT IDS HERE
// values are numeric (no quotes)
// Commas are required between ids
var productArray = [
515,
516,
517
];
// ]]></script>
| |||
Override Payment Plan Verbiage (Temporary) | Explaination on the page where guests manage their payment plan credit card information how payment plan charges work and how grouped payments will be displayed on a credit card statement |  | Payment Plan Credit Card Management - My Account | Text | body_end_html_tag_before | Need to ask if this can be removed | <script>// <![CDATA[
(function() {
// the DOM will be available here if this is placed at the end of the body tag
console.log('TEMPORARY FIX FOR PAYMENT PLAN VERBIAGE')
let paymentPlansAdminElement= document.getElementById("payment-plans-admin");
let innerParagraphs = paymentPlansAdminElement.getElementsByTagName("p");
//Should only be one paragraph
innerParagraphs[0].innerHTML = "The following orders were purchased with payment plans. These indicated credit cards will be automatically charged the amount shown on the payment date; payments using the same card will be grouped together into one payment on your credit card statement. You may update the credit cards below if necessary. If you have had a failed payment and update your credit card, the new card will be immediately charged for any failed payments."
})();
// ]]></script>
|
SMS & Facebook Image |
Like this page? Click the like button below. Don't like this page and/or want to give feedback about this page, leave a comment below and Aspenware will address to improve this article.