• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] JS Warenkorb & Artikel

U

Undaground

New member
Hallo liebe Community,

Ich habe vor meinem Onkel die Arbeit in der Pizzeria etwas leichter zu machen und habe mich dazu entschlossen ein kleines Programm/Anwendung/Script für ihn zu programmieren damit er die Bestellungen die telefonisch eingehen leichter aufnehmen kann.

Das ganze soll eine Webanwendung sein, da er ein Tablet benutzt und ich nur HTML/CSS Kenntnisse habe.


Der Plan:

Eine schlichte Page mit einer Speisekarte(LINKS) und einem Warenkorb/Merkzettel(Rechts).
Bei einer Bestellung braucht mein Onkel in dem Sinne nur noch das ausgewählte Produkt aus der Speisekarte in den Warenkorb zu legen, im Warenkorb/Merkzettel den Namen und Lieferanschrift eingeben. Der Gesamtpreis wird unten ausgerechnet und mit dem "klick" auf den Button "Drucken" wird das ganze evtl. in eine PDF übertragen die es ermöglicht die Bestellung auszudrucken.

So weit bin ich:

Ich habe bereits die grobe Form wie das ganze aussehen soll, von JS habe ich noch so gut wie keine Ahnung und frage hier weil ich ein kostenloses Warenkorbscript gefunden habe und mit dem ich es mir Vorstellen kann es zu verwirklichen.

Bild:



Dazu habe ich ein paar Fragen:

Der Warenkorb ist Visuell Funktionsfähig, damit meine ich das ich die Anzahl der Produkte (im Warenkorb) verändern oder entfernen kann und er mir den Preis berechnet.

Wie kann ich es machen das ich Produkte aus der Speisekarte in den Warenkorb hinzufügen kann?

Ich denke weil der Warenkorb JS ist sollte die Produktliste auch aus JS bestehen?
Wenn ja, könnte mir jemand ein Beispielcode zeigen mit 1-2 Produkten und wie ich das dann in die HTML-Datei einbinden kann?

Ich wäre sehr Dankbar und würde evtl. ein kleines Dankeschön überweisen wenn es klappt.

Mit freundlichen Grüßen, Unda

WARENKORB JS:
Code: 
/* jslint browser: true*/
/*global $*/

// https://github.com/jasonmoo/t.js
(function(){function c(a){this.t=a}function l(a,b){for(var e=b.split(".");e.length;){if(!(e[0]in a))return!1;a=a[e.shift()]}return a}function d(a,b){return a.replace(h,function(e,a,i,f,c,h,k,m){var f=l(b,f),j="",g;if(!f)return"!"==i?d(c,b):k?d(m,b):"";if(!i)return d(h,b);if("@"==i){e=b._key;a=b._val;for(g in f)f.hasOwnProperty(g)&&(b._key=g,b._val=f[g],j+=d(c,b));b._key=e;b._val=a;return j}}).replace(k,function(a,c,d){return(a=l(b,d))||0===a?"%"==c?(new Option(a)).innerHTML.replace(/"/g,"""):
a:""})}var h=/\{\{(([@!]?)(.+?))\}\}(([\s\S]+?)(\{\{:\1\}\}([\s\S]+?))?)\{\{\/\1\}\}/g,k=/\{\{([=%])(.+?)\}\}/g;c.prototype.render=function(a){return d(this.t,a)};window.t=c})();
// end of 't';

Number.prototype.to_$ = function () {
  return "€" + parseFloat( this ).toFixed(2);
};
String.prototype.strip$ = function () {
  return this.split("€")[1];
};

