top of page
Back in Stock Notification for Site Contacts

Back in Stock Notification for Site Contacts

Allow site visitors to register and receive a notification when a product is back in stock

Intermediate.png

Advanced

5K

Published:

July 29, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example, we created a fully automated process to allow site visitors to register and receive a notification when a product is back in stock. After a site visitor registers for a notification, they receive a validation email and need to confirm their email address in order to recieve an email notification when the product is back in stock. The site visitors do not have to be members of your site.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

Collection


For this example we added a collection called ‘backInStock‘ that contains data about the site visitors that need to get the notifications and the products that they need to be notified about, as well as more information about the visitor’s notification status.


Pages & Lightboxes

 

Our site contains the following pages and lightboxes:


  • Enter Details lightbox: for registering the site visitor for back-in-stock notifications.

  • Product page with a ‘Notify Me When Back In Stock’ button

  • ‘EmailConfirmation (ID)’ dynamic page: This is the landing page seen on the site when the site visitor confirms their email. This page is hidden from the site menu and search engines.

 

Backend files

 

Our site contains the following backend files:

  • backInStock.jsw: Contains the back-in-stock functionality handler.

  • Jobs.config: The cron configuration file for the Job Scheduler.

 

Code

 

Note: If you didn’t add a members area to the site, you can’t test the site with your owner or contributor email. You can test the site with a different email address.

 

Note: In order to make this example work in your account you need to change the URL constant in backInStock.jsw to you site's URL.

 

Our site contains code that performs the following actions:

  1. In the product page, get the product data and check whether the product is in stock. If the product is out of stock, add a ‘Notify me when back in stock’ button.

  2. If a site visitor clicks the button, do the following:

  3. Since you can’t create a contact that is already a member, check if the visitor is a logged-in member. If they are, the first name, last name, and email inputs are populated with their information. If they’re not a logged-in member, the site visitor enters their information in the inputs.

  4. When the site visitor clicks the ‘Submit’ button, validate the input fields, create a contact for the site visitor if they’re not a member, and insert the contact information into the ‘backInStock’ collection.

  5. If the insertion is successful, show a text message informing them that they were sent a verification email. Otherwise, show an error text message.

  6. When the site visitor confirms their email, show the ‘BackInStock Emailconfirmation (ID)’ dynamic page with a success or failure message and update the visitor’s status in the `backInStock` collection.

  7. Use the Job Scheduler to check every hour whether the product is back in stock. If it’s back in stock, send the visitor a triggered email.

APIs We Used

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Back in Stock Notification for Site Members

Back in Stock Notification for Site Members

Allow site members to receive a notification when a product is back in stock

Intermediate.png

Advanced

Wishlist

Wishlist

Let customers add items to their wishlist and save to purchase later.

Intermediate.png

Advanced

Highest-Rated Products

Highest-Rated Products

Showcase your highest-rated products in their own gallery.

Intermediate.png

Advanced

Anchor 2
bottom of page