How to add Upsize/Downsize panel, Vehicle Info for wheels/tires

Upsize/Downsize panel

1. Connect WheelTireUpsizeDownsizePlugin.

schema.yaml

Plugins:
  - WheelTireUpsizeDownsizePlugin

2. Combine Wheel/Tire diameters into one field.

ItemConverter

protected override void AddWheels(Item item, Product product, IList<Item> productVariants)
{
    // ...
    item.RenameKey("wheel_diameter", WheelTireUpsizeDownsizePlugin.DiameterField);
}

protected override void AddTires(Item item, Product product, IList<Item> productVariants)
{
    // ...
    item.RenameKey("tire_rim", WheelTireUpsizeDownsizePlugin.DiameterField);
}

schema.yaml

wheel_tire_diameter:
  Title: Diameter
  Faceted: true
  DisplayMode: Radio
  Sorting: OrderNumericValueAsc

3. Add the widget UpsizeDownsizeFacetPanel.

config.js

{
  name: 'UpsizeDownsizeFacetPanel',
  type: 'FacetPanel',
  fields: ['wheel_tire_diameter'],
  showAllAlways: true,
  disableCollapse: true,
},

MainContent.rt

<cm:UpsizeDownsizeFacetPanel
  rt-if="this.facets.length === 1 && this.isVehicleSelected"
  class="cm_upsize-downsize"
  template="fitmentSearch/upsizeDownsizeFacetPanel"
/>

4. Replace the fields wheel_diameter and tire_rim with wheel_tire_diameter on the client.

config.js or via window.Convermax.config in the theme

const wheelsFields = ['wheel_tire_diameter', 'wheel_width', 'wheel_bolt_pattern'];
const tiresFields = ['tire_width', 'tire_aspect', 'wheel_tire_diameter'];

5. For the FacetBarWheels/FacetBarTires widgets add the setting minFacetCount: 2.

config.js

{
  name: 'FacetBarWheels',
  type: 'FacetBar',
  fields: wheelsFields,
  minFacetCount: 2,
},
{
  name: 'FacetBarTires',
  type: 'FacetBar',
  fields: tiresFields,
  minFacetCount: 2,
},

This is necessary because a common diameter field was made for wheels/tires. And we don’t want to draw a tire panel with one facet for a set of wheels (and vice versa).

Wheel Tire Vehicle Info

1. Connect WheelTireVehicleInfoPlugin.

schema.yaml

Plugins:
  - WheelTireVehicleInfoPlugin

2. Add the widget WheelTireVehicleInfo.

On the desktop, the widget is added to the filter panel as the first element, and on mobile, it is placed in MainContent under SearchVehicleWidget.

config.js

{
  name: 'WheelTireVehicleInfo',
  autoSyncVisualization: { // if AutoSync vehicle visualization is needed
    apiKey: AutoSyncKey,
  },
}

FacetPanelContainer.rt

<cm:WheelTireVehicleInfo
  class="cm_wheel-tire-vehicle-info cm_mobile-hide"
  template="fitmentSearch/wheelTireVehicleInfo"
/>

MainContent.rt

<cm:WheelTireVehicleInfo
  class="cm_wheel-tire-vehicle-info cm_desktop-hide"
  template="fitmentSearch/wheelTireVehicleInfo"
/>

---

You can connect both features, or just one of them.

But if both are connected, the following plugin order should be followed:

• WheelTireUpsizeDownsizePlugin
• WheelTireVehicleInfoPlugin

Because the first plugin affects the second.