Adding a Request Quote button in Wix Stores with Notifications

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

https://codequeen.wixsite.com/wixstores-quote

---

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;