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;
 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

Services world wide

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