Getting product color options on custom dynamic Product Page

Hello,
I have a custom dynamic product page that shows product information from the Stores>Products collection via a dynamic dataset. There are also user input elements that allow the customer to select options for the product, and then add the product with those options to the cart (that part works great). However, I’m missing the ability for the customer to select color options for the product. Because the page is dynamic, and each product has different color options, I need to get the current product’s color options from the Options field in the Products collection, and then use that data to populate an object (either a dropdown input with color names or a repeater which changes item color using the product option hex codes). This forum post is very similar to what I’m trying to do: https://www.wix.com/corvid/forum/community-discussion/creating-advanced-dynamic-wix-store-product-pages-with-colors-and-more-done

How do I get the product color options data from the Products collection?
The code below doesn’t seem to work:

$w.onReady(() => {
    $w("#dynamicDataset").onReady(() => {
 //gets current item
 let itemObj = $w("#dynamicDataset").getCurrentItem();
 //get color HEX value?
 let color = itemObj.Color.choices.value
 //get color name?
 let colorName = itemObj.Color.choices.description
    });
});

For reference, the data in the Options field of the Products collection looks like this:

{
    "Color": {
    "optionType": "color",
    "name": "Color",
    "choices": [
        "value": "ff0000",
        "description": "red",
        "inStock": true,
        "visible": true,
        "mainMedia": "wix:image://v1/614034_103e8f4ab0ae4536a38b319d3eb437ed~mv2.png/missing-media.png#originWidth=500&originHeight=500",
        "mediaItems": []
        }
    ]
  }
}

If you put a console.log after the getCurrentItem() line, you will see the structure of the object returned.

 let itemObj = $w("#dynamicDataset").getCurrentItem();
 // the hex color (green) in this stores product example
 let color = itemObj.productOptions.shirtColor.choices[0].value;
 // yours would be
let color = itemObj.productOptions.Color.choices[0].value;

Selection tags would be another option to store the color options. The reference for the array to loop through to populate the element of your choosing:

itemObj.productOptions.Color.choices;

Hi anthonyb,
Thanks! This is super helpful. Was missing the “productOptions” part… forgot to check the field key!

Hello Ezrasmithdesign,
I am currently working with a dynamic page where users can buy eye-wear but I am stuck because I don’t know how to make it so that the user may add options to their product. I was wondering , would be able to share the code that you used to add options to your products?
Thank you,
Aaron

Hi Aaron, You add product options to the addToCart function. For more complex options it can be helpful to create a product options array. Check out this example: https://www.wix.com/corvid/reference/$w.CartIcon.html#addToCart

And here’s the code I used:

$w.onReady(() => {
    $w("#dynamicDataset").onReady(() => {
 //gets current item
 let itemObj = $w("#dynamicDataset").getCurrentItem();
 //gets Id of current item
 let productId = itemObj._id;
 
 //add to cart function
        $w('#cartButton').onClick((cartAdd) => {
 //get selected size options (or whatever options you need for your product)
 let size = $w('#sizeSelector').value;
            $w('#shoppingCartIcon1').addToCart(productId, 1, {
 "choices": {
 "Size": size
                    },
                })
                .then(() => {
                    console.log("Product added");
                })
                .catch((error) => {
                    console.log(error);
                });
        });

Good luck!

*Note that the addToCart function is inside the dynamic dataset onReady function.

I have been struggling with this for so long, I will give it a try now.
Thank you Ezrasmithdesign!

Hi, this code works perfectly. However, do you know how can I add more product options? Lets say size and color? Thank you

For anyone else that’s interested, the code for adding multiple options is quite simple; just add another item in the choices array. Like this:

$w.onReady(() => {
    $w("#dynamicDataset").onReady(() => {
 //gets current item
 let itemObj = $w("#dynamicDataset").getCurrentItem();
 //gets Id of current item
 let productId = itemObj._id;
 
 //add to cart function
        $w('#cartButton').onClick((cartAdd) => {
 //get selected size options (or whatever options you need for your product)
 let size = $w('#sizeSelector').value;
            $w('#shoppingCartIcon1').addToCart(productId, 1, {
 "choices": {
 "Size": size,
 "Second Choice": choice
                    },
                })
                .then(() => {
                    console.log("Product added");
                })
                .catch((error) => {
                    console.log(error);
                });
        });

@Ezrasmithdesign you say “There are also user input elements that allow the customer to select options for the product, and then add the product with those options to the cart (that part works great).” could you please share your code for this? I’m struggling to display the ‘size’ options for the products in a dropdown box.

@ivanfransiga I can´t make it work, is it #sizeSelector just a dropdown? does it populate that product variation options? Also I´m not sure what #shoppingCartIcon1 is, as I changed it with the ID of my cart Icon but i get this error
" Argument of type ‘{ choices: { Size: string[]; }; }’ is not assignable to parameter of type ‘AddToCartOptions’. Property ‘customTextFields’ is missing in type ‘{ choices: { Size: string[]; }; }’ but required in type ‘AddToCartOptions’."

It´s really simple and yet I can´t make it work, and I really need it. Could somebody help?
Thanks!
Eugenia

same! could you solve it?

@eugeniagarat No, I still haven’t managed to find a way around it

Hi Ezra, I realised I didn’t pose my initial question (below) as a “reply”, could you help by any chance?

In the code I shared above, you need to define the other option variables, and link it to the input element:
//add to cart function $w ( ‘#cartButton’ ). onClick (( cartAdd ) => { //get selected size options (or whatever options you need for your product)

let size = $w ( #sizeSelector ). value ;
(define other choices here with: let choice = $w(#’input’).value;)
$w ( ‘#shoppingCartIcon1’ ). addToCart ( productId , 1 ,{ “choices” :{ “Size” : size ,“Second Choice”: choice },}). then (() => { console . log ( “Product added” );}). catch (( error ) => { console . log ( error );});});

Sorry I wasn’t more clear before! Let me know if you are still stuck.