Passing Variable Price Info into a Text field

Ask the community
,
1

I have a text field that I am trying to pass variable prices into. This is the code that I have to pass a normal price into the field:

function setProductTextInfo ( productInfo ) {
$w ( ‘#ribbon’ ). text = productInfo . ribbon ;
$w ( ‘#productName’ ). text = productInfo . name ;
$w ( ‘#productDescription’ ). html = productInfo . description ;
$w ( ‘#productPrice’ ). text = productInfo . formattedPrice ;
}

The #productPrice is what needs to be a variable.

This is the console log of what I’m passing into each field. The top is the product price that’s being passed now and the bottom is what needs to be passed.

Any suggestions?

1030×1268 154 KB

2

Looks like it should be something like

productInfo.variants[0].variant.formattedPrice
3

That worked for the one price so I’m closer! I have multiple variants though. Do you know how to make the text update as the user selects each variant?

4

This is Wix Stores, right? Not an expert in it, but it shouldn’t be too difficult. Could you show a bit more of the code, especially the part when you click a variant?

5

@giri-zano Technically, yes it is in Wix Stores. I have the regular product page and then I’ve just passed info from that product into a custom built one.

This is a function that was written to update the colors and sizes:

function updateProductOptions ( options ) {
try {
const addIdsToColors = options . Polish . choices . map (( item , index ) => {
return {
_id : index . toString (),
value : item. value ,
colorName : item . description ,
inStock : item . inStock ,
mediaItems : item . mediaItems ,
visible : true
};
});
$w ( ‘#colorsRepeater’ ). data = addIdsToColors ;
} catch ( err ) { console . error ( err ); }

**try**  { 
    **const**  setSizes  =  options .  Size .  choices .  map (( item ) => { 
        **return**  { 
            label :  item .  description , 
            value :  item .  value 
        }; 
    }); 
    $w ( '#sizesDropdown' ).  options  =  setSizes ; 

}  **catch**  ( err ) {  
    console .  error ( err ); }

}

I would think that something similar to this can be done to update the price but everything I’ve tried so far has been unsuccessful. Also, when adding to cart the correct price appears. Not sure if that helps

6

@aercotees3 I meant the part where you click a variant, something like an onClick(). Basically, we need an index number, so we can pass that on to a function which displays the price and substitutes the [0] for the index.
DO you display variants yourself, like in a repeater?

7

@giri-zano This is what I have for changing the size:
export function sizesDropdown_change ( event ) {
productOptions . Size = event . target . value ;
validateProductOptions ();
}

This is getting info from the Product Options though, not the variant section. I’m wondering if I should change it so that it gets info from the variants instead of the other sections

8

The sizes are displayed in a dropdown and the colors are displayed in a repeater, but there is nothing displaying the info from the product variants. Is this where I’m going wrong? I think I need a function that gets info from the product variants and then passes that into the price field

9

@aercotees3 Yes. If you want to display info from that variants-array of objects, you will need to get an index from somewhere, so you can pass that on and replace that[0] with the index number of the array in question.

10

I answered above. Order is mixed up.