I am trying to give an instant price for a product based on user’s input by way of two dropdowns - ‘Number of Pages’ and ‘Quantities’, that are linked to my data. I need the price to appear in an area below and then for the user to be able to add their choices (number of pages, quantities and price) to the cart.
This is my first time using code (as you will see!). At present, I’ve followed a Wix tutorial - Velo Tutorial: Adding Collection Data Search Functionality | Help Center | Wix.com, but only managed to work with ‘dropdown1’. I have no idea how to link the price to the selection of both dropdowns. Any help would be so much appreciated. Thanks.
import wixData from ‘wix-data’
export function dropdown1_change(event, $w) {
// Runs a query on the “Members” collection
wixData.query(‘DigitalBroadsheet’)
// Query the collection for any items whose “Name” field contains
// the value the user selected in the dropdown
.contains(‘Number of Pages’, $w(‘#dropdown1’).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(‘#table1’).rows = res.items;
});
}
$w.onReady(function () {
$w(“#table1”).columns = [{
“id”: “col1”, // ID of the column for code purposes
// The field key in the collection whose data this column displays
“dataPath”: “price”,
“label”: “Price”, // The column header
“width”: 100, // Column width
“visible”: true, // Column visibility
“type”: “string”, // Data type for the column
// Path for the column if it contains a link
“linkPath”: “link-field-or-property”
},
{
}
Errors:
Loading the code for the dropdown page. To debug this code, open l7duq.js in Developer Tools.
There was an error in your script
TypeError: r is not a function. (In ‘r()’, ‘r’ is null)
App with the id - 18 failed to load
Hi Caroline, I am curious if you found a solution for this? I have a similar issue but I am not sure if this was the best approach or if there might be another option?
Hi, yes I did. I didn’t actually need to resort to code at all in the end. Our site invites users to upload their own newspaper/magazine designs, and then they need to indicate how many pages are in their design and how many copies they need, in order to obtain an instant price for printing their product.
For each product, under ‘Store Products’/‘Product Options’, I populated two dropdowns: number of pages and number of copies. I added a set price for the product, and then under ‘manage variants’, I added a ‘charge (+/-)’, subtracting the base price and adding on a certain amount for each variable, i.e. 1 copy of 8 pages, is £25.56, and then an amount of £0.18 is added for 1 copy of 12 pages, etc, etc.
Hope that is of some help to you! To see it in action, please feel free to take a look:
Hi Caroline, Great work, Unfortunately, I have over 600 variants that all require a different price for one product. Since Wix stores only allows 325 variants it wouldn’t work for me. I was able to use a cascading form drop down code in combination with the search code you have above. I am listing it hear for anyone else looking for a solution to a double drop down user input.
This code is using a collection where we use the first drop down to search the field in the collection to determine what the second drop down can show. Then use the second drop down to search for a specific field and show the result in the table.
import wixData from ‘wix-data’;
$w.onReady( function () {
uniqueDropDown1();
});
function uniqueDropDown1 (){
wixData.query(“collection”)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#dropdown1”).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.fieldl);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function country_change(event) {
uniqueDropDown2();
$w(“#dopdown2”).enable();
}
function uniqueDropDown2 (){
wixData.query(“collection”)
.contains(“country”, $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.field);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function delivery_change(event) {
$w(“#resulttable”).show();
// Runs a query on the “collection” collection
wixData.query(‘collection’)
// Query the collection for any items whose “search field” field contains
// the value the user selected in the dropdown
.contains(‘spreed’, $w(‘#delivery’).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(‘#resulttable’).rows = res.items;
});
}
$w.onReady( function () {
$w(“#resulttable”).columns = [
{
“id”: “col1”, // ID of the column for code purposes
// The field key in the collection whose data this column displays
“dataPath”: “ResultField”,
“label”: “Amount”, // The column header
“width”: 100, // Column width
“visible”: true , // Column visibility
“type”: “string”, // Data type for the column
// Path for the column if it contains a link
“linkPath”: “link-field-or-property”
}
]}
);
