Get related variants from entry and then show products for related variants and then loop only the variants that are related in commerce

Question

Struggling with this one. If anyone can help me...?

I have a section of entries called Vehicles. In this I have a related Variants field type. This has many different variants that related to each vehicle.

On each vehicle page, I want to loop through the main products that are related by their variants but then loop through and only show the related variants that are link to the vehicle.

As an example.

I have a vehicle that has the following related variants. Product A - Variant 1
Product A - Variant 2
Product A - Variant 3
(product A also has variant 4, 5 and 6)

Product B - Variant 2
Product B - Variant 3
Product B - Variant 6
(product B also has variant 1, 4 and 5)

On the vehicles page. I want to show products A and products B with a list in each showing the related variants. So as per the example. Product A - would show Var1, 2 and 3 and Product B - would show Var2, 3 and 6.

Here is some code I have as a starting point:

{% set selectedVehicle = craft.entries
  .section('vehicles')
  .id(vehicle)
  .with( [
    'relatedVariants',
    'vehicleBrand',
    'oemFixings',
    'afterMarketFixings'
  ])
  .one() %}

{% set variantsQuery = selectedVehicle.relatedVariants %}
{% set variants = variantsQuery.all() %}

{% set wheelSpacers = craft.products
  .type('wheelSpacers')
  .hasVariant(variantsQuery)
  .orderBy('title ASC')
  .all() %}

Answer 1

After some further trial and error I have made this work like so. However, it feels like there is or should be a simpler method....what am I missing or what is a better approach?

{% set selectedVehicle = craft.entries
  .section('vehicles')
  .id(vehicle)
  .with( [
    'vehicleBrand',
    'oemFixings',
    'afterMarketFixings'
  ])
  .one() %}

{% set variantsQuery = selectedVehicle.relatedVariants %}

{% set variantsByIDS = [] %}

{% for variant in variantsQuery %}
  {% set variantsByIDS = variantsByIDS|push(variant.id) %}
{% endfor %}

{% set wheelSpacers = craft.products
  .type('wheelSpacers')
  .hasVariant(variantsQuery)
  .orderBy('title ASC')
  .all() %}


Now Show the products and then loop only the variants that are related to the vehicle.

{% for product in wheelSpacers %}
  {% set productVars = product.variants|filter(purchasable => purchasable.id in variantsByIDS) %}
  <div class="mb-6">
    <h2>{{ product.title }}</h2>
    <div class="mb-3">
      <p>{{ product.id }}</p>
      <p>This product has <strong class="text-sea-500">{{ product.variants|length }} options</strong> in total</p>
      <p>Only <strong class="text-sea-500">{{ productVars|length }} options</strong> are related</p>
    </div>
    
    
    {% for purchasable in productVars %}
      {{ purchasable.title }}
    {% endfor %}
  </div>
{% endfor %}