Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:11Length:57 minutes
Webaudio 1
  • Overview
  • Transcript

2.2 Our Online Store

Let’s create a basic HTML page to mimic an online store. In this lesson, I’ll create the scaffold for our simple online store page.

Related Links

2.2 Our Online Store

In this lesson, we're going to be creating a made up product page for a dummy online store. We'll use this to simulate the realistic scenario of making a purchase online. Personally, when I buy something online, a little bit of worry always creeps in when I press the buy button. Have I filled in my card details correctly? Will my internet connection drop in the middle of the transaction? Will the sight crashed completely and take all my money. Luckily, this rarely happens and it's always pleasing to see an order of success message. But how can we make this even more satisfying to our users? By adding audio of course. We'll start by creating a basic HTML page using Bootstrap and jQuery. First create a file called index.html and let's just add some standard HTML. And the head will add a link to bootstrap CSS. Bootstrap is a simple HTML and CSS free mark that allows you to create decent looking pages extremely quickly. Head over to bootstrapcdn.com, and copy and paste the URL there into a link element. I'm just serving this file from the local file system, so I need to make sure to add http before the url. While we're there, grab the url to Bootstrap's JavaScript file as well. We're going to need it later. Add it to the bottom of the page. I'll need to add http here as well. It actually has jQuery dependency so let's go to code.jquery.com and get the latest copy of that. We need to add it just before the bootstrap reference. We'll also need to add a place for our own quote. So create a scripts directory. And add a file called audio.gs and save it. We'll need to reference that too so create a script tag at the bottom of the page. Reference script slash audio dot g s. Now that's cited, we can use a few fairly self-explanatory classes to our various elements. We'll need a container div, to bring the contents of our page in from the edge. And within that, let's add a column so that our content doesn't fill the whole width of the page. The ins and outs of these classes in Bootstrap aren't important for this tutorial. All you need to know is that this class halves the width of the container. Online shops usually have a form to fill in all your details, so let's make one. We'll send a couple of input fields. We'll have the card holder name. Which will prefill with some fake details. And how about card number? Again, we'll pre-fill it with a fake number. Most importantly though, we need a buy now button somewhere on our page. Remember this isn't a real form, it's not going to actually submit or do anything. Let's add a couple of Bootstrap classes to make it look a bit nicer. Let's take a look and see how our page looks in the browser. Great, looking good and totally trustworthy. At the moment, our button isn't really doing anything. Instead of messing around with servers, for the purpose of this tutorial we'll pretend our button is using Ajax to go off to our server and make the transaction. We'll do this by opening our JavaScript file and adding in event handler onto the button. Let's stack a console log in there just to make sure it's working, great. Okay, usually when you buy something online the transaction isn't instant so we're going to fake our AJAX call. Let's create a function called MyFakeAjaxCall Which accepts a callback function as a parameter, and we're going to call that callback after three seconds. Okay, let's call that function as soon as the button's clicked. And we'll just print a message to the console just now. Let's try it out. One, two, three, great. Now, instead of just logging into the console, Bootstrap provides a few little helper functions to update the text of our button. If we head back to our HTML, we can add a couple of data attributes to bottom to reflect the current state of our transaction. The first is data loading text, which is what we want the text to say as soon as the user has pressed the button let's make it say processing the next is data complete text which is what we want it to say when it's all done let's make it say success. Okay, now we switch back to our JavaScript file to set these button states. So let's write var dollar btn equals dollar this dot bottom and we'll pass the string loading. This means that the text at the bottom will change to the loading data attribute as soon as it's clicked. Then replace our console lock function with a call to set our button to the complete state. Okay, let's try that. Let's go back and refresh our page. Wait three seconds. Fantastic. That's our fake product page and transaction setup. In the next tutorial, we're going to start making some noise.

Back to the top