Tutorial Video
Wix Stores is a simple to use app that helps you create an online store for your Wix website. It has all the basic features you need to get started. However, there is one popular feature that it does not have just yet: a ‘Request Quote’ button. This video will teach you about adding a request quote button in Wix Stores. If you want to learn how to create a Catalog using Wix Stores, visit Wix Fundamentals YouTube Channel so David can teach you how to do this.
This is the link to their Channel: https://www.youtube.com/channel/UCd_xwRsKN1qvUl5QtTWVSbQ
Follow Along #1
Tutorial Page
Good to Know #1
Required Elements for Product Page
Wix Stores App
Product Page
Good to Know #2
Code for 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; //This line gets the ID of the current product
session.setItem("product", theProduct); //This line saved the product ID into session storage
})
.then(() => {
wixLocation.to("/quote"); //This line redirects you to the page with the request form
})
.catch((error) => {
console.log(error);
});
});
});
Good to Know #3
Required Elements for Quote Page
Dataset connected to Wix Stores Products collection ; View Only mode
Dataset connected to Custom Database collection to save incoming requests ; Write Only mode
1 Custom Form built with user input elements (do not use Wix Forms)
1 Collapsed Strip on load to add form
1 Collapsed Strip on load to add success message
1 Collapsed Strip on load to add error message
1 Header element to scroll to after successful submission
Good to Know #4
Code for the 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"); //This line will get the item from storage session
$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) //This line will filter the product dataset to find the 1 matching product from storage session
)
.then(() => {
console.log("The product is" + product);
$w('#formStrip').expand(); //This line triggers the form strip to expand only if there are no errors in filtering dataset
$w('#errorStrip').collapse(); //This line triggers the error strip to collapse only if there are no errors in filtering dataset
})
.catch((err) => {
console.log(err);
$w('#formStrip').collapse(); //This line triggers the form strip to collapse if an error occurs
$w('#errorStrip').expand(); //This line triggers the error strip to expand only if an error occurs
});
});
//Our dataset for our form is called #requestDataset
$w("#requestDataset").onBeforeSave(() => {
$w("#dataset1").onReady(() => {
let productFound = $w("#dataset1").getCurrentItem(); //This line gets the current product from your Stores Dataset, in our example the Stores dataset is called #dataset1
let theName = productFound.name; //This line gets the product name
let theImage = productFound.mainMedia; //This line gets the main image for the product
//The following lines will set the values for these fields in the database
$w("#requestDataset").setFieldValues({
"productName": theName, //Make sure to replace the field key of each line to match your database
"productId": product, //Make sure to replace the field key of each line to match your database
"productImage": theImage //Make sure to replace the field key of each line to match your database
});
let checkFirst = $w('#firstName').valid; //Make sure to replace the fields with your form elements ID names
let checkLast = $w('#lastName').valid;
let checkPhone = $w('#phone').valid;
let checkEmail = $w('#email').valid;
//This next line checks to make sure all the validations we set in the user input settings are valid
if (checkEmail && checkPhone && checkLast && checkFirst) {
$w('#requestDataset').save(); //This is the name of our form dataset
$w('#errorText').hide(); //This line hides the error message if all fields are valid
} else {
$w('#errorText').show(); //This line shows the error message
console.log("Canceling save");
return false; //This line cancels the save function on the dataset
}
});
});
$w("#requestDataset").onAfterSave(() => {
quoteRequest(); //This line triggers the notification from the backend. In our example, the backend function is called quoteRequest .
console.log("A new notification was sent to all contributors.");
$w('#formStrip').collapse();
$w('#errorStrip').collapse();
$w('#successStrip').expand(); //This line triggers the form strip to expand after the form has been submitted.
$w("#header1").scrollTo(); //This line scrolls the page to the top header
});
});
Good to Know #5
Code for the backend function notifications.jsw
import wixCrm from 'wix-crm-backend';
export function quoteRequest() {
wixCrm.notifications.notify(
"New Tutorial Quote",
["Browser","Dashboard","Mobile"],
{
"title": "New Quote Request",
"actionTitle": "View it now",
"actionTarget": {"url": "https://www.wix.com"}, //Add the URL where you want to be redirected after you click on the notification
"recipients": { "role": "All_Contributors"}
}
);
}
Author
by Code Queen
Stuck on a project? Hire Code Queen, LLC!
Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.
Online Booking: Discovery Session
Contact Form: Send project details
Hi! Please help me. There is something wrong but I can't find it. Here is my site. I thought the filtering has a bug, my database, because it doesn't trigger the expand/collapse to happen. I will appreciate your response. Thank you very much!