Dynamic product page with product variants - almost solved

Ask the community
, ,
1

Hey! I almost have the code for this, but I´m stuck in one little (I think) thing.

I’m using a dinamic page with :

  • Product dataset -ID dynamicDataset
    -A product widget
    -A custom button for the add to cart function - ID cartButton
    -A dropdown - ID sizeSelector - My products have a “Size” product option, with the choices stated as S, M and L. Each dropdown option has the value matched to this Size options-

This is the code:

import { cart } from 'wix-stores'

$w.onReady(() => {
    $w("#dynamicDataset").onReady(() => {
 //gets current item
 let itemObj = $w("#dynamicDataset").getCurrentItem();
 //gets Id of current item
 let productId = itemObj._id;

$w("#cartButton").onClick(() => {
  // selects size option
  let Size = $w('#sizeSelector').value; 

const products = [
  {
    productId,
    "quantity": 1,
    "options": {
      "choices": {
        "Size": "L"
        
      },
    }
  }
]

//add to cart function
cart.addProducts(products)
    .then((updatedCart) => {
      // Products added to cart
      const cartId = updatedCart._id;
      const cartLineItems = updatedCart.lineItems;
    })
    .catch((error) => {
      console.log(error);
    });

});
});

    
});

The thing is, the dropdown is supposed to let you select the size thanks to this piece of code

$w("#cartButton").onClick(() => {
  // selects size option
  let Size = $w('#sizeSelector').value; 
  }

but, as after that I need to add this

const products = [
  {
    productId,
    "quantity": 1,
    "options": {
      "choices": {
        "Size": "L"

The “size”:“L” part “overrides” the dropdown. How could I change that “size” line or what should I do for it to get the value that was selected from the dropdown? Otherwise the code just adds the specific size option stated in the code (L in this case), and what I need is for the client to choose, of course.

Also, how would it be the code to show the dropdown only if the product has size options? and to hide it otherwise.
And, would selection tags work the same as the dropdown? should I have to change anything for it to work or just add the selection tags with the corresponding ID and values?

Please consider I´m a newby at code
Thanks!
Euge

1 Like
2

Hello, if you want size to be the result of the variable you are creating with the element set size to the variable name instead of a hardcoded “L” like this:

“Size” : Size

For the question about hiding the element if there is no size attribute, that depends on how you are populating the data but basically you just need to check if there is data and call .hide() or .show() depending on the result of the if check.

The last question I’m not sure I completely understand yet, so feel free to add more detail if you are still stuck

3

Thank you so much Amanda! It works! I´m so happy, been trying to develop this code for months now and it´s complete and working!

About hidding the element when there is no size attribute, how would the code be for checking if there is this data? Is there any wix api explanation where I could find this?

And about the last question, sorry if I wasn´t clear! Let me try again. The sizeSelector ID corresponds to the dropdown with the size values. I tried replacing the dropdown with selection tags (configured with the corresponding size values and ID), cause it looks better in my design, but it doesn´t work. Do you know if something in the code has to be change for it to work with selection tags instead of a dropdown?

Thanks again!!
Euge