Jump to content

Unexpectet String causes me cancer


AzeS

Recommended Posts

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:
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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.