Скрипт корзины для landing page

Корзина для landing pageВсем привет. Сегодня будем делать простую корзину для landing page на javascript. Дело в том, что меня часто спрашивали, как ее сделать и несколько раз присылали ТЗ на разработку, но я не брался, так как не особо понимал, как ее сделать, а недавно, решил поискать на форумах и блогах реализацию и наткнулся на... Salejs.

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

Посмотреть пример

Корзина для лендинг пейдж

Итак, первым делом подключаем jQuery, а ниже скрипт корзины. Я делаю это, как обычно, перед закрывающимся тегом body:

<!-- Библиотека jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Скрипт корзины -->
<script src="libs//salejs/cart.js"></script>

Далее, необходимо произвести некоторые настройки и инициализировать скрипт. Я сделаю это ниже, под подключением скрипта корзины, но вы можете вынести его и в отдельный файл.

<script>
  cartjs.initialize({
    emailOrdersTo  : 'smart-landing@yandex.ru', // Ваша почта
    language       : 'russian',            // Язык
    currency       : 'руб.',               // валюта

    requireName    : true,      // Спрашивать имя покупателя.
    requirePhone   : true,      // Спрашивать телефон покупателя.
    requireEmail   : false,     // Спрашивать почту покупателя.
    requireAddress : false,     // Спрашивать адрес покупателя.
  })
</script>

Теперь давайте разместим саму кнопку корзины, в которой будет показана картинка и количество добавленных товаров:

<a href="#" class="cart-button" style="display: none;">
   <i class="fa fa-shopping-cart" aria-hidden="true"></i>
   <span class="cart-button-quantity"></span>
   <span class="cart-button-label"></span><br/>
   <span class="basket-help-text">Показать/Скрыть содержимое</span>
   <!-- Опционально, вместо span элементов можно поместить сюда картинку для кнопки. -->
</a>

Основное здесь:

   <span class="cart-button-quantity"></span>
   <span class="cart-button-label"></span>

Остальное я добавил самостоятельно. Теперь нужно разметить кнопку в карточке товара, которая будет добавлять товар в корзину. У меня карточка выглядит так:

<div class="good-item">
     <div class="good-img"><img src="img/tovar.png" alt="рюкзак"></div>
     <div class="good-name">JanSport PD 3331</div>
     <div class="good-price">1000 руб.</div>
     <a href="#" class="cart-buy-button" data-name="JanSport PD 3331" data-price="1000" data-quantity="1"><i class="fa fa-shopping-basket" aria-hidden="true"></i> В корзину</a>
</div>

Как вы могли заметить, у ссылки есть "говорящие" data-атрибуты. Данные этих data-атрибутов и попадают в корзину. Таки образом:

  • data-name - название товара/услуги
  • data-price - цена
  • data-quantity - количество

Вот, собственно, и все. Достаточно просто и быстро, в случае необходимости, можно оформить свой лендинг в стиле интернет-магазина и добавить ему корзину. Кстати, скрипт локализован на русский, украинский и английский язык. А какими инструментами для создания корзины на лендинг пейдж пользуетесь вы?

Скачать исходник

