Snack Jacks - 24/7 snacks delivery @ Narva 27, Tartu

In this example below you will see how to do a Snack Jacks - 24/7 snacks delivery @ Narva 27, Tartu with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by SnackJacks, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SnackJacks ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Snack Jacks - 24/7 snacks delivery @ Narva 27, Tartu</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>SnackJacks - 24/7 snacks delivery @ Narva 27, Tartu</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <main class="main">
    <div class="wrapper cf">
      <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FSnackJacksTartu%2F&tabs=messages&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  <div id="logo">
    <img src="http://snackjacks.uphero.com/img/logo_SnackJacks_bold.png"</img>
    <p>24/7 snacks delivery @ Narva 27</p>
  </div>
      
    <div class="navigation">
    <ul class="navElements"></ul>
  </div>
  
  <div class="nav">
    <ul class="box categories-list"></ul>
  </div>
  
  <div class="productsNoList">
  </div>
  
  <div class="box cart">
    <h1><i class="fa fa-shopping-cart"></i></h1>
    <ul class="cart-list"></ul>
  </div>

      </div>
</main>

<script type="text/ractive" id="product_item">
	{{#each products}}
<a class="productsNoList__item__box productsNoList__item">
      
<span class="productsNoList__item" on-click="add" title="Add to cart"></span>
      
				<p class="productsNoList__item-name">{{name}}</p>
        
				<img class="productsNoList__item-image" src="{{image}}/{{id}}" />
        
           <span class="productsNoList__item-price">{{price}} €</span>

			</a>
      
		
	{{/each}}
  </script>

<script type="text/ractive" id="cart_item">
	{{#if products}}

	{{#each products:i}}
		<li class="cart-list__item cf">
        <div class="cart-list__item-counter">
          <span class="fa fa-plus" on-click="plus:{{i}}"></span>
          <span class="fa fa-minus" on-click="minus:{{i}}"></span>
        </div>
			<img class="cart-list__item-image" src="{{image}}/{{id}}/" alt="{{name}}" />
			<span class="cart-list__item-name">{{quantity}}x {{name}} </span>
			<span class="cart-list__item-price"> {{price}} €</span>
			<span class="cart-list__item-discard discard-from-cart fa fa-lg fa-trash" on-click="discard:{{i}}"></span>
		</li>
	{{/each}}

		<li class="cart-list__subtotal cf">
			<span class="cart-list__subtotal-caption">Total: </span>
			<span class="cart-list__subtotal-number">{{subtotal}} €</span>
		</li>
    
    		<li class="cart-list__next">
			<span class="cart-list__next-text" on-click="back">Back</span>
		</li>

	{{else}}

		<li class="cart-list__empty">Empty</li>

	{{/if}}
</script>
  
  <script type="text/ractive" id="navigationElement_element">
  <span class="menu" on-click="showCart">=</span>
  <span class="miniLogo" on-click="showCart">SNACK JACKS</span>
  <span class="miniLogo" on-click="showCart">SNACK JACKS</span>
  			<span class="cart-list__item-name">x {{name}} </span>
	{{#each eelements}}
		<p class="navElements__item {{ active ? 'active' : '' }}" on-click="toggle">{{name}}</p>
	{{/each}}
  <p on-click="showCart">asd</p>
</script>

<script type="text/ractive" id="categories_item">
	{{#each categories}}
		<li class="categories-list__item {{ active ? 'active' : '' }}" on-click="toggle">{{name}}</li>
	{{/each}}
  <p on-click="showCart">asd</p>
</script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>

    <script src="js/index.js"></script>

</body>
</html>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/SnackJacks/snack-jacks-247-snacks-delivery-narva-27-tartu-OWxNyB */
@import "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css";
@import "https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700";
*,
*:before,
*:after {
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  outline: 0;
}
html,
body {
  height: 100%;
}
.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  *zoom: 1;
}
.f-left {
  float: left;
}
.f-right {
  float: right;
}
.table {
  display: table;
  vertical-align: middle;
  height: inherit;
}
.table > * {
  display: table-cell;
  vertical-align: middle;
}
/**
	UI
**/
a {
  text-decoration: none;
}
.box {
  display: inline-block;
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  border-radius: 5px;
  /*background: white;
  border: solid 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;*/
}
.box h1 {
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}
body {
  font-family: Verdana, sans-serif;
  font-size: 0.7em;
  background: linear-gradient(90deg, rgba(255, 255, 70, 0.2), rgba(245, 100, 50, 0.25));
}
/*.products {
  
  //display: inline-block;
  //display: block;
  //margin: auto;
   .next-text {
    display: none;
  }
  //width: 1000px;
}*/
.productsNoList {
  position: relative;
}
.productsNoList li.hidden {
  display: none;
}
.productsNoList__item__box {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  border-radius: 15px;
  margin: 10px;
}
.productsNoList__item {
  z-index: 4;
  position: relative;
  display: inline-block;
  width: 180px;
  height: 180px;
}
.productsNoList__item:focus,
.productsNoList__item:hover {
  font-weight: bold;
}
.productsNoList__item-name {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: inherit;
  padding: 5px;
  background: rgba(255, 165, 0, 0.75);
  font-size: 1.3em;
}
.productsNoList__item-image {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  width: inherit;
  height: inherit;
}
.productsNoList__item-price {
  font-weight: normal;
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  padding: 4px;
  font-size: 1.2em;
  width: inherit;
  background: rgba(255, 255, 255, 0.7);
}
/*.facebook {
  display: none;
}*/
.cart {
  margin: auto;
}
.cart .cart-list {
  list-style-type: none;
}
.cart .cart-list__subtotal {
  font-size: 16px;
}
.cart .cart-list__subtotal-caption {
  font-size: 14px;
}
.cart .cart-list__subtotal-number {
  font-weight: bold;
}
.cart .cart-list__next {
  text-align: center;
  border-top: solid 1px rgba(0, 0, 0, 0.15);
  font-size: 24px;
  cursor: pointer;
}
.cart .cart-list__next-text {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85);
}
.cart .cart-list__next-text:hover {
  transition: all 0 ease-out;
  color: orange;
}
.cart .cart-list__item {
  position: relative;
  padding: 4px 0px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.05);
}
.cart .cart-list__item:last-child {
  border-bottom: none;
}
.cart .cart-list__item > * {
  float: left;
  display: block;
}
.cart .cart-list__item-counter > span {
  display: block;
  width: inherit;
}
.cart .cart-list__item-counter .fa.fa-minus {
  cursor: pointer;
  color: red;
}
.cart .cart-list__item-counter .fa.fa-minus:hover {
  color: orange;
}
.cart .cart-list__item-counter .fa.fa-plus {
  cursor: pointer;
  color: lightgreen;
}
.cart .cart-list__item-counter .fa.fa-plus:hover {
  color: orange;
}
.cart .cart-list__item-counter-quantity {
  font-weight: bold;
}
.cart .cart-list__item-image {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}
.cart .cart-list__item-price {
  text-align: right;
}
.cart .cart-list__item-discard {
  opacity: 0.3;
  cursor: pointer;
}
.cart .cart-list__item-discard:hover {
  color: orange;
  opacity: 1;
}
.cart .cart-list__item:hover .discard-from-cart {
  transition: all 0 ease-out;
}
#logo {
  font-size: 1.3em;
}
.navigation .navElements {
  list-style-type: none;
  font-size: 1.3em;
}
.navigation .navElements__item {
  transition: all 0 ease-out;
  cursor: pointer;
}
.navigation .navElements__item:hover {
  font-weight: bold;
}
.navigation .navElements__item.active {
  font-weight: bold;
}
.navigation .menu {
  transition: all 0 ease-out;
  cursor: pointer;
  float: left;
}
.navigation .miniLogo {
  transition: all 0 ease-out;
  cursor: pointer;
}
.nav .categories-list {
  list-style-type: none;
  font-size: 1.3em;
}
.nav .categories-list__item {
  transition: all 0 ease-out;
  cursor: pointer;
}
.nav .categories-list__item:hover {
  font-weight: bold;
}
.nav .categories-list__item.active {
  font-weight: bold;
}
/*
.button {
  color: white;
  font: inherit;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  border: 1px solid gray;
  background: #555;
  margin: 2em 0;
  padding: 1em;
  position: fixed;
  right: 0;
  cursor: pointer;
}
.button:hover {
  padding-right: 1.5em;
}*/
/*#info-panel {
  display: none;
  width: 315px;
  background: rgba(0, 0, 0, 0.5);
}*/
@media (min-width: 900px) {
  .wrapper {
    text-align: center;
    max-width: 85%;
    margin: 0 auto;
  }
}


/*Downloaded from https://www.codeseek.co/SnackJacks/snack-jacks-247-snacks-delivery-narva-27-tartu-OWxNyB */
$(function () {

  var ProductList = new Ractive({
    el: '.productsNoList',
    template: '#product_item',
    data: {products: hardcodedProducts}
  });

  var Cart = new Ractive({
    el: '.cart-list',
    template: '#cart_item',
    data: {
      products: hardcodedCartProducts,
      subtotal: 0
    }
  });

  var NavigationMenu = new Ractive({
    el: '.navElements',
    template: '#navigationElement_element',
    data: {eelements: hardcodedNavigationElements}
  });
  
    var Categories = new Ractive({
    el: '.categories-list',
    template: '#categories_item',
    data: {categories: hardcodedCategories}
  });

  ProductList.on({
    add: function (event) {

      this.set(event.keypath + '.in_cart', true);

      Cart.push('products', event.context);
      
  $(".cart").scrollTop($(".cart").height());
     
    },
    

    discard: function (event) {

      this.set(event.keypath + '.in_cart', false);

      Cart.get('products').forEach(function (product, index) {
        if (event.context.id === product.id) {
          Cart.splice('products', index, 1);
        }
      });

    }
  });

  Cart.on({
    
    buy: function (event) {
        $("#info-panel").slideToggle("slow");
      $(".logo").slideToggle("slow");
      $(".latest-products").slideToggle("slow");
    },
    
    back: function (event) {
      $(".cart").toggle();
      $(".latest-products").toggle();
      $(".filters").toggle();
  $(".filters").css('display','inline-block');
    },
    
    plus: function (event, index) {
      var quantity = this.get(event.keypath + '.quantity');
      
      if (quantity === 99) return;
      this.set(event.keypath + '.quantity', ++quantity);
    },
    minus: function (event, index) {
      var quantity = this.get(event.keypath + '.quantity');
      
      if (quantity === 1) return;
      this.set(event.keypath + '.quantity', --quantity);
    },
    discard: function (event, index) {

      ProductList.get('products').forEach(function (product, index) {
        if (event.context.id === product.id) {
          ProductList.set('products.' + index + '.in_cart', false);
        }
      });

      this.splice('products', index, 1)
      ;
    }
  });

  Cart.observe('products', function (newValue, oldValue, keypath) {

    var subtotal = 0;

    this.get('products').forEach(function (product, index) {
      subtotal += parseFloat(product.price.replace(',', '.')) * product.quantity;
    });

    this.set('subtotal', (subtotal.toFixed(2)+'').replace('.', ','));
  });
  
    NavigationMenu.on({
      
        showCart: function (event) {
      $(".latest-products").toggle();
      //$(".nav").toggle();
      $(".cart").toggle();
  $(".cart").css('display','inline');
    },
    toggle: function (event) {
      if (event.context.active) {
        return;
      }

      this.set('eelements.*.active', false);
      this.set(event.keypath + '.active', true);

      ProductList.get('products').forEach(function (product, index) {
        ProductList.set('products.' + index + '.hidden',
          event.context.id !== 1 && event.context.id !== product.category);
      });

    }
  });

  Categories.on({
        showCart: function (event) {
      $(".latest-products").toggle();
      //$(".nav").toggle();
      $(".cart").toggle();
  $(".cart").css('display','inline');
    },
    toggle: function (event) {
      if (event.context.active) {
        return;
      }

      this.set('categories.*.active', false);
      this.set(event.keypath + '.active', true);

      ProductList.get('products').forEach(function (product, index) {
        ProductList.set('products.' + index + '.hidden',
          event.context.id !== 1 && event.context.id !== product.category);
      });

    }
  });

});


/**
	POJOS
**/
var hardcodedProducts = [
	{
		id: 1,
		name: 'Hustler 330ml',
		image: 'http://lorempixel.com/150/150/food',
		category: 2,
		price: '0,85',
		in_cart: false,
		hidden: false,
     quantity: 1
	},
	{
		id: 2,
		name: 'Product #2',
		image: 'http://lorempixel.com/150/150/food',
		category: 2,
		price: '1,66',
		in_cart: false,
		hidden: false,
     quantity: 1
	},
	{
		id: 3,
		name: 'Product #3',
		image: 'http://lorempixel.com/150/150/food',
		category: 3,
		price: '2,50',
		in_cart: false,
		hidden: false,
     quantity: 1
	},
	{
		id: 4,
		name: 'Product #4',
		image: 'http://lorempixel.com/150/150/food',
		category: 3,
		price: '9,99',
		in_cart: false,
		hidden: false,
     quantity: 1
	},
	{
		id: 5,
		name: 'Product #5',
		image: 'http://lorempixel.com/150/150/food',
		category: 4,
		price: '1,75',
		in_cart: false,
		hidden: false,
     quantity: 1
	},
	{
		id: 6,
		name: 'Product #6',
		image: 'http://lorempixel.com/150/150/food',
		category: 4,
		price: '4,50',
		in_cart: false,
		hidden: false,
     quantity: 1
	},
	{
		id: 7,
		name: 'Product #7',
		image: 'http://lorempixel.com/150/150/food',
		category: 5,
		price: '10,10',
		in_cart: false,
		hidden: false,
     quantity: 1
	},
	{
		id: 8,
		name: 'Product #8',
		image: 'http://lorempixel.com/150/150/food',
		category: 5,
		price: '7,60',
		in_cart: false,
		hidden: false,
     quantity: 1
	},
  {
		id: 9,
		name: 'Product #9',
		image: 'http://lorempixel.com/150/150/food',
		category: 4,
		price: '0,09',
		in_cart: false,
		hidden: false,
     quantity: 1
	},
   {
		id: 10,
		name: 'Product #10',
		image: 'http://lorempixel.com/150/150/food',
		category: 4,
		price: '0,09',
		in_cart: false,
		hidden: false,
     quantity: 1
	},
    {
		id: 11,
		name: 'Product #11',
		image: 'http://lorempixel.com/150/150/food',
		category: 4,
		price: '0,09',
		in_cart: false,
		hidden: false,
     quantity: 1
	}
];

var hardcodedCartProducts = [
];

var hardcodedCategories = [
	{
		id: 1,
		name: "Show all",
		active: true
	},
  {
		id: 2,
		name: "Kategooria",
		active: false
	},
	{
		id: 3,
		name: "Breakfast",
		active: false
	},
	{
		id: 4,
		name: "Lunch",
		active: false
	},
	{
		id: 5,
		name: "Dinner",
		active: false
	}
];

var hardcodedNavigationElements = [
	{
		id: 1,
		name: "Test",
		active: true
	},
  {
		id: 2,
		name: "Kategooria",
		active: false
	},
	{
		id: 3,
		name: "Breakfast",
		active: false
	},
	{
		id: 4,
		name: "Lunch",
		active: false
	},
	{
		id: 5,
		name: "Dinner",
		active: false
	}
];

Comments