top of page
Writer's pictureCode Queen

Adding a Request Quote button in Wix Stores with Notifications

Updated: Dec 8, 2020


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.




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

2,817 views1 comment

1 Comment


Rhea Labora
May 08, 2021

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!

Like

disclaimer

a quick note about our website content

Our free and premium content is non-exclusive, meaning you are not the only one with access to the content. You can customize our content to fit your end product. Redistribution of our content is strictly prohibited. This means you cannot make our content available to others as-is, stand-alone products or stock products in ANY LANGUAGE, regardless if you offer our content for free or not.

bottom of page