Building an E-Commerce Website with Bootstrap

how to build an ecommerce store, ecommerce website building software, developing an e commerce security plan pdf free download
LexiWills Profile Pic
LexiWills,United Kingdom,Professional
Published Date:31-07-2017
Your Website URL(Optional)
Comment
Building an E-Commerce Website with Bootstrap You took a look at the various attributes and features of Bootstrap in the earlier chapters. However, just learning the concepts is not enough, as you need to possess the skills to implement them practically. In this chapter, we will create an e-commerce website that will help you get to grips with web designing using Bootstrap. Initially, we will build the parts step by step and increase the level of difficulty gradually so that you do not get overwhelmed with an information overload. We will first build the ecommerce.html page and then create the other pages such as category.html, account.html, and product.html, resulting in a responsive website. With Notepad, you cannot determine whether each div element has been closed, resulting in an incorrect output. In this example, we will be using Notepad++ as it provides syntax highlighting, word completion, and syntax folding, which will help you code better. Notepad++ is open source and can be downloaded for free from its official website at http://notepad-plus-plus.org/. It is a good practice to use Notepad++ or any advanced editor for your projects, as it streamlines your web designing experience. Designing the ecommerce.html page Create four web pages, namely ecommerce.html, category.html, account.html, and product.html for the e-commerce, product categories, account, and the product pages respectively. Initially, we will look at ecommerce.html.Building an E-Commerce Website with Bootstrap For now, let's paste the following basic Bootstrap code in the ecommerce.html file: DOCTYPE html html lang="en" head meta charset="utf-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="width=device-width, initial-scale=1" meta name="description" content="" meta name="author" content="" titleBootstrap Store/title Bootstrap Core CSS link href="css/bootstrap.css" rel="stylesheet" Custom CSS link href="style.css" rel="stylesheet" HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries WARNING: Respond.js doesn't work if you view the page via file:// if lt IE 9 script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/ html5shiv.js"/script script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond. min.js"/script endif /head body jQuery Version 1.11.0 script src="js/jquery-1.11.1.js"/script Bootstrap Core JavaScript script src="js/bootstrap.js"/script /body /html As you can see, we have also added respond.min.js, the jQuery file, and HTML shiv along with the Bootstrap files. 2 Chapter 9 Some CSS3 properties and HTML5 elements are not fully supported by the Internet Explorer 8 browser. Therefore, Internet Explorer 8 requires the use of html5shiv to correctly display those elements and Respond. js to enable media query support. We will now create a navbar for the web page. Similar to the process of creating a navbar in the preceding chapters, you define the navbar between the body tags. We define navbar-brand as Bootstrap Store and use the .navbar-inverse class, resulting in a black background and white text for the navbar: body Navigation nav class="navbar-inverse" role="navigation" div class="container-fluid" Brand and toggle get grouped for better mobile display div class="navbar-header" button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="bs-example-navbar-collapse-1" span class="sr-only"Toggle navigation/span span class="icon-bar"/span span class="icon-bar"/span span class="icon-bar"/span /button a class="navbar-brand" href="ecommerce.html"Bootstrap Store/a /div Collect the nav links, forms, and other content for toggling div class="collapse navbar-collapse" id="bs-example-navbar- collapse-1" /div /.navbar-collapse /div /.container-fluid /nav jQuery Version 1.11.0 script src="js/jquery-1.11.1.js"/script Bootstrap Core JavaScript script src="js/bootstrap.js"/script /body 3 Building an E-Commerce Website with Bootstrap The output of the code on execution will be as follows: Further on, we will add the categories and navigation links to this navbar. The code has to be inserted after the Collect the nav links, forms, and other content for toggling comment and before the div element containing the /.navbar-collapse comment. In the code, we define the Categories link in addition to the other navigation links. We create a dropdown for the Categories link, wherein we define the various types of products by their genre such as baby products, electronics, and shoes. Take a look at the following code to understand it better: div class="collapse navbar-collapse" id="bs-example-navbar- collapse-1" ul class="nav navbar-nav" li class="dropdown" a href="" class="active dropdown-toggle" data- toggle="dropdown"Categories span class="caret"/span/a ul class="dropdown-menu" role="menu" lia href="category.html"Apparel & Accessories/ a/li lia href="category.html"Baby Products/a/li lia href="category.html"Beauty & Health/a/ li lia href="category.html"Electronics/a/li lia href="category.html"Furniture/a/li lia href="category.html"Home & Garden/a/li lia href="category.html"Luggage & Bags/a/li lia href="category.html"Shoes/a/li lia href="category.html"Sports & Entertainment/a/li lia href="category.html"Watches/a/li li class="divider"/li lia href="ecommerce.html"All Categories/a/li /ul /li lia href=""Link/a/li lia href=""Link/a/li /ul 4 Chapter 9 The output of the code will be as follows: Thus, we have defined the Categories menu and the drop-down menu, which is visible on clicking the caret. Now, we add the Sign in link, user account link, and the shopping cart with a badge to the right-hand side of the navbar and specify Glyphicons for them. Remember that this snippet needs to be added after the links defined prior to it and before the div element containing the /.navbar-collapse comment: ul class="nav navbar-nav navbar-right" lia href=""span class="badge pull-right"4/spani class="glyphicon glyphicon-shopping-cart"/i/a/li lia href="account.html"i class="glyphicon glyphicon- user"/i/a/li lia href="" data-toggle="modal" data- target="myModal"Sign in/a/li /ul The output of the added code on execution will result in the following screenshot: For the Sign in part, we will create a modal that will be displayed by clicking on the Sign in link. 5 Building an E-Commerce Website with Bootstrap The following code snippet needs to be added after the closed /nav element: Modal div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" div class="modal-dialog" div class="modal-content" div class="modal-header" button type="button" class="close" data- dismiss="modal"span aria-hidden="true"×/spanspan class="sr-only"Close/span/button h2 class="modal-title" id="myModalLabel"Sign in/h2 /div div class="modal-body" form class="form-signin" role="form" h3 class="form-signin-heading"Sign in with your email address/h3 div class="form-group" input type="email" class="form-control" placeholder="Email address" required autofocus /div div class="form-group" input type="password" class="form-control" placeholder="Password" required /div div class="checkbox" label input type="checkbox" value="remember-me" Remember me /label /div button class="btn btn-lg btn-primary btn-block" type="submit"Sign in/button /form /div div class="row" div class="col-xs-3" a href="" class="btn btn-facebook btn-large btn-caps btn-block"Facebook span class="icon-facebook"/span/a /div div class="col-xs-3" a href="" class="btn btn-twitter btn-large btn-caps btn- block"Twitter span class="icon-twitter"/span/a /div div class="col-xs-3" 6 Chapter 9 a href="" class="btn btn-lg btn-caps btn-block"span class="icon-dribbble"/span/a /div /div div class="modal-footer" /div /div /div /div If you click on the Sign in link, the following dialog box will be displayed: From the preceding code and the output, you can see that we have defined a form to get the user authentication input and have inserted it inside the code for the modal. We will now create a carousel for the web page. After the modal code has been defined, we define the page content. We start with the Page Content comment for easy readability, which indicates that the entire content will be defined within the div element using the .container class and content as the ID for it. Further on, we define the carousel within that container using the following code snippet: div id="content" class="container" div class="row carousel-holder" div class="col-md-12" div id="carousel-example-generic" class="carousel slide" data-ride="carousel" 7 Building an E-Commerce Website with Bootstrap ol class="carousel-indicators" li data-target="carousel-example-generic" data-slide- to="0" class="active"/li li data-target="carousel-example-generic" data-slide- to="1"/li li data-target="carousel-example-generic" data-slide- to="2"/li /ol div class="carousel-inner" div class="item active" img class="slide-image" src="http://placehold. it/1140x350" alt="" / /div div class="item" img class="slide-image" src="http://placehold. it/1140x350" alt="" / /div div class="item" img class="slide-image" src="http://placehold. it/1140x350" alt="" / /div /div a class="left carousel-control" href="carousel-example- generic" data-slide="prev" span class="glyphicon glyphicon-chevron-left"/span /a a class="right carousel-control" href="carousel-example- generic" data-slide="next" span class="glyphicon glyphicon-chevron-right"/span /a /div /div /div /div /.container class with content as the id Now that we have defined the carousel, the output of the code upon execution will be as follows: 8 Chapter 9 Let's now define the product categories after the carousel code using the following code snippet: hr / div class="row" div class="col-sm-4 col-md-3" h3Categories/h3 div class="list-group" a href="category.html" class="list-group-item"Apparel & Accessories/a a href="category.html" class="list-group-item"Baby Products/a a href="category.html" class="list-group-item"Beauty & Health/a a href="category.html" class="list-group- item"Electronics/a a href="category.html" class="list-group-item"Furniture/ a a href="category.html" class="list-group-item"Home & Garden/a a href="category.html" class="list-group-item"Luggage & Bags/a a href="category.html" class="list-group-item"Shoes/a a href="category.html" class="list-group-item"Sports & Entertainment/a a href="category.html" class="list-group-item"Watches/a /div /div /div /div /.container class with content as the id After all the code we have written so far, let's create a footer for the web page by defining the div element using the .container class only. 9 Building an E-Commerce Website with Bootstrap Take a look at the following code snippet to understand it better: div class="container" hr / Footer footer div class="row" div class="col-lg-12" pCopyright © a href="ecommerce.html"Packt Publishing/a 2014/p /div /div /footer /div Check out each div element and see that it is appropriately closed as there are multitudes of the div element in the code. Using Notepad++, you will be able to understand whether the syntax is appropriate and also whether every corresponding div is closed correctly. The output of the code on adding the product categories and the footer will be as follows: 10 Chapter 9 Now we will proceed further and add the products along with a brief description so that they are reflected on your web page. The div element with the categories was defined with the .col-sm-4 col-md-3 class, and it occupies three columns of the web page on the left-hand side on a medium-sized display screen and four columns on a small-screen device. Since it is a 12-column grid, the remaining space will be used to display individual products. Therefore, after the categories have been defined, let's add the following code to it: div class="col-sm-8 col-md-9" div class="row" /div /div Insert the following code in the preceding nested div element with the .row class to add a product to the right-hand side of the Categories menu: div class="col-sm-6 col-md-4" div class="thumbnail" img src="http://placehold.it/750x600" alt="" div class="add-to-cart" a href="" class="glyphicon glyphicon-plus-sign" data-toggle="tooltip" data-placement="top" title="Add to cart"/a /div div class="caption" h4 class="pull-right"24.99/h4 h4a href="product.html"1supst/sup Product/a /h4 pThis is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit./p div class="ratings" p class="pull-right"a href="product. htmlcomments"15 reviews/a/p p span class="glyphicon glyphicon-star"/span span class="glyphicon glyphicon-star"/span span class="glyphicon glyphicon-star"/span span class="glyphicon glyphicon-star"/span span class="glyphicon glyphicon-star"/span /p /div /div /div /div 11 Building an E-Commerce Website with Bootstrap The output after defining the product is as follows: Copy the code several times and paste it to get a grid of replicated products. On execution of the code, you can see the following screen below the carousel: 12 Chapter 9 Therefore, we have succeeded in building a web page with the navbar with links, categories to the left-hand side, and products ranging from the center to the right- hand side of the page. We defined a carousel and also defined a modal, wherein a dialog box comes into the picture on clicking on the Sign in option. Now, let's look at the next steps wherein we create the remaining three pages, that is, account.html, category.html, and product.html, so that you have a real-time scenario. 13 Building an E-Commerce Website with Bootstrap Copy the navigation and the footer code and add it to the account. html, category.html, and product.html pages. Then, all of these three remaining pages will reflect the same output. For clarity, we have created a custom common.html file that contains the code for navigation links, the modal, and the footer. Note that a custom common.html file has been created so that we realize that these features will be the same in all four web pages, including ecommerce.html. The common.html file is not used, but creating such a file is quite useful if you want to copy and paste the default code for various web pages in your projects. Also, in real-time scenarios, we use tailored templates for such purposes or to minimize the repetition of code. Designing the account.html web page The account.html web page looks like this: Similar to the procedure followed in the ecommerce.html page, we define the page content. Note that you need to add the page content by inserting the code snippet after the modal code and before the div element with the .container class that encloses the footer of the web page. For code clarity and readability, we add the Page Content comment and then define a div element with the .container class and content as the ID, and add a /div element for it. Now our entire code needs to be inserted between these specific div elements. Take a look at the following code snippet to understand it better: Page Content div id="content" class="container" /div div element with the content as id and a .container class 14 Chapter 9 We then create a div element with the .row class, wherein we will include the account menu. Let's create a Manage Order section and enclose it within three columns for a medium-sized device. Then, we define a list group of items and define the different options, namely, All Order, Manage Feedback, My Coupons, and My Shipping Address: div class="row" div class="col-md-3" h3 class=""Manage Orders/h3 div class="list-group" a href="account.html" class="list-group-item"All Order/a a href="account.html" class="list-group-item"Manage Feedback/a a href="account.html" class="list-group-item"My Coupons/ a a href="account.html" class="list-group-item"My Shipping Address/a /div /div /div The output of the code upon execution will be: Let's define a div element with the .thumbnail class and create another div element within it with a .row class. Thereafter, we add the product names, the number of orders, prices, the track buttons, and the messages for the latest status of the products. 15 Building an E-Commerce Website with Bootstrap We will use the following code snippet to understand this better: div class="thumbnail" div class="row" div class="col-sm-1" img class="img-responsive" src="http://placehold. it/750x600" alt="" / /div div class="col-sm-4" a href="product.html"Product Name/a /div div class="col-sm-1" 1 /div div class="col-sm-2" 49.99 /div div class="col-sm-2" button class="btn btn-sm btn-default"Track/button /div div class="col-sm-2" a href=""1 Message/a /div /div /div /div On executing the code, you can see the following output: 16 Chapter 9 Now that we have a single product defined and the order status for that product, let's replicate the products five times. We customize the status of the products by specifying different amounts of messages, prices, and the latest updates of some of the products so as to determine whether the status is Cancelled or Completed (or a Track button to determine whether it is on its way). Thus, to create a wide array of order status' for different products, we use the following code snippet: div class="thumbnail" div class="row" div class="col-sm-1" img class="img-responsive" src="http://placehold. it/750x600" alt="" / /div div class="col-sm-4" a href="product.html"Product Name/a /div div class="col-sm-1" 1 /div div class="col-sm-2" 19.99 /div div class="col-sm-2" button class="btn btn-sm btn-success"Completed/ button /div div class="col-sm-2" a href=""1 Message/a /div /div /div div class="thumbnail" div class="row" div class="col-sm-1" img class="img-responsive" src="http://placehold. it/750x600" alt="" / /div div class="col-sm-4" a href="product.html"Product Name/a /div 17 Building an E-Commerce Website with Bootstrap div class="col-sm-1" 1 /div div class="col-sm-2" 39.99 /div div class="col-sm-2" button class="btn btn-sm btn-danger"Cancelled/button /div div class="col-sm-2" a href=""0 Messages/a /div /div /div div class="thumbnail" div class="row" div class="col-sm-1" img class="img-responsive" src="http://placehold. it/750x600" alt="" / /div div class="col-sm-4" a href="product.html"Product Name/a /div div class="col-sm-1" 1 /div div class="col-sm-2" 49.99 /div div class="col-sm-2" button class="btn btn-sm btn-default"Track/button /div div class="col-sm-2" a href=""1 Message/a /div /div /div div class="thumbnail" div class="row" div class="col-sm-1" img class="img-responsive" src="http://placehold. it/750x600" alt="" / 18 Chapter 9 /div div class="col-sm-4" a href="product.html"Product Name/a /div div class="col-sm-1" 1 /div div class="col-sm-2" 19.99 /div div class="col-sm-2" button class="btn btn-sm btn-success"Completed/ button /div div class="col-sm-2" a href=""1 Message/a /div /div /div div class="thumbnail" div class="row" div class="col-sm-1" img class="img-responsive" src="http://placehold. it/750x600" alt="" / /div div class="col-sm-4" a href="product.html"Product Name/a /div div class="col-sm-1" 1 /div div class="col-sm-2" 49.99 /div div class="col-sm-2" button class="btn btn-sm btn-default"Track/button /div div class="col-sm-2" a href=""1 Message/a /div /div /div 19 Building an E-Commerce Website with Bootstrap The output of the code upon execution will be as follows: Let's further enhance the web page by adding a .pagination class so that your website users can scroll for different products on different web pages. Take a look at the following code snippet to understand it better: div class="col-sm-12 center" ul class="pagination" li class="disabled"a href=""«/a/li li class="active"a href=""1/a/li lia href=""2/a/li lia href=""3/a/li lia href=""4/a/li lia href=""5/a/li lia href=""»/a/li /ul /div 20

Advise: Why You Wasting Money in Costly SEO Tools, Use World's Best Free SEO Tool Ubersuggest.