Телеграм:@camouf_ruПочта:mihail@bazarow.ru
ЛетоОсеньЗимаВесна

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

Просмотров: 8216

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

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

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

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

Дополнительные файлы


Все серии

Комментарии к видео

Слава Струк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

Не подскажете в чем может быть дело?)
проблема была в компоненте судя по всему, использовал тот, что был в первом архиве local.
Скачал архив из 20го урока, заменил, все заработало.
Да, там в файле 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
Цитата
Андрей Колчанов написал:
Цитата
Михаил Базаров  пишет:
Видимо не подключился 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. скопировал свой шаблон корзины в ваш шаблон сайта, выбрал в компоненте свой шаблон корзины - работат

Получается дело не в шаблоне компонента, а в моем шаблоне сайта, но где копать?  Не пойму...
Скрипты есть, шаблон компонента рабочий... Что еще может повлиять на то что оно обновляется, видимо дело в обновлении страницы?
Может быть 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.
Андрей Колчанов27.02.2018
Доброе утро, Михаил!
Было бы неплохо, чтобы при повторном нажатии на кнопку Избранное товар удалялся из избранного.
Причины:
1. По аналогии с кнопкой В сравнение;
2. И если посетитель сайта случайно нажал В избранное и не пришлось потом специально заходить в избранное и удалять не нужный товар.
Владислав Кузнецов14.03.2018
Добрый день.
Все сделано по Вашей инструкции, но при добавлении в избранное, не передается название, а все остальное передается. При чем если добавлять в избранное из корзины, то все нормально.
Подскажите куда копать, а то всю голову сломал уже.
3amok16107.04.2018
Михаил Базаров,  Здравствуйте!
Подскажите, пожалуйста, не получается самому догадаться в чем проблема.
Не получается вывести счетчик товаров в Избранное, уже 500 раз все проверил, все так же как и у вас, но не работает (((
.
Вставляю код
Код
<? use Bitrix\Main\Loader;     Loader::includeModule("sale");      $delaydBasketItems = CSaleBasket::GetList(         array(),             array(             "FUSER_ID" => CSaleBasket::GetBasketUserID(),             "LID" => SITE_ID,             "ORDER_ID" => "NULL",             "DELAY" => "Y"         ),       array()     );     echo $delaydBasketItems; ?> 
Сайт рушится с надписью
Цитата

"При выполнении скрипта возникли ошибки"
.
Стираю из кода только
echo $delaydBasketItems;
Все снова становится на свои места.
Затем добавляю <?echo $delaydBasketItems;?>
во внутрь тега <i> на то место, где должен отображаться счетчик (как в уроке), и снова сайт летит нафиг с той же ошибкой.
Получается, что вывод $delaydBasketItems все ломает.

.
Сейчас без вывода $delaydBasketItems в теге <i> счетчик работает, отображается только при нажатии на кнопку Добавить в избранное в карточке товара, но как только обновляешь страницу счетчик сбрасывается на 0.
.
.
Подскажите, пожалуйста, хотя бы в какую сторону копать. Буду очень благодарен.
Может у кого на форуме была такая же проблема? Подскажите, ребята.
3amok16107.04.2018
Как-то туго идет эта серия)))

При реализации отображения счетчика товаров в Корзине возникает такая ошибка на месте где должна быть корзина
Код
 'basket.small.bazarow' is not a component
Почему так может быть? Подскажите, кто-нибудь.
Михаил Базаров08.04.2018
Цитата
3amok161 написал:
Как-то туго идет эта серия)))

При реализации отображения счетчика товаров в Корзине возникает такая ошибка на месте где должна быть корзина
Код
  'basket.small.bazarow' is not a component 
Почему так может быть? Подскажите, кто-нибудь.
В ajax обработчике, там где дублируется компонент корзины (к которому идет запрос за обновлением счетчика) убедитесь что подключен компонент именно из директории bazarow а не bitrix
3amok16109.04.2018
Михаил, спасибо большое! Компонент подключал из bitrix, поэтому не работало.

Цитата
Михаил Базаров пишет:
Цитата
3amok161 написал:
Как-то туго идет эта серия)))

При реализации отображения счетчика товаров в Корзине возникает такая ошибка на месте где должна быть корзина
Код
   'basket.small.bazarow' is not a component  
