AJAX & Javascript
AJAX-based user interfaces are employed throughout Well.ca. This allows for a dynamic, more seamless user experience.
jQuery
Practically all of the AJAX and Javascripting on our site is enabled using a lightweight Javascript toolkit – jQuery.
By using jQuery’s cross-browser, event-binding and DOM replacement model, we can design our pages to elegantly degrade – that is, they work for as many users as possible.
Animated, AJAX Add-to-Cart
When a user adds products to their cart on Well.ca, the product image “flies” into the cart.. The user’s gaze is pulled towards the shopping cart which begins the visual connection of the Add To Cart → Checkout process.
Animations like this are uncommon in traditional e-commerce partially because sites are worried about browser compatibility issues. In our case, we use a jQuery override method so that the site will auto-fallback to non-AJAX methods if the browser is not compatible.
After the product enters the cart, the cart update (and new totals) are also enabled using AJAX – this allows less clunky shopping, as products can be added to cart without leaving the page.
Moving Shopping Cart
Our rich shopping cart contains a lot of information, including the core button to proceed to checkout. In order to make sure that you can checkout anywhere, even if the page scrolls for a long time, we animate the cart whenever the user scrolls down.
