Бесплатный скрипт корзины для сайта
Приветствую всех посетителей сайта! Информация сегодняшнего материала будет крайне полезна тем, кто планирует на своем сайте что-то продавать. Скрипт корзины, о котором пойдет речь ниже, достойный продукт из серии бесплатных, который позволит вам профессиональным образом организовать на сайте интернет-магазин.
К сожалению, на сегодня скрипт технически не поддерживается разработчиками, но по-прежнему доступен для бесплатного использования. Работа скрипта предварительно протестирована мною и могу сказать, что это, пожалуй, единственное решение из бесплатных, которое предоставляет в ваше пользование всплывающую форму заказа и стильно оформленную витрину.
Данный скрипт не использует баз данных, для него нет необходимости использования php, поэтому он с легкостью может быть установлен на любой html-сайт. Действие скрипта позволяет совершать покупки на вашем сайте любому пользователю, как в обычном интернет-магазине. Нажав на кнопку "купить" рядом с понравившимся товаром, товар будет автоматически добавлен в корзину.
При этом появится всплывающая форма с содержимым корзины для корректировки и оформления заказа. Если пользователь хочет еще "погулять" по вашему магазину, он просто закроет это окно и продолжит просмотр. К оформлению заказа он может вернуться в любой момент.
В форме оформления заказа доступны опции выбора доставки и оплаты товары. При включении опции "Доставка" заполняется дополнительное поле "Адрес для доставки". После отправки заказа всю информацию о заказе вы получите на свой e-mail, указанный в настройках.
Установка скрипта корзины вовсе несложна и сводится к подключению стилей, библиотеки JQuery и самих скриптов. Что ж, давайте разберем процесс установки корзины пошагово.
ШАГ 1. Создаем на сервере в корневой директории новую папку для скрипта корзины, которую так и назовем - korzina. В нее нужно перетянуть часть содержимого архива, предварительно его распаковав. После распаковки в архиве вы увидите следующие файлы:
Статьи по оптимизации сайта
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Проект для новичков
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Всем удачного изучения и применения! До новых встреч!
С ув. Светлана (SvetLana_TSV)
Обратите внимание, что кодировка скрипта и всех его файлов UTF-8, если на вашем сайте другая кодировка, например windows-1251, то файлы скриптов нужно перекодировать и в следующем шаге тоже прописать вместо UTF-8 вашу кодировку windows-1251, иначе вместо русских букв в форме заказа получите нечитаемые символы.
ШАГ 2. Подключение стилей и скриптов.
Непосредственное подключение всех скриптов производится между тегами <head> </head>. Код подключения состоит из следующих строк:
<link href="korzina/css/style.css" type="text/css" rel="stylesheet">
<link href="korzina/css/wicart.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="korzina/css/validationEngine.jquery.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" ></script>
<script src="korzina/js/script.js" type="text/javascript" ></script>
<script src="korzina/js/wicart.js" type="text/javascript" ></script>
<script src="korzina/js/wicart.discount.js" type="text/javascript"></script>
<script src="jquery.loupe.min.js" type="text/javascript" ></script>
<script src="korzina/js/jquery.validationEngine-ru.js" type="text/javascript" charset="utf-8"></script>
<script src="korzina/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<style>
ШАГ 3. Теперь сразу после этих строк следует прописать стили для затемнения фона при появлении всплывающей формы заказа:
#prjclose
{
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background: #999;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
#sbj
{
width: 300px;
margin: 200px auto 10px auto;
font: bold 30px Tahoma;
color: #C40000;
}
#mail
{
width: 300px;
margin: auto;
font: bold 12px Tahoma;
color: #000;
}
</style>
ШАГ 4. Подключение самой корзины и формы заказа. Для этого между тегами <body> </body> следует разместить следующий код.
В самом коде в блоке витрины измените названия товаров на свои и укажите цены.
После всех манипуляций вы должны получить на странице вот такую витрину с виртуальной корзиной.
То, что выделено на скриншоте красным, перемещаем на сервер в папку korzina. Файл htaccess на сервер заливать не нужно, если таковой у вас уже существует. В него просто нужно будет дописать одну-единственную строчку, отвечающую за корректное отображение кодировки UTF-8:
AddDefaultCharset UTF-8
В файле sendmail.php, прежде, чем его перетягивать, впишите свой e-mail, на который вам будет приходить информация о заказах. Это делается в последнем абзаце кода. Вместо моего эл. адреса пропишите свой, сохраните изменения и после этого переместите его на сервер в ту же папку korzina.
В папке img картинки по умолчанию замените фотографиями своих товаров, не переименовывая их, и после этого загрузите на сервер. Если меняете название картинкам, то вносите соответствующие изменения в код, выводящий витрину и в стили корзины.
После нажатия на кнопку "Купить" под фотографией товара, он будет отправлен в корзину. При этом на затемненном фоне появится вот такое всплывающее окно с информацией о товаре и итоговой суммой покупки, если было выбрано несколько товаров.
После того, как пользователь нажмет "Оформить заказ", появится второе всплывающее окно поверх первого с предложением заполнить контактные данные.
После заполнения данных и нажатия на кнопку "Отправить заказ", информация о заказе пересылается на ваш e-mail, а покупатель видит вверху страницы такое сообщение:
На этом скрипт свою часть работы выполнил, передав все данные из формы вам, теперь ваша очередь - отреагировать на поступивший заказ, связаться в покупателем для уточнения деталей доставки или оплаты.
Кому понравился данный скрипт, скачать его можно с сайта разработчиков. На этом сегодняшний материал завершен.
Не забудь заглянуть в свою почту и подтвердить подписку!