Всплывающее окно добавления товара в корзину JoomShopping

Многих устраивает функционал компонента JoomShopping из коробки. Все необходимые модули и дополнения можно скачать с официального сайта разработчика. Но, бывают моменты, когда пожелания заказчика выходят за рамки стандартных возможностей компонента. Например, всплывающее окно добавления товара в корзину.

Да, так и есть, разработчики не предусмотрели такую возможность, в настройках можно включить, либо сразу переход в корзину, либо просто уведомление в области вывода ошибок.

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

Как это работает?

Недавно пришлось реализовать подобную функцию на одном из рабочих сайтов. Делать обработку на Ajax слишком затрано в плане финансов и времени, а использовать сторонние модули не хотелось, поэтому не стал далеко ходить и написал небольшой обработчик на jQuery.

Итак, у нас обязательно должна быть область вывода уведомлений Joomla в шаблоне:

<jdoc:include type="message" />

Мы знаем, что при добавлении в корзину товара в эту область добавляется следующее сообщение:

Товар добавлен в корзину.

На основе этого добавим скрипт на jQuery:

jQuery(function($) {
	if ($('#system-message, .system-message').is(":contains(Товар добавлен в корзину.)")){
		$('#system-message .close').trigger('click');
		// Здесь код вызова модального окна
	}
});

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

Вместо комментария соответственно вам необходимо описать свою функцию вызова необходимого всплывающего окна. Я предпочитаю использовать для этого библиотеку articmodal, очень удобная и простая библиотека, поэтому для примера покажу наглядно, как делаю я:

jQuery(function($) {
	var modal_content = '';
	if ($('#system-message, .system-message').is(":contains(Товар добавлен в корзину.)")){
		$('#system-message .close').trigger('click');
		modal_content += '<div class="box-modal" id="modalAddCart">';
			modal_content += '<div class="box-modal_close arcticmodal-close">x</div>';
			modal_content += '<div class="modal-message">Товар добавлен в корзину.</div>';
			modal_content += '<div class="buttons">';
				modal_content += '<a href="#" class="button arcticmodal-close">Продолжить покупки</a>';
				modal_content += '<a href="/korzina.html" class="button">Перейти в корзину</a>';
			modal_content += '</div>';
		modal_content += '</div>';
		
		$.arcticmodal({
			content: modal_content
		});
	}
});

Всё очень просто. Это конечно же не Ajax, но внешне функционал копирует, заказчику этого было вполне достаточно.

Всплывающее окно уведомления о выборе параметров

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

Сделано это было аналогично тому, как сделано всплывающее окно добавления в корзину:

jQuery(function($) {
	var modal_content = '';
	if ($('#system-message, .system-message').is(":contains('Пожалуйста, выберите параметры')")){
		$('#system-message .close').trigger('click');
		modal_content += '<div class="box-modal" id="modalChangeParams">';
			modal_content += '<div class="box-modal_close arcticmodal-close">x</div>';
			modal_content += '<div class="modal-message">Пожалуйста, перед покупкой товара<br />ознакомьтесь с ассортиментом<br /> и выберите соответствующие <br />параметры товара.</div>';
		modal_content += '</div>';
		
		$.arcticmodal({
			content: modal_content
		});
	}
});

Опять же, проверяем сообщение, и, при его наличии вызываем соответствующее всплывающее окно. Всё просто.

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