Скрипт корзины для 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 - количество

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности