SOLVED Session Item not working for dropdown. What am I doing wrong? Need an answer very soon

Ask the community
, ,
1

The URL:
https://elizabethjhay.wixsite.com/mysite-14/checkoutpage
The Goals

  1. I am trying to get the session items set from a previous page to populate on this page. The item is being pulled from a database.

  2. Once the Category and Title are set I want the level field to populate with the options that go with the database item.

  3. When the level is chosen I want the correct price to populate.

import wixData from 'wix-data';
import wixLocation from 'wix-location';
import { session } from 'wix-storage';
import wixCrm from 'wix-crm';
import { createContact } from 'backend/createContact';
import wixWindow from 'wix-window';
import {createMyPayment} from 'backend/pay';
import {createMyPayment2} from 'backend/pay';
import wixPay from 'wix-pay';
import { sendEmail } from 'backend/email';
//-------------Session Items------------//
$w.onReady(function () {
console.log(session.getItem("title"))
console.log(session.getItem("type"))
console.log(session.getItem("businessName"))
console.log(session.getItem("firstName"))
console.log(session.getItem("lastName"))
console.log(session.getItem("email"))
console.log(session.getItem("phone"))
//-------------Form Submission-------------//
function dataset1_ready() {
let title = session.getItem("title"), 
type = session.getItem("type");
$w("#category").text = title,
$w("#type").text = type,

//-------------Level-------------//
function uniqueDropDown1 (){
    wixData.query("StoreProducts")
        .contains("type", $w("#type").text)
        .limit(1000)
        .find()
        .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
        $w("#levelDropdown").options = buildOptions(uniqueTitles);
      });

 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.level);
 return [...new Set(titlesOnly)];
    }
 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
        });
    }
}
//-------------Price-------------//
wixData.query("StoreProducts")
  .contains("title", $w("#category").text && "type", $w("#type").text && "level", $w("#levelDropdown").value)
  .find()
  .then( (results) => {
    $w("#price").value = "price"
    })
  .catch( (error) => {
 let errorMsg = error.message;
 let code = error.code;
  });
//-------------Custom Payment-------------//
if (session.getItem("title") === 'Custom Payment'){
$w('#levelDropdown').collapse()
}
else {
$w('#levelDropdown').expand()
}
}
});
//-------------Create Payment------------//
let paymentOptions = {
  userInfo: {
    firstName: (session.getItem("firstName")),
    lastName: (session.getItem("lastName")),
    phone: (session.getItem("phone")),
    email: (session.getItem("email"))
  }
}
//-------------Complete Payment-------------//
export function buyNow_click(event) {
if (session.getItem("title") === 'Custom Payment'){
createMyPayment2($w('#type').text,  $w('#price').value,)
.then( (payment) => {
wixPay.startPayment(payment.id, paymentOptions);
    } );
}
else if (session.getItem("level") === 'Custom') {
createMyPayment2($w('#type').text,  $w('#price').value,)
.then( (payment) => {
wixPay.startPayment(payment.id, paymentOptions);
    } );
}
else {
createMyPayment($w('#type').text, $w('#qty').value, $w('#price').value,)
.then( (payment) => {
wixPay.startPayment(payment.id, paymentOptions);

});
}

//-------------Form Submission-------------//
if ($w('#formIdInput').value === null) {  
     $w('#formIdInput').hide();
        } else {
    console.log(session.getItem("title"))
    console.log(session.getItem("businessName"))
    console.log(session.getItem("firstName"))
    console.log(session.getItem("lastName"))
    console.log(session.getItem("email"))
    console.log(session.getItem("phone"))
    $w('#formIdInput').value = session.getItem("formId");
        }
//-------------Insert Code-------------//
let toInsert = {
"formId": session.getItem('formId'),
"title": session.getItem('title'),
"type": session.getItem('type'),
"level": session.getItem('level'),
"member": session.getItem('member'),
"price": $w('#price').value,
"quantity": $w('#qty').value,
"total": ($w('#price').value)*($w('#qty').value),
"businessName": session.getItem('businessName'),
"firstName": session.getItem('firstName'),
"lastName": session.getItem('lastName'),
"email":session.getItem('email'),
"phone":session.getItem('phone'),
}
wixData.insert("Chamber_Payments_Database", toInsert)
    .then( (results) => {
 let item = results; 
    } )
    .catch( (err) => {
 let errorMsg = err;
    } );
}

Just in case.
The previous page url 1:
https://elizabethjhay.wixsite.com/mysite-14/donations

//-------------Imports-------------//
import { session } from 'wix-storage';
import wixLocation from 'wix-location';
//-------------Download Business Directory-------------//
$w.onReady(function () {
//-------------Onclick Value------------//
$w("#donationButtonCovid").onClick( (event) => {
session.setItem("pageName", "Covid")
$w('#donationButtonCovid').link = wixLocation.to("/payment-personal-data")
})
$w("#sponsorButtonmorning").onClick( (event) => {
session.setItem("pageName", "Morning")
$w('#sponsorButtonmorning').link = wixLocation.to("/payment-personal-data")
})
$w("#donationButtonflower").onClick( (event) => {
session.setItem("pageName", "Flower")
$w('#donationButtonflower').link = wixLocation.to("/payment-personal-data")
})
$w("#sponsorButtonhayride").onClick( (event) => {
session.setItem("pageName", "Hayride")
$w('#sponsorButtonhayride').link = wixLocation.to("/payment-personal-data")
})
$w("#sponsorButtonstreet").onClick( (event) => {
session.setItem("pageName", "Street")
$w('#sponsorButtonstreet').link = wixLocation.to("/payment-personal-data")
})
});

