Корзина покупок на jQuery

В данном уроке мы создаем клиентскую часть корзины покупок с использованием jQuery. Управление вычислениями общего количества и суммы покупки будет осуществляться в JavaScript.

Для формирования корзины покупок будет использоваться технология "перетащи-и-брось" с помощью библиотеки jQuery UI. Весь список покупок можно будет прокручивать горизонтально с помощью перетаскивания курсором мыши.

 

HTML

Список товаров

В нашем примере нет серверной части, поэтому код разметки формирует простой список пунктов (в примере используется 10 товаров). Структура разметки проста:

     <div id="item_container">
          <div class="item" id="i1">
              <img src="/img/1.jpg"/>
              <label class="title">Майка 1</label>
              <label class="price">200 р.</label>
          </div>
          <div class="item" id="i2">
              <img src="/img/2.jpg"/>
              <label class="title">Майка 2</label>
              <label class="price">240 р.</label>
          </div>
			. . .
          <div class="clear"></div>
      <div>

Корзина покупок

В корзине покупок имеется элемент, в который будут "сбрасываться" покупки. Даная область также можно будет перетаскивать курсором мыши, чтобы посмотреть весь список покупок. Также в корзине покупок имеются элементы для навигации по списку покупок, кнопка очистки всей корзины сразу и индикаторы общего количества выбранных товаров и суммы покупки.

      <div id="cart_container">
          <div id="cart_title">
              <span>Корзина покупок</span>
              <div class="clear"></div>
          </div>
          <div id="cart_toolbar">
              <div id="cart_items" class="back"></div>
          </div>
          <div id="navigate">
              <div id="nav_left">
                  <a href="/" id="btn_prev"><</a>
                  <a href="/" id="btn_next">></a>
                  <a href="/" id="btn_clear">Очистить корзину</a>
              </div>
              <div id="nav_right">
                  <span class="sptext">
                      <label>Покупок </label><label class="count" id="citem">0</label>
                  </span>
                  <span class="sptext">
                      <label>Цена </label><label class="count" id="cprice">0 р.</label>
                  </span>
              </div>
              <div class="clear"></div>
          </div>
      </div>

 

jQuery

Инициализация корзины

Код инициализации устанавливает возможность перетаскивания пунктов списка (формирования копии в новом месте) и элемента с покупками (движение только по горизонтали), и формирует действия после сброса товара в корзину (обновляется общее количество покупок и сумма, устанавливается ссылка для удаления пункта из корзины покупок).

    var total_items = 0;
    var total_price = 0;
    $(document).ready(function() {

        $(".item").draggable({
            revert: true            
        });
        $("#cart_items").draggable({
            axis: "x"
        });

        $("#cart_items").droppable({
            accept: ".item",
            activeClass: "drop-active",
            hoverClass: "drop-hover",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">';
                html = html + '<div class="divrm">';
                html = html + '<a onclick="remove(this)" class="remove '+itemid+'">&times;</a>';
                html = html + '<div/>'+item+'</div>';
                $("#cart_items").append(html);

                // Обновление общего количества
                total_items++;
                $("#citem").html(total_items);

                // Обновление общей цены
                var price = parseInt(ui.draggable.find(".price").html().replace(" р.", ""));
                total_price = total_price + price;
                $("#cprice").html(total_price + " р.");

                // Расширяем корзину
                if (total_items > 4) {
                    $("#cart_items").animate({width: "+=120"}, 'slow');
                }
            }
        });
    });

Удаление пункта из корзины покупок

Когда удаляется пункт из корзины покупок нужно обновить общее количество и сумму:

    function remove(el) {
        $(el).hide();
        $(el).parent().parent().effect("highlight", {color: "#ff0000"}, 1000);
        $(el).parent().parent().fadeOut('1000');
        setTimeout(function() {
            $(el).parent().parent().remove();
            // Сворачиваем позицию в корзине
            if (total_items > 3) {
                $("#cart_items").animate({width: "-=120"}, 'slow');
            }
        }, 1100);

        // Обновляем общее количество
        total_items--;
        $("#citem").html(total_items);

        // Обновляем общую цену
        var price = parseInt($(el).parent().parent().find(".price").html().replace(" р.", ""));
        total_price = total_price - price;
        $("#cprice").html(total_price + " р.");
    }

Навигация по корзине покупок

