├── js ├── ecommerce.js ├── user.js ├── products.js ├── categories.js ├── cart.js └── init.js ├── css ├── style.min.css ├── sass │ └── style.scss └── style.css ├── category.html ├── wishlist.html ├── logout.html ├── templates ├── navigation.html └── footer.html ├── product.html ├── login.html ├── about.html ├── README.md ├── index.html ├── account.html ├── contact.html └── cart.html /js/ecommerce.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/style.min.css: -------------------------------------------------------------------------------- 1 | @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");body{color:#333;font-size:16px}.text-end a{float:right}a{text-decoration:none !important}a :hover,a :active,a :visited{text-decoration:none}.breadcrumb .sep{padding:0 5px}label{margin-bottom:1rem}.hero{background-color:#e7f3ff;padding:2rem;margin-bottom:2rem}.product{border:1px solid #c0c0c0;height:300px;margin-bottom:1rem;text-align:center;position:relative}.product .image{overflow:hidden;height:100%;width:100%;margin-bottom:1rem;padding:1rem}.product .image img{max-height:80%;max-width:80%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.product .info{background-color:#1c7ad1cc;position:absolute;width:100%;bottom:0;left:0;padding:1rem;min-height:100%;opacity:0;transition:all 0.25s ease;color:#fff !important}.product .info .title{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.product :hover>.info{opacity:1}footer{margin-top:2rem}.cartDisplay div{width:75%}.cartDisplay div h6{text-align:left}.cartDisplay img{margin-right:1rem} 2 | -------------------------------------------------------------------------------- /js/user.js: -------------------------------------------------------------------------------- 1 | class User { 2 | constructor() { 3 | this.apiUrl = "https://fakestoreapi.com/"; 4 | } 5 | 6 | getAccountInfo(user) { 7 | $("#username").val(user.username); 8 | $("#fname").val(user.name.firstname); 9 | $("#lname").val(user.name.lastname); 10 | $("#phone").val(user.phone); 11 | $("#email").val(user.email); 12 | $("#address").val(user.address.number + " " + user.address.street); 13 | $("#city").val(user.address.city); 14 | $("#zip").val(user.address.zipcode); 15 | } 16 | 17 | doLogin(username, password) { 18 | localStorage.clear(); 19 | $.ajax({ 20 | type: "GET", 21 | url: this.apiUrl + "users", 22 | success: function (data) { 23 | $(data).each(function (index, user) { 24 | if (user.username == username && user.password == password) { 25 | localStorage.setItem("user", JSON.stringify(user)); 26 | } 27 | }); 28 | if (localStorage.getItem("user") != null) { 29 | window.location.href = "/account.html"; 30 | } else { 31 | $(".loginMsg").html( 32 | '' 33 | ); 34 | } 35 | }, 36 | }); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /category.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sample Shopping Cart | The Dev Drawer 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |
17 |

18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /wishlist.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sample Shopping Cart | The Dev Drawer 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

Wishlist

18 |
Home>Wishlist
19 |

Lorem ipsum duis mattis id nullam erat vitae ad, gravida vel tincidunt hendrerit vestibulum dictumst quam feugiat ut platea cras ornare tristique pulvinar convallis netus.

20 |
21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /logout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sample Shopping Cart | The Dev Drawer 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |

Successfully Logged Out

20 |

You have been successfully logged out.

21 |

Login

