Заметки на полях

+7(916) 107-51-99 | Москва

+7(916) 107-51-99 Москва
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).

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

Для комментирования материалов регистрация на сайте не нужна. Правила публикации: наличие здравого смысла. Спам удаляется, спамерам: бан по ip навсегда. Email комментаторов не публикуется.

Как заказать услугу? Веб-студия «Реклама-Но!»

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

  Наш телефон: +7(916) 107-51-99 или:
Оставьте свой номер телефона/email и наш специалист свяжется с вами в ближайшее время.

  Наш адрес: Россия, Москва, Слесарный переулок, д. 3
  Электронная почта: [email protected] или Форма обратной связи

Звоните нам и мы решим любые проблемы с вашим сайтом или задачи по его созданию.

Заметки на полях: оглавление

Если есть вопросы по разделу:

* Поля формы обязательные для заполнения.

Задайте свой вопрос, мы обязательно ответим в ближайшее время. Или звоните:
+7(916) 107-51-99 (10.00–18.00, Мск.)

Как к вам обращаться?

Сообщите корректный адрес электронной почты.

Пожалуйста, напишите ваше сообщение.

Неверный проверочный код.

заказать изготовить сайт

Веб-лаборатория «Реклама-НО!» благодарит вас за посещение своего сайта. Если вы хотите поделиться отзывом на Яндекс и поставить оценку, перейдите по ссылке:

Оставить отзыв

изготовление сайтов под ключ

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

  • Россия, г. Москва, Слесарный переулок, д. 3
  • +7(916) 107-51-99
  • 10.00–18.00 (ежедневно)

изготовить сайт  изготовить сайт

Не забудьте, что у нас: