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.

<form method="get" action="">
  <!-- Variant Select Dropdown -->
  <label for="variant-select">Select Variant:</label>
  <select id="variant-select" name="variant" onchange="this.form.submit()">
    {% for variant in product.variants %}
      <option 
        value="{{ variant.id }}" 
        {% if variant.id == request.params.variant %}selected{% endif %}
      >
        {{ variant.title }}
      </option>
    {% endfor %}
  </select>

  <!-- Car Make Select Dropdown -->
  <label for="car-make">Select Make:</label>
  <select id="car-make" name="make" onchange="this.form.submit()">
    <option value="toyota" {% if request.params.make == 'toyota' %}selected{% endif %}>Toyota</option>
    <option value="ford" {% if request.params.make == 'ford' %}selected{% endif %}>Ford</option>
    <option value="bmw" {% if request.params.make == 'bmw' %}selected{% endif %}>BMW</option>
  </select>

  <!-- Car Model Dropdown -->
  <label for="car-model">Select Model:</label>
  <select id="car-model" name="model">
    {% assign selected_variant = product.variants | where: "id", request.params.variant | first %}
    {% assign selected_make = request.params.make %}

    {% if selected_make == 'toyota' and selected_variant.id == 123456789 %}
      <option value="corolla">Corolla</option>
      <option value="camry">Camry</option>
      <option value="prius">Prius</option>
    {% elsif selected_make == 'ford' and selected_variant.id == 987654321 %}
      <option value="f150">F-150</option>
      <option value="mustang">Mustang</option>
    {% else %}
      <option value="default">No models available</option>
    {% endif %}
  </select>
</form>

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.

<script>
  window.productData = {{ product | json }};
</script>

HTML Form:

<form id="car-selection-form">
  <select id="variant-select">
    {% for variant in product.variants %}
      <option value="{{ variant.id }}">{{ variant.title }}</option>
    {% endfor %}
  </select>

  <select id="car-make">
    <option value="toyota">Toyota</option>
    <option value="ford">Ford</option>
    <option value="bmw">BMW</option>
  </select>

  <select id="car-model">
    <option value="default">Select a model</option>
  </select>
</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