Custom made quotation request system with possible multiple products ?

Ask the community
, ,
1

Hey everyone, using a tutorial from Code Queen, I could manage implementing a quotation request form on my website. Basically the code collects data from the product page and sends it to a different page where everything will be sent through a form and I will be notified. link to video https://www.youtube.com/watch?v=TSDOUquQxsU . Now I would like to tune this feature, in a way that the user can select multiple products and they will all keep saving in this quotation page (sort of a wishlist thing but with the possibility of sending a quote request).

Here’s the code on the product page.
import { session } from ‘wix-storage’ ;
import wixLocation from ‘wix-location’ ;

$w.onReady( function () {

$w( "#contactButton" ).onClick((event) => { 
    $w( '#productPage1' ).getProduct() 
        .then((product) => {

let theProduct = product._id;
session.setItem( “product” , theProduct);
})
.then(() => {
wixLocation.to( “/quote” );
})
. catch ((error) => {
console.log(error);
});
});

});

It works perfectly, but when I leave the quote page and add another product, it replaces the first one. All I need is having all selected products stored in the quote page through ‘wix-storage’ session.

Code on Quote page :
import { quoteRequest } from ‘backend/notifications’ ;
import wixCrm from ‘wix-crm’ ;
import { session } from ‘wix-storage’ ;
import wixData from ‘wix-data’ ;

$w.onReady( function () {
let product = session.getItem( “product” );

$w( "#dataset1" ).onReady(() => { 
    console.log( "The product dataset is ready to be filtered with the following ID:"  + product); 

    $w( "#dataset1" ).setFilter(wixData.filter() 
            .eq( "_id" , product) 
        ) 
        .then(() => { 
            console.log( "The product is"  + product); 
            $w( '#formStrip' ).expand(); 
            $w( '#errorStrip' ).collapse(); 
        }) 
        . catch ((err) => { 
            console.log(err); 
            $w( '#formStrip' ).collapse(); 
            $w( '#errorStrip' ).expand(); 
        }); 
}); 

$w( "#requestDataset" ).onBeforeSave(() => { 
    $w( "#dataset1" ).onReady(() => {

let productFound = $w( “#dataset1” ).getCurrentItem();
let theName = productFound.name;
let theImage = productFound.mainMedia;
let theSku = productFound.sku;

        $w( "#requestDataset" ).setFieldValues({

“productName” : theName,
“productId” : product,
“sku” : theSku,
“productImage” : theImage

        });

let checkFirst = $w( ‘#firstName’ ).valid;
let checkLast = $w( ‘#lastName’ ).valid;
let checkPhone = $w( ‘#phone’ ).valid;
let checkEmail = $w( ‘#email’ ).valid;

if (checkEmail && checkPhone && checkLast && checkFirst) {
$w( ‘#requestDataset’ ).save();
$w( ‘#errorText’ ).hide();
} else {
$w( ‘#errorText’ ).show();
console.log( “Canceling save” );
return false ;
}

    }); 

});

$w( “#requestDataset” ).onAfterSave(() => {
quoteRequest();
console.log( “A new notification was sent to all contributors.” );
$w( ‘#formStrip’ ).collapse();
$w( ‘#errorStrip’ ).collapse();
$w( ‘#successStrip’ ).expand();
$w( “#header1” ).scrollTo();
});

});

I think the work needs to be done on the quote page code. But I don’t know how, can you please help ?

Thanks