Just like the developers behind Bootstrap, we prefer to use HTML and CSS over JavaScript, as this makes the code much more accessible to developers of different experience levels while simultaneously removing a source of complexity from our codebase.
But of course there are circumstances where there’s no way around JavaScript – so Swift contains a small collection of JavaScript modules (delivered as modules from Bootstrap) for your convenience. All of these are designed in the same way, so if you learn to use one you’ve learned how to use the others.
Here’s a description of each included module – most of them are very similar as their purpose is to:
- Make an asynchronous call
- Add a preloader
- Receive the request
Cart.js
This module contains a single public method – swift.Cart.Update(event) – which is used to submit the add-to-cart form via fetch when an Add to cart button is clicked. For an improved user experience we add a preloader while waiting for the response. If the request was a success we get a response with an updated cart quantity, then all elements with the class js-cart-qty are updated with the new quantity by replacing the innerHTML.
If you want to add new properties to the Add to cart method simply add fields to the form – no js or json feed required.
Pageupdater.js
This module is a general purpose module for executing asynchronous updates to page content. We use it primarily on checkout pages where selecting e.g. a country requires updates to other parts of the page such as the payment providers available. Instead of updating the whole page we add a preloader and replace the content when the request is done.
Like the other async updaters in Swift, the page updater replaces the inner markup + data with new markup and data from the request – no json feed or javascript required. This keeps the code and setup very accessible, and in most cases the developer need only know HTML, CSS & a little Dynamicweb to build great solutions with async elements.
Productlist.js
This module is a product list-specific module for executing asynchronous updates to a product list page. It follows the design of Pageupdater.js, but also features product list specific functionality like clearing facet selections. It works as all the other async updaters in Swift – by replacing the inner markup + data with new markup + data from the request.
To use productlist.js to update content, wrap the area that does the update in a form element and choose where the update should be rendered – you have these settings available as data-attributes:
- data-response-target-element – ID for the element where the result should be rendered
- data-preloader – inline or overlay
- data-update-url – boolean for if the url should be updated
To trigger an update add this call to an element inside the form: swift.ProductList.Update(event). To add something new to the request add it through fields in the form. Please note that any parameter which should be remembered after the update should be added to each request, e.g. you should always add a hidden field containing the page size.
For examples on how to use this module see Files\Templates\Designs\Swift\Paragraph\Swift_ProductListGridView.cshtml
Scroll.js
This script is used to handle things which we want to happen on scroll. We use it to change themes and/or hide specific rows in the header, if requested.
Slider.js
This module is used to ensure that slider with multiple columns per slide look great no matter the context they are placed in, e.g. by making sure a slider placed inside a 1/3 column shows fewer columns on each slide than it does when placed inside a full width column. Sliders.js extends TinySlider.
Typeahead.js
This module is used to deliver typeahead suggestions when a user types something in a search field. The main inspiration behind this implementation is the Google search field.
Typeahead.js depends on a very specific markup setup, which can be seen in Files/Templates/Designs/Swift/Paragraphs/Swift_SearchField.cshtml. If you need to extend or customize the typeahead search field we recommend that you copy this template and use it as a starting point for your customizations. Pay special attention to elements with classes starting with js- as these are required by typeahead.js.
The module works by sending a request to a special page (Content > Swift tools > Services > Search results) which contains the data for the dropdown, and then replaces the content of the element with the js-async-fetch-placeholder class with the fetched content. The content for the search result service is rendered by the Files/Templates/Designs/Swift/eCom/ProductCatalog/ ProductSearchDropdownResponse.cshtml template.
Variantselector.js
This module is used to render variant selectors – an area which is often implemented in quite a complex manner and can be a source of many headaches. Our implementation is pretty lightweight. It contains only one public method – swift.Variantselector.OptionClick(event) – which is called when an option is clicked.
To create a custom design using e.g. dropdowns you can use the same js- classes used on e.g. the SwiftProductDetailsInfo.cshtml template.
Here’s an overview of the “internal” methods – this will help you understand what’s going on when using this module:
- ToggleActiveState This method is used to set states on variant options – active, inactive or no state. When an option is clicked we clear all active states on options in the same group. If the option clicked was inactive we clear ALL active states, effectively resetting the selector. Finally, we add the active state to the option clicked.
- UpdateAllVariants This state is used to calculate which variant options are possible, then sets the inactive state on all options and calls the IsOptionAvailable for each option in each group. If the option is available we remove the inactive state.
- IsOptionAvailable This method is used to calculate if a specific variant option is available, primarily by looking at the currently selected options.
- CheckSelectionComplete This method is used to determine whether a selection has been made for each variant group – if it has it updates the page and makes the Add to cart button available.