24/7 Support: 800.608.6482

Get Started

How To Guides

How To Guides

Combination Facets

1. Overview

2. Installation & Setup

3. Adding Combination Facets Values to Products

4. Importing Facet Values

5. Add Combination Facet Drop Downs to User Interface

6. Customer Experience

7. Facet Menu Template

8. Combination Facet Cookies

9. Customizing Default Functionality

10. XML Provisioning Import

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.

“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 you which to 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

“Utility

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:

  1. Via the admin
  2. 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.

“Edit

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.”

“Vehicle

The values are also exportable as part of the standard product export as a custom field:

“Custom

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:

“Edit

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

“User

Miva Variables

Anytime a combination facet has been applied, the selected values are available as template variables in the following format:

“Variable”

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:

“Model”

After Apply is selected:

“Reset

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:

  1. A cookie is set storing the values of what was selected.
  2. 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.

“Test

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.

Facet Menu Template

The facet menu is a configurable template which is found under User Interface -> Settings -> Combination Facet (facet code) Menu Layout.

“Combo

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:

“Name

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.

“Reset

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.

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

Miva believes that all online businesses should have access to a scalable ecommerce platform that can meet their unique business requirements. Miva offers PCI compliant ecommerce, hosting, and custom website design and development solutions. Miva customers have processed over $100 billion in online sales since 1997.

Copyright © 2016 Miva, Inc - All Rights Reserved   Privacy Policy | Store Policy

Links
Contact Us
Receive Tips & Updates

Copyright © 2017 Miva, Inc - All Rights Reserved

Back To The Top