Серия 19: Добавление в корзину, избранное и сравнение на AJAX.

Заказать создание сайта mihail@bazarow.ru

Просмотрено 1056 раз | Комментариев 21

Реализуем функционал добавления в корзину, в избранное и в сравнение, для каталога товаров. Все будет работать на AJAX без перезагрузки страницы.

Для реализации потребуются заметки из блога
Добавление и удаление из сравнения на AJAX: Битрикс
Добавление в избранное или отложенные, на AJAX из карточки товара

Скачать архив директории "local" - на момент окончания записи, можно по ссылке ниже:

Скачать дополнительные файлы

Предыдущая серия Следующая серия

Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей Быстрая регистрация или вход через социальную сеть:

Слава Струк 09.02.2018
Здравствуйте! После добавления в корзину на месте small.basket появляется сообщение 'basket.small.bazarow' is not a component Не подскажете в чем может быть дело?)

Слава Струк 09.02.2018

Цитата
Слава Струк пишет: Здравствуйте! После добавления в корзину на месте small.basket появляется сообщение 'basket.small.bazarow' is not a component Не подскажете в чем может быть дело?)

проблема была в компоненте судя по всему, использовал тот, что был в первом архиве local.
Скачал архив из 20го урока, заменил, все заработало.

Михаил Базаров 09.02.2018

Цитата

Слава Струк написал:

Цитата
Слава Струк пишет: Здравствуйте! После добавления в корзину на месте small.basket появляется сообщение 'basket.small.bazarow' is not a component Не подскажете в чем может быть дело?)

Да, там в файле ajax не правильный компонент был подключен. В 20-ой все нормально

Андрей Колчанов 19.02.2018
Здравствуйте, Михаил! То же скачал архив из 20го урока и заменил... Но есть другие проблемы, не могу понять почему у меня происходит не так как у вас: 1. При нажатии на кнопку "В корзину" у вас выглядит так что страница не обновляется, и всплывает окно, что товар добавлен. У меня же происходит так, нажимаю "В корзину" обновляется страница, в корзине товар появляется, но нет всплывающего окна. 2. В вас при нажатии на чекбокс для сравнения, тоже всплывает окно, а у меня нет. Что делать?

Михаил Базаров 20.02.2018

Цитата

Андрей Колчанов написал:
Здравствуйте, Михаил!

То же скачал архив из 20го урока и заменил...

Но есть другие проблемы, не могу понять почему у меня происходит не так как у вас:

1. При нажатии на кнопку "В корзину" у вас выглядит так что страница не обновляется, и всплывает окно, что товар добавлен.
У меня же происходит так, нажимаю "В корзину" обновляется страница, в корзине товар появляется, но нет всплывающего окна.

2. В вас при нажатии на чекбокс для сравнения, тоже всплывает окно, а у меня нет.

Что делать?

Видимо не подключился js который отправляет в корзину. Он подключен в шаблоне корзины. В принципе, путь там задан не статично, через GetThisFolder - но проверьте свои шаблоны. Попробуйте полностью свои удалить (сохраниться перед этим) и снова использовать мою папку local

Андрей Колчанов 20.02.2018

Цитата

Михаил Базаров пишет:
Видимо не подключился js который отправляет в корзину. Он подключен в шаблоне корзины. В принципе, путь там задан не статично, через GetThisFolder - но проверьте свои шаблоны. Попробуйте полностью свои удалить (сохраниться перед этим) и снова использовать мою папку local

Спасибо за ответ!
Скрипты подключены:
$APPLICATION->AddHeadScript($templateFolder."/js/jquery.form.js" );
$APPLICATION->AddHeadScript($templateFolder."/js/jquery.jgrowl.min.js" );

После проверки подключены ли скрипты, проделал следующее:
1. свою папку local заархивировал
2. Вашу залил
3. применил ваш шаблон - всплывающее окно "Товар добавлен..." - работает
4. Залили свой шаблон сайта в папку local (рядом с вашим), применил - не работает
5. скопировал свой шаблон корзины в ваш шаблон сайта, выбрал в компоненте свой шаблон корзины - работат

Получается дело не в шаблоне компонента, а в моем шаблоне сайта, но где копать? Не пойму...
Скрипты есть, шаблон компонента рабочий... Что еще может повлиять на то что оно обновляется, видимо дело в обновлении страницы?

Михаил Базаров 20.02.2018

Цитата

Андрей Колчанов написал:

Цитата

Может быть jquery не подключен у вас. Проверьте наличие подключения в head шаблона

use Bitrix\Main\Page\Asset;
CJSCore::Init(array("jquery"));

Андрей Колчанов 20.02.2018

Цитата
Михаил Базаров пишет: use Bitrix\Main\Page\Asset; CJSCore::Init(array("jquery" );

Ага не нашел в head.
Скопировал из вашего фала header.php почти все строки из <head> :-)

Разработало! Спасибо большое!!!

Андрей Колчанов 21.02.2018

Доброе утро! Сейчас заметил, почему то оформление надписи и иконки меняется после добавления в корзину.
Не, ну, должно было конечно поменяться но результат не тот :-)

Постараюсь по проще спросить :-)

В шаблоне компонента ваш код, был в одном из уроков:

Код

    <a href="/personal/cart/" title="Начать покупки" class="basket_top">
 <span class="fa"></span>
 <b>В корзине</b>
 <i>пока нет товаров</i>
 </a>
<?}else{?>
 <a href="/personal/cart/" title="В корзину" class="basket_top">
 <span class="fa"></span>
 <b>В корзине</b>
 <i><?=$quant?>
 <? echo getNumEnding($quant, array("товар", "товара", "товаров"));?>
 на <? echo SaleFormatCurrency($price, $defaultCurr); ?></i>
 </a>
<?}?>

Скрипты не правил, но после нажатия в корзину вижу в инспекторе кода:

Код
<li id="basket-container"> <a href="/personal/cart/"><span class="fa"></span> Корзина <i>2</i></a> </li>

После обновлении страницы отображается как должно:

Код
<a href="/personal/cart/" title="В корзину" class="basket_top"> <i class="far fa-shopping-cart"></i> <span>В корзине</span> <i id="cart-i">2 товара на 33 098 руб.</i> </a>

Но надпись "В корзину", хотя должно быть "В корзине"

Андрей Колчанов 25.02.2018
ЙЙЙЙееес, разобрался в файле /ajax/add2basket.php нужно указать свой шаблон, а не ajax.

Меню по разделу

Интернет-магазин техники:

В этом разделе видеоурок по разработке полноценного магазина электронной техники. Находится в текущем производстве.
В процессе создания сайта реализуется сайт с:

Полная версия сайта для декстопных устройств.
Мобильное приложение для AppStore и GooglePlay
Мобильная версия сайта (без приложения)
Развитие сайта до информационного ресурса

Подписывайтесь на youtube канал, что-бы быть в курсе

Серия 19: Добавление в корзину, избранное и сравнение на AJAX.

Интернет-магазин техники:

Войти на сайт