Перейти к содержимому


Пересчет корзины без перезагрузки страницы

корзина ajax без перезагрузки

  • Вы не можете ответить в тему
Сообщений в теме: 13

#1 makki

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 148 сообщений
Репутация: 7
Начинающий

Отправлено 18 November 2015 - 04:06 PM

При изменении количества товара в корзине приходится нажимать кнопку "пересчитать". Кто-то пробовал сделать ajax-овый пересчет корзины без перезагрузки страницы?
  • 0

#2 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 18 November 2015 - 05:31 PM

Не получится нормально, как мне кажется. Кнопку "пересчитать" все равно жать придется. А раз придется жать, то в чем радость от аякса? Ну, перезагрузится не вся страница, а только центральная часть, разница не велика.
А если делать аяксовый пересчет по каждому чиху (по onchange в поле количества и крестику del), то тоже нехорошо получится, ресурсоемко.
Так-то да, сам иногда забываю пересчет нажать при смене количества.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#3 eugene_wb

    Продвинутый пользователь

  • Модераторы
  • 827 сообщений
Репутация: 167
Мастер

Отправлено 18 November 2015 - 05:35 PM

достаточно просто использовать js на форме корзины, а полноценный пересчет делать уже после отправки формы, просто состыковать реальную корзину и "виртуальную" после нажатия оформить заказ
  • 0
Изображение Изображение Изображение

#4 makki

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 148 сообщений
Репутация: 7
Начинающий

Отправлено 18 November 2015 - 07:19 PM

достаточно просто использовать js на форме корзины, а полноценный пересчет делать уже после отправки формы, просто состыковать реальную корзину и "виртуальную" после нажатия оформить заказ

Хотелось бы видеть пересчет суммы. В этом собственно смысл.

А если делать аяксовый пересчет по каждому чиху (по onchange в поле количества и крестику del), то тоже нехорошо получится, ресурсоемко.

Велика ли разница в плане ресурсоемкости для ajax запроса и перезагрузки страницы при нажатии пересчета. Ведь те же запросы по базе.
  • 0

#5 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 18 November 2015 - 07:46 PM

достаточно просто использовать js на форме корзины

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

Велика ли разница в плане ресурсоемкости для ajax запроса и перезагрузки страницы при нажатии пересчета. Ведь те же запросы по базе.

Никакой разницы. Потому и будет задержка по каждому изменению в поле "количество". Так-то сделать очень не сложно, если про скорость реакции не задумываться, даже ничего своего писать не надо. Взять плагин jquery.form.js, update-часть из shopping_cart.php, оформить ее в /core/icludes/processor/, а шаблон для возвращаемых данных есть штатный - shopping_cart.tpl.html. Ну, чуть-чуть все это подточить.

