Push price from text to cart

Discussion Ask a question
, ,
1

Hi,
Im trying to set up a wix store for custom made stickers. I will base my price on material price * sqr meter (customer input size and qty). Addition to this I will give a bulk discount.
I have solved most of the calculations in some user text input fields and show the result in a text field. How ever, now I have no idea how to “push” this price to the cart when the customer click on order.
Any help would be super!

import wixData from ‘wix-data’ ;

let choices = {};
let thisProduct ;

$w . onReady ( function () {
$w ( “#widthInput” ). onInput ( updatePrice );
$w ( “#heightInput” ). onInput ( updatePrice );
$w ( “#quantity” ). onInput ( updatePrice );

$w ( "#dynamicDataset" ). onReady (() => { 
    **const**  product  =  $w ( "#dynamicDataset" ). getCurrentItem (); 
    thisProduct  =  $w ( "#dynamicDataset" ). getCurrentItem (); 
    $w ( "#image" ). src  =  product . mainMedia ; 
    populateOptionsRepeater (); 

}) 

$w ( "#optionsRepeater" ). onItemReady (( $item ,  itemData ) => { 
    $item ( "#optionDropdown" ). label  =  itemData . name ; 
    $item ( "#optionDropdown" ). placeholder  =  `Please select a  ${  itemData . optionType  } ` 
    $item ( "#optionDropdown" ). options  =  itemData . choices . map (( choice ) => ({  "label" :  choice . description ,  "value" :  choice . description  })); 
    $item ( "#optionDropdown" ). onChange (() => { 
        choices [ itemData . name ] =  $item ( "#optionDropdown" ). value ; 
    }) 
}) 

**const**  populateOptionsRepeater  = () => { 
    **const**  optionsData  = []; 
    **const**  optionKeys  =  Object . keys ( thisProduct . productOptions ); 

    optionKeys . forEach (( key ,  index ) => { 
        **const**  option  =  thisProduct . productOptions [ key ]; 
        optionsData . push ({ ... option ,  _id :  index . toString () }) 

        **if**  ( index  +  1  ===  optionKeys . length ) { 
            console . log ( optionsData ); 
            $w ( "#optionsRepeater" ). data  =  optionsData ; 
        } 
    }) 
}

});

// Function to update the price based on input values
function updatePrice ( ) {
// Get the input values
const width = Number ( $w ( “#widthInput” ). value );
const height = Number ( $w ( “#heightInput” ). value );
const quantity = Number ( $w ( “#quantity” ). value );

// Convert width and height to meters 
**const**  widthM  =  width  /  100 ; 
**const**  heightM  =  height  /  100 ; 

// Calculate area and total price 
**const**  area  =  widthM  *  heightM ; 

**if**  (( area  *  quantity ) >  1 ) { 
    **const**  totalPrice  =  area  *  1200  *  quantity ; 
    $w ( "#price" ). text  =  totalPrice . toFixed ( 0 ) +  ";-" ; 
    $w ( "#qtyPrice" ). text  =  "("  + ( totalPrice  /  quantity ). toFixed ( 0 ) +  " Kr/st)" ; 
    $w ( "#discountPrcnt" ). show (); 
}  **else**  { 
    **const**  totalPrice  =  area  *  1600  *  quantity ; 
    $w ( "#price" ). text  =  totalPrice . toFixed ( 0 ) +  ";-" ; 
    $w ( "#qtyPrice" ). text  =  "("  + ( totalPrice  /  quantity ). toFixed ( 0 ) +  " Kr/st)" ; 
    $w ( "#discountPrcnt" ). hide (); 
}

}

$w ( “#quantity” ). onInput (() => {
const width = Number ( $w ( “#widthInput” ). value );
const height = Number ( $w ( “#heightInput” ). value );
const quantity = Number ( $w ( “#quantity” ). value );

// Convert width and height to meters 
**const**  widthM  =  width  /  100 ; 
**const**  heightM  =  height  /  100 ; 

// Calculate area and total price 
**const**  minArea  =  0.2 ; 
**const**  area  =  widthM  *  heightM ; 
**const**  minQuantity  =  minArea  /  area  +  0.5 ; 

**if**  (( area  *  quantity ) >  minArea ) { 
    $w ( "#price" ). show (); 
    $w ( "#qtyPrice" ). show (); 
    $w ( "#quantity" ). style . borderColor  =  "#232323" ; 
    $w ( "#minQtyTxt" ). hide (); 
    $w ( "#minQtyBox" ). hide (); 
    updatePrice ; 
}  **else**  { 
    $w ( "#price" ). hide (); 
    $w ( "#qtyPrice" ). hide (); 
    $w ( "#quantity" ). style . borderColor  =  "red" ; 
    setTimeout (() => {  $w ( "#quantity" ). style . borderColor  =  "#232323" ; },  4000 ); 
    $w ( "#minQtyTxt" ). text  =  "Min. antal är "  +  minQuantity . toFixed ( 0 ); 
    $w ( "#minQtyTxt" ). show (); 
    $w ( "#minQtyBox" ). show (); 
    setTimeout (() => {  $w ( "#minQtyBox" ). hide (); },  4000 ); 
    setTimeout (() => {  $w ( "#minQtyTxt" ). hide (); },  4000 ); 
}

})

$w ( “#widthInput” ). onInput (() => {
const width = Number ( $w ( “#widthInput” ). value );
const height = Number ( $w ( “#heightInput” ). value );
const quantity = Number ( $w ( “#quantity” ). value );

// Convert width and height to meters 
**const**  widthM  =  width  /  100 ; 
**const**  heightM  =  height  /  100 ; 

// Calculate area and total price 
**const**  minArea  =  0.2 ; 
**const**  area  =  widthM  *  heightM ; 
**const**  minQuantity  =  minArea  /  area  +  0.5 ; 

**if**  (( area  *  quantity ) >  minArea ) { 
    $w ( "#price" ). show (); 
    $w ( "#qtyPrice" ). show (); 
    $w ( "#quantity" ). style . borderColor  =  "#232323" ; 
    updatePrice ; 
}  **else**  { 
    $w ( "#price" ). hide (); 
    $w ( "#qtyPrice" ). hide (); 
}

})

$w ( “#heightInput” ). onInput (() => {
const width = Number ( $w ( “#widthInput” ). value );
const height = Number ( $w ( “#heightInput” ). value );
const quantity = Number ( $w ( “#quantity” ). value );

// Convert width and height to meters 
**const**  widthM  =  width  /  100 ; 
**const**  heightM  =  height  /  100 ; 

// Calculate area and total price 
**const**  minArea  =  0.2 ; 
**const**  area  =  widthM  *  heightM ; 
**const**  minQuantity  =  minArea  /  area  +  0.5 ; 

**if**  (( area  *  quantity ) >  minArea ) { 
    $w ( "#price" ). show (); 
    $w ( "#qtyPrice" ). show (); 
    $w ( "#quantity" ). style . borderColor  =  "#232323" ; 
    updatePrice ; 
}  **else**  { 
    $w ( "#price" ). hide (); 
    $w ( "#qtyPrice" ). hide (); 
}

})