I was asked over the weekend by a client to add a new feature to their website. This client runs an online shopping cart and like other small vendors will run out of stock on a particular item every so often. They wanted a way for a visitor to sign up to be notified when that item was back in stock. While this seems like a fairly easy feature to add I had a couple of self imposed requirements.

All we need from the user is their name and email address. As a visitor I really don't like being taken away from my browsing expirience for simple forms like this. I decided that this form would need to be a modal dialog box. To do this I am going to use jQuery UI because It flat out rocks! I also need this information to be stored in a database so that we can export this info by product. The client will then take these email addresses over to Constant Contact and notify their customers that the product is back in stock.

To show you how I did this I created a little one page shopping cart. In our our sample application I have a book store and on this page I have 3 Flex books, 1 of which is out of stock. If the book is out of stock I have a button for the user to click on.

When the user clicks on the In stock notifications they will see the following form pop up in a modal window. When the user submits the form they will see a small transition and then the success message below.

So lets go ahead and build this small application out. I have posted the entire sample on my github account so feel free to download it and follow along. First we will create our one page shopping cart. To do so I will be using Boostrap, if you haven't had a chance to check it out I highly recommend it.

Now that you have your page setup we need to create the modal dialog window. To do this we are going to use a mix of plain html/css and some JavaScript magic provided to us by jQuery UI. First we create the form and I just placed mine before the ending body tag. The only trick here is we need to hide this form by default and to do so we can just set the display to none. We have a success message that by default is hidden and we will display to the user when the form has been submitted. You will also notice that we have no submit button on this form. jQuery UI actually gives us a nice API to add some buttons to our dialog box so will take advantage of that.

Now that we have our form built we need to wire it up to the button. We have a class of notifyme on our button so we will just add a click event listener to it. In that function we will create our modal dialog using jquery ui. If you need to find out what options are available just check out the docs. We have a cancel button which basically just calls close method and a submit button which will handle all of our magic.

Next we need to wire up our submit button. First we need to figure out what product we are talking about. To do this we can use jQuery's data() method to grab the item number. Before we can go ahead and submit this data we need to validate the data entered by the user. I want to make sure that they enter something for the name and that the email address is a valid email. If it fails I just change the 'All Fields Required' message to something else. You could probably get fancy here but I didn't see the need for it.

Now comes the fun part. We need to create an ajax post when the submit button is clicked and our data has been validated. We will call a local cfc with a method called addNotification, more on that in a moment. Our method will take a product id, name and email. We can pass those into our method using the data attribute of jQuery's Ajax method. Finally once the notification has been added we need to tell our user that something happened. What I am going to do is remove the buttons from our dialog box, hide the form and then display that success message that was hidden. You will also notice that we have added some logic to our close function. When the user exits our form by clicking the x button we don't want to retain any information on the form. So if I type Dan in the name box and close I would expect to see an empty form when I open it back up. This gives it that feel that you are creating a new instance of the form when you click on the button.

Finally we have our component. Nothing special going on here, just a method that accepts an id, name and email. We will take this data and save it to a database table called notifications. If you look in the downloads I have sample SQL script for MSSQL. In the administrator for the cart I built a little function that would give them a unique list of products where exported = 0. They can select that list and export a list of users that can be sent to constact contact. Those users are now set to exported so they will not be notified again. If anyone is interested I can follow up this post with how I did that but it is pretty basic.

That wasn't so hard now was it. Pretty simple but as you can see there is some effort that goes into to this to make sure that every step of the way is a nice seamless experience for the user. If you have any questions and or suggestion please feel free to share them.

 

This entry was posted on October 3, 2011 at 8:41 PM and has received 2372 views. Comments 3 | Print this entry.