Перетаскивание области со списком покупок является не единственным способом навигации по корзине. Мы добавили два элемента для прокручивания списка покупок влево и вправо. Они манипулируют свойством CSS left.

        $("#btn_next").click(function() {
            $("#cart_items").animate({left: "-=100"}, 100);
            return false;
        });
        $("#btn_prev").click(function() {
            $("#cart_items").animate({left: "+=100"}, 100);
            return false;
        });
        $("#btn_clear").click(function() {
            $("#cart_items").fadeOut("2000", function() {
               $(this).html("").fadeIn("fast").css({left: 0});
            });
            $("#citem").html("0");
            $("#cprice").html("0 р.");
            total_items = 0;
            total_price = 0;
            return false;
        });

 

CSS

        body {
            font-family: Arial, "Free Sans";
            margin: 0;
            padding: 0;
        }
        #main {
            background: #0099cc;
            margin-top: 0;
            padding: 2px 0 4px 0;
            text-align: center;
        }
        #main a {
            color: #ffffff;
            text-decoration: none;
            font-size: 12px;
            font-weight: bold;
            font-family: Arial;
        }
        #main a:hover {
            text-decoration: underline;
        }
        #item_container {
            width: 610px;
            margin: 0 auto;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .item {
            background: #fff;
            float: left;
            padding: 5px;
            margin: 5px;
            cursor: move;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            box-shadow: 0 1px 2px rgba(0,0,0,.5);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            z-index: 5;
        }
        .title, .price {
            display: block;
            text-align: center;
            font-size: 14px;
            letter-spacing: -1px;
            font-weight: bold;
            cursor: move;
        }
        .title {
            color: #333;
        }
        .price {
            color: #0099cc;
            margin-top: 5px;
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
        }
        .icart, .icart label {
            cursor: e-resize;
        }
        .divrm {
            text-align: right;
        }
        .remove {
            text-decoration: none;
            cursor: pointer;
            font-weight: bold;
            font-size: 20px;
            position: relative;
            top: -7px;
        }
        .remove:hover {
            color: #999;
        }
        .clear {
            clear: both;
        }
        #cart_container {
            margin: 0 auto;
            width: 495px;
        }
        #cart_title span {
            border: 8px solid #666;
            border-bottom-width: 0;
            background: #333;
            display: block;
            float: left;
            color: #fff;
            font-size: 11px;
            font-weight: bold;
            padding: 5px 10px;
            -webkit-border-radius: .5em .5em 0 0;
            -moz-border-radius: .5em .5em 0 0;
            border-radius: .5em .5em 0 0;
        }
        #cart_toolbar {
            overflow: hidden;
            border: 8px solid #666;
            height: 190px;
            z-index: -2;
            width: 483px;
            -webkit-border-radius: 0 .5em 0 0;
            -moz-border-radius: 0 .5em 0 0;
            border-radius: 0 .5em 0 0;
            background: #ffffff;
        }
        #cart_items {
            height: 190px;
            width: 483px;
            position: relative;
            padding: 0 0 0 2px;
            z-index: 0;
            cursor: e-resize;
            border-width: 0 2px;
        }
        .back {
            background: #e9e9e9;
        }
        #navigate {
            width: 463px;
            margin: 0 auto;
            border: 8px solid #666;
            border-top-width: 0;
            -webkit-border-radius: 0 0 .5em .5em;
            -moz-border-radius: 0 0 .5em .5em;
            border-radius: 0 0 .5em .5em;
            padding: 10px;
            font-size: 14px;
            background: #333;
            font-weight: bold;
        }
        #nav_left {
            float: left;
        }
        #nav_left a {
            padding: 4px 8px;
            background: #fff;
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            text-decoration: none;
            color:#0099cc;
        }
        #nav_left a:hover {
            background: #666;
            color: #fff;
        }
        #nav_right {
            float: right;
        }
        .sptext {
            background: #ffffff;
            padding: 4px 8px;
            margin-left: 8px;            
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            color: #666;
        }
        .count {
            color: #0099cc;
        }
        .drop-active {
            background: #ffff99;
        }
        .drop-hover {
            background: #ffff66;
        }

В итоге получаем интерфейс корзины покупок:

Готово!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/IGugWTvD638/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Корзина покупок на jQuery | | 2012-06-19 12:03:46 | | Статьи Web-мастеру | | В данном уроке мы создаем клиентскую часть корзины покупок с использованием jQuery. Управление вычислениями общего количества и суммы покупки будет осуществляться в JavaScript.Для формирования | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: