Page Comparison

This document provides resort guidance for developing brand footers for their Aspenware eCommerce web application. Documentation on implementing the Simple Footer option can be found here.

1. Responsiveness and Breakpoints

...

If you are targeting future support as we update our platform, our breakpoints will be changing to better target modern devices. Aspenware will be updating our breakpoints to the following over the next 18 monthsas we evolve the platform. For this reason, we recommend you target the updated values. While there will be some inconsistency in your footer and the platform breakpoints while Aspenware makes this conversion, it will prevent you from having to update your CSS again down the road.

...

The Aspenware Commerce Platform is built mobile first, so when creating your CSS breakpoints for your brand footer we recommend targeting min-width instead of max-width.

...

CSS libraries such as Bootstrap getting inserted into the page via the footer may cause conflicts with your eCommerce page design. If you must use a CSS library, please check the CSS library documentation to see if it is possible to scope the library to the context of your footer.

Javascript Frameworks

Do to conflicts with Javascript on page, using JavaScript in the footer is unsupported and we will not be able to help you if there are issues.

We utilize Vue.js on our front end and resorts have had difficulty inserting a second Vue instance into their headers and footers as the two Vue instances tend to conflict with each other. If you are going to attempt to use Vue for your footer, make sure that the instance is attaching to the ID of your footer container eg. #your-resort-brandfooter (vs. using the default #app) and does not insert any components into the global page scope (window). It is also advised to enable scoped CSS in any Vue component files.

You may have more success using a different framework, such as React or Svelte. In general, using frameworks for the footer is untested and unsupported at this time, so please be aware of the risk that you may run into issues.

4. Aspenware Theme Support for Resort Footers

...

#your-resort-brandfooter { background-color: var(--ads-plugins-brandfooter-backgroundcolor, FALLBACK COLOR);}

#your-resort-brandfooter h1, #your-resort-brandfooter h2{
   var(--ads-plugins-brandfooter-header-textcolor, FALLBACK COLOR);
}

#your-resort-brandfooter p{
   color: var(--ads-plugins-brandfooter-body-textcolor, FALLBACK COLOR);
}

#your-resort-brandfooter a {
  color: var(--ads-plugins-brandfooter-link-textcolor, FALLBACK COLOR);
}

#your-resort-brandfooter a:hover, #your-resort-brandfooter a:active, #your-resort-brandfooter a:visited {
  color: var(--ads-plugins-brandfooter-link-hover-textcolor, FALLBACK COLOR);
}

#your-resort-brandfooter .logo-image {
  height:80px; //adjust as needed for your logo dimensions
  width: 100px; //adjust as needed for your logo dimensions
  background-position: center;
  background-size: contain; //logo image will auto scale to fit the size of the container
  background-repeat: no-repeat;
  background: var(--ads-plugins-brandfooter-logo-image, url('URL TO FALLBACK IMAGE'));
}

5. Deliverables

Aspenware is going to insert your custom brand footer HTML and CSS into the Commerce site using standard WYSIWYG tooling. To accomplish this, we require the following deliverables.

1. A single HTML file that contains your Footer HTML. You can inline the CSS if you wish, but for maintainability reasons it is recommended to put all your CSS in a separate CSS file.

2. If not inlining your CSS: A single CSS file with your footer CSS. If you are using SCSS or SASS, please export it to CSS. If you want your footer to be easily updated by our Customer Success team with our internal theming tools to account for future branding updates (avoids long deploy cycle turn around times), please use the CSS Custom properties defined in section 4 within your CSS when defining certain property values.

6. More Information on These Topics

• ARIA Tags for Logo Image Accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role

• Using CSS Custom Properties: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

• Adding a Logo Image URL to a Div: https://www.freecodecamp.org/news/how-to-add-an-image-url-to-your-div/

• Writing Mobile First CSS: https://www.freecodecamp.org/news/taking-the-right-approach-to-responsive-web-design/