How To Guides
Combination Facets
3. Adding Combination Facets Values to Products
5. Add Combination Facet Drop Downs to User Interface
9. Customizing Default Functionality
Overview
Combination facets are a special kind of facet where there are multiple facet values which are grouped together. The most common kind of combination facet is year, make and model. In order for the facet to be useful, all three must be selected. Each product in your store then has an assigned list of year/make/models it applies to.
The combination facets functionality built in to Miva gives you a way to create any number of combination facet groups and define the facets themselves which are part of the group so you are not limited to just year, make and model. We also provide a front end user interface component so that customers can easily find the products they are looking for by choosing the year, make, model that applies to them. The menu automatically updates so that once you select year, the make list will dynamically populate with just the makes which apply to that year.
Installation & Setup
Combination facets requires that your product lists pages (Search, Category, Product List) also have facets enabled. Please see this guide on how to setup Facets in Miva. (https://docs.miva.com/how-to-guides/facets-category-search-filtering)
To enable combination facets, assign it to your store under Utilities. Here you can create a new facet which itself will contain multiple facet fields. The combination facet is the grouping for fields. The fields are the individual things which you link together and facet against. For example year, make and model. However you can create any number of fields you wish. Other examples include:
Length, Width, Height
Brand, Size, Material
Adding Combination Facets Values to Products
Once you’ve configured your combination facet fields, you can now add values associated with each of those fields at the product level. There are two ways to do this:
- Via the admin
- Via Import
Via the Admin
When editing any product, there will now be a new tab with the name you gave to the Combination Facet earlier. (This works similar to how custom field groups works.)
Once you navigate to this new tab, you’ll see the fields you created are the columns to the list and you can add new year, make and model combinations which fit this product.
Importing Facet Values
If you have hundreds or thousands of facet values to add, there is a easy way to import these values into Miva.
These values get imported as a custom product field in the following format:
2008>Honda>Civic|2009>Acura>RSX
Some things to keep in mind: The order of the individual values matters. If you setup your combination with Year, Make, Model you will need to make sure the the data matches that format. Each field value is separated with the “>” symbol and groups of values are separated with the pipe “|” delimiter.
Upon import, Miva will automatically parse out the data format into their individual values and it will appear in the admin just like the example above.
The header row used to import these values will depend on the name given to the combination facet. It will always be the name used with spaces replaced with underscores.
Our name in this case was “Vehicle Fitment” so the header row would be “VEHICLE_FITMENT.”
The values are also exportable as part of the standard product export as a custom field:
Add Combination Facet Drop Downs to User Interface
One of the most powerful parts to combination facets in Miva, is we automatically provide you with all the customer facing User Interface for the drop down menus. You can easily add the menu to any page, or globally. The menu is a template and can be customized as needed for your specific store.
Menu Item Tag
Where “fitment” is the code of the combination facet you created.
In order to display this menu on a page you also need to assign the combination_facet item to the page as well:
This item will output the required JavaScript tag to the page:
This module takes advantage of the new JavaScript asset management tools in Miva so the file can be viewed, edited and moved to resource different groups right from the Admin.
User Interface -> JavaScript Resources
Miva Variables
Anytime a combination facet has been applied, the selected values are available as template variables in the following format:
This can be used to display to the customer what filters they have selected:
You’re Vehicle: 2008 Honda Civic
Customer Experience
Once a customer chooses the facet field combination they are looking for (ie. year, make, model) and clicks the apply button, the page will refresh to the same page they are currently on and show what they selected:
After Apply is selected:
You’ll notice that all the dropdowns are disabled and the Apply button has changed to Reset Values.
When a combination of facets is selected the following happens:
- A cookie is set storing the values of what was selected.
- All list view pages (category, search, product list) which have facets enabled will be filtered to exclude all products which don’t match the year make and model which was selected.
This means that as the customer navigates around the site, every category will automatically be filtered to only show them products which match that specific year, make and model.
Example of Customer Experience on a Category with a Combination Facet Selected.
Only 2 product are displayed, even though this category has additional products assigned to it but just with different year, make, model values. You’ll also notice the year, make, model is pre-selected for them.
Universal Products (Include Other Products)
There may be use cases when you want products to still appear in the search/product lists even if a combination facet is applied. These are sometimes referred to as universal products since they fit all year/make/model combinations. Or another use case would be if you also sold apparel along side auto parts. If someone had a year, make and model selected you would still want your apparel to display. To solve for this use case there is a option at the facet level to "Include Other Products." If selected, all products which do not have value for this specific facet will be included on the product lists and search results.
Facet Menu Template
The facet menu is a configurable template which is found under User Interface -> Settings -> Combination Facet (facet code) Menu Layout.
If you have multiple combination facets, each will be listed here with its own template. This template is used to customize the button names and overall layout. This is also where the Initialization Javascript is located (and can be customized, see Customizing Default Functionality section below).
Combination Facet Cookies
When a combination facet is applied, Miva will by default set a cookie storing the values. This is used to automatically filter all the product lists just to this specific combination of facet values (ie year, make, model).
This cookie will have the following format:
The value will be a base64 encoded version for the combination facets selected.
Example:
This cookie uses the same global cookie setting configured in Miva which defaults the expiration date to 1 year.
As long as this cookie is set, all product lists which use facets will automatically be filtered. The cookie does not get deleted until the customer clicks the “Reset Values” button on the Combination Facet Drop Down Menu.
Customizing Default Functionality
There are use cases where you may not want a cookie set or you want to customize where the user gets taken once they select a combination of facet values. We’ve provided JavaScript functions which can be used to modify the default functionality based on your specific needs.
Change Location of Apply or Reset Value buttons
onSetCookie - use this function to change where the customer is taken after the cookie is set. Default will be to reload the same page they are currently on, however if you wanted to take them to the product list page (with the facet pre-selected) it would look like this:
Example:
combination_facet.onSetCookie = function() { window.location.href = '&mvtj:urls:PLST:auto'; }
onCookieClear - This is simular to the function above but gets called after the customer clicks “Reset Values”
combination_facet.onClearCookie = function() { window.location.href = '&mvtj:urls:SFNT:auto;'; }
Don’t Set Cookie
If you have a use case where you don’t want Miva to “remember” what the customer selected across multiple pages via a cookie then you can call this initialize function.
Change this:
combination_facet.Load_Cookie();
To this:
combination_facet.Initialize_NoCookieSet();
Keep in mind, that onSetCookie and onCookieClear still work to change the URL even if you initialize the combination facet with the Initalize_NoCookieSet() function.
XML Provisioning Import
This feature supports importing data via XML.