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
  IsMultiselected: true
  IsSingleValue: true
  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.

Note

In the case where there is an AutoSync integration in the store, it is worth adding rt-if="window.innerWidth > N" for the desktop widget; the width can be taken from the search.css variable $mobile-max-width value. Example — https://github.com/Convermax/SiteSearch/pull/6165

config.js

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

FacetPanelContainer.rt

<cm:WheelTireVehicleInfo
  rt-if="window.innerWidth > 989"
  class="cm_wheel-tire-vehicle-info"
  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.