Почему так может быть? Подскажите, кто-нибудь.
В ajax обработчике, там где дублируется компонент корзины (к которому идет запрос за обновлением счетчика) убедитесь что подключен компонент именно из директории bazarow а не bitrix
Александр20.05.2018
Здравствуйте Михаил. Не очень понятно, каким компонентом выводится список отложенных товаров, если корзиной то как компонент понимает, что выводить нужно отложенные а не товары в корзине?
Михаил Базаров21.05.2018
Цитата
Александр написал:
Здравствуйте Михаил. Не очень понятно, каким компонентом выводится список отложенных товаров, если корзиной то как компонент понимает, что выводить нужно отложенные а не товары в корзине?
Вроде бы в видео прям подробно показал этот момент
Просто открывает сразу, таб с отложенными товарами (basket_item_dlayed вместо basket_items)
slonikandrew09.07.2018
Здравствуйте! Столкнулся с проблемой, при добавлении товара в корзину из карточки товара почему-то не передается его кол-во. Класс к форме добавлен, jquery подключен. В консоли выдает ошибку Uncaught TypeError: $(...).ajaxForm is not a function не могу понять как ее исправить :(
slonikandrew09.07.2018
Цитата
slonikandrew пишет:
Здравствуйте! Столкнулся с проблемой, при добавлении товара в корзину из карточки товара почему-то не передается его кол-во. Класс к форме добавлен, jquery подключен. В консоли выдает ошибку Uncaught TypeError: $(...).ajaxForm is not a function не могу понять как ее исправить
Косяк исправлен путем убирания галочки с подгрузки скриптов внизу страницы)
gepard09@inbox.ru16.08.2018
Здравствуйте. Подскажите пожалуйста какие компоненты нужно использовать, если на сайте нужны (помимо вывода товаров конечно) - только корзина, выбор доставки и оплата робокассой, но НЕ нужен личный кабинет пользователя (так руководство решило). Документация лес дремучий, а вы объясняете очень доходчиво, спасибо вам огромное!
Михаил Базаров16.08.2018
Цитата
gepard09@inbox.ru написал:
Здравствуйте. Подскажите пожалуйста какие компоненты нужно использовать, если на сайте нужны (помимо вывода товаров конечно) - только корзина, выбор доставки и оплата робокассой, но НЕ нужен личный кабинет пользователя (так руководство решило). Документация лес дремучий, а вы объясняете очень доходчиво, спасибо вам огромное!
Все равно нужны теже компоненты что и для магазина. Кабинет просто не выводите ни куда и почтовые шаблоны подправте- убери ccskrb в них подчистите
ztx@bk.ru26.11.2018
Обнаружил один такой момент, что реализация Избранного через отложенные товары в корзине плохая идея. Один раз купил это избранное и это уже не избранное, надо заново добавлять товар в избранное (
Михаил Базаров26.11.2018
Цитата
ztx@bk.ru написал:
Обнаружил один такой момент, что реализация Избранного через отложенные товары в корзине плохая идея. Один раз купил это избранное и это уже не избранное, надо заново добавлять товар в избранное (
Да, в последующих видео будем этот момент переделывать. Не через отложенные, а прям настоящее избранное.
Ну или, если нужно срочно. Используйте компонент catalog.item - в него просто передавайте ID товаров, которые отложились.
Стас Ларин27.03.2019
Добрый день, сделал все действия по созданию кнопки сравнения, input вывелся все нормально, но как только я нажимаю на input для добавления в список сравнения ничего не происходит и в консоле появляется ошибка


(index):414 Uncaught TypeError: Cannot read property 'checked' of null
   at compare_tov ((index):414)
   at HTMLInputElement.onchange ((index):495)

Судя по коду она происходит в этом месте:

var chek = document.getElementById('compareid_'+id);
   if (chek.checked) //происходит ошибка при проверке условия
       {
       //Добавить
       var AddedGoodId = id;
           $.get("/local/ajax/list_compare.php",
           {
               action: "ADD_TO_COMPARE_LIST", id: AddedGoodId},
               function(data) {
       $("#compare_list_count"[IMG].html(data);
        }
       );

Не подскажите в чем может быть проблема?
Михаил Базаров27.03.2019
Цитата
Стас Ларин написал:
/local/ajax/list_compare.php

Вот тут /local/ajax/list_compare.php тот же самый шаблон сравнения, что и в шапке сайта?
Стас Ларин27.03.2019
Да, скпировал, только он у меня в футере, но на сколько я понимаю это не важно, так как в шапке сайта он туже ошибку выдает и вывел значение переменной chek  с помощью consol.log(chek) получает значение null
Стас Ларин27.03.2019
Простите за беспокойство и спасибо за решение!!! Все заработало, проблема оказалась в лишнем знаке при копировании, после более детального изучения кода и его удаления все заработало на ура!
Александр Ермакович28.03.2019
Спасибо вам за модули)
А не знаете как из избранного не перемещать к корзину а делать копию? т.е. товар остается в избранном но такой же товар помещается в корзину?
Сергей Макаренко18.03.2021
У меня вообще нет кнопки в корзине "отложить"  я так понимаю что у меня этот функционал вообще не подключен, как его подключить?
Спасибо
EKATERINA Полукарова06.04.2021
Михаил, добрый день. Подскажите, пожалуйста, в странице избранного не возможно отправить товар в корзину... В чем может быть проблема... Сам код добавления в корзину работает, но только не на этой странице  :\
Сам код страницы "Избранные": https://yadi.sk/d/ORm8xQmt6b2HTA