Extensions THEME_NAME/extensions/

One of Elements key points is having components which can be used across any ReadyTheme built on the framework. We call these Extensions.

Extensions are self-contained, complete UI components which provides a form of plug & play functionality. Extensions may include HTML, CSS, and/or JavaScript.


AJAX Add-to-Cart

The AJAX Add-to-Cart extension will add a product to the basket from the product page without reloading the page. If you also have the Mini-Basket extension active, it will display when a product has been successfully added. If the Mini-Basket extension is not active, a success message will be displayed instead.

AJAX Add-to-Cart come pre-installed with Elements, it just needs to be activated. To activate:

  1. Navigate to User Interface -> JavaScript Resources
  2. Edit the source for theme
  3. Uncomment the following:
    								
    							

						
					

THEME_NAME/extensions/breadcrumbs/breadcrumbs.html

						
					

Category Tree THEME_NAME/extensions/category-tree/category-tree.css

						
					

THEME_NAME/extensions/category-tree/category-tree.html

						
					

Hero THEME_NAME/extensions/hero/hero.css

						
					

Storefront Example

						
					

Category Image Example

						
					

Hero Slider

One of the most popular requests when it comes to creating a site is to replace the static hero image with a carousel of images. Elements has this covered with Roundabout. To create a hero slider, follow these steps:

  1. Navigate to ReadyTheme -> Images
  2. Add images and copy the item tags generated.
  3. Navigate to ReadyTheme -> Content Sections
  4. Create a new ReadyTheme Content Section with the following code (replace placeholder image tags with the ones you copied in the previous step):
    								
    							
  5. Replace this code in the SFNT Page Template with the ReadyTheme Content item tag you created:
    								
    							
  6. Navigate to User Interface -> CSS Resources
  7. Edit extensions and add @import "carousel/roundabout.css"; to the bottom of the import list.
  8. Navigate to User Interface -> JavaScript Resources
  9. Edit theme and, within the jsSFNT function, add this code:
    								
    							
    If you would like the carousel to automatically start, you can pass that as an option:
    								
    							

Messages THEME_NAME/extensions/messages/messages.css

						
					

THEME_NAME/extensions/messages/messages.html

						
					

Mini-Basket

The Mini-Basket extension will display the contents of the Miva mini-basket item in an off-canvas overlay which will transition in from the right edge of the browser.

Mini-Basket come pre-installed with Elements, it just needs to be activated. To activate:

  1. Navigate to User Interface -> CSS Resources
  2. Edit the source for extensions
  3. Uncomment the following:
    								
    							
  4. Navigate to User Interface -> JavaScript Resources
  5. Edit the source for theme
  6. Uncomment the following:
    								
    							
  7. Navigate to ReadyTheme -> Content Sections
  8. Activate mini_basket

THEME_NAME/extensions/mini-basket/mini-basket.css

						
					

THEME_NAME/extensions/mini-basket/mini-basket.html

						
					

THEME_NAME/extensions/mini-basket/mini-basket.js

						
					

Elements ships with three expanded navigation patterns; drop-down, overflow, and overlay. To utilize one of these methods, follow these steps:

  1. Navigate to User Interface -> CSS Resources
  2. Edit extensions and add the @import link which corresponds to the navigation pattern you are using, to the bottom of the import list; i.e. @import "navigation/overlay-navigation.css";.
  3. Navigate to User Interface -> JavaScript Resources
  4. Edit theme and, within the init function, add the code which corresponds to the navigation pattern you are using:
    								
    							
    								
    							
    								
    							

Drop-Down Navigation THEME_NAME/extensions/navigation/drop-down-navigation.css

						
					

THEME_NAME/extensions/navigation/drop-down-navigation.html

						
					

THEME_NAME/extensions/navigation/drop-down-navigation.js

						
					

Overflow Navigation THEME_NAME/extensions/navigation/overflow-navigation.css

						
					

THEME_NAME/extensions/navigation/overflow-navigation.html

						
					

THEME_NAME/extensions/navigation/overflow-navigation.js

						
					

Overlay Navigation THEME_NAME/extensions/navigation/overlay-navigation.css

						
					

THEME_NAME/extensions/navigation/overlay-navigation.html

						
					

THEME_NAME/extensions/navigation/overlay-navigation.js

						
					

ReadyTheme Product Listings are a great way to create featured product displays and the like. Sometimes though, it is nice to display more products and allow customers to scroll through them. To create a product carousel, follow these steps:

  1. Navigate to ReadyTheme -> Product Listings
  2. Edit featured_products and replace the code with the following:
    								
    							
    Alternately, you can create a new product listing, modify a related products list, or other similar lists.
  3. Navigate to User Interface -> CSS Resources
  4. Edit extensions and add @import "carousel/roundabout.css"; to the bottom of the import list.
  5. Navigate to User Interface -> JavaScript Resources
  6. Edit theme and, within the jsSFNT function, add this code:
    								
    							
    If you would like the carousel to automatically start, you can pass that as an option:
    								
    							
    If you are adding/modifying a product list on a different page, you will need to initialize the function there instead.

Search Preview THEME_NAME/extensions/search-preview/search-preview.css

						
					

THEME_NAME/extensions/search-preview/search-preview.html

						
					

THEME_NAME/extensions/search-preview/search-preview.js

						
					

Spinner THEME_NAME/extensions/spinner/spinner.css