Пересчет корзины без перезагрузки страницы
#1
Отправлено 18 November 2015 - 04:06 PM
#2
Отправлено 18 November 2015 - 05:31 PM
А если делать аяксовый пересчет по каждому чиху (по onchange в поле количества и крестику del), то тоже нехорошо получится, ресурсоемко.
Так-то да, сам иногда забываю пересчет нажать при смене количества.
#4
Отправлено 18 November 2015 - 07:19 PM
Хотелось бы видеть пересчет суммы. В этом собственно смысл.достаточно просто использовать js на форме корзины, а полноценный пересчет делать уже после отправки формы, просто состыковать реальную корзину и "виртуальную" после нажатия оформить заказ
Велика ли разница в плане ресурсоемкости для ajax запроса и перезагрузки страницы при нажатии пересчета. Ведь те же запросы по базе.А если делать аяксовый пересчет по каждому чиху (по onchange в поле количества и крестику del), то тоже нехорошо получится, ресурсоемко.
#5
Отправлено 18 November 2015 - 07:46 PM
В общем случае не получится. Когда скидка пляшет от общей суммы корзины. Или будет избыточно заморочно. Если, конечно, я по памяти не путаю и скидка появляется уже на первой странице оформления (корзины), а не на последнем.достаточно просто использовать js на форме корзины
Никакой разницы. Потому и будет задержка по каждому изменению в поле "количество". Так-то сделать очень не сложно, если про скорость реакции не задумываться, даже ничего своего писать не надо. Взять плагин jquery.form.js, update-часть из shopping_cart.php, оформить ее в /core/icludes/processor/, а шаблон для возвращаемых данных есть штатный - shopping_cart.tpl.html. Ну, чуть-чуть все это подточить.Велика ли разница в плане ресурсоемкости для ajax запроса и перезагрузки страницы при нажатии пересчета. Ведь те же запросы по базе.
PS. В принципе, штатная организация аякс-запроса даже сокращает (и заметно) количество выполняемых операций и SQL-запросов, т.к. не исполняется часть index.php и все includes/*.php
#6
Отправлено 23 December 2015 - 01:24 AM
При изменении количества товара в корзине приходится нажимать кнопку "пересчитать". Кто-то пробовал сделать ajax-овый пересчет корзины без перезагрузки страницы?
я пробовал давно когда-то, точнее допиливал за кем-то безымянным, который начал и бросил
есть пара действующих сайтов с этой штукой. Но тогда не нашел время чтобы выцепить эту наработку отдельно, а сейчас хрен разберешься )
#7
Отправлено 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.
#8
Отправлено 30 December 2015 - 10:47 PM
Ну, как-то так. Результат можно увидеть на http://new.badisoft.ru/На мой взгляд, наиболее правильно по onchange количества любого товара выполнять AJAX-запрос, передающий содержимое формы и возвращающий ЦЕЛИКОМ html-код корзины (вариативную часть).
В силу шаблона от 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}&shopping_cart=yes&remove={$cart_content[i].id}">X</a></td>
вставляем
{* BEGIN AJAX-пересчет корзины *}
{*<td class="padt" align="center" valign="middle"><a href="{$cart_reguest}&shopping_cart=yes&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}&shopping_cart=yes" method=post name="formppl" id="formppl">
[...]
</form>
и сохраняем в файл shopping_cart_ajax.tpl.html. Подозреваю, что при установленном модуле скидок создать файл shopping_cart_ajax.tpl.html будет несколько сложнее, но вполне решаемо.
Все. Теперь пересчет корзины при смене количества товара и удалении товара должен происходить без перезагрузки страницы.
#9
Отправлено 31 December 2015 - 05:21 PM
#10
Отправлено 31 December 2015 - 05:42 PM
Доставка штатно рассчитывается на СЛЕДУЮЩЕЙ странице оформления.Единственный минус, что не пересчитывается стоимость доставки, а ведь она зависит от общего веса или суммы товаров.
А на тестовом сайте показаны одновременно две доработки - "пересчет корзины" и "оформление на одной странице".
Они никак не связаны, т.е. модуль "оформление" не в курсе "пересчета корзины".
Сделать это не сложно - добавить в яваскрипт пересчета вызов яваскрипта перепоказа доставки. Но смысла не вижу. Зачем это на ТЕСТОВОМ сайте?
#11
Отправлено 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>и очистка корзины заработала
#12
Отправлено 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) это передача в фунцию ПЕРЕМЕННОЙ с таким странным именем. Которой, естественно, не существует.
#13
Отправлено 21 February 2016 - 03:20 PM
#14
Отправлено 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.