AzeS Posted March 27, 2018 Share Posted March 27, 2018 I am working on a revision of the product cart in my shop, have found a suitable design and implement the required PHP snippets. So far so good, everything works, but somewhere an unexpected string has crept in. which i dont find because of an lack of experience in js. Shopping lists origin: https://codepen.io/bartveneman/pen/KHxLG?q=Cart%20&order=popularity&depth=everything&show_forks=false Generated HTML code: <script type="text/javascript"> /* 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" : "2.4GHz GPS WIFI Drone" "price" : "164.99" "img" : "IMG/COV/SHOP/IMG/REG/2017.10.2815.17.5925474Drone_SML.PNG" "desc" : "Flugzeit: 12 - 15 Minuten Ladezeit: 3- 4h" "pid" : "38" "qua" : "1" }, { "name" : "Dongguan Thermomixer" "price" : "349.89" "img" : "IMG/COV/SHOP/IMG/REG/2017.10.2612.04.3727212China-cheap-food-processor-dough-maker-with.png" "desc" : "Der Thermomixer feiert seit mehr als einem Jahrzehnt herausragende Erfolge. Schneiden, Zermahlen, Garen, Kochen, Mixen und Frittieren alles in einem Gerät, alles bald in Ihrer Küche." "pid" : "37" "qua" : "1" }, ], 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(); </script> Internal PHP Code: <script type="text/javascript"> /* 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 : [ <?php if (isset($_SESSION['cart'])) { foreach ($_SESSION['cart'] as $row) { if ($row > 0) { #var_dump($_SESSION['quant']); #echo $row; $cur_pro_on_car = $Shop->product_get($row); echo "{\n"; echo '"name" : "' . $crud->word($cur_pro_on_car['prdname'], 'UTF-8') . '"' . "\n"; echo '"price" : "' . $crud->word($cur_pro_on_car['price'] / 100, 'UTF-8') . '"' . "\n"; echo '"img" : "' . $crud->word($cur_pro_on_car['prdpicsml'], 'UTF-8') . '"' . "\n"; echo '"desc" : "' . $crud->word($cur_pro_on_car['detailsstr'], 'UTF-8') . '"' . "\n"; echo '"pid" : "' . $crud->word($cur_pro_on_car['PID'], 'UTF-8') . '"' . "\n"; echo '"qua" : "'; if (in_array($cur_pro_on_car['PID'], array_keys($_SESSION['quant']))) { echo $crud->word($_SESSION['quant'][$cur_pro_on_car['PID']], 'UTF-8') . '"' . "\n"; } else { echo "1". '"' . "\n"; } echo "},\n"; } } } ?> ], 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(); </script> I hope we can find a solution together and I look forward to your recommendations. Link to comment Share on other sites More sharing options...
kicken Posted March 27, 2018 Share Posted March 27, 2018 You need commas separating your fields in your app definition. var app = { shipping : 5.00, products : [ { "name" : "2.4GHz GPS WIFI Drone", "price" : "164.99", "img" : "IMG/COV/SHOP/IMG/REG/2017.10.2815.17.5925474Drone_SML.PNG", "desc" : "Flugzeit: 12 - 15 Minuten Ladezeit: 3- 4h", "pid" : "38", "qua" : "1" } //... However, the better way to do something like that is to use json_encode <?php $cart = []; if (isset($_SESSION['cart'])) { foreach ($_SESSION['cart'] as $row) { if ($row > 0){ $cur_pro_on_car = $Shop->product_get($row); $quantity = 1; if (in_array($cur_pro_on_car['PID'], array_keys($_SESSION['quant']))) { $quantity = $crud->word($_SESSION['quant'][$cur_pro_on_car['PID']], 'UTF-8'); } $cart[] = [ 'name' => $crud->word($cur_pro_on_car['prdname'], 'UTF-8') , 'price' => $crud->word($cur_pro_on_car['price'] / 100, 'UTF-8') , 'img' => $crud->word($cur_pro_on_car['prdpicsml'], 'UTF-8') , 'desc' => $crud->word($cur_pro_on_car['detailsstr'], 'UTF-8') , 'pid' => $crud->word($cur_pro_on_car['PID'], 'UTF-8') , 'qua' => $quantity ]; } } } ?> var app = { shipping : 5.00, products : <?php echo htmlspecialchars(json_encode($cart)); ?>, //... }; Link to comment Share on other sites More sharing options...
AzeS Posted March 28, 2018 Author Share Posted March 28, 2018 Thanks kicken, that solved it, i will concider to use the json encode Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.