249 lines
7.8 KiB
Plaintext
Executable File
249 lines
7.8 KiB
Plaintext
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title><%= companyName %></title>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="description" content="Colo Shop Template">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="styles/bootstrap4/bootstrap.min.css">
|
|
<link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
|
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.carousel.css">
|
|
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
|
|
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/animate.css">
|
|
<link rel="stylesheet" type="text/css" href="styles/main_styles.css">
|
|
<link rel="stylesheet" type="text/css" href="styles/responsive.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="super_container">
|
|
|
|
<!-- Header -->
|
|
|
|
<header class="header trans_300">
|
|
|
|
<!-- Top Navigation -->
|
|
|
|
<div class="top_nav">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="top_nav_left">This website is powered by SheetCommerce</div>
|
|
</div>
|
|
<div class="col-md-6 text-right">
|
|
<div class="top_nav_right">
|
|
<ul class="top_nav_menu">
|
|
|
|
<!-- Currency / Language / My Account -->
|
|
|
|
<!---<li class="currency">
|
|
<a href="#">
|
|
usd
|
|
<i class="fa fa-angle-down"></i>
|
|
</a>
|
|
<ul class="currency_selection">
|
|
<li><a href="#">cad</a></li>
|
|
<li><a href="#">aud</a></li>
|
|
<li><a href="#">eur</a></li>
|
|
<li><a href="#">gbp</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="language">
|
|
<a href="#">
|
|
English
|
|
<i class="fa fa-angle-down"></i>
|
|
</a>
|
|
<ul class="language_selection">
|
|
<li><a href="#">French</a></li>
|
|
<li><a href="#">Italian</a></li>
|
|
<li><a href="#">German</a></li>
|
|
<li><a href="#">Spanish</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="account">
|
|
<a href="#">
|
|
My Account
|
|
<i class="fa fa-angle-down"></i>
|
|
</a>
|
|
<ul class="account_selection">
|
|
<li><a href="#"><i class="fa fa-sign-in" aria-hidden="true"></i>Sign In</a></li>
|
|
<li><a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i>Register</a></li>
|
|
</ul>
|
|
</li>-->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Navigation -->
|
|
|
|
<div class="main_nav_container">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12 text-right">
|
|
<div class="logo_container">
|
|
<a href="#"><img
|
|
src="<%= logoUrl %>"
|
|
class="img-fluid" style="height:5rem;" /></a>
|
|
</div>
|
|
<nav class="navbar">
|
|
<ul class="navbar_menu">
|
|
<li><a href="#">home</a></li>
|
|
<li><a href="contact.html">contact</a></li>
|
|
</ul>
|
|
<ul class="navbar_user">
|
|
<li class="checkout">
|
|
<a href="cart.html">
|
|
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
|
|
<span id="checkout_items" class="checkout_items">2</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="hamburger_container">
|
|
<i class="fa fa-bars" aria-hidden="true"></i>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<div class="fs_menu_overlay"></div>
|
|
<div class="hamburger_menu">
|
|
<div class="hamburger_close"><i class="fa fa-times" aria-hidden="true"></i></div>
|
|
<div class="hamburger_menu_content text-right">
|
|
<ul class="menu_top_nav">
|
|
<li class="menu_item"><a href="#">home</a></li>
|
|
<li class="menu_item"><a href="#">cart</a></li>
|
|
<li class="menu_item"><a href="#">contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slider -->
|
|
|
|
<div class="main_slider"
|
|
style="background-image:url('<%= bannerUrl %>')">
|
|
<div class="container fill_height">
|
|
<div class="row align-items-center fill_height">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- New Arrivals -->
|
|
|
|
<div class="new_arrivals">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col text-center">
|
|
<div class="section_title new_arrivals_title">
|
|
<h2>Our Products</h2>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!---<div class="row align-items-center">
|
|
<div class="col text-center">
|
|
<div class="new_arrivals_sorting">
|
|
<ul class="arrivals_grid_sorting clearfix button-group filters-button-group">
|
|
<li class="grid_sorting_button button d-flex flex-column justify-content-center align-items-center active is-checked" data-filter="*">all</li>
|
|
<li class="grid_sorting_button button d-flex flex-column justify-content-center align-items-center" data-filter=".women">women's</li>
|
|
<li class="grid_sorting_button button d-flex flex-column justify-content-center align-items-center" data-filter=".accessories">accessories</li>
|
|
<li class="grid_sorting_button button d-flex flex-column justify-content-center align-items-center" data-filter=".men">men's</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>-->
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="product-grid"
|
|
data-isotope='{ "itemSelector": ".product-item", "layoutMode": "fitRows" }'>
|
|
|
|
<!-- Product 3 -->
|
|
<% for(var i = 0; i < csv.length ; i++) {%>
|
|
<div class="product-item women">
|
|
<div class="product product_filter">
|
|
<div class="product_image">
|
|
<img src="<%= csv[i]['product image url'] %>" alt="">
|
|
</div>
|
|
<div class="favorite"></div>
|
|
<div class="product_info">
|
|
<h6 class="product_name"><a href="#"><a><%= csv[i]["product name"] %></a></h6>
|
|
<div class="product_price">$<%= csv[i].cost %></div>
|
|
</div>
|
|
</div>
|
|
<div class="red_button add_to_cart_button"><a onClick="additem('<%= csv[i]['product name'] %>', <%= csv[i].cost %>)" style="color:white">Add to cart</a></div>
|
|
</div>
|
|
<% } %>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
|
|
|
|
<!-- Footer -->
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="footer_nav_container">
|
|
<div class="cr">©2018 All Rights Reserverd. This template is made with <i
|
|
class="fa fa-heart-o" aria-hidden="true"></i> by <a href="#">Colorlib</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<script src="js/jquery-3.2.1.min.js"></script>
|
|
<script src="styles/bootstrap4/popper.js"></script>
|
|
<script src="styles/bootstrap4/bootstrap.min.js"></script>
|
|
<script src="plugins/Isotope/isotope.pkgd.min.js"></script>
|
|
<script src="plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
|
|
<script src="plugins/easing/easing.js"></script>
|
|
<script src="js/custom.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
|
|
if (localStorage.getItem('<%- id %>') === null) {
|
|
console.log("here");
|
|
var arr = new Array();
|
|
localStorage.setItem('<%- id %>', JSON.stringify(arr));
|
|
}
|
|
|
|
var arr_json = JSON.parse(localStorage.getItem('<%- id %>'));
|
|
|
|
$("#checkout_items").html(arr_json.length);
|
|
console.log(arr_json.length);
|
|
|
|
});
|
|
|
|
function additem(name, price) {
|
|
var data = { 'name': name, 'price': price };
|
|
var arr_json = JSON.parse(localStorage.getItem('<%- id %>'));
|
|
console.log(typeof (arr_json));
|
|
arr_json.push(data);
|
|
localStorage.setItem('<%- id %>', JSON.stringify(arr_json));
|
|
console.log(JSON.parse(localStorage.getItem('<%- id %>')));
|
|
$('#checkout_items').html(arr_json.length);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |