Configuration and Library: HTML Widgets
- Jenni Buonanni
- Sarah Holst
- Marty Niessen
Setup Checklist
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.
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. |
|
| ‘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 Option B linking to PDF |
Voucher Banner Widget | Enables the voucher banner entry box |
| Store Banner | n/a | content_before |
| |
Voucher Banner Styling | Styles the Voucher Banner Widget | Store Banner | colors and sizing can be modified |
|
| ||
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 |
|
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 |
|
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 |
|
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 |
|
|
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 |
|
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 |
|
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 |
|
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. |
|
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 |
|
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 Reservation messaging
|
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. |
|
Login Help | Additional detail to help customers login |
| Login | Text | sign_in_brand_snippet |
|
|
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. |
|
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 |
|
|
Store Closed Styling | Use Admin to close your store |
| Closed Store | DO NOT CHANGE | body_start_html_tag_after |
| |
Static Category Image | Disable swapping out product photos for category hero |
| Category Pages | DO NOT CHANGE | body_start_html_tag_after |
|
|
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
|
|
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 | https://aspenware.atlassian.net/wiki/spaces/AIKB/pages/743735512 |
|
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 |
|
|
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 |
|
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 |
| |
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 |
|
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 |
| |
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 |
|
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 |
| |
PDP Payment Plan Schedule Data |
|
| On Product Detail Page of Payment Plan Product
|
| body_start_html_tag_after |
| |
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 |
|
Header | Controls simple headers on the store |
| Header used on the store |
| header |
|
|
Footer | Controls simple footers on the store |
| Footer used on the store |
| footer |
|
|
SMS & Facebook Image |
|
|
|
|
|
|
|