Кнопки плюс минус количества товара в JoomShopping

JoomShopping

Достаточно часто приходится работать с компонентом Joomshopping — скрипт интернет-магазина для cms Joomla.

Забавно, что в функционале последней версии скрипта (v. 4.18.3 на момент написания материала) «по умолчанию» нет:

Кнопки плюс и минус возле поля количества товара в Карточке товара и в Корзине.

Странно, но факт.

Есть плагины и скрипты, платные и не очень, для реализации этой «примочки». Но мы не ищем легких путей и пропишем кнопки непосредственно в код шаблонов магазина Joomshopping. Меньше проблем и конфликтов, меньше лишнего кода.

Кнопки «плюс/минус» нужны в двух шаблонах: Карточка товара, Корзина. Они могут находиться:

1/ в шаблоне компонента: мой_сайт.ru/components/com_jshopping/templates/default/

2/ или в шаблоне сайта: мой_сайт.ru/templates/мой_шаблон/components/html/com_jshopping/

Если у вас шаблоны интернет-магазина «работают» по первому варианту, то сразу рекомендуем продублировать их по варианту 2, чтобы шаблоны не были исправлены при обновлении скрипта JoomShopping.

Для этого создаем папку com_jshopping по указанному выше адресу и копируем в нее все шаблоны Магазина. Получится примерно такая иерархия:

JoomShopping кнопки плюс минус

На скриншоте — вид на иерархию из Total Commander.

Начнем правки с карточки товара. Для этого находим и открываем файл product_default.php по адресу:

мой_сайт.ru/templates/мой_шаблон/components/html/com_jshopping/product/product_default.php

Для «вскрытия» файлов *.php используем текстовой редактор типа Notepad++ (или версия «для чайников» — Блокнот Windows. Я лично использую — EditPlus).

Ищем строку с кодом:

<input type=«text» name=«quantity» id=«quantity» onkeyup=«reloadPrices();" class=«inputbox» value=«<?php print $this->default_count_product?>" /><?php print $this->_tmp_qty_unit;?>

В дефолтной версии скрипта это строка 314.

Заменяем строку на:

<span onclick="var qty_el = document.getElementById('quantity'); var qty = qty_el.value; if( !isNaN( qty ) && qty > 1) qty_el.value--;return false;" class="quantity-minus">−</span>
<span class="quantity-text"><input type="text" value="1" class="inputbox" onkeyup="reloadPrices();" id="quantity" name="quantity"></span>
<span onclick="var qty_el = document.getElementById('quantity'); var qty = qty_el.value; if( !isNaN( qty )) qty_el.value++;return false;" class="quantity-plus">+</span>

Верстка шаблона Торговой карточки товара может быть разной, конечно. Лучшее враг достаточно-необходимому.

Правим стили css, на свой вкус и надобности. Меня устроили, например, такие варианты исполнения, без пафоса:

JoomShopping кнопки плюс минус
JoomShopping кнопки плюс минус

Можно посмотреть на сайтах наших заказчиков (это интернет магазины в Портфолио), «пощелкать».

Аналогично правим шаблон Корзины. Для этого находим и открываем файл cart.php по адресу:

мой_сайт.ru/templates/мой_шаблон/components/html/com_jshopping/cart/cart.php

Ищем фрагмент кода:

<input type = "text" name = "quantity[<?php print $key_id ?>]" value = "<?php print $prod['quantity'] ?>" class = "inputbox" />
<?php }?>
<?php print $prod['_qty_unit']; ?>

В дефолтной версии скрипта это строка 121. Если шаблон правился (например, установка сайта была произведена через КвикСтарт), то код может выглядеть несколько иначе. Ориентируйтесь «по месту», принцип правки сохранится.

Заменяем указанный выше фрагмент кода на следующий:

<input class="minus" type="button" value="+" onclick="var qty_el = document.getElementById('quantity[<?php print $key_id ?>]'); var qty = qty_el.value; if( !isNaN( qty )) qty_el.value++;return false;" />
<input class="text" type ="text" name ="quantity[<?php print $key_id ?>]" id="quantity[<?php print $key_id ?>]" value = "<?php print $prod['quantity'] ?>" />
<input class="plus" type="button" value="−" onclick="var qty_el = document.getElementById('quantity[<?php print $key_id ?>]'); var qty = qty_el.value; if( !isNaN( qty ) && qty > 0 ) qty_el.value--;return false;" />
<?php print $prod['_qty_unit'];?>

Иногда кнопка обновления цены (от изменения количества товара) нужна, иногда нет. Зависит от специфики товара. Можно реализовать вариант пересчета суммы сразу после нажатия кнопок +/-. Это, возможно, более удобно? Учитываем, что при пересчете происходит обновление страницы, что вносит некоторый дискомфорт.

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

Тем не менее, код для немедленного пересчета цены при изменении количества:

<input class="quantity-minus" type="button" value="−" onclick="var qty_el=document.getElementById('quantity[<?php print $key_id ?>]'); var qty=qty_el.value; if( !isNaN( qty ) && qty > 1 ) qty_el.value--; document.updateCart.submit(); return false;">
<input type="text" id="quantity[<?php print $key_id ?>]" name="quantity[<?php print $key_id ?>]" value="<?php print $prod['quantity'] ?>" class="inputbox" />
<input class="quantity-plus" type="button" value="&plus;" onclick="var qty_el=document.getElementById('quantity[<?php print $key_id ?>]'); var qty=qty_el.value; if( !isNaN( qty )) qty_el.value++; document.updateCart.submit(); return false;">
<?php print $prod['_qty_unit']; ?>
<span class="cart_reload" title="<?php print _JSHOP_UPDATE_CART ?>" onclick="document.updateCart.submit();"><span class="fa fa-refresh"></span></span>

Правим стили css. Вариантов исполнения может быть, естественно, бесконечное множество, например:

JoomShopping кнопки плюс минус
JoomShopping кнопки плюс минус
JoomShopping кнопки плюс минус

Возможно, шаблоны будут «рихтоваться», хотя смысла особого в правке нет, вид адекватный. Оформить можно как угодно, по собственному вкусу и потребностям сайта. Главное — работает функционал: кнопки кликаются, сумма пересчитывается.

В представленном выше коде прописаны классы для css, можно использовать их или изменить на свои, не суть (задействован FontAwesome).

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


Планируете проект?

Заполните форму, наш специалист свяжется с вами для консультации (бесплатно), составит для вас персональное предложение.

Как к вам обращаться?
Сообщите корректный адрес электронной почты.
Не корректный номер.
Опишите кратко суть задачи: *
Необходимо подтвердить согласие с Политикой.

Планируете создание веб проекта?

Заполните форму и наш специалист свяжется с вами для консультации и составит для вас персональное предложение.

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

Разработка сайтов «под ключ» любой сложности и назначения!

Обращаем ваше внимание на то, что данный интернет-сайт носит исключительно информационный характер и не является публичной офертой, определяемой положениями Статьи 437 (2) Гражданского кодекса РФ. Для получения подробной информации о стоимости указанных услуг, пожалуйста, обращайтесь по телефону: +7(916) 107-51-99 или через Форму обратной связи. Политика конфиденциальности / Соглашение об обработке персональных данных.

©2010–2022 веб-лаборатория «Reklama-No» | Создание, поддержка и продвижение сайтов