The previous page url 2:
https://elizabethjhay.wixsite.com/mysite-14/payment-personal-data

//-------------Imports-------------//
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import { session } from 'wix-storage';
import wixCrm from 'wix-crm';
import { createContact } from 'backend/createContact';

//-------------Phone Format------------//

export function phone_input(event) {
 let number = $w('#phone').value;
    number = formatPhoneNumber(number);
 if (number) {
        $w('#phone').value = number;
    }
}

function formatPhoneNumber(phoneNumberString) {
 let result = null;
 var cleaned = phoneNumberString.replace(/\D/g, '');
 if (cleaned.length >= 10 && cleaned.length <= 12) {
 var match = intlMatch(cleaned);
 if (match) {
 var intlCode = (match[1] ? '+' + match[1] + ' ' : '');
 if (!match[1] || match[1] === '1') {
 // US Format
                match = usMatch(match[2]);
                result = [intlCode, '(', match[1], ') ', match[2], '-', match[3]].join('');
            } else if (match[1] === '44') {
 // UK format
                match = ukMatch(match[2]);
                result = [intlCode, '(', match[1], ') ', match[2], ' ', match[3]].join('');
            } else {
 // Generic format
                match = genericMatch(match[2]);
                result = [intlCode, ' ', match[1], '  ', match[2], ' ', match[3], '  ', match[4], ' ', match[5]].join('');
            }
        }
    } else {
 // Error wrong number of digits should be 10, 11 or 12
        console.log("Badly formatted phone number!");
    }
 return result;
}

function intlMatch(matchString) {
 return matchString.match(/^(\d{0,2})?(\d{10})$/);
}

function usMatch(matchString) {
 return matchString.match(/^(\d{3})(\d{3})(\d{4})$/);
}

function ukMatch(matchString) {
 return matchString.match(/^(\d{4})(\d{3})(\d{3})$/)
}

function genericMatch(matchString) {
 return matchString.match(/^(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/);
}
//-------------Autofill------------//
console.log("pageName");
 if (session.getItem('pageName') === 'Covid'){
session.setItem("title", "Donation & Sponsorship")
session.setItem("type","COVID 19 First Responders Fund")
 }
 else if (session.getItem('pageName') === 'Flower'){
session.setItem("title", "Donation & Sponsorship")
session.setItem("type", "Flower Baskets")
 }
 else if (session.getItem('pageName') === 'Hayride'){
session.setItem("title", "Donation & Sponsorship")
session.setItem("type", "Hayride Sponsor")
 }
 else if (session.getItem('pageName') === 'Morning'){
session.setItem("title", "Donation & Sponsorship")
session.setItem("type", "Morning Networking Meeting Breakfast Sponsor")
 }
 else if (session.getItem('pageName') === 'Street'){
session.setItem("title", "Donation & Sponsorship")
session.setItem("type", "Street Fair Sponsorship")
 }
//-------------Session Items------------//
$w.onReady(function () {
    $w("#next").onClick(() => {
        session.setItem("businessName", $w('#businessName').value);
        session.setItem("firstName", $w('#firstName').value);
        session.setItem("lastName", $w('#lastName').value);
        session.setItem("email", $w('#email').value);
        session.setItem("phone", $w('#phone').value);
        session.setItem("billingAddress", $w('#billingAddressInput').value);

 //-------------Create Contact------------//
 let firstName = $w('#firstName').value;
 let lastName = $w('#lastName').value;
 let email = $w('#email').value;
 let phone = $w('#phone').value;
 let businessName = $w('#businessName').value;
 let billingAddress = session.getItem('businessAddress');
        createContact(firstName, lastName, email, phone, businessName, billingAddress)
        console.log("EMAIL", email);
        console.log(session.getItem("title"))

 //-------------Payment Options------------//
 let paymentOptions = {
            userInfo: {
                firstName: session.setItem("firstName", $w('#firstName').value),
                lastName: session.setItem("lastName", $w('#lastName').value),
                phone: session.setItem("phone", $w('#phone').value),
                email: session.setItem("email", $w('#email').value)
            }
        }
        wixLocation.to("/checkoutpage")
    })
})

The first two pages work. They set the item data perfectly. I check it through the console log. I am so frustrated and come as a last result here. Please help. Thank you!

2

Since you have been helpful in the past: @jonatandor35 , @salman-hammed , @givemeawhisky any thoughts? It is probably very simple, but I have been looking at this for so long

3

It’s too long, and I don’t have time to go over it.
But you can do it shorter (and the performance will be probably better too) if instead of storing every single field separately, you’ll do something like:

//first page:
let userData = {
firsName: "John",
lastName: "Doe",
nickname: "Johnny ",
phone: "3233232323"
};
session.setItem("userData", JSON.stringify(userData ));

//second page:
let userData;
let stroedData = session.setItem("userData");
if(stroedData ){userData = JSON.parse(stroedData);}

This way when you need to store or to retrieve the data, you’ll only have to go one time.

4

@jonatandor35 Hi J.D. This is a great suggestion! I would implement it, but since it it is interacting with the payments api I need it all to be separated. Plus I got it to work. I realized I had accidentally linked the data set to the field.