Please note:
- Favourites are currently a customer facing feature only. This guide covers enabling this feature on the website.
- This guide contains lost of example configuration images. To view any of these images in a larger size just click on the image.
To enable your customers to configure & use favourite lists on the website you will need to perform the following configuration options within the Inzant CMS;
Navigate to the "Ordering" Screen (option under settings).
Scroll to the bottom of this section, and enable "Account Customers can have favourites".
This will then open a large configuration zone that you will need to populate with options, see below the relevant options you need to complete;
Labels
Favourites Title: This is the Header text that appears on the Favourite List details screen.
Favourites Tooltip: This is the mouseover tooltip that gets displayed when the user hovers over the Favourites shop mode icon.
Add Favourites Tooltip: This is the mouseover tooltip that gets displayed when the user hovers over the "Add to favourites" icons.
Remote Favourites Tooltip: This is the mouseover tooltip that gets displayed when the user hovers over the "Add to favourites" icons - and it's already a favourite.
Edit Favourites Button Text: The display text for the Edit Favourites list button, displayed on the Favourites list details screen.
Save Favourites button Text: The display text for the Save Favourites list button, displayed on the Favourites list details screen (favourite list must be in edit mode for this button to display).
Images
Sample Images attached in a folder at the bottom of this guide.
Favourites Image Selected: This is the image used to show the order mode (shown when hovered or the favourite list screen is open).
Favourites Image Unselected: This is the unselected version of the image used to show the order mode.
Add Favourites Small Selected: This is the image that gets used on the Shop List mode when an item is already on the favourite list.
Add Favourites Small Unselected: This is the image that gets used on the Shop List mode when an item is not already on the favourite list.
Add Favourites Large Selected: This is the image that gets used on the Product Details screen (directly under the image) when an item is already on the favourite list.
Add Favourites Large Unselected: This is the image that gets used on the Product Details screen (directly under the image) when an item is not already on the favourite list.
Multiple Favourite List Option
If you'd like your customers to be able to create and manage multiple favourite lists (for instance if there are multiple frequent reorders they'd like to be able to preconfigure). This option will modify the user experience in the following ways;
- The user will be able to Add, Rename & Delete Favourite lists from the My Account Section
- The user will be able to easily jump to any favourite list from the shop sidebar menu in other order modes.
- The user can add or remove a product from one or more favourite lists at once.
Please follow the following steps to enable multiple favourite lists. In the Ordering screen, please enable the "Allow Multiple Favourite Lists" option. PLEASE NOTE, this setting cannot be disabled, please be sure you want multiple favourite lists before enabling.
Manage Favourite Lists Text: This text displays in the My Account Sidebar Zone, The Heading on the Manage Favourite List Page & as the last option in the Shop Sidebar Favourite zone.
Shop Favourites Filter Text: This is the text heading for the pantry lists in the Shop sidebar.
You will lastly need to add the attached CSS and JavaScript files into the website, and then add it to both the /Shop and /Product pages.
See below basic instructions on this, however if you need any assistance on this step please contact Inzant Support & we'll be able to help.
- Open the attached (below) text files.
- Open the Inzant Web CMS, navigate to the "JavaScript" screen.
- Click "Add" button to add a new file.
- Type in a name into the "URL" zone, "Inz-Favourite-List.js" is a good option (don't forget the .js at the end).
- Copy the contents of the text file into the "JavaScript" zone.
- Click "Save & Publish".
- Navigate to the "CSS" screen.
- Click "Add" button to add a new file.
- Type in a name into the "URL" zone, "Inz-Favourite-List.css" is a good option (don't forget the .css at the end).
- Copy the contents of the CSS text file into the "CSS" zone.
- Click "Save & Publish".
- Now navigate to the "Pages" section of the CMS.
- Create a Preview version of the /Shop Page
- Open the JavaScript section, and insert "/scripts/" and then the name you used for the file, so as per above example "/scripts/Inz-Favourite-Lists.js". Click the add button (this will reload the page).
- Open the CSS section, and insert "/styles/" and then the name you used for the file, so as per above example "/styles/Inz-Favourite-List.css". Click the add button (this will reload the page).
- Click "Save & Publish" button.
- Repeat process for /Product Page (create preview, add the javascript to the page, add the CSS to the page, save and publish).
Now you're finished, login as a customer to the website (or as your admin user) and test its working as expected.