Добрый день!
Имеется некоторая страница со списком товаров. Для добавления товара в корзину необходимо перейти на страницу описания товара, с которой уже можно добавить товар в корзину. Все реализовано и работает. Сейчас для удобства пользователей необходимо реализовать возможность добавления товара в корзину со страницы со списком товаров. В кратком описании к каждому товару должна быть кнопка "добавить в корзину".
Реализовать это необходимо с помощью всплывающего окна. Пользователь нажимает на кнопку "добавить в корзину", всплывает окно с формой заказа, в котором можно выбрать различные параметры и количество товара, после чего добавить в корзину кликом по кнопке в окне.
Всплывающее окно реализовано с помощью плагина fancybox. Формы заказа в исходном коде загружаемой страницы нет, так как для различных товаров формы отличаются и грузить все формы нет никакого смысла. Соответствующая форма подгружается с помощью AJAX в всплывающее окно.
При загрузке страницы в консоли Chrome получаю ошибку:
Uncaught TypeError: Object [object Object] has no method 'addEvent'. Если загрузить форму не во всплывающем окне, а напрямую, подключив все скрипты, все отрабатывает отлично.
На главной странице, где необходимо реализовать всплывающее окно, подключаются библиотеки, скрипты и плагин fancybox. Пока имеющийся код, написанный с применением mootools не менял. Позже планирую все переписать на Jquery. Код скрипта, обрабатывающий событие:
var orderForm;
window.addEvent('domready', function (){
orderForm = $('orderForm');
orderForm.addEvent('submit', onOrderFormSubmit);
});
function onOrderFormSubmit (e)
{
e.stop();
var id = orderForm.itemId.value;
var num = orderForm.orderNum.value;
var request = new AjaxRequest({
'url': '/order/add',
'method': 'post',
'encoding': 'utf-8',
onSuccess: function ()
{
loadBasketData();
}
});
var query = 'id='+id+'&num='+num;
request.send(query);
}
Код формы, подгружаемой в всплывающем окне:
<form id="orderForm" action="/order/add">
<input type="text" name="orderNum" id="addToBasketNum" class="num" value="1" size="2"/> шт.
<input type="hidden" name="itemId" value="132" />
<input type="image" id="orderFormSubmit" src="img/add_basket.png" alt="В корзину" />
</form>
В JS пока не силен, пишу на php, но возникла необходимость доработать. Прошу помочь в определении ошибки и советом в реализации данного функционала.
