Всем привет. Сегодня будем делать простую корзину для 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 комментария
Я так понял письмо отправляет от salejs?
Письмо пришло с сервиса robot@salejs.com
Похоже на та) Мне тоже так приходят.
Мне вообще не приходят((
Может,я чего то не понимаю но у меня самой корзины нет.Скачал исходник.Залил на хост, а где добавление товаров в корзину???
Скиньте ссылку, на сайт, куда вы залили, гляну.
А, ну понял, сайт автора 502 ошибку выдает, а там лежали нужные для работы файлы. __http://salejs.com
Уже все в порядке, вроде как
Я так понял,если в дальнейшем будут проблемы с сайтом автора, где лежат файлы,то скрипт работать не будет.База находится по адресу __http://salejs.com/v1/.А можно как то отвязаться от сайта автора и создать отдельно файл куда поместить все данные?
Да выходит так. Если есть желание попробуйте автору задать этот вопрос.
Можно прописать baseUrl: 'имя вашего домена' при инициализации, но проблема в том, что серверного файла отвечающего за отправку в исходнике нет. Файл лежит на хостинге у автора и доступа к нему нет. Это конечно легко исправить, но если автор не вложил этот файл в исходники, то скорее всего на это есть причина.
А данная технология работы с корзиной подходит для работы с сайтами, которые созданы в Adobe Muse ?
Чем отличаются сайты сделанные при помощи adobe muse?
Так и не понял по комментариям, скрипт работает или нет? Скачивать и устанавливать стоит?
Работает, просто были проблемы с сайтом у разработчика, на котором расположены часть скриптов, поэтому, временно, был недоступен.
На Гите лежат все исходники, ссылка у автора указана. Заливаете файлы себе на сервер и пользуйтесь. Только надо учесть тот факт, что автор использует сервис для отправки писем, а не средствами php. Для установки, даже видео есть.
Добрый день. Скажите как сделать, чтоб вместо названия товара в корзине, были ссылки на этот товар. Спасибо.
Здравствуйте, по поводу изменения скрипта лучше обращаться к автору.
dimadv7 Сайты сделаны на адобе мусе, сильно засоренный код, сайт сделаный проф чистый просто и любой другой понимающий сможет в нем дальше работать, мус для тех кто не хочет в нем разбираться но проф к нему относиться это большая ошибка (это мое мнение, после того когда увидел работу сделанную руками а не программой)
как же сделать чтоб отправлялось с собственного сервера?...
Здравствуйте. Как можно реализовать чтобы при клике вне корзины, корзина скрывалась?
Здравствуйте! Я сделала сайт с помощью вашей корзины, но есть ошибка. При добавлении в корзину, а затем удалении из нее - неверно считает сумму покупки. Как можно это исправить?
Здравствуйте. Корзина не моя, ссылка на автора в тексте статьи.
Перестало работать на моем сайте и в примере не работает(((
а как соеденить корзину с уведомлением в telegramm а не на эмейл
Автор уж извините, но не удержался чтобы не написать. Наверное прежде чем, объяснять , что все так просто, нужно сказать, что файлы перевода, стили и скрипты bootstrap тянутся со стороннего сервера. Ну вот зачем мне на ленде бутстрап? А если у меня ленд на бутстрапе зачем еще одно подключение при чем не самой свежей версии?
Ссылка на полное описание, автора и исходники есть в статье. Смотрите, читаете и решаете подходит вам или нет. Никто не заставляет и не навязывает ничего. Не подходит - проходите мимо. Претензии по поводу скрипта - автору)) Как-то так))
Скрипт отправки в данный момент не работает, я так понимаю что проблема в файлах которые лежат на хосте у автора...
Кто нибудь знает решиться ли эта проблема в ближайшее время??
Такая же проблема
Если не можешь решить элементарное, скачать недостоющие скрипты и прописать пути, то зачем вообще берешься за это дело?
Дел на 5 мин, зачем так позорится Антон???
Автору спасибо)
Получилось сделать что бы вновь работала?
Саму корзину я вернул. Но в скрипте вижу путь /order, похоже там должны быть файлы для обработки письма. Но вот только такой папки на GitHub нету.
Нашли решение?
Какие файлы тянуть и заливать на свой хостинг с GitHub, чтоб отвязаться от сайта salejs? Разместил на хосте, но так понял там ручками прописывать нужно пути, выложите скрин пжл какой нить у кого получилось сделать отвязку. в файле server.js смотрите отправку писем.
Не работает в демо
уже и вовсе не робить, статья не актуальна
Всё работает, спасибо Автору за статью, руки новые купите и всё работать будет - либо глаза с очками в придачу
Доказательства что работает в студию. А лучше с подробным описанием что делали, и недостающими файлами. Все это дело можете залить в облако и предоставить ссылку тут.
Ох-хо, придется, в скором времени, сделать свой вариант виджета корзины, чтобы у всех было все на своем сервере. Подумаю, как лучше реализовать. Не обещаю, что скоро сделаю, но на заметку взял.
dimadv7, появилось решение?
Дмитрий, решение чего?
Народ был бы признателен и счастлив если поможете.
Работало .... и перестало работать совсем! :(
Доброго времени суток!
Извините но корзина не работает, а очень нужно.
Подскажите пожалуйста в чем может быть проблемма.
Здравствуйте, Евгений. В том, что обработчик находится на сервере у разработчика, который, судя по всему, барахлит. Нужно свой писать, если на github нет его. Когда писалась статья, все было ОК
Добрый день! а есть рабочий вариант? чтобы на своем сервере держать?
спасибо
Будет обновление? :)
oleg, так это у автора нужно спросить. Ссылка на его github в описании. Но я занялся разработкой собственного скрипта корзины для landing page. Так что, "будет еще один скрипт", а не обновление))
dimadv7, я по сути это и спрашивал :)) Может уже есть что показать? :) Уж больно надо, хочу на этой основе простенький магазин собрать, спасибо
Пока, только фронтенд процентов на 80 готов. Постараюсь быстрее доделать минимально работающую версию и выложить, а там уже доработки да и вообще, как пойдет. Может он и не востребован окажется.
Sales.js сайт заработал.. но корзина только у него на сайте работает..
Помогите пожалуйста, как сделать так, чтобы при нажатии на кнопку купить не появлялось окно заказ оформлен, а переходило по ссылке, это после заполнения имя и телефона
Дмитрий, по вопросам кастомизации скрипта, обратитесь к его автору. Вот, например, на странице проекта есть его почта: salejs.com
При нажатии на кнопку Добавить в корзину ничего не происходит, как это можно исправить?
Александр, проверьте ошибки в консоли, исправьте и все должно быть ок. Посмотрите демо, исходный код, убедитесь, что присутствуют все дата-атребуты у кнопки, как на демо
Статус отправлено, на почту не приходит.
Страница проекта __http://salejs.com/ 502 Bad Gateway
Я не вижу формы на сайте, сразу 502 ошибка.