Javascript
ShopWired themes use a number of separate JavaScript files to provide additional functionality and features on your website.
Each ShopWired theme may use a different set of JavaScript files depending on the design and functionality offered on it. However, all ShopWired themes use the two JavaScript files documented below.
application.js
application.js
Your theme includes a JS file named application.js.
The application.js file contains various initialisations and custom scripts for ShopWired themes. It manages carousels, product galleries, basket functionality, modals, and other interactive elements on the website.
Each ShopWired theme will use a different set of scripts within the application.js file depending on the functionality offered by the theme through JavaScript. Scripts common to all themes are documented below, but this is not an exhaustive list.
Theme Initialisations
These are initial setup commands to initialise core components.
| Feature | Purpose | How It Works |
|---|---|---|
| Foundation Initialisation | Initialises the Foundation framework components. | Calls the Foundation framework's functions to manage responsive UI elements. |
| Fancybox Defaults | Sets default behaviour for Fancybox modals. | Enables image modal loop (so the gallery can cycle through images infinitely). |
| Theme Configuration | Retrieves theme configuration. | Extracts theme settings from the <head> tag for further customisation. |
Functions
Various custom functions handle features like basket interactions, product galleries, modals, and more.
| Function Name | Purpose | How It Works |
|---|---|---|
| initializeBasket() | Sets up the basket functionality. | Manages AJAX-based basket updates, delivery rates, and total calculations. |
| initializeCheckoutForm() | Handles checkout form interactions. | Sets up province/state switching based on country selection, manages shipping details, and validates forms. |
| quickView() | Manages quick view modals for products. | Loads product details into a modal via AJAX when a quick view link is clicked. |
| initializeProductOptions() | Initialises product options like variants and subscriptions. | Handles dynamic updates of product options, SKUs, prices, and stock availability. |
| productPhotos(container) | Handles product photo galleries and modals. | Initialises sliders and manages image switching for product pages. |
| validateForms() | Validates form inputs across the site. | Adds custom validation rules for email, numbers, and passwords. |
| orderQty() | Handles minimum and maximum order quantity validation. | Ensures that product quantities added to the basket are within allowed min/max thresholds. |
Carousels and Sliders
The file manages several carousels and sliders for home page banners, product images, and category listings.
| Carousel/Slider | Purpose | How It Works |
|---|---|---|
| Home Carousel | Manages the main carousel on the homepage. | Uses slick() to create an auto-playing carousel with next/prev arrows. |
| Product Carousel | Displays product thumbnails and main images. | Syncs the main product image with the thumbnail carousel; handles image switching and gallery views. |
| Main Image Slider | Displays the main product image with navigation. | Initialises a vertical slider with custom arrows for navigation. |
| Generic Product Slider | Displays generic product sliders. | Initialises with slick(), displaying one item at a time with an arrow for next slide navigation. |
Basket and Checkout Functions
Basket and checkout-related functionalities include item addition, delivery rate updates, and form validation.
| Feature | Purpose | How It Works |
|---|---|---|
| Soft Add to Basket | Adds products to the basket without page reload. | Uses AJAX to add items to the basket and update the basket totals in real-time. |
| Remove from Basket | Removes items from the basket via AJAX. | Provides a confirmation prompt before removing an item and then updates the basket totals. |
| Checkout Form Validation | Validates checkout form inputs and manages shipping. | Ensures forms are filled out correctly and handles the display of shipping options based on input. |
| Basket Totals Update | Updates basket totals dynamically. | Sends AJAX requests to update the basket totals, delivery rates, and VAT after a country or rate change. |
Miscellaneous Features
Additional features that enhance user interaction and theme customisation.
| Feature | Purpose | How It Works |
|---|---|---|
| Age Verification Modal | Displays a modal for age verification. | Shows the age verification modal if the user has not already verified their age. |
| Newsletter Modal | Displays a newsletter signup modal. | Opens the modal after the user verifies their age (if applicable) or visits the page for the first time. |
| Announcement Bar | Displays an announcement banner at the top of the page. | Shows an announcement that can be dismissed and remembered for the user for a set period. |
| Lazy Loading | Loads images lazily as the user scrolls. | Uses unveil() to load images only when they are in the viewport. |
| Collection Views | Manages grid and list view toggles on collection pages. | Switches between grid and list views for product collections using cookies to remember user preferences. |
| Price Range Slider | Filters products by price range using a slider. | Initialises a slider to select a price range, updating the filter via AJAX. |
plugins.js
plugins.js
All ShopWired themes rely on an externally hosted JS file at https://s3-eu-west-1.amazonaws.com/shopwired-theme-assets/v3/js/plugins.min.js known as the plugins.js file.
The plugins.js file contains a series of jQuery plugins and functions designed to add interactive features to the website.
jQuery Plugins
These plugins extend jQuery’s functionality to add custom features to your website.
| Plugin Name | Purpose | How It Works | Contains |
|---|---|---|---|
| $.fn.imageZoomer(options) | Adds zoom functionality to images. | Creates a zoom overlay that follows the mouse cursor and shows a zoomed-in version of the image. Works by calculating the mouse position and adjusting the position of an overlay and the zoomed image accordingly. | Customisable zoom settings such as square width, overlay size, and the image to zoom on. |
| $.fn.imageContainer() | Ensures images fit within their container. | Adjusts the image size dynamically to fit within its parent container, scaling and centring the image if necessary. | Handles image dimensions, scaling logic, and container positioning. |
| $.fn.linkWithConfirmation(options) | Adds confirmation to links. | Attaches a confirmation dialog to link clicks. If the user confirms, the action proceeds. | Customisable message for the confirmation prompt. |
| $.fn.infoMessage(options) | Displays an information message with animation. | Shows an info message on the screen, animates its appearance, pauses, then animates it disappearing. | Options to customise pause time, animation speed, and message text. |
| $.fn.productCollection(options) | Manages product filtering, sorting, and pagination. | Handles AJAX-based loading of product collections, applying filters, sorting options, and supporting infinite scrolling. | Supports pagination, filter application, sort dropdowns, and AJAX-based page updates. |
| $.fn.productAddToCanvasBasket(options) | Adds products to the basket via AJAX. | When a product is added to the basket, the plugin updates the basket asynchronously without reloading the page. Also updates basket totals and counts displayed on the UI. | AJAX integration, total count updates, and confirmation prompts for removal. |
Functions
These utility functions handle specific tasks within the plugins.
| Function Name | Purpose | How It Works | Contains |
|---|---|---|---|
| currency_value(amount, symbol) | Formats a numeric value as currency. | Takes a number and formats it with commas and decimals to represent currency, prepending a given symbol. | Handles number formatting, appending currency symbols. |
| refresh(loadMore, sorting, itemsPerPage) | Handles refreshing product collections via AJAX. | Sends AJAX requests based on current filters, pagination, or sorting. Updates the product list without reloading the page. | AJAX logic for filtering, pagination, and sorting. |
| onLoad() | Scales and positions images on load. | Ensures images are resized and centred within their parent containers after loading. | Calculates image dimensions and adjusts its position. |
| updateFilterStatus(data) | Updates filter visibility and product counts. | Based on available products, shows or hides filter options and updates the product count displayed next to each filter. | Handles filter visibility and count updates. |
| positionSquare(x, y) | Moves the zoom square over images. | Tracks the mouse position and moves the zoom overlay and the zoomed image accordingly. | Logic for moving the zoom square and positioning the image. |
| refreshPageLinks() | Updates pagination links. | Adjusts the displayed pagination links based on the current page, hiding or showing adjacent pages. | Manages pagination display and link visibility. |
