Getting selected option value

[mertcansolak]

Hi everyone,

I added a form to my design that lists car makes and models. I want to filter the form based on the selected variant. Is there any code to add available in Shopify to get the selected variant data?

I want to filter the list based on the selected variant this way.

[rajweb]

Hey @mertcansolak ,

You can leverage Shopify’s forms and query parameters to filter the options. The idea is to use the variant selection to reload the form and show only relevant car models based on the selected variant.

Liquid Code (product-template.liquid or main-product.liquid):

Here’s a code example where the form submits on variant change, and the car models are filtered based on the selected variant.

How It Works:

1. When the user selects a variant or make , the page reloads.

2. The selected values are passed through the URL query parameters.

3. The car model options are filtered and displayed accordingly based on the selection.

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

[rajweb]

@mertcansolak ,

With JS:

Liquid Code (product-template.liquid or main-product.liquid):

Add this inside the product form or where you need it.

HTML Form:

Javascript:

This JavaScript filters the car model list based on the selected variant.

document.addEventListener('DOMContentLoaded', function () {
  const productData = window.productData;
  const variantSelect = document.getElementById('variant-select');
  const carMakeSelect = document.getElementById('car-make');
  const carModelSelect = document.getElementById('car-model');

  // Example car models mapped by car make and variant ID.
  const carModelsByVariant = {
    "toyota": {
      "123456789": ["Corolla", "Camry", "Prius"], // Variant ID: 123456789
      "987654321": ["Yaris", "Highlander"]
    },
    "ford": {
      "123456789": ["F-150", "Mustang"],
      "987654321": ["Fiesta", "Explorer"]
    }
  };

  // Event listener for variant change
  variantSelect.addEventListener('change', updateCarModels);

  // Function to update the car model list
  function updateCarModels() {
    const selectedVariantId = variantSelect.value;
    const selectedMake = carMakeSelect.value;

    const models = carModelsByVariant[selectedMake][selectedVariantId] || [];
    carModelSelect.innerHTML = '';

    // Populate car model options
    if (models.length) {
      models.forEach(model => {
        const option = document.createElement('option');
        option.value = model.toLowerCase();
        option.textContent = model;
        carModelSelect.appendChild(option);
      });
    } else {
      const defaultOption = document.createElement('option');
      defaultOption.value = 'default';
      defaultOption.textContent = 'No models available';
      carModelSelect.appendChild(defaultOption);
    }
  }

  // Optional: Listen for car make change to update models
  carMakeSelect.addEventListener('change', updateCarModels);
});

Result:

1. When the user selects a varient, th car modal will update based on the selected car make and variant combination.

2. You can expand the cartModalsByVariant object to include your specific data. Adjust the mappings as needed.

thanks

[mertcansolak]

Hi @rajweb ,

First of all, thanks for helping.

Actually, the logic of your code works well, and I have tested it, and it works. However, what I want is as you can see in the image below, the “Number of Seats” variant comes from the product itself. I manually coded the vehicle selection part. Not every vehicle has every seat count, so I want to match it with the selected value. I’ll leave my example JSON code below. You can see the parameter.

“Koltuk” means seat in turkish by the way

const carData = {
    "Alfa Romeo": {
      "147": {
        "2001-2009": ["4 Koltuk", "5 Koltuk"]
      },
      "Giulietta": {
        "2015-2021": ["4 Koltuk"]
      }
    },
    "Audi": {
      "A1": {
        "2011-2016": ["2 Koltuk", "4 Koltuk"]
      },
      "A3": {
        "1997-2003": ["4 Koltuk", "5 Koltuk"],
        "2003-2012": ["4 Koltuk"],
        "2012-2021": ["5 Koltuk"],
        "2016-Sonrası": ["4 Koltuk", "5 Koltuk"]
      }
    }
  };

What I want to do is match the selected value in the “Number of Seats” part in the image with the “Number of Seats” of the models. This will prevent the dropdown menu from listing every brand and model. The reason I want to do it this way is that the price changes based on the seat count, so I want to keep that variant within the product.

I’m wondering if it’s possible to perform the operation based on the selected value on the screen without adding an extra dropdown menu externally.

Thanks!

[namphan]

Hi @mertcansolak ,

Please send the website link, I will check it for you