22 |
23 |
24 |
25 |
26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /js/products.js: -------------------------------------------------------------------------------- 1 | class Products { 2 | constructor() { 3 | this.apiUrl = "https://fakestoreapi.com/"; 4 | } 5 | 6 | getNewProducts(limit) { 7 | $.ajax({ 8 | type: "GET", 9 | url: this.apiUrl + "products?limit=" + limit + "&sort=desc", 10 | success: function (data) { 11 | $(data).each(function (index, product) { 12 | $(".products").append( 13 | '
' + 16 | '
' + 19 | product.title + 20 | "
$" + 21 | product.price + 22 | "
" 23 | ); 24 | }); 25 | }, 26 | }); 27 | } 28 | 29 | getSingleProduct(id) { 30 | $.ajax({ 31 | type: "GET", 32 | url: this.apiUrl + "products/" + id, 33 | success: function (data) { 34 | $(".breadcrumb").html( 35 | 'Home>' + 38 | toTitleCase(data.category) + 39 | '>' + 40 | data.title 41 | ); 42 | $(".product_image").html( 43 | '' 44 | ); 45 | $(".product_title").html(data.title); 46 | $(".product_price").html("$" + data.price.toFixed(2)); 47 | $(".product_description").html("

" + data.description + "

"); 48 | }, 49 | }); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /js/categories.js: -------------------------------------------------------------------------------- 1 | class Categories { 2 | constructor() { 3 | this.apiUrl = "https://fakestoreapi.com/"; 4 | } 5 | 6 | getAllCategories() { 7 | $.ajax({ 8 | type: "GET", 9 | url: this.apiUrl + "products/categories", 10 | success: function (data) { 11 | $(data).each(function (index, category) { 12 | $(".categories").append( 13 | '' + 16 | toTitleCase(category) + 17 | "" 18 | ); 19 | }); 20 | $(".categories").append( 21 | 'Cart' 22 | ); 23 | }, 24 | }); 25 | } 26 | 27 | getSingleCategory(slug) { 28 | $.ajax({ 29 | type: "GET", 30 | url: this.apiUrl + "products/category/" + slug, 31 | success: function (data) { 32 | console.log(data); 33 | $(data).each(function (index, product) { 34 | $(".breadcrumb").html( 35 | 'Home > ' + 36 | toTitleCase(product.category) 37 | ); 38 | $(".category-name").html(toTitleCase(product.category)); 39 | 40 | $(".products").append( 41 | '
' + 44 | '
' + 47 | product.title + 48 | "
$" + 49 | product.price + 50 | "
" 51 | ); 52 | }); 53 | }, 54 | }); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /css/sass/style.scss: -------------------------------------------------------------------------------- 1 | @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"); 2 | 3 | body { 4 | color: #333; 5 | font-size: 16px; 6 | } 7 | 8 | .text-end a { 9 | float: right; 10 | } 11 | 12 | a { 13 | text-decoration: none !important; 14 | :hover, 15 | :active, 16 | :visited { 17 | text-decoration: none; 18 | } 19 | } 20 | 21 | .breadcrumb .sep { 22 | padding: 0 5px; 23 | } 24 | 25 | label { 26 | margin-bottom: 1rem; 27 | } 28 | 29 | .hero { 30 | background-color: rgb(231, 243, 255); 31 | padding: 2rem; 32 | margin-bottom: 2rem; 33 | } 34 | 35 | .product { 36 | border: 1px solid #c0c0c0; 37 | height: 300px; 38 | margin-bottom: 1rem; 39 | text-align: center; 40 | position: relative; 41 | .image { 42 | overflow: hidden; 43 | height: 100%; 44 | width: 100%; 45 | margin-bottom: 1rem; 46 | padding: 1rem; 47 | img { 48 | max-height: 80%; 49 | max-width: 80%; 50 | position: absolute; 51 | top: 50%; 52 | left: 50%; 53 | transform: translate(-50%, -50%); 54 | } 55 | } 56 | .info { 57 | background-color: #1c7ad1cc; 58 | position: absolute; 59 | width: 100%; 60 | bottom: 0; 61 | left: 0; 62 | padding: 1rem; 63 | min-height: 100%; 64 | opacity: 0; 65 | transition: all 0.25s ease; 66 | color: #fff !important; 67 | 68 | .title { 69 | position: absolute; 70 | top: 50%; 71 | left: 50%; 72 | transform: translate(-50%, -50%); 73 | } 74 | } 75 | :hover > .info { 76 | opacity: 1; 77 | } 78 | } 79 | 80 | footer { 81 | margin-top: 2rem; 82 | } 83 | 84 | .cartDisplay { 85 | div { 86 | width: 75%; 87 | h6 { 88 | text-align: left; 89 | } 90 | } 91 | img { 92 | margin-right: 1rem; 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"); 2 | body { 3 | color: #333; 4 | font-size: 16px; 5 | } 6 | 7 | .text-end a { 8 | float: right; 9 | } 10 | 11 | a { 12 | text-decoration: none !important; 13 | } 14 | 15 | a :hover, 16 | a :active, 17 | a :visited { 18 | text-decoration: none; 19 | } 20 | 21 | .breadcrumb .sep { 22 | padding: 0 5px; 23 | } 24 | 25 | label { 26 | margin-bottom: 1rem; 27 | } 28 | 29 | .hero { 30 | background-color: #e7f3ff; 31 | padding: 2rem; 32 | margin-bottom: 2rem; 33 | } 34 | 35 | .product { 36 | border: 1px solid #c0c0c0; 37 | height: 300px; 38 | margin-bottom: 1rem; 39 | text-align: center; 40 | position: relative; 41 | } 42 | 43 | .product .image { 44 | overflow: hidden; 45 | height: 100%; 46 | width: 100%; 47 | margin-bottom: 1rem; 48 | padding: 1rem; 49 | } 50 | 51 | .product .image img { 52 | max-height: 80%; 53 | max-width: 80%; 54 | position: absolute; 55 | top: 50%; 56 | left: 50%; 57 | transform: translate(-50%, -50%); 58 | } 59 | 60 | .product .info { 61 | background-color: #1c7ad1cc; 62 | position: absolute; 63 | width: 100%; 64 | bottom: 0; 65 | left: 0; 66 | padding: 1rem; 67 | min-height: 100%; 68 | opacity: 0; 69 | transition: all 0.25s ease; 70 | color: #fff !important; 71 | } 72 | 73 | .product .info .title { 74 | position: absolute; 75 | top: 50%; 76 | left: 50%; 77 | transform: translate(-50%, -50%); 78 | } 79 | 80 | .product :hover > .info { 81 | opacity: 1; 82 | } 83 | 84 | footer { 85 | margin-top: 2rem; 86 | } 87 | 88 | .cartDisplay div { 89 | width: 75%; 90 | } 91 | 92 | .cartDisplay div h6 { 93 | text-align: left; 94 | } 95 | 96 | .cartDisplay img { 97 | margin-right: 1rem; 98 | } 99 | -------------------------------------------------------------------------------- /templates/navigation.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | [logo here] 6 | 7 | 24 |
25 | 26 | 27 |
    28 |
    29 |
    30 |
    31 |
    32 |
    -------------------------------------------------------------------------------- /product.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sample Shopping Cart | The Dev Drawer 8 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 |
    16 |
    17 |

    18 |
    19 |
    20 |
    21 |
    22 |
    23 |
    24 |
    25 |
    26 |
    27 |
    28 |

    29 |
    30 | 31 |
    32 |
    33 |
    34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sample Shopping Cart | The Dev Drawer 7 | 8 | 9 | 10 | 11 | 12 |
    13 |
    14 |
    15 |
    16 |
    17 |
    18 |
    19 |

    Login To Your Account

    20 |
    21 | 28 |
    29 |
    30 |
    31 |
    32 |
    33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /js/cart.js: -------------------------------------------------------------------------------- 1 | class Cart { 2 | constructor() { 3 | this.apiUrl = "https://fakestoreapi.com/"; 4 | } 5 | 6 | getCart(userID) { 7 | var i = 0; 8 | var apiUrl = this.apiUrl; 9 | var count = 0; 10 | var carts = []; 11 | $.ajax({ 12 | type: "GET", 13 | url: apiUrl + "carts/user/" + userID, 14 | success: function (data) { 15 | $(data).each(function (index, cart) { 16 | count += cart.products.length; 17 | $(cart.products).each(function (index, products) { 18 | var singleProduct = {}; 19 | $.ajax({ 20 | type: "GET", 21 | url: apiUrl + "products/" + products.productId, 22 | success: function (product) { 23 | //console.log(product); 24 | singleProduct["productId"] = product.id; 25 | singleProduct["productURL"] = 26 | "/product.html?productid=" + product.id; 27 | singleProduct["title"] = product.title; 28 | singleProduct["price"] = product.price; 29 | singleProduct["image"] = product.image; 30 | carts.push(singleProduct); 31 | localStorage.setItem("cart", JSON.stringify(carts)); 32 | }, 33 | }); 34 | }); 35 | }); 36 | localStorage.setItem("cartCount", count); 37 | $("span.cartCount.badge").html(count); 38 | }, 39 | }); 40 | } 41 | 42 | getSingleProductCart(id) { 43 | $.ajax({ 44 | type: "GET", 45 | url: this.apiUrl + "products/" + id, 46 | success: function (data) { 47 | console.log(data); 48 | }, 49 | }); 50 | } 51 | 52 | getCartDisplay(products) { 53 | var price = 0; 54 | $(products).each(function (index, product) { 55 | price += product.price; 56 | $(".cartDisplay").prepend( 57 | '
  • ' + 60 | product.title + 61 | '
    $' + 62 | product.price.toFixed(2) + 63 | "
    • " 64 | ); 65 | }); 66 | $(".price").html(price); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sample Shopping Cart | The Dev Drawer 8 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 |
    16 |
    17 |

    About Us

    18 |
    Home>About Us
    19 |

    Lorem ipsum duis mattis id nullam erat vitae ad, gravida vel tincidunt hendrerit vestibulum dictumst quam feugiat ut platea cras ornare tristique pulvinar convallis netus.

    20 |

    A vulputate sollicitudin fusce auctor cras est torquent, purus morbi quisque porta aliquam lacinia etiam lobortis, posuere urna lectus cubilia platea venenatis.

    21 |

    Himenaeos netus lectus sapien auctor mauris senectus dui aenean, auctor sollicitudin curabitur conubia morbi pharetra hac, tincidunt gravida aliquet cubilia amet mauris nullam condimentum quisque viverra cras consequat torquent mi auctor mi convallis integer elit.

    22 |

    Erat praesent amet dictumst conubia dolor habitasse faucibus, etiam aenean inceptos feugiat semper ipsum integer, venenatis fusce mollis cubilia magna non.

    23 |

    Quam aliquam curabitur aliquet molestie orci lacinia vehicula laoreet quisque dolor faucibus phasellus, imperdiet maecenas quam nullam ut volutpat netus nostra turpis in potenti tincidunt habitant massa hac.

    24 |
    25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Build An eCommerce Website Using An API 2 | 3 | Part 1: [https://youtu.be/V9zL1kMq5TI](https://youtu.be/V9zL1kMq5TI) 4 | 5 | Part 2: [https://youtu.be/DuxLZTS1A00](https://youtu.be/DuxLZTS1A00) 6 | 7 | Part 3: [https://youtu.be/rFto-xdqfbc](https://youtu.be/rFto-xdqfbc) 8 | 9 | Part 4: [https://youtu.be/08imQEj4NRM](https://youtu.be/08imQEj4NRM) 10 | 11 | ## Part 1 12 | 13 | If you have been with me for a while, you should know how to build a PHP CRUD application, create your own API and add it to your website. In this series, we will take an API and build it into a fully functional eCommerce website. 14 | 15 | Have you ever wanted to learn how to build an eCommerce website? Now you can. Using jQuery, HTML, and CSS we build out a fully functional eCommerce website that uses an external API. This API can be something you have built or it can be an API from Amazon or Wal-Mart...wherever you can get your eCommerce data. 16 | 17 | In this video, we learn how to pull from a fake API to get our products and categories. 18 | 19 | ## Part 2 20 | 21 | In the last video for our build an eCommerce website we added an external API to power the data and add products. This tutorial, we start working on the design on the site. 22 | 23 | When we are done with this video, we will have created a standard eCommerce style for our website. We will have usable navigation, a home page hero, a footer and header, and single product pages with Add to Cart and Wishlist buttons. 24 | 25 | ## Part 3 26 | 27 | Now that we have a working solution for our API-driven eCommerce website. We need to pass user variables and authentication so we can have our customers log in. Again, we are using an external API for our shopping cart so we need to use external user accounts. 28 | 29 | This tutorial will go over how we can build an external user authentication system for our eCommerce website. We go over how to get the user, how to setup an account page and how to prevent unauthorized views of internal pages if a user is not logged in. Learn how to utilize jQuery to set browser session variables to easily track logged in / out users. 30 | 31 | ## Part 4 32 | 33 | In the last tutorial of this series, we will go into how we can add a cart that contains dynamic information using jQuery, CSS, HTML, and an external API. The fake e-commerce API that we are using allows you to store cart sessions, so we use those sessions for our logged-in users to create a dynamic shopping cart. 34 | 35 | This shopping cart is built using Bootstrap and displays a navbar that reflects the total product count within the cart. Using this, we can calculate the total amount of the shopping cart as well as the individual items. -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sample Shopping Cart | The Dev Drawer 8 | 9 | 10 | 11 | 12 | 13 |
    14 |
    15 |
    16 |
    17 |

    Welcome to Dev Drawer's Sample Store.

    18 |

    Learn how to pull external products from an API int your eCommerce website using only JS. Every product contained in this website is pulled form an API.

    19 |
    20 |
    21 |
    22 |
    23 | 24 | 25 |
    26 |
    27 | 28 | 29 |
    30 |
    31 | 34 |
    35 | 36 |
    37 | By clicking Sign up, you agree to the terms of use. 38 |
    39 |
    40 |
    41 |
    42 |

    Newest Products

    43 |
    44 |
    45 |
    46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /js/init.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | if (localStorage.getItem("user") == null && $(".auth").length) { 3 | window.location.href = "/login.html"; 4 | } 5 | loadScript("js/categories.js", categoriesSetup); 6 | loadScript("js/products.js", productsSetup); 7 | loadScript("js/user.js", userInfo); 8 | loadScript("js/cart.js", cartInfo); 9 | //loadScript("js/ecommerce.js", cartSetup); 10 | }); 11 | 12 | $.get("/templates/navigation.html", function (data) { 13 | if ($(".logout").length) { 14 | localStorage.clear(); 15 | } 16 | $("#nav-placeholder").replaceWith(data); 17 | if (localStorage.getItem("user") === null) { 18 | $(".accountNav").html( 19 | '
  • Login
    • ' 20 | ); 21 | } else { 22 | $(".accountNav").html( 23 | '
  • Account
  • Log Out
    • ' 24 | ); 25 | } 26 | }); 27 | 28 | $.get("/templates/footer.html", function (data) { 29 | $("#footer-placeholder").replaceWith(data); 30 | }); 31 | 32 | var categoriesSetup = function () { 33 | let categories = new Categories(); 34 | categories.getAllCategories(); 35 | if (urlParam("category")) { 36 | categories.getSingleCategory(decodeURIComponent(urlParam("category"))); 37 | } 38 | }; 39 | 40 | var productsSetup = function () { 41 | let products = new Products(); 42 | if ($(".products.new").length) { 43 | products.getNewProducts(8); 44 | } 45 | if (urlParam("productid")) { 46 | products.getSingleProduct(urlParam("productid")); 47 | } 48 | }; 49 | 50 | var userInfo = function () { 51 | let user = new User(); 52 | $("form.login").submit(function (e) { 53 | e.preventDefault(); 54 | var username = $("#username").val(); 55 | var password = $("#password").val(); 56 | user.doLogin(username, password); 57 | }); 58 | if ($(".userAccount").length) { 59 | var userAccount = JSON.parse(localStorage.user); 60 | user.getAccountInfo(userAccount); 61 | } 62 | }; 63 | 64 | var cartInfo = function () { 65 | let cart = new Cart(); 66 | if (localStorage.getItem("user") != null) { 67 | var user = JSON.parse(localStorage.user); 68 | cart.getCart(user.id); 69 | if (localStorage.getItem("cartCount") != 0) { 70 | var cartItems = JSON.parse(localStorage.getItem("cart")); 71 | cart.getCartDisplay(cartItems); 72 | } 73 | } 74 | }; 75 | 76 | function loadScript(url, callback) { 77 | var head = document.head; 78 | var script = document.createElement("script"); 79 | script.type = "text/javascript"; 80 | script.src = url; 81 | script.onreadystatechange = callback; 82 | script.onload = callback; 83 | head.appendChild(script); 84 | } 85 | 86 | function toTitleCase(str) { 87 | return str.replace(/(?:^|\s)\w/g, function (match) { 88 | return match.toUpperCase(); 89 | }); 90 | } 91 | 92 | function urlParam(name) { 93 | var results = new RegExp("[?&]" + name + "=([^&#]*)").exec( 94 | window.location.href 95 | ); 96 | if (results == null) { 97 | return null; 98 | } else { 99 | return results[1] || 0; 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /account.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sample Shopping Cart | The Dev Drawer 9 | 10 | 11 | 12 | 13 | 14 |
    15 |
    16 |
    17 |
    Home>Your Account
    18 |

    Your Account

    19 |
    20 |
    21 |
    22 |
    23 |
    24 |
    25 | 26 | 27 |

    Personal Information

    28 |
    29 |
    30 | 31 | 32 |
    33 |
    34 | 35 | 36 |
    37 |
    38 | 39 | 40 | 41 | 42 |

    Address

    43 | 44 | 45 |
    46 |
    47 | 48 | 49 |
    50 |
    51 | 52 | 53 |
    54 |
    55 |
    56 |

    57 |
    58 |
    59 |
    60 |
    61 |
    62 |
    63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /templates/footer.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sample Shopping Cart | The Dev Drawer 8 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 |
    16 |
    17 |

    Contact Us

    18 |
    Home>Contact Us
    19 |
    20 |
    21 |
    22 |

    Himenaeos netus lectus sapien auctor mauris senectus dui aenean, auctor sollicitudin curabitur conubia morbi pharetra hac, tincidunt gravida aliquet cubilia amet mauris nullam condimentum quisque viverra cras consequat torquent mi auctor mi convallis integer elit.

    23 |
    24 |
    25 | Telephone 26 |
    27 |
    28 | 555-555-5555 29 |
    30 |
    31 |
    32 |
    33 | Fax 34 |
    35 |
    36 | 555-555-5554 37 |
    38 |
    39 |
    40 |
    41 |
    42 |
    43 |

    Send Us A Message Online

    44 |
    45 |
    46 | 47 | 48 |
    49 |
    50 |
    51 |
    52 | 53 | 54 |
    55 |
    56 | 57 | 58 |
    59 |
    60 |
    61 |
    62 | 63 | 64 |
    65 |
    66 |
    67 |
    68 | 69 | 70 |
    71 |
    72 |
    73 |
    74 | 75 |
    76 |
    77 |
    78 |
    79 | 80 |
    81 |
    82 |
    83 |
    84 | 85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sample Shopping Cart | The Dev Drawer 9 | 10 | 11 | 12 | 13 | 14 |
    15 |
    16 |
    17 |

    Cart

    18 |
    Home>Cart
    19 |

    Lorem ipsum duis mattis id nullam erat vitae ad, gravida vel tincidunt hendrerit vestibulum dictumst quam feugiat ut platea cras ornare tristique pulvinar convallis netus.

    20 |
    21 |
    22 |

    Billing address

    23 |
    24 |
    25 |
    26 | 27 | 28 |
    29 |
    30 | 31 | 32 |
    33 |
    34 | 35 | 36 |
    37 |
    38 | 39 | 40 |
    41 |
    42 | 43 | 44 |
    45 |
    46 | 50 | 51 |
    52 |
    53 | 57 | 58 |
    59 |
    60 | 61 | 62 |
    63 |
    64 |
    65 |
    66 | 67 | 68 |
    69 |
    70 | 71 | 72 |
    73 |
    74 |

    Payment

    75 |
    76 | 77 | 78 |
    79 |
    80 | 81 | 82 |
    83 |
    84 | 85 | 86 |
    87 |
    88 |
    89 | 90 | 91 |
    92 |
    93 | 94 | 95 |
    96 |
    97 | 98 | 99 |
    100 |
    101 | 102 | 103 |
    104 |
    105 | 106 |
    107 |
    108 |
    109 |

    110 | Your cart 111 | 112 |

    113 |
      114 |
    • Total (USD) $0
      • 115 |
    116 |
    117 |
    118 |
    119 | 120 | 121 |
    122 |
    123 |
    124 |
    125 |
    126 | 127 | 128 | 129 | 130 | 131 | 132 | --------------------------------------------------------------------------------