Skip to content

Combination Facet Fitment#

Added in version 10.10.00 the Combination Facet Fit feature provides a mechanism for displaying product fitment based on combination facets.

Combination Facet Fitment Setting#

The Create Fitment Indicator can be found within the Combination Facets section of the Miva admin under Utilities. By default this setting will be inactive for each combination facet record.

Functionality#

  • When activated, a product custom field will be created.
  • The custom field name will be derived from the COMBINATION_FACE_CODE with _fit appended. For example, a combination facet code of ymm will result in a custom field named ymm_fit.
  • The custom field is dynamically populated and uneditable

Custom Field Values#

The custom field is dynamically populated with one of the following values:

  • none: The product does not have combination facets, and the “include other” setting is not set in the combination facet.
  • universal: The “include other products” setting is set in the combination facet, and the product has no facets.
  • unknown: The product has combination facets, but none have been selected in the current session.
  • partial: The combination facet allows partial submission, and the product has values entered in the partial submission.
  • exact: The combination facet selected in the current session matches one listed for the product.

Integration with Shadows Framework#

  1. Update Custom Field Settings:

    • Go to the Product Display Layout section within the PROD page and include the COMBINATION_FACE_NAME Fitment within the custom fields settings.

  2. Add Custom Field Frontend:

    • Insert the following code above the product SKU in the prod-product_display.mvt (Product Display Layout Section) file, here.
    <mvt:if expr="l.settings:product:customfield_values:combofacets:COMBINATION_FACE_CODE_fit">
    <span class="u-color-gray-600 x-product-layout-purchase__sku">&mvt:customfield_names:combofacets:COMBINATION_FACE_CODE_fit;: &mvt:product:customfield_values:combofacets:COMBINATION_FACE_CODE_fit;</span>  
</mvt:if>

  1. Update Custom Field Settings:

    • Go to the Basket Contents section within the BASK page and include the COMBINATION_FACE_NAME Fitment within the custom fields settings.

  2. Add Custom Field Frontend:

    • Insert the following code after the product name in the bask-basket.mvt (Basket Contents Section) file, here.
    <mvt:if expr="l.settings:group:customfield_values:combofacets:COMBINATION_FACE_CODE_fit">
    <div class="c-heading--subheading">&mvt:group:customfield_names:combofacets:COMBINATION_FACE_CODE_fit;: &mvt:group:customfield_values:combofacets:COMBINATION_FACE_CODE_fit;</div>
</mvt:if>

  1. Update Custom Field Settings:

    • Go to the Search Results Layout section within the SRCH page and include the COMBINATION_FACE_NAME Fitment within the custom fields settings.

  2. Add Custom Field Frontend:

    • Insert the following code after the product name in the srch-search_results.mvt (Search Results Layout Section) file, here.
    <mvt:if expr="l.settings:group:customfield_values:combofacets:COMBINATION_FACE_CODE_fit">
    <span class="c-heading--subheading">&mvt:group:customfield_names:combofacets:COMBINATION_FACE_CODE_fit;: &mvt:group:customfield_values:combofacets:COMBINATION_FACE_CODE_fit;</span>
</mvt:if>

  1. Update Custom Field Settings:

    • Go to the Product List Layout section within the PLST page and include the COMBINATION_FACE_NAME Fitment within the custom fields settings.

  2. Add Custom Field Frontend:

    • Insert the following code after the product name in the plst-all_products (Product List Layout Section) file, here.
    <mvt:if expr="l.settings:group:customfield_values:combofacets:COMBINATION_FACE_CODE_fit">
    <span class="c-heading--subheading">&mvt:group:customfield_names:combofacets:COMBINATION_FACE_CODE_fit;: &mvt:group:customfield_values:combofacets:COMBINATION_FACE_CODE_fit;</span>
</mvt:if>

  1. Update Custom Field Settings:

    • Go to the Category Product List Layout section within the CTGY page and include the COMBINATION_FACE_NAME Fitment within the custom fields settings.

  2. Add Custom Field Frontend:

    • Insert the following code after the product name in the ctgy-category_listing.mvt (Category Product List Layout Section) file, here.
    <mvt:if expr="l.settings:group:customfield_values:combofacets:COMBINATION_FACE_CODE_fit">
    <span class="c-heading--subheading">&mvt:group:customfield_names:combofacets:COMBINATION_FACE_CODE_fit;: &mvt:group:customfield_values:combofacets:COMBINATION_FACE_CODE_fit;</span>
</mvt:if>

Note

Remember to update COMBINATION_FACE_CODE_fit to use the combination facet code that is set up in the store.

Conditional Example#

Here is an example of how template code on the product display might be used on an aftermarket vehicle parts store, where combination facets are used for Year / Make / Model:

<mvt:if expr="l.settings:product:customfield_values:combofacets:COMBINATION_FACE_CODE_fit">
    <mvt:if expr="l.settings:product:customfield_values:combofacets:ymm_fit EQ 'none'">
        &mvt:group:customfield_names:combofacets:ymm_fit;: Not Applicable
    <mvt:elseif expr="l.settings:product:customfield_values:combofacets:ymm_fit EQ 'universal'">
        &mvt:group:customfield_names:combofacets:ymm_fit;: Universal
    <mvt:elseif expr="l.settings:product:customfield_values:combofacets:ymm_fit EQ 'unknown'">
        &mvt:group:customfield_names:combofacets:ymm_fit;: Please select Year / Make / Model above to verify fitment
    <mvt:elseif expr="l.settings:product:customfield_values:combofacets:ymm_fit EQ 'partial'">
        &mvt:group:customfield_names:combofacets:ymm_fit;: Partial match to your selected Vehicle
    <mvt:elseif expr="l.settings:product:customfield_values:combofacets:ymm_fit EQ 'exact'">
        &mvt:group:customfield_names:combofacets:ymm_fit;: This is an exact match to your Vehicle
    </mvt:if>
</mvt:if>

Part Level Facets#

When the combination facet is setup to use the Part Products as the Variant Source the fitment value will be available using the Runtime_Fitment_Load_Product_Variant function.

Here is an example done within an AJAX call that can be added below the variant_changed function in the prod-attributemachine.mvt template.

Request Parameters#

Parameter Type Description
CombinationFacet_Code String Combination Facet Code
Product_Code String Product code string
Variant_ID Number ID number of variant

Example Request#

const Load_Fitment = function (fitmentData) {
    console.log(fitmentData);
}
AJAX_Call_Module(Load_Fitment, 'runtime', 'combofacets', 'Runtime_Fitment_Load_Product_Variant', 'Product_Code=PRODUCT_CODE' + '&' + 'Variant_ID=VARIANT_ID' + '&' + 'CombinationFacet_Code=COMBINATION_FACET_CODE');

Response Parameters#

Parameter Type Description
fit String Will be one of the following values none, unknown, universal, partial, exact

Example Response#

{
    "success": 1,
    "data": {
        "fit": "exact" // none, unknown, universal, partial, exact
    }
}