Linking 2 product size selection dropdowns together

Support
#1

Hey guys I am making a clothing website for my brand and was wondering if it was possible to link the size selection dropdown menu on my cart for the product to another size selection dropdown on my product page.

To explain context, on my individual product page I want there to be a size selection dropdown menu next to the “add to cart” button powered by Snipcart itself, obviously with the Snipcart extension once you go to the cart you can select whichever size you want and then proceed to check out, I would like to link both of those size selection dropdown menus so that the user can choose the size they want on the product screen without having to go to the cart itself to see it.

The reason I want to do this is for the user to know the availability of each size of the product via the dropdown menu on the product page without having to press the purchase button and going to the cart itself to check if the size they want is available or not.

I’d imagine the two dropdowns could be linked via a javascript command however I’m not very familiar with these things.

Any feedback would be great, have a nice day :slight_smile:

#2

Hey @LucasGood,

Yes that’s possible. I made a quick demo on Codesandbox available here if you want to see it live.

Basically, you can update the buy button custom field value in JavaScript.

<script>
  const sizePicker = document.getElementById("size");
  const buyButton = document.querySelector(".snipcart-add-item");

  sizePicker.addEventListener("change", (ev) => {
    const val = ev.target.value;

    buyButton.dataset["itemCustom1Value"] = val;
  });
</script>

The key here is to set data-item-custom1-value attribute on the buy button. To do so, since it’s a data attribute, you must use the dataset object on the buy button element.

In the example above, I listen to the change event of the select element on the product page, and update the custom field value when the selected value changes.

Show or Hide Item Custom Field based on Option or Checkbox
#3

Hey Charles,

I just added the script to my HTML file and with a few tweaks I got it to work!

This is exactly what I wanted thank you so much! I appreciate you dedicating the time to helping me with my issue.

My website is gonna be so good ^^.

#4

I think I’ll use this, too! Thanks

1 Like
#5