Скрипт корзины для лендинга. Скрипт корзины для landing page
Всем привет. Сегодня будем делать простую корзину для landing page на javascript. Дело в том, что меня часто спрашивали, как ее сделать и несколько раз присылали ТЗ на разработку, но я не брался, так как не особо понимал, как ее сделать, а недавно, решил поискать на форумах и блогах реализацию и наткнулся на… Salejs .
Скрип корзины оказался достаточно прост в использовании и настройке. При необходимости, можно быстро переделать и уже работающий лендинг.
Корзина для лендинг пейджИтак, первым делом подключаем jQuery, а ниже скрипт корзины. Я делаю это, как обычно, перед закрывающимся тегом body:
cartjs.initialize({ emailOrdersTo: "[email protected]", // Ваша почта language: "russian", // Язык currency: "руб.", // валюта requireName: true, // Спрашивать имя покупателя. requirePhone: true, // Спрашивать телефон покупателя. requireEmail: false, // Спрашивать почту покупателя. requireAddress: false, // Спрашивать адрес покупателя. })
Теперь давайте разместим саму кнопку корзины, в которой будет показана картинка и количество добавленных товаров:
Показать/Скрыть содержимое
Основное здесь:
JanSport PD 3331
1000 руб.
В корзину
Wicart - готовый скрипт весьма привлекательной корзины для покупок для сайта интернет-магазина. Очень полезное решение. Нам не нужно самим придумывать код корзины для покупок для нашего сайта: нужно просто «подключить» к нему уже существующую - и все будет работать: на нашем сайте появится готовая корзина для покупок: покупатель сможет «перетаскивать» туда товары и там же совершать оплату.
Как она выглядит:
Преимущества.
Нет PHP: только HTML и Javascript
Скрипт корзины для покупок написан только на языке Javascript (библиотека jOquery + технологии AJAX). Что это значит для рядового пользователя? А то, что корзина для покупок на сайте работает очень быстро, не требует перезагрузки сайта и не притормаживает по пустякам. Корзина для покупок на сайте интерактивна, и в то же время предельно быстра. Это несомненный плюс для покупателя.
Wicart очень легко подключается к сайту. Понятно, что скрипт корзины для покупок к сайту еще нужно подключить - нужно ручками вставить нужные кусочки кода в нужные места на сайте. Но с этим у вас не возникнет никаких проблем. Разработчики уже обо всем позаботились за вас. В инструкции к использованию указаны куски кода данной программы (скрипта), и указаны места на сайте, куда их нужно вставить. С этим справится любой, даже самый начинающий веб-мастер.
Вебмастеру не нужно самому ничего дописывать. Скрипт закончен и готов к использованию. Нужно просто вставить указанные кусочки кода в нужные места на сайте - и корзина заработает.
Подключение файлов
Открываем HTML страницу нашего сайта в текстовом редакторе, это может быть блокнот, который поставляется вместе с ОС Windows.
В начале файла должен находиться блок:
< head>
Именно сюда нужно вставить необходимые файлы из архива.
1) CSS файл
Данный файл отвечает за внешний вид нашей корзины. В нашем случае сам файл лежит в папке css, вы можете настроить любую другую папку.
2) JQuery
Для работы корзины нам понадобится библиотека JQuery . Вы можете загрузить ее с сайта, либо воспользоваться CDN
< script src= "http://code.jquery.com/jquery-1.11.0.min.js" type= "text/javascript" >
3) Скрипт корзины
< script src= "js/wicart.js" type= "text/javascript" >
*Нужно обратить внимание, что скрипт работает в кодировке UTF-8, если ваш сайт имеет отличную кодировку для скриптов, нужно явно указать нужную нам кодировку
Минимальная конфигурация имеет следующий вид:
Прайс-лист:
<
script>
var
priceList =
{
"001"
:
{
"id"
:
"001"
,
"subid"
:
{
}
,
"name"
:
"IPhone 5"
,
"price"
:
"20500"
}
,
"002"
:
{
"id"
:
"002"
,
"subid"
:
{
}
,
"name"
:
"IPad MINI"
,
"price"
:
"10500"
}
}
;
<
script>
var
cart;
var
config;
var
wiNumInputPrefID;
$(document) . ready(function () {
Cart =
new
WICard("cart"
)
;
cart.
init("basketwidjet"
,
config)
;
}
)
;
document.
addEventListener("visibilitychange"
,
function
(e)
{
cart.
init("basketwidjet"
,
config)
;
}
,
false
)
;
Переменная cart должна быть глобальной, к ней в последствии идет обращение.
basketwidjet это контейнер нашей корзины.
2) Виджет корзины (блок, куда попадает товар после покупки)
<
div>
<
span>
Корзина:
<
a href=
"#"
onclick=
"cart.clearBasket()"
style=
"float: right;"
>
Очистить
<
a href=
"#"
id=
"basketwidjet"
onclick=
"cart.showWinow("bcontainer", 1)"
>
<
span style=
"font: normal 11px Arial"
>
3
)
Форма заказа
<
div id=
"order"
class
=
"popup"
>
<
a href=
"#"
onclick=
"cart.closeWindow("order", 0)"
style=
"float:right"
><
img src=
"img/close.png"
/>
<
h4>
Введите ваши контактные данные
<
p><
form id=
"formToSend"
>
<
input id=
"fio"
type=
"text"
placeholder=
"Ваши фамилия и имя"
class
=
""
/>
<
input id=
"city"
type=
"text"
placeholder=
"Город"
class
=
""
/>
<
input id=
"phone"
type=
"text"
placeholder=
"Контактный телефон"
class
=
""
/>
<
input id=
"email"
type=
"text"
placeholder=
"Электронная почта"
class
=
""
/>
<
button onclick=
"cart.sendOrder("formToSend,overflw,bsum");"
href=
"#"
>
Отправить заказ
4) Кнопка покупки
< button id= "wicartbutton_001" onclick= "cart.addToCart(this, "001", priceList["001"])" > Купить
Недостатки.
Данный скрипт корзины для покупок все еще находится в стадии разработки. И некоторые возможности все еще не реализованы (например, пока что нет возможности отправить на почту покупателю фотографию его покупки и некоторые другие нюансы).
В бесплатной и стандартной версии продукта вам недоступна помощь разработчиков в установке корзины на ваш сайт. Впрочем, установка вовсе не сложна. А персональная версия (где помощь разработчиков доступна) - недорога: всего 1200 рублей. При покупке персональной версии разработчики сами же установят корзину для покупок на ваш сайт.
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим
Всё вышеперечисленное касалось ситуации, когда уже существует сайт на HTML и нужно на него установить корзину товаров. А если сайта еще нет? Конечно, самым верным (и дорогим) вариантом было бы разработать готовый сайт сразу на движке, в состав которого входят модули электронной коммерции. Однако, это не всегда оптимальных подход - рассмотрим несколько вариантов:
Нам нужен лендинг. По-сути это одностраничный сайт, состоящий исключительно из сверстанного в формате HTML макета. Нужен ли такому сайту движок, который обеспечивал бы формирование контента и управление им - больше чем в половине случаев нет, не нужен. Это неэффективное вложение средств и времени. Гораздо проще использовать как раз методы реализации корзины через готовые виджеты.
Другой вариант HTML-сайта - это сайты, созданные в визуальных редакторах и загруженные на сервер в виде готовых страниц. Если вы изначально задумались о создании сайта таким образом, а корзина товаров вам нужна исключительно для возможности заказа одного единственного вида продукции - совершенно ни к чему внедрять на сайт систему управления (разве что на будущее). И тут вполне можно решить вопрос с корзиной товаров в виде готового виджета.
В итоге: установить корзину на HTML-сайт возможно. Да, она будет сделана не так, как это обычно делается, но от этого её функции не потеряются. В некоторых случаях изначальный выбор в пользу HTML-сайта + готовая корзина товаров имеет более оптимальный вариант. Такое решение не является худшим - это просто альтернатива, сейчас многие сервисы работают по аналогичному принципу с самого начала и это является нормой, например, консультанты на сайтах, сервисы по предложению обратного звонка, сборщики почты для рассылок и т.д. Все они не реализуются средствами движка и не выполняются на серверах, а точно также встраиваются на сайты как виджеты, в том числе и на чисто HTMLные.
В этом еженедельном уроке screencast + мы научимся создавать собственную корзину покупок с PHP и MySQL. Вы увидите, что всё не так сложно, как кажется.
Предварительный просмотр скринкастов Шаг 1Начнём со структуры папок:
Структура
- reset.css - вы можете получить по this ссылке
- style.css - наш css файл для стиля HTML макета
- connection.php - файл для соединения с базой данных
- index.php - шаблон корзины покупок
- cart.php - файл, который меняет продукты в корзине (добавлять, удалять)
- products.php - страница списка продуктов
Начнем с разметки html, а затем её оформления. Откройте index.php и скопируйте/вставьте код:
Shopping cart
Как вы видите, наша страница имеет две колонки: основной столбец и sidebar. Теперь пройдём в CSS. Откройте файл style.css и пропишите код:
Body { font-family: Verdana; font-size: 12px; color: #444; } #container { width: 700px; margin: 150px auto; background-color: #eee; overflow: hidden; /* Set overflow: hidden to clear the floats on #main and #sidebar */ padding: 15px; } #main { width: 490px; float: left; } #sidebar { width: 200px; float: left; }
Вот как теперь выглядит наша страница продуктов:
Полный скринкаст Шаг 3 Прежде чем перейти к части PHP/MySQL, нам нужно создать базу данных. Откройте phpMyadmin и выполните следующие действия:
Для экономии времени я экспортировал свою таблицу, чтобы вы просто запустили следующий запрос:
CREATE TABLE IF NOT EXISTS `products` (`id_product` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL,
`description` varchar(250) NOT NULL,
`price` decimal(6,2) NOT NULL,
PRIMARY KEY (`id_product`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
INSERT INTO `products` (`id_product`, `name`, `description`, `price`) VALUES
(1, "Product 1", "Some random description", "15.00"),
(2, "Product 2", "Some random description", "20.00"),
(3, "Product 3", "Some random description", "50.00"),
(4, "Product 4", "Some random description", "55.00"),
(5, "Product 5", "Some random description", "54.00"),
(6, "Product 6", "Some random description", "34.00");
До извлечения данных из базы данных я сделаю index.php шаблон для списка продуктов и корзины. Поэтому добавьте следующий код в начало страницы index.php :
Для этого нам нужно включить файл; добавьте эту строку в index.php между div с id "main":
Теперь у нас полный index.php :
Shopping Cart
Давайте создадим соединение с MySQL. Откройте connections.php и пропишите следующее:
Шаг 5
Пропишем разметку для страницы продуктов. Откройте её и введите следующее:
Product List
| Product 1 | Some random description | 15 $ | Add to cart |
| Product 2 | Some random description | 25 $ | Add to cart |
Давайте посмотрим на страницу:
Как видите, это довольно уродливо. Давайте добавим этот CSS.
A {color: #48577D; text-decoration: none;} a:hover {text-decoration: underline;} h1, h2 {margin-bottom: 15px} h1 {font-size: 18px;} h2 {font-size: 16px} #main table { width: 480px; } #main table th { padding: 10px; background-color: #48577D; color: #fff; text-align: left; } #main table td { padding: 5px; } #main table tr { background-color: #d3dcf2; }
Okay: другое дело:
Выглядит намного лучше, не так ли? Внизу указан полный код style.css :
Body { font-family: Verdana; font-size: 12px; color: #444; } a {color: #48577D; text-decoration: none;} a:hover {text-decoration: underline;} h1, h2 {margin-bottom: 15px} h1 {font-size: 18px;} h2 {font-size: 16px} #container { width: 700px; margin: 150px auto; background-color: #eee; padding:15px; overflow: hidden; } #main { width: 490px; float: left; } #main table { width: 480px; } #main table th { padding: 10px; background-color: #48577D; color: #fff; text-align: left; } #main table td { padding: 5px; } #main table tr { background-color: #d3dcf2; } #sidebar { width: 200px; float: left; }
Шаг 6Прежде чем извлечь продукт из базы данных, давайте удалим последние две строки из нашей таблицы (были нужны только для того, чтобы увидеть, как она будет выглядеть). Удалить это:
Отлично! Теперь в том месте, где были строки таблицы, введите следующий код PHP:
x
Go to cartПосмотрите на картинку снизу:
Поскольку index.php является шаблоном для всех файлов, sidebar также будет виден в cart.php . Разве это не круто?!
Шаг 9Наконец, откройте cart.php и введите код:
View cart Go back to products page