Удаления товара из корзины

@slimshady2901 · Регистрация: 01.12.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Есть код корзины на jqury+ajax:

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$(document).ready(function() {
    var Arrays=new Array();
        $('.prod_items li').mousemove(function(){
            var position = $(this).position();
            $('#cart').stop().animate({                                                                         
                    left: position.left+'px',
                },250,function(){
            });         
        }).mouseout(function(){
        }); 
        $('div.product').click(function(){
            var thisID = $(this).attr('id');
            var itemname  = $(this).find('p.name').html();
            var itemprice = $(this).find('p.price').html();
        if(include(Arrays,thisID))
        {
            var price    = $('#each-'+thisID).children(".shopp-price").html();
            var quantity = $('#each-'+thisID).children("#shopp-quantity").find('input').val();
            quantity=parseInt(quantity)+parseInt(1);
            var total = parseInt(itemprice)*parseInt(quantity);
            $('#each-'+thisID).children(".shopp-price").html(total);
            $('#each-'+thisID).children("#shopp-quantity").html('<input type="text" name="product_quantity[]" readonly id="one" value="'+parseInt(quantity)+'">');
        }
        else
        {
            Arrays.push(thisID);
            var quantity=parseInt(1);
            var total=parseInt(itemprice);
            
            $('#left_bar .cart-info').append('<tr id="each-'+thisID+'"><td><input type="text" readonly name="product_name[]" value="'+itemname+
            '"></td><td id="shopp-quantity"><input type="text" id="one" readonly name="product_quantity[]" value="'+quantity+
            '"></td><td class="shopp-price">'+total+'</td><td><img src="remove.png" class="remove"></td></tr>');
            $('#cart').css({'-webkit-transform' : 'rotate(20deg)','-moz-transform' : 'rotate(20deg)' });
        }
        
        setTimeout('angle()',200);
    }); 
    
});
 
function include(arr, obj) {
  for(var i=0; i<arr.length; i++) {
    if (arr[i] == obj) return true;
  }
}
 
function angle(){$('#cart').css({'-webkit-transform' : 'rotate(0deg)','-moz-transform' : 'rotate(0deg)' });}

Данный код я немного отредактировал под свои нужды, из этого и появилась проблема с удалением товара из корзины.
К моему вмешательства код выглядел так:

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
$(document).ready(function() {
    
    var Arrays=new Array();
    
    $('#wrap li').mousemove(function(){
        
        var position = $(this).position();
        
        $('#cart').stop().animate({
                                                                                                    
                left   : position.left+'px',
                
            },250,function(){
            
        });         
    }).mouseout(function(){
        
    }); 
    
    $('#wrap li').click(function(){
        
        var thisID = $(this).attr('id');
        
        var itemname  = $(this).find('div .name').html();
        var itemprice = $(this).find('div .price').html();
            
        if(include(Arrays,thisID))
        {
            var price    = $('#each-'+thisID).children(".shopp-price").find('em').html();
            var quantity = $('#each-'+thisID).children(".shopp-quantity").html();
            quantity = parseInt(quantity)+parseInt(1);
            
            var total = parseInt(itemprice)*parseInt(quantity);
            
            $('#each-'+thisID).children(".shopp-price").find('em').html(total);
            $('#each-'+thisID).children(".shopp-quantity").html(quantity);
            
            var prev_charges = $('.cart-total span').html();
            prev_charges = parseInt(prev_charges)-parseInt(price);
            
            prev_charges = parseInt(prev_charges)+parseInt(total);
            $('.cart-total span').html(prev_charges);
            
            $('#total-hidden-charges').val(prev_charges);
        }
        else
        {
            Arrays.push(thisID);
            
            var prev_charges = $('.cart-total span').html();
            prev_charges = parseInt(prev_charges)+parseInt(itemprice);
            
            $('.cart-total span').html(prev_charges);
            $('#total-hidden-charges').val(prev_charges);
            
            $('#left_bar .cart-info').append('<div class="shopp" id="each-'+thisID+'"><div class="label">'+itemname+'</div><div class="shopp-price"> $<em>'+itemprice+'</em></div><span class="shopp-quantity">1</span><img src="remove.png" class="remove" /><br class="all" /></div>');
            
            $('#cart').css({'-webkit-transform' : 'rotate(20deg)','-moz-transform' : 'rotate(20deg)' });
        }
        
        setTimeout('angle()',200);
    }); 
    
    
    $('.remove').livequery('click', function() {
        
        var deduct = $(this).parent().children(".shopp-price").find('em').html();
        var prev_charges = $('.cart-total span').html();
        
        var thisID = $(this).parent().attr('id').replace('each-','');
        
        var pos = getpos(Arrays,thisID);
        Arrays.splice(pos,1,"0")
        
        prev_charges = parseInt(prev_charges)-parseInt(deduct);
        $('.cart-total span').html(prev_charges);
        $('#total-hidden-charges').val(prev_charges);
        $(this).parent().remove();
        
    }); 
    
    $('#Submit').livequery('click', function() {
        
        var totalCharge = $('#total-hidden-charges').val();
        
        $('#left_bar').html('Total Charges: $'+totalCharge);
        
        return false;
        
    }); 
    
});
 
