Getting the selected product option in product page API

Ask the community
,
1

Today im using the .getProduct() method in order to have the information for the product in question in the Product Page.
I Do get the availble optinos / variants for that product. But im not able to get the selected option.
I Cannot find any way to get the user selected option with code.

Any Suggestions?

2

If you are using the .addToCart() function on the WIX-Stores API, then you need to provide an object with the choices, for example:

let options = {
  "choices": {
    Color: dropdownColor.value,
    Size: dropdownSize.value
  }
}
$w('#shoppingCartIcon').addToCart(productId, inputQtd, options)
3

But how can I get the value from that dropdown? it’s part of the Product Page and that dropdown is native, Therefore I cannot select it with $w() and get it’s value.

4

I don’t think it is possible to know what is selected, unless the costumer puts the selected item in the cart.

Can you tell me what you need to do, so I can try to figure it out?

5

Im not using the ‘wix cart’ in my store, Therefore I have no ‘add to cart button’. I have a custom one that one made that redirects the user.

When that button redirects, He takes the product info. but with options that info on the parent product is not relevant. I need go understand which option was selected for me to redirect the user correctly.

6

But you do use the WIX Stores Product Page? If so, you cannot have access to elements of that page, as I am aware of.

As I understood, you want to have access to the DROPDOWN element on the WIX Store Product Page and I think this is impossible.

If you want, you could create a custom product page, then you would have access to the product that was selected. Just like this function that creates the options of the dropdown to select the product:

function createOptionsForDropdown(options, key) {
 const optionsForDropdown = options
 .filter(option => option.inStock)
 .map(option => {
 return {
                label: option[key].toString().toUpperCase(),
                value: option[key].toString().toUpperCase(),
                inStock: option.inStock.toString().toUpperCase()
 }
 })
 return optionsForDropdown
}