54 комментария

  1. Жанатбек

    Я так понял письмо отправляет от salejs?
    Письмо пришло с сервиса robot@salejs.com

    1. Дмитрий

      Похоже на та) Мне тоже так приходят.

    2. Николай

      Мне вообще не приходят((

  2. Сергей

    Может,я чего то не понимаю но у меня самой корзины нет.Скачал исходник.Залил на хост, а где добавление товаров в корзину???

    1. dimadv7

      Скиньте ссылку, на сайт, куда вы залили, гляну.

    2. dimadv7

      А, ну понял, сайт автора 502 ошибку выдает, а там лежали нужные для работы файлы. __http://salejs.com

    3. dimadv7

      Уже все в порядке, вроде как

  3. Сергей

    Я так понял,если в дальнейшем будут проблемы с сайтом автора, где лежат файлы,то скрипт работать не будет.База находится по адресу __http://salejs.com/v1/.А можно как то отвязаться от сайта автора и создать отдельно файл куда поместить все данные?

    1. dimadv7

      Да выходит так. Если есть желание попробуйте автору задать этот вопрос.

    2. sqrt361

      Можно прописать baseUrl: 'имя вашего домена' при инициализации, но проблема в том, что серверного файла отвечающего за отправку в исходнике нет. Файл лежит на хостинге у автора и доступа к нему нет. Это конечно легко исправить, но если автор не вложил этот файл в исходники, то скорее всего на это есть причина.

  4. Игорь

    А данная технология работы с корзиной подходит для работы с сайтами, которые созданы в Adobe Muse ?

    1. dimadv7

      Чем отличаются сайты сделанные при помощи adobe muse?

  5. Игорь

    Так и не понял по комментариям, скрипт работает или нет? Скачивать и устанавливать стоит?

    1. dimadv7

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

  6. Антон

    На Гите лежат все исходники, ссылка у автора указана. Заливаете файлы себе на сервер и пользуйтесь. Только надо учесть тот факт, что автор использует сервис для отправки писем, а не средствами php. Для установки, даже видео есть.

  7. Владимир.

    Добрый день. Скажите как сделать, чтоб вместо названия товара в корзине, были ссылки на этот товар. Спасибо.

    1. dimadv7

      Здравствуйте, по поводу изменения скрипта лучше обращаться к автору.

  8. Роман

    dimadv7 Сайты сделаны на адобе мусе, сильно засоренный код, сайт сделаный проф чистый просто и любой другой понимающий сможет в нем дальше работать, мус для тех кто не хочет в нем разбираться но проф к нему относиться это большая ошибка (это мое мнение, после того когда увидел работу сделанную руками а не программой)

  9. Александр

    как же сделать чтоб отправлялось с собственного сервера?...

  10. Сергей

    Здравствуйте. Как можно реализовать чтобы при клике вне корзины, корзина скрывалась?

  11. Дарья

    Здравствуйте! Я сделала сайт с помощью вашей корзины, но есть ошибка. При добавлении в корзину, а затем удалении из нее - неверно считает сумму покупки. Как можно это исправить?

    1. dimadv7

      Здравствуйте. Корзина не моя, ссылка на автора в тексте статьи.

  12. klik

    Перестало работать на моем сайте и в примере не работает(((

  13. Денис

    а как соеденить корзину с уведомлением в telegramm а не на эмейл

  14. Дмитрий

    Автор уж извините, но не удержался чтобы не написать. Наверное прежде чем, объяснять , что все так просто, нужно сказать, что файлы перевода, стили и скрипты bootstrap тянутся со стороннего сервера. Ну вот зачем мне на ленде бутстрап? А если у меня ленд на бутстрапе зачем еще одно подключение при чем не самой свежей версии?

    1. dimadv7

      Ссылка на полное описание, автора и исходники есть в статье. Смотрите, читаете и решаете подходит вам или нет. Никто не заставляет и не навязывает ничего. Не подходит - проходите мимо. Претензии по поводу скрипта - автору)) Как-то так))

  15. Антон

    Скрипт отправки в данный момент не работает, я так понимаю что проблема в файлах которые лежат на хосте у автора...

    Кто нибудь знает решиться ли эта проблема в ближайшее время??

    1. Алексей

      Такая же проблема

    2. Сергей

      Если не можешь решить элементарное, скачать недостоющие скрипты и прописать пути, то зачем вообще берешься за это дело?
      Дел на 5 мин, зачем так позорится Антон???
      Автору спасибо)

    3. John LapTev

      Получилось сделать что бы вновь работала?
      Саму корзину я вернул. Но в скрипте вижу путь /order, похоже там должны быть файлы для обработки письма. Но вот только такой папки на GitHub нету.

      Нашли решение?

  16. Алекс

    Какие файлы тянуть и заливать на свой хостинг с GitHub, чтоб отвязаться от сайта salejs? Разместил на хосте, но так понял там ручками прописывать нужно пути, выложите скрин пжл какой нить у кого получилось сделать отвязку. в файле server.js смотрите отправку писем.

  17. Андрей

    Не работает в демо

  18. Roman

    уже и вовсе не робить, статья не актуальна

  19. Germiona

    Всё работает, спасибо Автору за статью, руки новые купите и всё работать будет - либо глаза с очками в придачу

  20. Гуру

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

    1. dimadv7

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

    2. Дмитрий

      dimadv7, появилось решение?

    3. dimadv7

      Дмитрий, решение чего?

  21. Гуру

    Народ был бы признателен и счастлив если поможете.

  22. iri

    Работало .... и перестало работать совсем! :(

  23. Евгений

    Доброго времени суток!
    Извините но корзина не работает, а очень нужно.
    Подскажите пожалуйста в чем может быть проблемма.

    1. dimadv7

      Здравствуйте, Евгений. В том, что обработчик находится на сервере у разработчика, который, судя по всему, барахлит. Нужно свой писать, если на github нет его. Когда писалась статья, все было ОК

  24. олег

    Добрый день! а есть рабочий вариант? чтобы на своем сервере держать?
    спасибо

  25. oleg

    Будет обновление? :)

    1. dimadv7

      oleg, так это у автора нужно спросить. Ссылка на его github в описании. Но я занялся разработкой собственного скрипта корзины для landing page. Так что, "будет еще один скрипт", а не обновление))

    2. Oleg

      dimadv7, я по сути это и спрашивал :)) Может уже есть что показать? :) Уж больно надо, хочу на этой основе простенький магазин собрать, спасибо

    3. dimadv7

      Пока, только фронтенд процентов на 80 готов. Постараюсь быстрее доделать минимально работающую версию и выложить, а там уже доработки да и вообще, как пойдет. Может он и не востребован окажется.

  26. Oleg

    Sales.js сайт заработал.. но корзина только у него на сайте работает..

  27. Дмитрий

    Помогите пожалуйста, как сделать так, чтобы при нажатии на кнопку купить не появлялось окно заказ оформлен, а переходило по ссылке, это после заполнения имя и телефона

    1. dimadv7

      Дмитрий, по вопросам кастомизации скрипта, обратитесь к его автору. Вот, например, на странице проекта есть его почта: salejs.com

  28. Александр

    При нажатии на кнопку Добавить в корзину ничего не происходит, как это можно исправить?

    1. dimadv7

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

  29. Eric Cartman

    Статус отправлено, на почту не приходит.
    Страница проекта __http://salejs.com/ 502 Bad Gateway

    1. Дмитрий Давыдов

      Я не вижу формы на сайте, сразу 502 ошибка.

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