function getpos(arr, obj) {
  for(var i=0; i<arr.length; i++) {
    if (arr[i] == obj) return i;
  }
}
function angle(){$('#cart').css({'-webkit-transform' : 'rotate(0deg)','-moz-transform' : 'rotate(0deg)' });}

Если не трудно, посоветуйте, что и как делать.
Могу скинуть архив с исходниками
Заранее, благодарю всех!!!

@Lazy_Den · 22.12.2014, 18:28

slimshady2901, во-первых, я не увидел ни в вашем отредактированном варианте, ни в оригинале никакого Ajax. Где и как хранятся товары отобранные в корзину - загадка. Во-вторых, хоть и не по теме, в чем преимущество плагина livequery, перед родным методом on()?

@slimshady2901 · 22.12.2014, 18:48 **[ТС]**

Lazy_Den, честно говоря, что в ajax что в jquery ничего толком не понимаю)
Нашел в интернете корзину (тут), редактировал методом тыка.

@Lazy_Den · 22.12.2014, 19:05

Сообщение от slimshady2901

Нашел в интернете корзину

Ясно. В общем, это заготовка/полуфабрикат. Никакого ajax-а там нет, товар в корзине существует только до первой перезагрузки страницы. К тому же, используется очень старая библиотека jQuery, что может (и скорее всего так и случится) вызвать проблемы, если вы будете использовать какие-либо еще плагины или сами дополнять функционал. Одним словом - вы нашли не самый удачный пример.

@slimshady2901 · 22.12.2014, 19:19 **[ТС]**

Lazy_Den, Спасибо за Ваше мнение.
Я так понимаю что с удалением вообще никак ???
На счет существования товара: весь товар добавляется с одной страницы, поэтому, по моему мнению, перезагрузок страниц не будет.

@Lazy_Den · 22.12.2014, 19:37

Сообщение от slimshady2901

по моему мнению, перезагрузок страниц не будет

Значит вам нужно об этом сообщить пользователю:
"Если вы выбрали товар, то не уходите с этой страницы! В противном случае, вам придётся заново проделывать всю операцию."
Не думаю, что пользователям это понравится. А без такого предупреждения, появится еще больше недоумения, когда кому-то после выбора товара, захочется заглянуть в контактные данные или почитать о способах доставки/оплаты и прочее. Да, у вас может и не быть именно таких страниц сайта, но есть же наверняка другие. А человеку свойственно перед покупкой еще раз всё обдумать, и пока он думает/решает, может произойти всё что угодно: и случайно закрыл страницу, и перешёл на другую страницу вашего сайта и обрыв соединения и т.д. Вы же сами, скорее всего, что покупали что-нибудь в инете и должны знать, что случаи бывают разные...

Добавлено через 3 минуты

Сообщение от slimshady2901

Я так понимаю что с удалением вообще никак ???

Я этого не говорил.

@slimshady2901 · 22.12.2014, 19:42 **[ТС]**