var app = {

  shipping : 5.00,
  products : [
      {
        "name" : "Napoli",
        "price" : "4.50",
        "img" : "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQwBTdBb4JKW6HHVEKxIgu9DkSh3c5IvbCsCBxLRpP-Dze08CH1",
        "desc" : "Mozarella und Tomatenscheiben"
      },
      {
        "name" : "Vegetaria",
        "price" : "4.50",
        "img" : "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQwBTdBb4JKW6HHVEKxIgu9DkSh3c5IvbCsCBxLRpP-Dze08CH1",
        "desc" : "Champignon, Peperoni, Paprika, Artischoken u. Zwiebel"
      },
      {
        "name" : "Vegetaria alla Chef",
        "price" : "4.50",
        "img" : "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQwBTdBb4JKW6HHVEKxIgu9DkSh3c5IvbCsCBxLRpP-Dze08CH1",
        "desc" : "Spinat, Broccoli, Tomaten, Artischocke Oliven, Zwiebel"
      },
      {
        "name" : "Proscitto",
        "img" : "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQwBTdBb4JKW6HHVEKxIgu9DkSh3c5IvbCsCBxLRpP-Dze08CH1",
        "price" : "4.50",
        "desc" : "Vorderschinken"
      }
    ],

  removeProduct: function () {
    "use strict";

    var item = $(this).closest(".shopping-cart--list-item");

    item.addClass("closing");
    window.setTimeout( function () {
      item.remove();
      app.updateTotals();
    }, 500); // Timeout for css animation
  },

  addProduct: function () {
    "use strict";

    var qtyCtr = $(this).prev(".product-qty"),
        quantity = parseInt(qtyCtr.html(), 10) + 1;

    app.updateProductSubtotal(this, quantity);
  },

  subtractProduct: function () {
    "use strict";

    var qtyCtr = $(this).next(".product-qty"),
        num = parseInt(qtyCtr.html(), 10) - 1,
        quantity = num <= 0 ? 0 : num;

    app.updateProductSubtotal(this, quantity);
  },

  updateProductSubtotal: function (context, quantity) {
    "use strict";

    var ctr = $(context).closest(".product-modifiers"),
        productQtyCtr = ctr.find(".product-qty"),
        productPrice = parseFloat(ctr.data("product-price")),
        subtotalCtr = ctr.find(".product-total-price"),
        subtotalPrice = quantity * productPrice;

    productQtyCtr.html(quantity);
    subtotalCtr.html( subtotalPrice.to_$() );

    app.updateTotals();
  },

  updateTotals: function () {
    "use strict";

    var products = $(".shopping-cart--list-item"),
        subtotal = 0,
        shipping;

    for (var i = 0; i < products.length; i += 1) {
      subtotal += parseFloat( $(products[i]).find(".product-total-price").html().strip$() );
    }

    shipping = (subtotal > 0 && subtotal < (100 / 1.06)) ? app.shipping : 0;

    $("#subtotalCtr").find(".cart-totals-value").html( subtotal.to_$() );
    $("#taxesCtr").find(".cart-totals-value").html( (subtotal * 0.06).to_$() );
    $("#totalCtr").find(".cart-totals-value").html( (subtotal * 1.06 + shipping).to_$() );
    $("#shippingCtr").find(".cart-totals-value").html( shipping.to_$() );
  },

  attachEvents: function () {
    "use strict";

    $(".product-remove").on("click", app.removeProduct);
    $(".product-plus").on("click", app.addProduct);
    $(".product-subtract").on("click", app.subtractProduct);
  },

  setProductImages: function () {
    "use strict";

    var images = $(".product-image"),
        ctr,
        img;

    for (var i = 0; i < images.length; i += 1) {
      ctr = $(images[i]),
      img = ctr.find(".product-image--img");

      ctr.css("background-image", "url(" + img.attr("src") + ")");
      img.remove();
    }
  },

  renderTemplates: function () {
    "use strict";

    var products = app.products,
        content = [],
        template = new t( $("#shopping-cart--list-item-template").html() );

    for (var i = 0; i < products.length; i += 1) {
      content[i] = template.render(products[i]);
    }

    $("#shopping-cart--list").html(content.join(""));
  }

};

app.renderTemplates();
app.setProductImages();
app.attachEvents();

WARENKORB-HTML:

HTML: 
<h1>Bestellung</h1>

		<section class="shopping-cart">
			<ol class="ui-list shopping-cart--list" id="shopping-cart--list">

				<script id="shopping-cart--list-item-template" type="text/template">
					
					<li class="_grid shopping-cart--list-item">
						<div class="_column product-image">
							<img class="product-image--img" src="{{=img}}" alt="Item image" />
						</div>
          
						<div class="_column product-info">
							<h4 class="product-name">{{=name}}</h4>
							<p class="product-desc">{{=desc}}</p>
							<div class="price product-single-price">€{{=price}}</div>
						</div>
					
						<div class="_column product-modifiers" data-product-price="{{=price}}">
							<div class="_grid">
								<button class="_btn _column product-subtract">−</button>
								<div class="_column product-qty">0</div>
								<button class="_btn _column product-plus">&plus;</button>
							</div>
							<button class="_btn entypo-trash product-remove">Entfernen</button>
							<div class="price product-total-price">€0.00</div>
						</div>
					</li>
				</script>

			</ol>

			<footer class="_grid cart-totals">
				<div class="_column subtotal" id="subtotalCtr">
					<div class="cart-totals-key">Rechnung</div>
					<div class="cart-totals-value">€0.00</div>
				</div>
    
				<div class="_column shipping" id="shippingCtr">
					<div class="cart-totals-key">Shipping</div>
					<div class="cart-totals-value">€0.00</div>
				</div>
      
				<div class="_column taxes" id="taxesCtr">
					<div class="cart-totals-key">Taxes (6%)</div>
					<div class="cart-totals-value">€0.00</div>
				</div>
				
				<div class="_column total" id="totalCtr">
					<div class="cart-totals-key">Total</div>
					<div class="cart-totals-value">€0.00</div>
				</div>
				
				<div class="_column checkout">
					<button class="_btn checkout-btn entypo-forward">Drucken</button>
				</div>
			</footer>

		</section>


