How To Build An Ecommerce Website Frontend Using jQuery-Part 1

This tutorial covers a beginner introduction to jQuery. According to the documentation.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

The first part of this tutorial will cover the library’s ability to enable developers to make the basic HTML more interactive for users to have a pleasant time on your website even though you are writing less and not having to use a JavaScript framework like Vue/ Angular or the larger and more complex JavaScript library; React JS.

The second part of this tutorial will be about using the jQuery Ajax method to consume an API.

Prerequisites

  • HTML
  • CSS
  • Bootstrap 4 -Basics
  • jQuery -Basics
  • Github -Basics

Creating the Markup

Whenever you are creating a project always try and solve a problem you are passionate about, this way you can work on the project with a lot of inspiration. So for my store, I am going to work on an outfitting store because I am in love with well put together outfits, think about what you would sell or want to sell if you had a store and change this tutorial as you deem fit to best suit your store’s needs.

The markup goes in your index.html file. Make sure all your files are well linked into your index.html file as shown below before you start writing the HTML code. The script tags are at the bottom right before the body closing tag.

links
GitHub Gist: instantly share code, notes, and snippets.

We are going to need the navigation bar and a basic introduction to the store. If you are looking to create your own custom navigation bar that is fine but if you want inspiration for the navigation bar checks out this section of the bootstrap 4 navigation bars.

Navbar
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
bootstrap 4 navigation bars

For the introduction of the store, you can have a one-liner or go into as much detail as you would like.

The next part of our website will be about the display of our goods. The decoded couture store has to be able to allow our clients the ability to select combined options to form an outfit and that is where the jQuery magic happens. Feel free to get down and dirty with the Navbar and introduction paragraph. Here is how mine looks like:

The markup and CSS for the above file can be found here:

For the products, we are going for an interactive way for our customers to use this website and have a lot of fun doing it while we also save on space. jQuery has animation styles that we can use.

toggle() is a jQuery animation method that allows us to be able to use the same spot for two things, for example, you want to have the description of an image pop up once you click the image. Not only are such animations fun but they also make sure your page doesn’t have a lot of scrolling and that enhances the user experience. We also want customers to be able to select from different prices of the same dress if there is a similar one in the market. So write the description for your items and add the image, remember you can get free images at unsplash.com. So this is how my site looks like without using jQuery:

As you can see, this does take a lot of space. So to get started with jQuery.

jQuery code goes into the index.js file. To work with jQuery, you can either link the content delivery network (CDN)  from the official site or download it as we did. In our project, we have downloaded jQuery in our javaScript folder. Linking CDNs might be tricky if you want to present your work and there is no internet, it is less risky to download libraries and you can always download the files from the official sites of programming technologies. After you have linked jQuery successfully in your mark up, you can now write the jQuery code in your .js file. To begin the code we start with:

$(document).ready(function() {

//your code goes in here

});

This function simply means that once the document goes through the .ready event i.e. the document is fully loaded and only after that can the jQuery functions manipulate/animate /the markup in our case that is our index.html.

To quote the jQuery documentation:

A page can’t be manipulated safely until the document is “ready.” jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( “load”, function() { … }) will run once the entire page (images or iframes), not just the DOM, is ready.

Now that we have our page ready it is time for us to implement the function that will allow us to only read the definition of products after we click on the image

$(".whatwedo p").hide();

$('.whatwedo img.one').click(function() {

    $(".whatwedo img.one").toggle();
    $(".whatwedo p.one").toggle();

});

We start by selecting the paragraph using selectors; In our HTML, the paragraph is in the whatwedo class. Thereafter we apply the .hide() method to hide the paragraph. Then we select the image, then once clicked the .click() method will be fulfilled and the description will show. The .toggle() method is called twice so that once the text is visible you can click the text and have the images appear.

This is how the website looks once it loads:

Once you click the images, the text appears as below

Currently, on our website, we allow our users the ability to select our products depending on their budget but we need to put in place a submit button that will allow them to submit their choice of outfit from Decoded Couture. The submit button should also allow our users to be able to see a table that allows them to view their total. The .append() method will allow us to add all the products and get the total.

According to the jQuery documentation

The .append() method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first child, use .prepend()).

However, it is important to note that the table we need to add will be in out html file and we have to use the .hide() method to hide the table initially when the website loads. The table will also need to have id selectors that will allow us to add the prices together for a grand total. Then once the submit button is clicked the information will be appended on the table in accordance with the corresponding id selector in the table and at that point, the table will be visible on the website.

<table class="table">
   <thead>
      <tr>
         <th scope="col">Order No.</th>
         <th scope="col">Dress</th>
         <th scope="col">Heels</th>
         <th scope="col">Accessories</th>
         <th scope="col">Total</th>
      </tr>
   </thead>
   <tbody id="Outfit">
      <tr>
         <th scope="row">1</th>
         <td id="dress"></td>
         <td id="heels"></td>
         <td id="accessories"></td>
         <td id="total"></td>
      </tr>
   </tbody>
</table>

After this code, here is the table without the jQuery .hide() method. This is clearly chaotic.

So now we write the jQuery code to prevent this disaster from happening. I will use ES5 so as to be beginner-friendly but definitely challenge yourself to ES6 to sharpen your skills

The beginning of the jQuery code is basically using the .hide() method to ensure that once the page loads, the table is and the buttons that we don’t want to show to the person loading the page. So once you load the page this is what you see

This feels clean as the page is not cluttered.

The second part of the code is creating a mathematical calculation to be able to calculate an outfit order. The outfit is made up of a dress, heels and accessories and the price is made up of the first order and any other order that will be made. Using the constructor function ‘Outfit’ we are able to sum all these up easily and keep applying this constructor function to other outfits using the keyword ‘new’. We also add the total price by referencing the value we assigned the products in our HTML. All the HTML code can be found in the index.html in this repository: https://github.com/Janice-M/decoded-couture

The last part of the code is using the .append() method to append a row that consists of all the parameters in our constructor function. So once you click order, this is what you see:

The add another button is also now revealed. To add functionality to this button, a checkout button and the ability for our customer to be able to request delivery we add the following jQuery code into our index.js file:

Most of the methods above are just for hiding and showing the buttons as we had discussed before. This allows you not to crowd your page, once all the buttons are visible and an order is fulfilled it looks like this

Conclusion

This marks the end of part one of this tutorial. I hope you will now be able to explore jQuery more freely.

The extensions necessary for this project can be found in this GitHub repository

The folder and file arrangement is as follows:

Find the repository here

Find the couture and the completed site here

If you are stuck on where to get free images for this and all your websites please do check out unsplash.com

Feel free to contribute as much as you would like in the public repository as you wish.

Happy coding!

6 Shares:
You May Also Like