Даник спс за быстрый пример. Пример подходит и из базы добавлять товары с картинками можно , но есть 1 нюанс тогда не сработает моя корзина покупок .
у меня есть функция
<div class="item border">
<a href="#" onclick="cart.addToCart(this, '1', 'IPhone 5', '20500')" class="item_img"><img src="img/shop/iphone5.png" width="50"></a>
<p><b>IPhone 5</b> | Цена: 20500 руб</p>
<button class="border" onclick="cart.addToCart(this, '1', 'IPhone 5', '20500')">Купить</button>
</div>
а
функция cart.addToCart описанно ниже
/***************************************
* JQuery based script
* Basket on client side
* Created WebInside WebStudio (c) 2014
* Use only for linked
www.webinside.ru
**************************************/
function WICard(obj)
{
this.widjetX = 0;
this.widjetY = 0;
this.widjetObj;
this.widjetPos;
this.cardID = "";
this.DATA = {};
this.IDS = [];
this.objNAME = obj;
this.CONFIG = {};
this.IMG = "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABp FBMVEUAAABEREBEREBEREBEREASEhEJCQgGBgYBAQEAAAAGBgU HBwYAAAAAAAADAwNEREBEREAJCQkICAcGBgYFBQUJCQgnJyVER EAICAgBAQEAAAAICAcAAAAAAAAAAAAJCQgAAAAGBgYBAQEQEA8 NDQwHBwcBAQEMDAsSEhEJCQkBAQEBAQEBAQFAQDxEREBEREADA wIAAAABAQESEhEkJCIAAAAICAgAAAAQEA9EREAAAAATExIAAAA KCgkNDQwAAAAAAAABAQETExIHBwcDAwMDAwMTExIAAAAAAAABA QEAAAAAAAAAAAAAAAAAAAAAAAADAwIAAAAGBgUBAQEWFhUAAAA AAAAHBwYBAQEVFRMDAwMHBwcUFBMWFhUBAQETExIAAAAAAAADA wMMDAsAAAAAAAASEhEAAAAUFBMAAAAJCQkrKygDAwMAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAADAwMAAAAJCQgAAAAiIiABA QEAAAAAAAAAAAAAAAAAAAAAAAAAAAABAQFEREAFBQUBAQEAAAA GBgYICAgHBwcBAQEJW8x2AAAAhXRSTlMAAQcIAjJ0kZqZnp+La ygNDxKw/v6wIwPY1A+upf4nenGWvXCg/Pubc8eSmLkcHxpW+vlhBr6hl3EDUl9pop5Q+fhe+1FPXVT8mlx fXWD9+1dbnPRRRved9ldI+Fhd+mBaVlSYWJN1V2dqwwVTA8ORv JXAknRzKii2rCjc3BUTqagrepgUbRZwswAAAAlwSFlzAAAASAA AAEgARslrPgAAAb1JREFUOMuNk2dTwkAQhpdiCZagotiwd5RYQ eyKJdii2FDsvffeG0TJnza3lzg4kBnv0zt5NpvdZ3IA/zs6vUGv00wAxrj4hESGnERTkomk5JRU1swaFZ6WnhEMieSEgl9 qsmRmWVWe/R2W8KkUjkw5uUr/vNhcEvPpLHEZGly0FYA8pb4wqMFFscioBzAU06lKSsvKKa+orK qmqYY1yB3smGvrHFx9A0mNTQ6uuQU7Oc1yB50Lc6uDc0ObXNHY TlIHfqmTJaZcmLvkpwDdPb19hAODkzjRlAuzpx93GhhEPsTjpF 6gBTg1PyxnN4d8hHKJoQUhuhU/qvKxcWVTWmAPKlsLE5RP8qoJLND5vhQ/U9PIYWZWNcWgyTnFpH+ecoCFgNKTQZM+atK/qHI3txSg73gjTC6vIF9dw0nXhSiTG8g3eaEeJ92KMrlN+I4gSp 5dkvaiTO4fAKwJ6PQQ4Og4wuQJ3fp070zZXzhJOafpAgsuQ2Gt f+4KC64tWtx2gybZW61/8g7QpPn+ITZ/fAI0yVqfX2wx+r8+gxVNkl3f3j+cnU4v3j4vSa73NwDrJ5qkt+ f3Jv5N6u3Vvt0/UGcpYbC85ecAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTMtMDUtMT hUMDY6MDM6MzEtMDU6MDALk1CfAAAAJXRFWHRkYXRlOm1vZGlm eQAyMDEzLTA1LTE4VDA2OjAzOjMxLTA1OjAwes7oIwAAAABJRU 5ErkJggg==";
this.init = function(widjetID, config)
{
this.CONFIG = config || {};
try {
this.DATA = JSON.parse(localStorage.getItem(widjetID)); // code to try
//console.log("TRY - OK");
if ($.isEmptyObject(this.DATA))
{
this.DATA = {};
}
}
catch (e)
{
this.DATA = {};
//onsole.log("TRY - BED");
}
try {
this.IDS = JSON.parse(localStorage.getItem(widjetID + "_ids"));
if ($.isEmptyObject(this.IDS))
{
this.IDS = [];
}
}
catch (e)
{
this.IDS = [];
}
//console.log(this.DATA);
this.cardID = widjetID;
$("body").append("<div class='bird' id='"+widjetID +"_bird'></div>");
this.widjetObj = $("#" + widjetID);
this.widjetPos = this.widjetObj.position();
if ($.isEmptyObject(this.DATA))
{
this.widjetObj.html("Корзина пуста");
}
else
{
this.reCalc();
}
}
/************************************************** *********************************************
* example: onclick="cart.addToCart(this, '2', 'Name of comic 2', '25500')
************************************************** ********************************************/
this.addToCart = function(curObj, id, name, price)
{
var goodieLine = {"id" : id, "name" : name, "price": price, "num" : 1, "url" : document.location.href};
if ($.isEmptyObject(this.DATA))
{
this.DATA[id] = goodieLine;
this.IDS.push(id);
}
else
for(var idkey in this.DATA)
{
if($.inArray(id, this.IDS) === -1)
{
this.DATA[id] = goodieLine;
this.IDS.push(id)
}
else
if (idkey == id)
{
this.DATA[idkey].num += 1;
}
}
localStorage.setItem(this.cardID, JSON.stringify(this.DATA));
localStorage.setItem(this.cardID + "_ids", JSON.stringify(this.IDS));
this.reCalc();
this.renderBasketTable();
var bird = $("#" + this.cardID + "_bird");
var pos = $(curObj).position();
bird.offset({ top: pos.top, left: pos.left});
bird.html(price);
//bird.show();
bird.animate(
{
'left': this.widjetPos.left,
'top': this.widjetPos.top
}
,
{
'duration': 500,
complete: function()
{
bird.offset({ top: -300, left: -300});
}
});
if (this.CONFIG.showAfterAdd)
{
}
}
this.reCalc = function()
{
var num = 0;
var sum = 0;
for(var idkey in this.DATA)
{
num += parseInt(this.DATA[idkey].num);
sum += parseFloat(parseInt(this.DATA[idkey].num) * parseFloat(this.DATA[idkey].price));
}
this.widjetObj.html("Товаров " + num + " на сумму " + sum);
}
this.clearBasket = function()
{
this.DATA = {};
this.IDS = [];
this.widjetObj.html("Корзина пуста");
localStorage.setItem(this.cardID, "{}");
localStorage.setItem(this.cardID + "_ids", "[]");
$("#btable").html('');
}
this.renderBasketTable = function()
{
if ($('#bcontainer').length == 0)
{
$("body").append(" \
<div id='blindLayer' class='blindLayer'></div> \
<div id='bcontainer' class='bcontainer'> \
<div id='bsubject'>КОРЗИНА<a id='bclose' href='#' onclick='" + this.objNAME + ".closeWindow(\"bcontainer\", 1);'><img src='data:image/jpeg;base64,"+ this.IMG + "' /></a></div> \
<td></td></tr></table> \
<div id='overflw'><table class='btable' id='btable'></table></div> \
<div id='bfooter'> <button class='bbutton' onclick=\"cart.showWinow('order', 1)\">Оформить заказ</button><span id='bsum'>...</span></div> \
</div> \
");
}
else
{
$("#btable").html("");
}
this.center( $("#bcontainer") )
var sum = 0;
for(var idkey in this.DATA)
{
with (this.DATA[idkey])
{
sum += parseFloat(price * num);
var productLine = '<tr class="bitem" id="wigoodline-' + id + '"><td>'+ id +'</td><td><a href="' + url + '">'+ name +'</a></td><td class="wigoodprice">' + price + ' руб.</td><td>'+ num +'</td><td>'+ parseFloat(price * num) +'</td><td><a href="#" onclick="' + this.objNAME + '.delItem(\'' + id + '\')"><img src="data:image/jpeg;base64,'+ this.IMG + '" /></a></td></tr>';
}
$("#btable").append(productLine);
}
$("#bsum").html(sum + " руб.");
}
this.center = function(obj)
{
obj.css({"top" : "200px"});
obj.css({"left" : Math.max(0, (($(window).width() - $(obj).outerWidth()) / 2) + $(window).scrollLeft()) + "px"});
return obj;
}
this.showWinow = function(win, blind)
{
$("#" + win).show();
if (blind)
$("#blindLayer").show();
}
this.closeWindow = function(win, blind)
{
$("#" + win).hide();
if (blind)
$("#blindLayer").hide();
}
this.delItem = function(id)
{
if (confirm("Удалить #" + id + "?"))
{
$("#btable").html("");
delete this.DATA[id];
this.IDS.splice( $.inArray(id, this.IDS), 1 );
this.reCalc();
this.renderBasketTable();
localStorage.setItem(this.cardID, JSON.stringify(this.DATA));
localStorage.setItem(this.cardID + "_ids", JSON.stringify(this.IDS));
}
}
this.sendOrder = function(domElm)
{
if (this.CONFIG.valudate)
{
var valid = this.CONFIG.valudate.validationEngine('validate');
if (!valid) return false;
}
var bodyHTML = "";
var arr = domElm.split(",");
for (var f=0; f < arr.length; f++) {
bodyHTML += this.getForm(arr[f]) + "<br><br>";
};
//return bodyHTML;
$.post( "sendmail.php?subj=ZAKAZ BASKET", { "order": bodyHTML }).done(function( data ) {
cart.closeWindow("bcontainer", 1)
cart.closeWindow("order", 0);
if (cart.CONFIG.clearAfterSend)
{
cart.clearBasket();
}
alert("Спасибо за покупку!\nМы свяжемся с Вами в ближайшее время");
});
}
this.getForm = function (formId)
{
var formObj = document.getElementById(formId);
var copyForm = formObj.cloneNode(true);
INPUTS=[].slice.call( copyForm.querySelectorAll("input,select,textarea") );
INPUTS.forEach(function(elm)
{
if (elm.type == 'checkbox')
{
var spanReplace = document.createElement("span");
spanReplace.innerHTML = (elm.checked) ? elm.value : "";
elm.parentNode.replaceChild(spanReplace, elm);
}
else if ((elm.type == 'text') || (elm.type == 'hidden'))
{
var subjP = document.createElement('b');
subjP.innerHTML = elm.placeholder;
elm.parentNode.insertBefore(subjP, elm);
var spanReplace = document.createElement("div");
spanReplace.innerHTML = elm.value;
elm.parentNode.replaceChild(spanReplace, elm);
}
});
return copyForm.innerHTML;
}
}
