I am trying to create a booking form to provide bike service where on the selection of bike company and bike model, details like service charge and spare parts price comes up from a database. I have been able to do upto this. After pressing the continue button I want to take the user to booking page, where details like Bike Company, Bike Model, Service charge, Spare part Charge are already filled by the details from the previous page. I linked the values to a dataset on the first page and then stored the current id in session memory. When I am retrieving this id on the booking page and show the required details it is not working.
I am new to wix and have basically no idea of coding. Any help is very much appreciated. Thanks in advance.
Coding on First Page:
import wixData from ‘wix-data’ ;
import { session } from ‘wix-storage’ ;
$w . onReady ( function () {
uniqueDropDown1 ();
});
export function button11_click ( event ) {
$w ( ‘#box4’ ). expand ();
$w ( ‘#box1’ ). show ();
}
function uniqueDropDown1 (){
wixData . query ( “ClutchPlateChange” )
. limit ( 1000 )
. find ()
. then ( results => {
const uniqueTitles = getUniqueTitles ( results . items );
$w ( “#dropdown1” ). options = buildOptions ( uniqueTitles );
});
function getUniqueTitles ( items ) {
const titlesOnly = items . map ( item => item . company );
return [… new Set ( titlesOnly )];
}
function buildOptions ( uniqueList ) {
return uniqueList . map ( curr => {
return { label : curr , value : curr };
});
}
}
export function dropdown1_change ( event , $w ) {
uniqueDropDown2 ();
$w ( “#dropdown2” ). enable ();
}
function uniqueDropDown2 (){
wixData . query ( “ClutchPlateChange” )
. contains ( “company” , $w ( “#dropdown1” ). value )
. limit ( 1000 )
. find ()
. then ( results => {
const uniqueTitles = getUniqueTitles ( results . items );
$w ( “#dropdown2” ). options = buildOptions ( uniqueTitles );
});
function getUniqueTitles ( items ) {
const titlesOnly = items . map ( item => item . model );
return [… new Set ( titlesOnly )];
}
function buildOptions ( uniqueList ) {
return uniqueList . map ( curr => {
return { label : curr , value : curr };
});
}
}
export function dropdown2_change ( event ) {
$w ( “#button3” ). enable ();
}
export function button3_click ( event , $w ) {
$w ( ‘#box6’ ). show ();
wixData . query ( “ClutchPlateChange” )
. eq ( “model” , $w ( ‘#dropdown2’ ). value )
. find ()
. then ( ( results ) => {
if ( results . items . length > 0 ) {
let firstItem = results . items [ 0 ];
$w ( ‘#input8’ ). value = firstItem . serviceCharge ;
$w ( ‘#input9’ ). value = firstItem . sparePrice ;
$w ( ‘#input5’ ). value = firstItem . serviceType ;
$w ( ‘#input6’ ). value = firstItem . company ;
$w ( ‘#input7’ ). value = firstItem . model ;
}
})
. catch ( ( err ) => {
let errorMsg = err ;
});
}
export function button13_click ( event ) {
$w ( ‘#box4’ ). collapse ();
}
export function button4_click ( event , $w ) {
session . setItem ( ‘serviceid’ , $w ( ‘#dataset1’ ). getCurrentItem ()._id );
}
Coding on Booking Page
import { session } from ‘wix-storage’ ;
import wixData from ‘wix-data’ ;
$w . onReady ( function () {
// here comes the initialization code
let serviceid = session . getItem ( ‘serviceid’ );
wixData . query ( “BookingDetails” )
. eq ( “_id” , serviceid )
. find ()
. then ( ( results ) => {
if ( results . items . length > 0 ) {
let items = results . items ;
let item = items [ 0 ];
$w ( “#input1” ). value = item . bikeCompany ;
$w ( “#input2” ). value = item . bikeModel ;
$w ( “#input3” ). value = item . estimatesServiceCharge ;
$w ( “#input4” ). value = item . estimatedSparePrice ;
console . log ( item . _id )
}
else {
$w ( “#input1” ). value = “0.00” ;
$w ( “#input2” ). value = “1.00” ;
}
} )
. catch ( ( error ) => {
let errorMsg = error . message ;
let code = error . code ;
} );
});
Screenshot of 1st page
Screenshot of booking page