Lazy_Den, дело в том, что это не будет предназначено для широкого круга пользователей, а только для нескольких людей, которые будут выполнять специфические действия, по четко определенным правилам.

@Lazy_Den · 22.12.2014, 20:01

slimshady2901, как хотите. В вашем измененном варианте, вырезана часть, которая отвечает за удаление товара. В оригинале - эта часть находится между 64-ой и 81-ой строками, начинается с кода "$('.remove').livequery('click', function() {"

@slimshady2901 · 22.12.2014, 20:06 **[ТС]**

Lazy_Den,
я понимаю какая часть отвечает за удаление товара.
Дело в том, что в моем варианте она не работает, потому и написал сюда.

@Lazy_Den · 22.12.2014, 20:18

Сообщение от slimshady2901

Дело в том, что в моем варианте она не работает

Так почему вы это не написали в своём варианте? И что, кроме кода, вы еще изменяли или дополняли: классы, id и т.д.? Сделайте полный пример на jsfiddle.net: html + ваш весь js.

@slimshady2901 · 22.12.2014, 21:00 **[ТС]**

Весь код страницы:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<div class="products">
    <div class="prod_cat">
        <ul>
            <?
            $show_categories=mysql_query("SELECT `category_name` FROM `category`");
            while($cat=mysql_fetch_array($show_categories)){
            ?>
            <li><a href="#<?echo $cat['category_name'];?>"><?echo $cat['category_name'];?></a></li>
            <?}?>
        </ul>
    </div>
    <div class="prod_items">
        <ul>
            <?$show_categories=mysql_query("SELECT `category_name` FROM `category`");
            while($cat=mysql_fetch_array($show_categories)){?>
            <li id="<?echo $cat['category_name'];?>">
                <?
                $category_name=$cat['category_name'];
                $select_product=mysql_query("SELECT `id`, `product_name`, `price` FROM `products` WHERE `category`='$category_name'");
                while($product=mysql_fetch_array($select_product)){
                ?>
                <div id="<?echo $product['id'];?>"  class="product">
                        <p class="name"><?php echo $product['product_name'];?></p>
                        <p class="price"><?php echo $product['price'];?></p>
                </div>
            <?}?>
            </li>
            <?}?>
        </ul>
    </div>
</div>
<div class="cart">
<script type="text/javascript">
$(document).ready(function() {
    var Arrays=new Array();
        $('.prod_items li').mousemove(function(){
            var position = $(this).position();
            $('#cart').stop().animate({                                                                         
                    left: position.left+'px',
                },250,function(){
            });         
        }).mouseout(function(){
        }); 
        $('div.product').click(function(){
            var thisID = $(this).attr('id');
            var itemname  = $(this).find('p.name').html();
            var itemprice = $(this).find('p.price').html();
        if(include(Arrays,thisID))
        {
            var price    = $('#each-'+thisID).children(".shopp-price").html();
            var quantity = $('#each-'+thisID).children("#shopp-quantity").find('input').val();
            quantity=parseInt(quantity)+parseInt(1);
            var total = parseInt(itemprice)*parseInt(quantity);
            $('#each-'+thisID).children(".shopp-price").html(total);
            $('#each-'+thisID).children("#shopp-quantity").html('<input type="text" name="product_quantity[]" readonly id="one" value="'+parseInt(quantity)+'">');
        }
        else
        {
            Arrays.push(thisID);
            var quantity=parseInt(1);
            var total=parseInt(itemprice);
            
            $('#left_bar .cart-info').append('<tr id="each-'+thisID+'"><td><input type="text" readonly name="product_name[]" value="'+itemname+
            '"></td><td id="shopp-quantity"><input type="text" id="one" readonly name="product_quantity[]" value="'+quantity+
            '"></td><td class="shopp-price">'+total+'</td><td class="delete"><a id="'+thisID+'"><img src="remove.png"></a></td></tr>');
            $('#cart').css({'-webkit-transform' : 'rotate(20deg)','-moz-transform' : 'rotate(20deg)' });
        }
        
        setTimeout('angle()',200);
    }); 
    
    $('.delete').click(function() {
   /*здесь функция удаления*/
  
    })
 
    
});
 