PS. В принципе, штатная организация аякс-запроса даже сокращает (и заметно) количество выполняемых операций и SQL-запросов, т.к. не исполняется часть index.php и все includes/*.php
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#6 Dbus

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 1116 сообщений
Репутация: 174
Мастер
  • ГородОдесса

Отправлено 23 December 2015 - 01:24 AM

При изменении количества товара в корзине приходится нажимать кнопку "пересчитать". Кто-то пробовал сделать ajax-овый пересчет корзины без перезагрузки страницы?


я пробовал давно когда-то, точнее допиливал за кем-то безымянным, который начал и бросил :)
есть пара действующих сайтов с этой штукой. Но тогда не нашел время чтобы выцепить эту наработку отдельно, а сейчас хрен разберешься )
  • 0
502 Bad Gateway

#7 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 27 December 2015 - 10:29 PM

Кто-то пробовал сделать ajax-овый пересчет корзины без перезагрузки страницы?

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

В корзине показывается скидка. Как вариант - скидка рассчитывается исходя из общей суммы товара в корзине, а вообще разных вариантов скидки пять (насколько помню). Реализовать все варианты скидки, т.е. сделать нормальное полное решение на яваскрипте будет достаточно проблемно, хотя и возможно, ведь это тоже вполне себе язык программирования.

На мой взгляд, наиболее правильно по onchange количества любого товара выполнять AJAX-запрос, передающий содержимое формы и возвращающий ЦЕЛИКОМ html-код корзины (вариативную часть). При этом и соответствие клиентской стороны/сервера будет всегда, и решения по пересчету корзины можно будет использовать готовые. С минимальными изменениями, а то и без них.

Например, вот такой запрос
$.ajax({
  url:'/index.php?cart_recalc=yes',
  type:'POST',
  data: $('#form').serialize(),
  success: function(data) {$('#cart').html(data)}
  });  
отправит аяксом содержимое формы с id=form и пропишет полученное внутрь тэга с id=cart.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#8 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 30 December 2015 - 10:47 PM

На мой взгляд, наиболее правильно по onchange количества любого товара выполнять AJAX-запрос, передающий содержимое формы и возвращающий ЦЕЛИКОМ html-код корзины (вариативную часть).

Ну, как-то так. Результат можно увидеть на http://new.badisoft.ru/
В силу шаблона от 3.1.3 код там чуть-чуть сложнее, чем в инструкции.
Инструкция написана для дефолтового шаблона 3.1.2.

===================================
1. в файле shopping_cart.php

1.1. в блоках if (isset($_GET["remove"])) и if (isset($_POST["update"])) перед


Redirect( $cart_reguest."&shopping_cart=yes" );


вставляем


# BEGIN AJAX-пересчет корзины
if (!isset($_GET['cart_recalc']))
# END AJAX-пересчет корзины


1.2. перед


$smarty->assign("main_content_template", "shopping_cart.tpl.html");


вставляем


# BEGIN AJAX-пересчет корзины
if (isset($_GET['cart_recalc']))
{
header('Content-type: text/html; charset=windows-1251');
exit($smarty->fetch("shopping_cart_ajax.tpl.html"));
}
else
# END AJAX-пересчет корзины



2. в файле shopping_cart.tpl.html

2.1. вместо


<input type="text" name="count_{$cart_content[i].id}" size=5 value="{$cart_content[i].quantity}">


вставляем


{* BEGIN AJAX-пересчет корзины *}
{*<input type="text" name="count_{$cart_content[i].id}" size=5 value="{$cart_content[i].quantity}">*}
<input type="text" name="count_{$cart_content[i].id}" size=5 value="{$cart_content[i].quantity}" onkeyup="cart_recalc(this);">
{* END AJAX-пересчет корзины *}


по вкусу вместо onkeyup можно вписать onchange, разницу между ними найдете в документации.

2.2. вместо


<td class="padt" align="center" valign="middle"><a href="{$cart_reguest}&amp;shopping_cart=yes&amp;remove={$cart_content[i].id}">X</a></td>


вставляем


{* BEGIN AJAX-пересчет корзины *}
{*<td class="padt" align="center" valign="middle"><a href="{$cart_reguest}&amp;shopping_cart=yes&amp;remove={$cart_content[i].id}">X</a></td>*}
<td class="padt" align="center" valign="middle"><a href="#" onclick="cart_remove({$cart_content[i].id})">X</a></td>
{* END AJAX-пересчет корзины *}


2.3. перед


{else}
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td class="hdbtop error" align="center">{$smarty.const.CART_EMPTY}</td>


вставляем


{* BEGIN AJAX-пересчет корзины *}
<script type="text/javascript">
{literal}
function cart_recalc(elem)
{
if (Number($(elem).val()) == 0)
{
var top = $(elem).offset().top;
var left = $(elem).offset().left;
$('body').append('<div style="z-index:9999;color:white;background:red;padding:3px 7px;border-radius:5px;display:inline-block;max-width:280px;" id="warning">Нельзя ввести нулевое количество товара, но можно его удалить</div>');
$('#warning').offset({top:top-15, left:left});
setTimeout("$('#warning').remove()",3000);
}
else
{
$.ajax({
url:'/index.php?shopping_cart=yes&cart_recalc=yes',
type:'POST',
data: $('#formppl').serialize(),
success: function(data) {$('#formppl').html(data)}
});
}
}

function cart_remove(id)
{
$.ajax({
url:'/index.php?shopping_cart=yes&cart_recalc=yes&remove='+id,
success: function(data) {$('#formppl').html(data)}
});
}
{/literal}
</script>
{* END AJAX-пересчет корзины *}



2.3. по вкусу закомментируем (или нет) кнопки пересчета и очистки корзины.


3. берем из файла shopping_cart.tpl.html все, что находится между строками


<form action="{$cart_reguest}&amp;shopping_cart=yes" method=post name="formppl" id="formppl">
[...]
</form>


и сохраняем в файл shopping_cart_ajax.tpl.html. Подозреваю, что при установленном модуле скидок создать файл shopping_cart_ajax.tpl.html будет несколько сложнее, но вполне решаемо.

Все. Теперь пересчет корзины при смене количества товара и удалении товара должен происходить без перезагрузки страницы.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#9 makki

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 148 сообщений
Репутация: 7
Начинающий

Отправлено 31 December 2015 - 05:21 PM

Спасибо большое за то что поделились решением. Действительно это решение с минимальными правками. Единственный минус, что не пересчитывается стоимость доставки, а ведь она зависит от общего веса или суммы товаров.
  • 0

#10 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 31 December 2015 - 05:42 PM

Единственный минус, что не пересчитывается стоимость доставки, а ведь она зависит от общего веса или суммы товаров.

Доставка штатно рассчитывается на СЛЕДУЮЩЕЙ странице оформления.
А на тестовом сайте показаны одновременно две доработки - "пересчет корзины" и "оформление на одной странице".
Они никак не связаны, т.е. модуль "оформление" не в курсе "пересчета корзины".
Сделать это не сложно - добавить в яваскрипт пересчета вызов яваскрипта перепоказа доставки. Но смысла не вижу. Зачем это на ТЕСТОВОМ сайте?
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#11 kery

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 134 сообщений
Репутация: 17
Начинающий

Отправлено 20 February 2016 - 09:33 PM

У меня при очиске очистке корзины по этой ссылке
<td class="padt" align="center" valign="middle"><a href="#" onclick="cart_remove({$cart_content[i].id})">X</a></td>
происходила перезагрузка страницы и выкидывало на главную, а изменение количества работало нормально, в firebug посмотрел ссылка вида /#, у вас на сайте badisoft ссылка /cart.html#
попробовал прописать
<td class="padt" align="center" valign="middle"><a href="cart.html#" onclick="cart_remove({$cart_content[i].id})">X</a></td>
и очистка корзины заработала
  • 0

#12 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 21 February 2016 - 11:12 AM

и очистка корзины заработала

На самом деле ошибка была совсем в другом и я ее совсем недавно исправил (кто-то из клиентов заметил, что товары из корзины не удаляются).
Вместо
cart_remove({$cart_content[i].id})

надо
cart_remove('{$cart_content[i].id}')

Хитрость в том, что у НЕ зарегистрированного клиента идентификатор товара в корзине при наличии вариантов хранится не как productID (например, 27), а как productID_variantID1_variantID2_etc (например, 27_2_6) и строка cart_remove(27_2_6) это передача в фунцию ПЕРЕМЕННОЙ с таким странным именем. Которой, естественно, не существует.
  • 1
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#13 kery

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 134 сообщений
Репутация: 17
Начинающий

Отправлено 21 February 2016 - 03:20 PM

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

#14 badisoft

    Продвинутый пользователь

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 18 May 2016 - 04:20 PM

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

Добавление в инструкцию:

===============================
2. в файле shopping_cart.tpl.html

2.0. чуть выше строки с name="formppl" находится блок вывода сообщения о минимальном заказе


{if $cart_amount<$smarty.const.CONF_MINIMAL_ORDER_AMOUNT}
...
{/if}


его нужно перенести ниже строки с name="formppl", иначе он показавшись один раз так никуда и не денется.
=====================

ВАЖНО! Этот пункт выполняется до выполнения п.3.
Соответственно, если все эти пункты были уже выполнены ранее, то блок вывода сообщения о минимальном заказе надо добавить и в начало shopping_cart_ajax.tpl.html.

PS. (чуть позже)
Также в shopping_cart.tpl.html надо заменить вхождение (часть строки)

{if $cart_amount<$smarty.const.CONF_MINIMAL_ORDER_AMOUNT}document.getElementById('id_too_small_order_amount').style.display='block';return false;{/if}

на

if ($('#id_too_small_order_amount').length){ldelim}document.getElementById('id_too_small_order_amount').style.display='block';return false;{rdelim}

Иначе при начальном заказе меньше разрешенной суммы кнопка продолжения оформления не будет работать даже если заказ увеличить. Тут используется функция jquery. Он обычно все равно есть. Если нет - придется определять наличие обьекта с id='id_too_small_order_amount' штатными средствами javascript.
  • 2
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)