WARENKORB CSS:
Code: 
[class*="entypo-"]:before { font-family: 'entypo', sans-serif; }
body {
  background-color: #ecf0f1;
  font: 300 1.25em/1.4 "Lato", sans-serif;
  color: #686868;
}
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
h1, .sub-heading {
  text-align: center;
  margin: .5rem 0 1rem;
}
.sub-heading {
  font-size: .75em;
  font-weight: 300;
}

/**
 * @section: utilities;
 * @see: Justify Grid [http://justifygrid.com/]
 */
._grid {
  text-align: justify !important;
  text-justify: distribute-all-lines;
  font-size: 0 !important;
  text-rendering: optimizespeed;
}
._grid:after {
  content: "";
  display: inline-block;
  width: 100%;
}
._column {
  display: inline-block;
  vertical-align: top;
  font-size: medium;
  text-align: left;
  text-rendering: optimizeLegibility;
}
._btn {
  display: inline-block;
  background-color: #bdc3c7;
  border: none;
  padding: .5em .75em;
  text-align: center;
  font-weight: 300;
}
._btn:hover,
.cart-totals:hover ._btn {
  background-color: #3498db;
  color: #ecf0f1;
}

/**
 * @section: shopping-cart;
 */
.shopping-cart {
  width: auto;
  max-width: 60rem;
  margin: 0 auto;
}
/**
 * @extends: _grid;
 */
.shopping-cart--list-item {
  border: 1px solid #bdc3c7;
  -webkit-border-radius: 50px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius: 50px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-radius: 50px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  
  margin-bottom: 1rem;
  height: 8rem;
  overflow: hidden;
}
.shopping-cart--list-item:hover,
.shopping-cart--list-item:hover * {
  border-color: #3498db;
}
.shopping-cart--list-item > ._column {
    height: 100%; /* make vertical lines match */
}

/**
 * @section: product-image;
 * @extends: _column;
 */
.product-image {
  border-right: 1px solid #bdc3c7;
  width: 16.663198%;
  background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") no-repeat center / cover transparent;
}

/**
 * @section: product-info;
 * @extends: _column;
 */
.product-info {
  width: 70.832119%;
  padding: .5rem;
}
.product-name {
  font: 300 1.4em/1 "Lato", sans-serif;
  letter-spacing: -.025em;
  margin: 0 0 .125em;
}
.price {
  line-height: 1;
  text-align: right;
}
.product-single-price {
  margin-top: -1rem;
  font-size: 1.4em;
}

/**
 * @section: product-modifiers;
 * @extends: _column;
 */
.product-modifiers {
  width: 12.496358%;
  text-align: right;
  border-left: 1px solid #bdc3c7;
}
.product-subtract,
.product-plus,
.product-qty {
  width: 33.330557%;
  background-color: transparent;
  color: #686868;
  text-align: center;
}
.product-qty {
  padding: .35em .75em;
}
.product-remove {
  font-size: .875em;
  margin-top: 3.35rem;
  background-color: #e74c3c;
  color: #ecf0f1;
  width: 100%;
  visibility: hidden;
}
.product-modifiers:hover .product-remove {
  visibility: visible;
}
.product-remove:before {
  margin-right: .5em;
}
.product-remove:hover {
  background-color: #c0392b;
}
.product-total-price {
  border-top: 1px solid #bdc3c7;
  color: #95a5a6;
  font-size: 1.25em;
  padding: .5rem;
}
.shopping-cart--list-item:hover .product-total-price {
  background-color: #3498db;
  color: #ecf0f1;
}

/**
 * @section: cart-totals;
 * @extends: _grid;
 */
.cart-totals {
  border-top: 1px solid #bdc3c7;
  margin-bottom: 3rem;
}
.cart-totals ._column {
  width: 19.984013%;
  padding: .5rem;
  line-height: 1.2;
}
.cart-totals ._column:not(:last-of-type) {
  border-right: 1px solid #bdc3c7;
}
.cart-totals ._column:first-of-type {
  padding-left: 0;
}
.cart-totals-key {
  font-size: 1.125em;
  color: #bdc3c7;
}
.cart-totals ._column:hover .cart-totals-value,
.cart-totals ._column:hover .cart-totals-key {
  color: #333;
}
.cart-totals-value {
  font-size: 1em;
}
._column.checkout {
  text-align: right;
  padding: 0;
  margin-top: 1.5em;
  vertical-align: middle;
}
.checkout-btn:before {
  margin-right: .5em;
}
._btn.checkout-btn:hover {
  background-color: #2980b9;
}

/**
 * Animations
 */
.product-remove,
.cart-totals * {
  transition: all .2s ease;
}
.closing {
  transition: all .5s ease;
  transform: translate3d(0, -100%, 0);
  opacity: 0;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben