HTML Часть
!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример корзины</title>
<style type="text/css">
.item_box {
width: 200px;
padding: 5px;
border: solid 1px black;
float: left;
position: relative;
top: 10px;
}
.buttons {
padding: 5px;
border: solid 1px black;
float: rigth;
position: absolute;
top: 500px;
left: 40%;
}
.cart_content {
padding: 5px;
border: solid 1px black;
float: rigth;
position: absolute;
top: 600px;
left: 40%;
}
</style>
</head>
<body>
<div class="item_box">
<h3 class="item_title">Flash Kingston 50 mb</h3>
<p>Выберите объём флеш-накопителя</p>
<p><input name="val1" type="radio" data-price="18" data-param="8 GB" value="7" checked> 8 GB</p>
<p><input name="val1" type="radio" data-price="20" data-param="16 GB" value="8"> 16 GB</p>
<p><input name="val1" type="radio" data-price="22" data-param="32 GB" value="9"> 32 GB</p>
<p><input name="val1" type="radio" data-price="24" data-param="64 GB" value="10"> 64 GB</p>
<!--p><input type="submit" value="Выбрать"></p-->
<p>Укажите количество:</p>
<p><input class="amount" value="1" size="5" maxlength="3"></p>
<p>Цена: <span class="item_price">18</span>$</p>
<button class="add_item">Добавить в корзину</button>
</div>
<div class="item_box">
<h3 class="item_title">Mouse Razer V3</h3>
<p>Укажите количество:</p>
<p><input class="amount" value="1" size="5" maxlength="3"></p>
<p>Цена: <span class="item_price">43</span>$</p>
<button class="add_item" data-id="11">Добавить в корзину</button>
</div>
<div class="item_box">
<h3 class="item_title">Flash ADATA 32 mb/40 mb</h3>
<p>Выберите объём флеш-накопителя</p>
<p><input name="val2" type="radio" data-price="24" data-param="8 GB" value="12" checked> 8 GB</p>
<p><input name="val2" type="radio" data-price="26" data-param="16 GB" value="13"> 16 GB</p>
<p><input name="val2" type="radio" data-price="30" data-param="32 GB" value="14"> 32 GB</p>
<p><input name="val2" type="radio" data-price="32" data-param="64 GB" value="15"> 64 GB</p>
<!--p><input type="submit" value="Выбрать"></p-->
<p>Укажите количество:</p>
<p><input class="amount" value="1" size="5" maxlength="3"></p>
<p>Цена: <span class="item_price">24</span>$</p>
<button class="add_item">Добавить в корзину</button>
</div>
<div class="item_box">
<h3 class="item_title">LAN Hub 10 ports</h3>
<p>Укажите количество:</p>
<p><input class="amount" value="1" size="5" maxlength="3"></p>
<p>Цена: <span class="item_price">44</span>$</p>
<button class="add_item" data-id="16">Добавить в корзину</button>
</div>
<div class="item_box">
<h3 class="item_title">Router D-Ling 100 mb/s 4 ports</h3>
<p>Укажите количество:</p>
<p><input class="amount" value="1" size="5" maxlength="3"></p>
<p>Цена: <span class="item_price">11</span>$</p>
<button class="add_item" data-id="17">Добавить в корзину</button>
</div>
<div class="item_box">
<h3 class="item_title">Local Cabel</h3>
<p>Выберите длину кабеля</p>
<p><input name="length" type="radio" data-price="38" data-param="50 метров" value="18" checked> 50 метров</p>
<p><input name="length" type="radio" data-price="41" data-param="100 Метров" value="19"> 100 Метров</p>
<p><input name="length" type="radio" data-price="43" data-param="150 метров" value="20"> 150 метров</p>
<!--p><input type="submit" value="Выбрать"></p><p>Укажите длину:</p-->
<p><input class="amount" value="1" size="5" maxlength="3"></p>
<p>Цена: <span class="item_price">30</span>$</p>
<button class="add_item">Добавить в корзину</button>
</div>
<div class="item_box">
<h3 class="item_title">Клавиатура Logitech 23215hs2</h3>
<p>Укажите количество:</p>
<p><input class="amount" value="1" size="5" maxlength="3"></p>
<p>Цена: <span class="item_price">5</span>$</p>
<button class="add_item" data-id="21">Добавить в корзину</button>
</div>
<div class="buttons">
<button id="checkout">Оформить заказ</button>
<button id="clear_cart">Очистить корзину</button>
</div>
<div class="cart_content">
<div id="cart_content"></div>
</div>