function include(arr, obj) {
  for(var i=0; i<arr.length; i++) {
    if (arr[i] == obj) return true;
  }
}
 
function angle(){$('#cart').css({'-webkit-transform' : 'rotate(0deg)','-moz-transform' : 'rotate(0deg)' });}
</script>
 
    <div id="left_bar"> 
        <form action="index.php" id="cart_form" name="cart_form" method="post">
        <table class="cart-info" style="width:100%;text-align:center;font-size:18px;" >
        <tr><th>Продукт</th><th>Количество</th><th>Стоимость</th><th>Удалить</th></tr>
        </table>
        <button type="submit" name="submit" id="submit">відправити</button>
        </form>
    </div> 
            
</div>
</div>

В соответствии с html кодом вносил изменения в скрипт, также в скрипте изменил способ вывода, в источниках на div'ах, мне же удобнее использовать table, да, и в таблице добавил input'и.
Удалил код, который отвечает за подсчет общей стоимости

@Lazy_Den · 22.12.2014, 21:23

slimshady2901, я так понимаю, что версию jQuery вы менять не будете. Не знаю так же, используете ли загадочный плагин livequery (по вашему коду - это уже не ясно). Поэтому, держите такой вариант части удаления:

JavaScript
1
2
3
$('.delete').live('click', function() {
    $(this).closest('tr').remove();        
});

@slimshady2901 · 22.12.2014, 21:38 **[ТС]**

Lazy_Den, огромное спасибо за Ваш ответ, все работает.
Счастья Вам! С наступаючим Вас Н. г.!
P.s. Нет, загадочный плагин я не использую.
Тема закрыта!!!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	22.12.2014, 18:28
	slimshady2901, во-первых, я не увидел ни в вашем отредактированном варианте, ни в оригинале никакого Ajax. Где и как хранятся товары отобранные в корзину - загадка. Во-вторых, хоть и не по теме, в чем преимущество плагина livequery, перед родным методом on()? 0

@slimshady2901 0 / 0 / 0 Регистрация: 01.12.2014 Сообщений: 15
	22.12.2014, 18:48 [ТС]
	Lazy_Den, честно говоря, что в ajax что в jquery ничего толком не понимаю) Нашел в интернете корзину (тут), редактировал методом тыка. 0

@slimshady2901 0 / 0 / 0 Регистрация: 01.12.2014 Сообщений: 15
	22.12.2014, 19:19 [ТС]
	Lazy_Den, Спасибо за Ваше мнение. Я так понимаю что с удалением вообще никак ??? На счет существования товара: весь товар добавляется с одной страницы, поэтому, по моему мнению, перезагрузок страниц не будет. 0

@slimshady2901 0 / 0 / 0 Регистрация: 01.12.2014 Сообщений: 15
	22.12.2014, 19:42 [ТС]
	Lazy_Den, дело в том, что это не будет предназначено для широкого круга пользователей, а только для нескольких людей, которые будут выполнять специфические действия, по четко определенным правилам. 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	22.12.2014, 20:01
	slimshady2901, как хотите. В вашем измененном варианте, вырезана часть, которая отвечает за удаление товара. В оригинале - эта часть находится между 64-ой и 81-ой строками, начинается с кода "$('.remove').livequery('click', function() {" 0

@slimshady2901 0 / 0 / 0 Регистрация: 01.12.2014 Сообщений: 15
	22.12.2014, 20:06 [ТС]
	Lazy_Den, я понимаю какая часть отвечает за удаление товара. Дело в том, что в моем варианте она не работает, потому и написал сюда. 0

@slimshady2901 0 / 0 / 0 Регистрация: 01.12.2014 Сообщений: 15
	22.12.2014, 21:38 [ТС]
	Lazy_Den, огромное спасибо за Ваш ответ, все работает. Счастья Вам! С наступаючим Вас Н. г.! P.s. Нет, загадочный плагин я не использую. Тема закрыта!!! 0

Удаления товара из корзины

Решение