Smartlanding

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

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

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

Поделитесь статьей в социальных сетях, чтобы не потерять

41 комментарий

  • Жанатбек

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

    Ответить
  • Дмитрий

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

    Ответить
  • Сергей

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

    Ответить
  • dimadv7

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

    Ответить
  • dimadv7

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

    Ответить
  • dimadv7

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

    Ответить
  • Сергей

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

    Ответить
  • dimadv7

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

    Ответить
  • sqrt361

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

    Ответить
  • Игорь

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

    Ответить
  • dimadv7

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

    Ответить
  • Игорь

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

    Ответить
  • dimadv7

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

    Ответить
  • Антон

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

    Ответить
  • Владимир.

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

    Ответить
  • dimadv7

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

    Ответить
  • Роман

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

    Ответить
  • Александр

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

    Ответить
  • Сергей

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

    Ответить
  • Дарья

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

    Ответить
  • klik

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

    Ответить
  • dimadv7

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

    Ответить
  • Николай

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

    Ответить
  • Денис

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

    Ответить
  • Дмитрий

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

    Ответить
  • dimadv7

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

    Ответить
  • Антон

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

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

    Ответить
  • Алексей

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

    Ответить
  • Сергей

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

    Ответить
  • John LapTev

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

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

    Ответить
  • Алекс

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

    Ответить
  • Андрей

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

    Ответить
  • Roman

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

    Ответить
  • Germiona

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

    Ответить
  • Гуру

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

    Ответить
  • dimadv7

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

    Ответить
  • Гуру

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

    Ответить
  • iri

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

    Ответить
  • Евгений

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

    Ответить
  • dimadv7

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

    Ответить
  • олег

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

    Ответить

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