Установка скрипта «Корзина товаров для ukit»
Введение
Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.
Данный скрипт предназначен исключительно для сайтов на платформе uKit и позволяет реализовать полноценный интернет-магазин с онлайн оплатой товаров. Предшествующая версия притерпела множество изменений и теперь обладает большим набором функций.
Особенности:
- добавление товара со стандартного виджета «Карточка», виджета «Прайс» и «Кнопка»;
- появилась возможность исключать любые виджеты «Карточка» из работы скрипта и назначать на них внешние ссылки или всплывающие окна;
- добавление товара с виджета «Прайс» и «Кнопка» требует генерации специальных ссылок, в комплект со скриптом прилагается специальный генератор;
- содержимое корзины сохраняется даже после того, как клиент закрыл вкладку или браузер;
- стильный виджет корзины реагирует на добавление товара и отображает общее количество товаров в корзине;
- по клику на виджет раскрывается панель с перечнем товаров и итоговой стоимостью, есть возможность управлять содержимым (удалять/изменять количество товаров);
- при большом количестве товаров в корзине предусмотрена стилизованная прокрутка;
- у каждого товара теперь есть своя иконка, которая задается либо вручну, либо берется автоматически (у виджета «Карточка»), при отсутствии иконки добавляется дефолтное изображение, которое указывается в настройках;
- страница оформления заказа разделена на 4 вкладки: товары, доставка, оплата и контактные данные;
- на странице оформления заказа клиент может удалять твоарные позиции, а также изменять их количество;
- предусмотрено два сценария доставки: без наценки и включение стоимости доставки в заказ;
- можно добавить неограниченное количество способов доставки;
- появилась возможность использовать промокоды: фиксированная сумма или процент о тсуммы, модуль можно полностью отключить;
- сейчас доступно 4 способа оплаты: оплата наличными, оплата через Unitpay, Яндекс.Деньги и WebMoney;
- в скрипте можно глобально указать необходимую валюту и настроить некоторые платежные системы на обработку этой валюты, что позволит продавать товары не только в рублях;
- валидация полей контактной информации (проверка корректности ввода email, номера телефона, проверк на заполнение полей доставки и имени), добавлено поле комментария к заказу;
- после оформления заказа клиентом, на email владельца сайта отправляется соответствующее письмо с подробной информацией о заказе;
- каждому заказу присваивается уникальный номер, состоящий из даты и времени, а также уникального ключа;
- весь скрипт адаптивен и корректно отображается на мобильных устройствах (за исключением форм оплаты);
-
Требования к установке:
- оплаченный тариф «Премиум» или «Про» (для самостоятельной установки);
Перед установкой создайте бекап сайта, чтобы в любой момент можно было откатить изменения.
Первый шаг: создание скрытых служебных страниц
Для корректной работы скрипта необходимо создать пять служебных страниц, которые будут скрыты от индексации и прямого доступа.
1. Создаем первую страницу с названием «Оформление заказа», в SEO-настройках в поле «адрес (ЦПУ)» вписываем
basket. Внимание! Если вы впишите другое значение, это приведет к неправильной работе скрипта!На созданной странице размещаем виджет «Свой код», затем форму обратной связи и после нее еще один виджет «Свой код». В форме обратной связи отключаем все пооля кроме «Сообщение».
В первый виджет «Свой код» вставляем следующий код:
<div class="basket-page">
<h2 class="mc-title">Оформление заказа</h2>
<ul class="nav-tabs">
<li class="t-goods-i active" data-item="tab1"><span>Товары</span></li>
<li class="t-delivery-i" data-item="tab2"><span>Доставка</span></li>
<li class="t-pay-i" data-item="tab3"><span>Оплата</span></li>
<li class="t-contact-i" data-item="tab4"><span>Контакты</span></li>
</ul>
<div class="tabs">
<div class="tab" id="tab1"><div class="tab-wrap">
<h3>Шаг 1 из 4: мои товары</h3>
<div class="goodsWrap">
<div class="ucGoodsAll"></div>
</div>
<!-- Правая колонка -->
<div class="ucTotalRightWrap"> <div class="ucTotalRight">
<h3>Информация о заказе</h3>
<div class="orderError"></div>
<div class="insertRight"></div>
<div class="promoCode">
<p>Есть промокод? Введите его:</p>
<div class="promoSuccess"></div>
<div class="promoError"></div>
<input type="text" placeholder="Введите промокод" class="pcInput">
<input type="submit" value="Использовать" onclick="promoCode($(this));">
</div>
</div> </div>
<!-- Правая колонка -->
</div> <!-- / #tab-wrap -->
<div class="nav-panel">
<span class="nextTab" onclick="$('.t-delivery-i').click()">Далее</span>
</div>
</div> <!-- / #tab1 -->
<div class="tab" id="tab2"><div class="tab-wrap">
<h3>Шаг 2 из 4: выбор способа доставки</h3>
<div class="deliveryWrap"> <div class="deliveryItems">
<table>
<tr id="delivery-block-1" class="deliveryBlock">
<th class="dRadio"><input type="radio" name="delivery" value="1" class="delivery-item" id="del-type-1" onclick="shDel('self',0,'Забрать самостоятельно','del-type-1')"></th>
<td class="dIcon"><img src="/uploads/s/w/5/x/w5x31j9njgve/img/full_UXWFCzUt.png"></td>
<td class="dDesc"><label class="label" for="del-type-1">Забрать самостоятельно</label>При выборе такого варианта получения товара покупатель и продавец (или его представитель) встречаются в заранее обусловленном месте. Время получения товара с 10:00 до 18:00. Заказ можно оплатить по безналичному расчету или наличными при встрече. <br>Стоимость доставки — БЕСПЛАТНО!</td>
</tr>
<tr id="delivery-block-2" class="deliveryBlock">
<th class="dRadio"><input type="radio" name="delivery" value="2" class="delivery-item" id="del-type-2" onclick="shDel('courier',200,'Доставка курьером','del-type-2')"></th>
<td class="dIcon"><img src="/uploads/s/w/5/x/w5x31j9njgve/img/full_gtObAX4P.png"></td>
<td class="dDesc"><label class="label" for="del-type-2">Доставка курьером</label> Доставка заказов курьером осуществляется только по Ростову-на-Дону не позднее следующего дня с момента оформления заказа. Товар будет доставлен после предварительного звонка по телефону для согласования времени доставки. <br>Стоимость доставки — 200 руб.</td>
</tr>
<tr id="delivery-block-3" class="deliveryBlock">
<th class="dRadio"><input type="radio" name="delivery" value="3" class="delivery-item" id="del-type-3" onclick="shDel('courier',400,'Доставка почтой','del-type-3')"></th>
<td class="dIcon"><img src="/uploads/s/w/5/x/w5x31j9njgve/img/full_9rZ5J2BQ.png"></td>
<td class="dDesc"><label class="label" for="del-type-3">Доставка почтой</label> Доставка заказа осуществляется Почтой России по всей стране, отправка происходит на следующий день после оплаты заказа. <br>Стоимость доставки — 400 руб.</td>
</tr>
</table>
</div> </div>
<!-- Правая колонка -->
<div class="ucTotalRightWrap"> <div class="ucTotalRight">
<h3>Информация о заказе</h3>
<div class="orderError"></div>
<div class="insertRight"></div>
<div class="promoCode noPaddingTop">
<div class="promoSuccess"></div>
</div>
</div> </div>
<!-- Правая колонка -->
</div> <!-- / #tab-wrap -->
<div class="nav-panel">
<span class="prevTab" onclick="$('.t-goods-i').click()">Назад</span>
<span class="nextTab" onclick="$('.t-pay-i').click()">Далее</span>
</div>
</div> <!-- / #tab2 -->
<div class="tab" id="tab3"><div class="tab-wrap">
<h3>Шаг 3 из 4: выбор способа оплаты</h3>
<div class="payWrap"> <div class="payItems">
<table>
<tr id="pay-block-0" class="payBlock">
<th class="dRadio"><input type="radio" name="pay" value="0" class="pay-item" id="pay-type-0" onclick="shPay('cash','Наличными при получении','pay-type-0')"></th>
<td class="dIcon"><img src="/uploads/s/w/5/x/w5x31j9njgve/img/full_ZwgRB0Gj.png"></td>
<td class="dDesc"><label class="label" for="pay-type-0">Наличными при получении</label> Вы можете оплатить свой заказ при получении товара в одном из пунктов выдачи.</td>
</tr>
<tr id="pay-block-1" class="payBlock">
<th class="dRadio"><input type="radio" name="pay" value="1" class="pay-item" id="pay-type-1" onclick="shPay('unitpay','UnitPay','pay-type-1')"></th>
<td class="dIcon"><img src="/uploads/s/w/5/x/w5x31j9njgve/img/full_fFaQt4eQ.png"></td>
<td class="dDesc"><label class="label" for="pay-type-1">UnitPay</label> Оплата заказа с помощью электронных денег WebMoney, Яндекс.Деньги, Qiwi, PayPal, смс-сообщений, через денежные/банковские переводы, через терминалы оплаты и конечно банковске карты VISA, MasterCard</td>
</tr>
<!-- <tr id="pay-block-2" class="payBlock">
<th class="dRadio"><input type="radio" name="pay" value="2" class="pay-item" id="pay-type-2" onclick="shPay('free-kassa','UnitPay','pay-type-2')"></th>
<td class="dIcon"><img src="/uploads/s/w/5/x/w5x31j9njgve/img/full_QRbgaX6q.png"></td>
<td class="dDesc"><label class="label" for="pay-type-2">FREE-KASSA</label> Оплата заказа с помощью смс-сообщений, через денежные/банковские переводы, через терминалы оплаты и конечно банковске карты VISA, MasterCard</td>
</tr> -->
<tr id="pay-block-3" class="payBlock">
<th class="dRadio"><input type="radio" name="pay" value="3" class="pay-item" id="pay-type-3" onclick="shPay('yamoney','Яндекс.Деньги','pay-type-3')"></th>
<td class="dIcon"><img src="/uploads/s/w/5/x/w5x31j9njgve/img/full_u5R6QOs4.png"></td>
<td class="dDesc"><label class="label" for="pay-type-3">Яндекс.Деньги</label> Оплата заказа при помощи электронной валюты Яндекс.Деньги, а также при помощи банковских карт и SMS-платежей.</td>
</tr>
<tr id="pay-block-4" class="payBlock">
<th class="dRadio"><input type="radio" name="pay" value="4" class="pay-item" id="pay-type-4" onclick="shPay('wm','WebMoney','pay-type-4')"></th>
<td class="dIcon"><img src="/uploads/s/w/5/x/w5x31j9njgve/img/full_rnREdMMR.png"></td>
<td class="dDesc"><label class="label" for="pay-type-4">WebMoney</label> Оплата заказа при помощи электронной валюты WebMoney, а также при помощи банковских карт VISA, MasterCard и другие способы оплаты.</td>
</tr>
</table>
</div> </div>
<!-- Правая колонка -->
<div class="ucTotalRightWrap"> <div class="ucTotalRight">
<h3>Информация о заказе</h3>
<div class="orderError"></div>
<div class="insertRight"></div>
<div class="promoCode noPaddingTop">
<div class="promoSuccess"></div>
</div>
</div> </div>
<!-- Правая колонка -->
</div> <!-- / #tab-wrap -->
<div class="nav-panel">
<span class="prevTab" onclick="$('.t-delivery-i').click()">Назад</span>
<span class="nextTab" onclick="$('.t-contact-i').click()">Далее</span>
</div>
</div> <!-- / #tab3 -->
<div class="tab" id="tab4"><div class="tab-wrap">
<h3>Шаг 4 из 4: контактные данные</h3>
<div class="contactWrap"> <div class="contactItems">
<div class="inp-line">
<p>ФИО</p>
<input type="text" class="uName"> <span class="ul-widget-feedBack-form-control-feedback icon-content-special-required"></span>
</div>
<div class="inp-line">
<p>Ваш e-mail</p>
<input type="email" class="uMail"> <span class="ul-widget-feedBack-form-control-feedback icon-content-special-required"></span>
</div>
<div class="inp-line">
<p>Номер телефона</p>
<input type="text" autocomplete="off" class="uPhone"> <span class="ul-widget-feedBack-form-control-feedback icon-content-special-required"></span>
</div>
<div class="inp-line adres">
<p>Адрес доставки</p>
<textarea class="uAdress"> </textarea> <span class="ul-widget-feedBack-form-control-feedback icon-content-special-required"></span>
</div>
<div class="inp-line noImportant">
<p>Комментарий к заказу</p>
<textarea class="uComment"> </textarea> <span class="ul-widget-feedBack-form-control-feedback icon-content-special-required"></span>
</div>
</div> </div>
<!-- Правая колонка -->
<div class="ucTotalRightWrap"> <div class="ucTotalRight">
<h3>Информация о заказе</h3>
<div class="orderError"></div>
<div class="insertRight"></div>
<div class="promoCode noPaddingTop">
<div class="promoSuccess"></div>
</div>
</div> </div>
<!-- Правая колонка -->
</div> <!-- / #tab-wrap -->
<div class="nav-panel">
<span class="prevTab" onclick="$('.t-pay-i').click()">Назад</span>
<span class="nextTab payStart" onclick="checkOut()">Оформить заказ</span>
</div>
</div> <!-- / #tab4 -->
</div>
</div>
<script>
$(document).ready(function() {
$('.nav-tabs li').on('click', function() {
$('.nav-tabs li').removeClass('active');
$(this).addClass('active');
$('.tab').hide();
$('#' + $(this).attr('data-item') ).fadeIn(500);
});
});
</script>
<style>
.basket-page {display:none;float:left;width:100%;overflow:hidden;}
.mc-title {margin: 0;float:left;width:100%;}
.nav-tabs {padding:0;margin:0;width:100%;float:left;}
.nav-tabs li {background:#132026;text-align:center;width:25%;color:#DAE1E6;transition: all 0.3s;display:inline-block;font-size: 14px !important;float:left;line-height:40px;cursor:pointer;}
.nav-tabs li:before, .prevTab:before, .payStart:before {font: normal normal normal 16px/1 FontAwesome;display:inline-block;margin-right:10px;}
.nextTab:after {font: normal normal normal 16px/1 FontAwesome;display:inline-block;margin-left:10px;}
.nav-tabs li:first-child {border-radius: 4px 0 0 0;}
.nav-tabs li:last-child {border-radius: 0 4px 0 0;}
.nav-tabs li:hover {background: #23363e;transition: all 0.3s;}
.nav-tabs li.active {background:#4caf50;color:#e8fbe9;cursor: default}
.nav-tabs li.active:hover {background: #6ec071;}
.nav-tabs li:first-child:before {content: "\f07a" !important;}
.nav-tabs li:nth-child(2):before {content: "\f0d1" !important;}
.nav-tabs li:nth-child(3):before {content: "\f283" !important;}
.nav-tabs li:nth-child(4):before {content: "\f007" !important;}
.tabs {float:left;width:100%;background: #f5f5f5;color:#333333;border-radius:0 0 4px 4px;}
.tab-wrap {padding:20px;float:left;width:100%;}
.tab-wrap h3 {float:left;width:100%;margin: 0 0 20px 0;font-size:24px !important;}
.tab {display:none;width:100%;float:left;}
.tab:first-child {display:block;}
#tab1 .tab-wrap {padding-bottom:10px;}
.nav-panel {background: #DBE2E8;float:left;width:100%;border-radius: 0 0 4px 4px;padding: 10px;}
.nextTab, .prevTab {display: inline-block;line-height: 38px;padding: 0 20px;cursor:pointer;}
.nextTab {float:right;transition: all .3s;border-radius: 4px;background: #4caf50;color: #e8fbe9;}
.nextTab:hover {transition: all .3s;background: #6ec071;color: #fff;}
.nextTab:after {content: "\f105";}
.prevTab {float:left;transition: all .3s;border-radius: 4px;background: #132026;color: #DAE1E6;}
.prevTab:hover {transition: all .3s;background: #23363e;}
.prevTab:before {content: "\f104";}
.payStart:after {display:none !important;}
.payStart:before {content: "\f07a"}
.g-item {float:left;margin: 0 0 10px 0;border-radius:4px;overflow:hidden;background:#fff;width:100%;}
.cl-wrap .g-item:last-child {margin:0;}
.g-img {float: left;width: 100px;padding: 10px;}
.g-img div {width:79px;height:79px;border-radius:4px;float:left;}
#main .g-body {float: left;padding: 6px 6px 0 0;margin:15px 0 0 5px;max-width:170px;}
li.gi-title {font-size:18px !important;}
.g-body li {line-height:30px;list-style:none;width:100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.rTotal li {font-size: 16px !important;line-height:26px;}
.rTotal li span {float:right;}
.rTotal h3 {margin:0;}
#main .g-body li:before, #main .rTotal li:before, #main .orderError li:before {display:none !important;}
.gi-price span {font-weight:bold;color: #6ec071;}
.gi-tools {float: right;width: 33px;text-align: center;line-height:30px;}
.gi-up, .gi-down, .gi-del {background: #DBE2E8;transition: all .3s;cursor:pointer;line-height:33px;width:33px;}
.gi-up:hover, .gi-down:hover, .gi-del:hover {background:rgba(112, 148, 167, 0.5);transition: all .3s;}
.goodsWrap, .deliveryWrap, .payWrap, .contactWrap {float:left;width:100%;min-height:10px;}
.ucGoodsAll, .deliveryItems, .payItems, .contactItems {margin-right:300px;}
.ucTotalRightWrap {float:left;width:300px;margin: 0 0 0 -300px;padding:0 0 0 20px;}
.ucTotalRight {background:#fff;border-radius:4px;float:left;width:100%;}
#main .ucTotalRight h3 {line-height:40px;background: #23363e;color: #DAE1E6;font-size:16px !important;border-radius: 4px 4px 0 0;margin:0;text-align:center;padding: 0 !important;}
#main .rTotal {padding: 10px;float:left;width:100%;}
.promoCode {padding: 10px;float:left;width:100%;display:none;}
#main .promoCode p {padding: 0 !important;}
.promoCode input[type="text"], .inp-line input {border-radius:4px;border:2px solid #DBE2E8; line-height:36px;padding: 0 10px;outline:none;margin: 0 0 10px 0;width:100%;transition: all .3s;}
.promoCode input[type="text"]:focus, .inp-line input:focus, .inp-line textarea:focus {border-color: #8DA8B8;transition: all .3s;}
.inp-line textarea {border-radius:4px;border:2px solid #DBE2E8; padding: 10px;outline:none;margin: 0 0 10px 0;width:100%;transition: all .3s;resize: none;min-height:100px;}
.promoCode input[type="submit"] {display: inline-block;width:100%;line-height: 38px;transition: all .3s;border-radius: 4px;background: #4caf50;color: #e8fbe9;width:100%;outline:none;border:none;}
.promoCode input[type="submit"]:hover {transition: all .3s;background: #6ec071;color: #fff;}
.sItogo {color: #6ec071;}
.deliveryBlock, .payBlock {padding:10px;background:#fff;border:2px solid #DBE2E8;border-radius:4px;float:left;width:100%;margin: 0 0 10px 0;cursor:pointer;transition: all .3s;}
.deliveryBlock:hover {border-color:#8DA8B8;transition: all .3s;}
.deliveryBlock.dActive:hover {background:#DBE2E8;transition: all .3s;}
.payBlock:hover {border-color:#FFCC00;}
.payBlock.pActive:hover {border-color:#FFCC00;background:#ffe066;}
.dRadio {display:none;}
.dRadio, .dIcon {padding:0 10px;}
.dIcon img {width:60px;}
.dDesc {padding: 0 0 0 10px;}
.label {cursor:pointer;width:100%;float:left;font-size:16px;font-weight:bold;margin: 0 0 10px 0;}
.deliveryBlock.dActive {border-color:#8DA8B8;background:#DBE2E8;}
.payBlock.pActive {border-color:#FFCC00;background:#ffe066;}
.payBlock .dIcon img {border-radius:50%;}
.inp-line {width;100%;margin: 0 0 10px 0;position:relative;}
#main .inp-line p {color:#333;font-weight:700;margin: 0 0 5px 0;padding:0 !important;}
#body .inp-line > span {color: #8da8b8;position: absolute;right: 5px;top: 28px;font-size: 10px;}
#body .noImportant > span {display:none;}
.promoError {padding: 10px;border-radius:4px;font-size:12px;background: rgba(244, 67, 54, 0.71);color:#0f0f0f;float:left;width:100%;margin: 0 0 10px 0;display:none;}
.promoSuccess {font-size:12px;color:#F44336;text-align:center;float:left;width:100%;margin: 0 0 10px 0;display:none;}
.promoSuccess span {cursor:pointer;}
.promoCode.noPaddingTop {padding: 0 10px;}
.orderError {padding: 10px;font-size:12px;background: rgba(244, 67, 54, 0.71);color:#0f0f0f;float:left;width:100%;display:none;}
#main .orderError p {padding: 0!important;margin: 0px !important;}
.orderError ul {margin: 10px 0 !important;}
#main #ul-id-2-4 {display:none !important;}
.pSelf, .ePay, .adres, .tap2 {display:none;}
.inp-line input.validNo, .inp-line textarea.validNo {border-color:#f77970;transition: all .3s;}
.orderOutW {display:none;width:100%;z-index:999;position:fixed;top:35%;left:50%;margin-left:-300px;max-width:600px;border-radius:4px;padding: 30px;text-align:center;background:#fff;}
.cssload-container{
display: block;
margin:49px auto;
width:97px;
}
.cssload-loading i{
width: 49px;
height: 49px;
display: inline-block;
background: rgb(76,175,79);
border-radius: 50%;
}
.cssload-loading i:nth-child(1){
animation:cssload-loading-ani1 1.15s ease-in-out infinite;
-o-animation:cssload-loading-ani1 1.15s ease-in-out infinite;
-ms-animation:cssload-loading-ani1 1.15s ease-in-out infinite;
-webkit-animation:cssload-loading-ani1 1.15s ease-in-out infinite;
-moz-animation:cssload-loading-ani1 1.15s ease-in-out infinite;
}
.cssload-loading i:nth-child(2){
background: rgb(35,54,62);
margin-left: -10px;
animation:cssload-loading-ani1 1.15s ease-in-out 0.58s infinite;
-o-animation:cssload-loading-ani1 1.15s ease-in-out 0.58s infinite;
-ms-animation:cssload-loading-ani1 1.15s ease-in-out 0.58s infinite;
-webkit-animation:cssload-loading-ani1 1.15s ease-in-out 0.58s infinite;
-moz-animation:cssload-loading-ani1 1.15s ease-in-out 0.58s infinite;
}
@keyframes cssload-loading-ani1{
70%{
transform:scale(0.5);
}
}
@-o-keyframes cssload-loading-ani1{
70%{
-o-transform:scale(0.5);
}
}
@-ms-keyframes cssload-loading-ani1{
70%{
-ms-transform:scale(0.5);
}
}
@-webkit-keyframes cssload-loading-ani1{
70%{
-webkit-transform:scale(0.5);
}
}
@-moz-keyframes cssload-loading-ani1{
70%{
-moz-transform:scale(0.5);
}
}
.shadow {display:none;width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;z-index:299;}
.grey-back {
position: absolute;width:100%;height:100%;background-color: rgba(35,45,50,1);opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);-moz-opacity: 0.6;-khtml-opacity: 0.6;z-index:3;}
@media (max-width: 992px) {
.ucTotalRightWrap {width:100%;margin:0;padding:0;}
.ucGoodsAll {margin:0;}
.goodsWrap, .deliveryItems, .payItems, .contactItems {margin: 0 0 10px 0;}
#body .mc-title {font-size:22px;padding: 0 0 20px 0;}
#body .tab-wrap h3 {font-size:20px !important;}
.orderOutW {max-width:500px;margin-left:-250px;}
}
@media (max-width: 768px) {
.nav-tabs li:before {margin-right:0 !important;font-size:20px;}
.nav-tabs li span {display:none;}
.g-img {width: 60px;padding: 6px;}
.g-img div {width:48px;height:48px;}
#main .g-body {padding: 6px 6px 0 0;margin:0;}
#body li.gi-title {font-size:14px !important;}
.g-body {max-width:200px}
.g-body li {line-height:24px;}
.gi-tools {width: 20px;line-height:20px;}
.gi-up, .gi-down, .gi-del {line-height:20px;width:20px;}
.orderOutW {max-width:300px;margin-left:-150px;}
}
</style>
Во второй виджет вставляем этот код:
<script>
$(document).ready(function(){
if ( localStorage.sProduct != null ) { $('.basket-page').show(); ukStartCart();} else {location.href = "/"}// проверка на наличие товаров в хранилище
if ( localStorage.sDelivery != null ) {var sdBoxEnd = JSON.parse(localStorage["sDelivery"]); // sdBoxEnd - получаем массив из хранилища
shDel(sdBoxEnd[0], sdBoxEnd[1], sdBoxEnd[2],sdBoxEnd[3]);
} // доставка
if ( localStorage.sPay != null ) {var spBoxEnd = JSON.parse(localStorage["sPay"]); // spBoxEnd - получаем массив из хранилища
shPay(spBoxEnd[0], spBoxEnd[1], spBoxEnd[2]);
} // оплата
//$('.feedBack textarea[name="message"], .feedBack input[name="theme"]').parent().hide();
$(".uPhone").mask("+7(999) 999-99-99").attr('autocomplete','off');
if ( pCode[0] == true) { $('.promoCode').fadeIn(100);} // проверка на ктивность промокода
//$('tr.deliveryBlock').find('.dRadio input:radio:checked').parent().parent().addClass('dActive');
//$('tr.deliveryBlock input[type="radio"]').iCheck( {radioClass: 'iradio_flat'} ); // стилизация RADIO - iradio_flat
}); // DOM готов
$('.nextTab, .prevTab').on('click', function() {
$('html, body').animate({ scrollTop: $('.basket-page').offset().top}, 500);
});
$('.deliveryBlock').on('click', function() {
$('.deliveryBlock').removeClass('dActive');
$(this).addClass('dActive');
$(this).find('input').click();
});
$('.payBlock').on('click', function() {
$('.payBlock').removeClass('pActive');
$(this).addClass('pActive');
$(this).find('input').click();
});
function promoCode(id) {
var pInput = id.parent().find('.pcInput').val();
if ( pInput != '') {
if ( localStorage.sPromocode == null && pInput == pCode[3] ) {
localStorage["sPromocode"] = $('.pcInput').val();
ukStartCart('pc');
}
else {
if ( localStorage.sPromocode != null ) {
$('.promoError').html('Для этого заказа уже используется промокод <b>'+$('.pcInput').val()+'</b>.').fadeIn(500);
$('html, body').animate({ scrollTop: $('.promoError').offset().top - 20}, 500);
}
else {$('.promoError').html('<center>Промокод <b>'+$('.pcInput').val()+'</b> не действителен</center>').fadeIn(500);
$('html, body').animate({ scrollTop: $('.promoError').offset().top - 20}, 500);
}
} // локал полон, но в поле не тот промокод
} else{$('.promoError').html('<center>Вы не ввели промокод</center>').fadeIn(500);
$('html, body').animate({ scrollTop: $('.promoError').offset().top - 20}, 500);
}// поле промокода пустое
}// конец функции
function ukStartCart(fType) {
/// RedrawRight
var reDelivery ='';
var reTotal = '';
var reSale = '';
var uksumTotaltemp=0;
var reDeliveryTemp =0;
/// RedrawRight
/// RedrawPay
var payReTotal;
var payReSale;
/// RedrawPay
var StartBox = JSON.parse(localStorage["sProduct"]); // StartBox - получаем массив из хранилища
var ukStart = '';
var ukNumTotal = 0;
var uksumTotal = 0;
for ( scu=0;scu<StartBox.length;scu++ ) {
// номер //название // цена //количество //сумма
ukStart += '<div class="g-item"><div class="g-img"><div style="background: url(' + StartBox[scu][4] + ') no-repeat;background-size: cover;"></div> </div><ul class="g-body"><li class="gi-title">' + StartBox[scu][2] + '</li><li class="gi-price"><span>' + StartBox[scu][1] + cur + '</span> x ' + StartBox[scu][3] + '</li></ul> <div class="gi-tools"> <div class="gi-up" onclick="plusGood(\'' + StartBox[scu][0] + '\')"><i class="fa fa-angle-up"></i></div> <div class="gi-del" onclick="delGood(\'' + StartBox[scu][0] + '\')"><i class="fa fa-trash-o"></i></div> <div class="gi-down" onclick="minusGood(\'' + StartBox[scu][0] + '\')"><i class="fa fa-angle-down"></i></div> </div></div>';
ukNumTotal += StartBox[scu][3];
uksumTotal += StartBox[scu][3]*1*StartBox[scu][1];
}// собираем таблицу
uksumTotaltemp = uksumTotal;
if ( localStorage.sDelivery != null ) {var sdBoxEnd = JSON.parse(localStorage["sDelivery"]); // sdBoxEnd - получаем массив из хранилища
reDeliveryTemp = sdBoxEnd[1];
uksumTotaltemp = uksumTotal + reDeliveryTemp;
reDelivery = '<li><b>Доставка:</b><span>' + reDeliveryTemp + cur + '</span></li>';
} // учет доставки в стоимости
if (StartBox.length > 0) {
$('.ucGoodsAll').html(ukStart);
$('.promoError').fadeOut(500);
reTotal = '<li><b class="sItogo">К оплате: </b><span>' + uksumTotaltemp + cur + '</span></li>';
payReTotal = uksumTotaltemp;
payReSale = 0;
if ( pCode[0] == true && localStorage.sPromocode != null && localStorage["sPromocode"] == pCode[3]) { // промокод активен и применен
if ( pCode[1] == 0) { // численный промокод
if ( (uksumTotal) > pCode[2]) {
reTotal = '<li><b class="sItogo">К оплате: </b><span>' + (uksumTotaltemp-pCode[2]) + cur + '</span></li>';
reSale = '<li><b>Скидка: </b><span>' + pCode[2] + cur +'</span></li>';
payReTotal = uksumTotaltemp-pCode[2];
payReSale = pCode[2];
$('.promoSuccess').html('<span onclick="localStorage.removeItem(\'sPromocode\');ukStartCart();$(\'.promoSuccess\').fadeOut(500);"><i class="fa fa-window-close" aria-hidden="true"></i> Промокод <b>' + pCode[3] + '</b> применен</span>').fadeIn(500);
//console.log(localStorage["sPromocode"]);
}
else{
reTotal = '<li><b class="sItogo">К оплате: </b><span>' + uksumTotaltemp + cur + '</span></li>';
reSale = '';
payReTotal = uksumTotaltemp;
payReSale = 0;
$('.promoSuccess').hide();
if ( fType == 'pc') {
$('.promoError').html('Промокод <b>'+$('.pcInput').val()+'</b> не может быть применен. Сумма скидки превышает сумму по товарным позициям. На доставку промокод не распространяется, добавьте товаров на сумму более ' + pCode[2]+cur).fadeIn(500);
}
else
{
$('.promoError').html('Сумма скидки превышает сумму по товарным позициям. Промокод <b>'+pCode[3]+'</b> был отменен. На доставку промокод не распространяется, добавьте товаров на сумму более ' + pCode[2]+cur).fadeIn(500);
}
$('html, body').animate({ scrollTop: $('.promoError').offset().top-20}, 500);
//alert('Сумма по промокоду выше итоговой');
localStorage.removeItem("sPromocode");
// Окно с предупреждением
}
} // численный промокод
if ( pCode[1] == 1) { // процентный промокод
reTotal = '<li><b class="sItogo">К оплате: </b><span>' + (uksumTotal-uksumTotal*pCode[2]+reDeliveryTemp).toFixed(2) + cur + '</span></li>'
reSale = '<li><b>Скидка: </b><span>' + (uksumTotal*pCode[2]).toFixed(2) + cur +'</span></li>';
payReTotal = (uksumTotal-uksumTotal*pCode[2]+reDeliveryTemp).toFixed(2);
payReSale = (uksumTotal*pCode[2]).toFixed(2);
$('.promoSuccess').html('<span onclick="localStorage.removeItem(\'sPromocode\');ukStartCart();$(\'.promoSuccess\').fadeOut(500);"><i class="fa fa-window-close" aria-hidden="true"></i> Промокод <b>' + pCode[3] + '</b> применен</span>').fadeIn(500);
}// процентный промокод
// localStorage.removeItem("sPromocode");
} // промокод активен и применен
$('.insertRight').html('<ul class="rTotal"><li><b>Товаров:</b><span>' + ukNumTotal + ' шт.</span></li><li><b>На сумму: </b><span>' + uksumTotal + cur + '</span></li>'+reDelivery+reSale+reTotal+'</ul>');
if ( localStorage.sPay != null ) {
var rePayTemp = JSON.parse(localStorage["sPay"]);
var rePay = [rePayTemp[0], rePayTemp[1], rePayTemp[2], payReSale, payReTotal]; // новый платежный массив
localStorage["sPay"] = JSON.stringify(rePay); // Пуш массива в хранилище
// alert(JSON.parse(localStorage["sPay"]));
} //
}
else {
$('.boxShadow').fadeIn(100);
alert('Все товары удалены');
localStorage.removeItem("sProduct");
localStorage.removeItem("sDelivery");
localStorage.removeItem("sPay");
localStorage.removeItem("sPromocode");
setTimeout(function() {
location.href= '/'
},2500);
}
}// конец функции ukStartCart()
function delGood(id) {
var ucD;
var DelGoodBox = JSON.parse(localStorage["sProduct"]); // DelGoodBox - получаем массив из хранилища
for (ucD=0; ucD < DelGoodBox.length;ucD++) {
if ( DelGoodBox[ucD][0] == id ) { DelGoodBox.splice(ucD,1); break;}
}
localStorage["sProduct"] = JSON.stringify(DelGoodBox); // Пуш массива в хранилище
ukStartCart();
}
function plusGood(id) {
var ucP;
var plusGood = JSON.parse(localStorage["sProduct"]); // plusGood - получаем массив из хранилища
for (ucP=0; ucP < plusGood.length;ucP++) {
if ( plusGood[ucP][0] == id ) { plusGood[ucP][3] = plusGood[ucP][3]*1+1; break;}
}
localStorage["sProduct"] = JSON.stringify(plusGood); // Пуш массива в хранилище
ukStartCart();
}
function minusGood(id) {
var ucM;
var minusGood = JSON.parse(localStorage["sProduct"]); // plusGood - получаем массив из хранилища
for (ucM=0; ucM < minusGood.length;ucM++) {
if ( minusGood[ucM][0] == id ) { if ( minusGood[ucM][3]*1 > 1) {minusGood[ucM][3] = minusGood[ucM][3]*1-1; break;} }
}
localStorage["sProduct"] = JSON.stringify(minusGood); // Пуш массива в хранилище
ukStartCart();
}
function shDel(typeDel, mark, dName, did) { // способы доставки
if ( typeDel == 'courier') { $('.adres').fadeIn(500); }
if ( typeDel == 'self') { $('.adres').fadeOut(500); }
var shD;
var shTpD=0;
var shBox = JSON.parse(localStorage["sProduct"]); // plusGood - получаем массив из хранилища
for (shD=0; shD < shBox.length;shD++) {
shTpD += shBox[shD][3]*1*shBox[shD][1];
}
$('#'+did).attr('checked','checked');
$('#'+did).parent().parent().addClass('dActive');
$('.delCoast').html(mark + ' руб.');
$('.totalCoast').html( (shTpD+mark) + ' руб.');
if ( $('.coastEnd').is(':hidden') ) {$('.coastEnd').fadeIn(500);}
var sdBox = [typeDel,mark,dName, did];
localStorage["sDelivery"] = JSON.stringify(sdBox); // Пуш массива в хранилище
ukStartCart();
}
function shPay(typePay, pName, pid) { // способы оплаты
var shP;
var shTpP=0;
var shBoxP = JSON.parse(localStorage["sProduct"]); // plusGood - получаем массив из хранилища
for (shP=0; shP < shBoxP.length;shP++) {
shTpP += shBoxP[shP][3]*1*shBoxP[shP][1];
}
var deliverySum=0;
if (localStorage.sDelivery != null) { var tempPD = JSON.parse(localStorage["sDelivery"]); deliverySum = tempPD[1];}
else {deliverySum = 0;}
shTpP = shTpP + deliverySum;
$('#'+pid).attr('checked','checked');
$('#'+pid).parent().parent().addClass('pActive');
var spBox = [typePay, pName, pid, shTpP];
localStorage["sPay"] = JSON.stringify(spBox); // Пуш массива в хранилище
//alert( JSON.parse(localStorage["sPay"]) );
}
////////////////////////////// --- VALIDATOR --- /////////////////////////
var vName = false;
var vMail = false;
var vPhone = false;
var vAdress = false;
$(".uName").keyup(function(){
if ( $(this).val().length < 2 ) { $(this).addClass('validNo'); vName = false;}
else { $(this).removeClass('validNo'); vName = true;}
});
$('.uMail').keyup(function(){
var email = $(this).val();
if(isValidEmailAddress(email)) { $(this).removeClass('validNo'); vMail = true;}
else { $(this).addClass('validNo'); vMail = false;}
});
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return pattern.test(emailAddress);
}
$(".uPhone").on('keyup', function(){
if ( $(this).val().replace(/[^.\d]+/g,'').length < 11 ) { $(this).addClass('validNo'); vPhone = false;}
else { $(this).removeClass('validNo'); vPhone = true;}
});
$(".uAdress").keyup(function(){
if ( $(this).val().length < 10 ) { $(this).addClass('validNo'); vAdress = false;}
else { $(this).removeClass('validNo'); vAdress = true;}
});
var ov = {
orderValid: function() {
var eTemp ='';
if (localStorage.sDelivery == null) { eTemp += '<li>• выбрать способ доставки</li>';}
if (localStorage.sPay == null) {eTemp += '<li>• выбрать способ оплаты</li>';}
var delTempV;
if ( localStorage.sDelivery != null ) {delTempV = JSON.parse(localStorage["sDelivery"]);} else {delTempV = 'self';}
if ( delTempV[0] == 'self' || delTempV == 'self') {
if ( vName == false || vMail == false || vPhone == false ) { eTemp += '<li>• заполнить контактные данные</li>'; }
}
else {
if ( vName == false || vMail == false || vPhone == false || vAdress == false ) { eTemp += '<li>• заполнить контактные данные</li>';}
}
if (eTemp.length > 0) { $('.orderError').html('<p><b>Заказ не оформлен!</b><br> Выполните следующие действия:</p> <ul>' + eTemp + '</ul>').fadeIn(500); return false;}
else { $('.orderError').fadeOut(500); return true;}
} // orderValid:
} /// var ov
function checkOut() {
ukStartCart();
ov.orderValid();
if (ov.orderValid() == true) {
///////// --- номер заказа --- ///////
Data = new Date();
var upOrder = Data.getFullYear() + '.' + Data.getMonth() + '.' + Data.getDate() + '_' + Data.getHours() + ':' + Data.getMinutes();
///////// --- номер заказа --- ///////
var upBox = JSON.parse(localStorage["sProduct"]); // upBox - получаем массив из хранилища
var upDeliv = JSON.parse(localStorage["sDelivery"]); // upDeliv - получаем массив из хранилища
var upPay = JSON.parse(localStorage["sPay"]);
//alert(upPay);
if ( upPay[3] != 0) { var rePromo = '\n Скидка: ' + upPay[3] + cur;} else {var rePromo= '';}
var upSum = 0;var upC;var listZ = '';var ordGoodsNum = 0;
for (upC=0; upC < upBox.length;upC++) {
upSum += upBox[upC][3]*1*upBox[upC][1];
listZ += '['+(upC+1)+'] ' + upBox[upC][2] + ' — ' + upBox[upC][1]+' x '+upBox[upC][3]+' = '+upBox[upC][3]*1*upBox[upC][1]+cur+'\n' ;
ordGoodsNum += upBox[upC][3];
}
if ( $('.uComment').val() != '') {var uComment = '\n\n Комментарий к заказу: ' + $('.uComment').val();} else {var uComment = '';}
$(document).ready(function(){
$('.shadow').fadeIn(650);
$('.orderOutW').fadeIn(500);
});
$('#ul-id-2-4 .feedBack textarea[name="message"]').val('Оформлен заказ #' + upOrder + '(' + parseInt(new Date().getTime()/1000) + ')' +
'\n\n ФИО: ' + $('.uName').val() +
'\n E-mail: ' + $('.uMail').val() +
'\n Телефон : ' + $('.uPhone').val() +
'\n\n Товары: \n' + listZ +
'\n\n Товаров: ' + ordGoodsNum + ' шт. \n На сумму: ' + upSum+cur +
rePromo +
'\n Доставка: ' + upDeliv[1]+cur+
'\n Адрес доставки: ' + $('.uAdress').val() +
'\n К оплате: ' + upPay[4]+cur+
'\n\n Способ доставки: ' + upDeliv[2] +
'\n Способ оплаты: ' + upPay[1] + uComment);
$('#ul-id-2-4 .ul-w-feedBack-submit').click(); // Отправка заказа на почту
setTimeout(function() {
$('.tap1').slideToggle(400);
$('.tap2').slideToggle(400);
if ( upPay[0] == 'cash') {
$('.pSelf').show();
}
if ( upPay[0] == 'unitpay') {
$('.ePay').show();
$('.ePay a.payGoBtn').attr('href','https://unitpay.ru/pay/' +unitID+ '/card?sum=' + upPay[4] + '&account=Заказ ' +parseInt(new Date().getTime()/1000)+ '&desc=' + upOrder + '¤cy=' + curUnitpay);
}
if ( upPay[0] != 'unitpay' && upPay[0] != 'cash') {
$('.ePay').show();
var ePay = [upPay[0], upPay[4], upOrder, parseInt(new Date().getTime()/1000)];
localStorage["ePay"] = JSON.stringify(ePay);
}
localStorage.removeItem("sProduct"); // удаление содержимого корзины
localStorage.removeItem("sDelivery"); // удаление способа доставки
localStorage.removeItem("sPay"); // удаление способа оплаты
localStorage.removeItem("sPromocode"); // удаление промокода
}, 4000);
} // пройдена валидация
} // конец функции
</script>
2. Создаем вторую страницу с названием «Оплата заказа», в SEO-настройках в поле «адрес (ЧПУ)» вписываем
pay. Внимание! Если вы впишите другое значение, это приведет к неправильной работе скрипта!На созданной странице размещаем виджет «Свой код» вставляем следующий код:
<div class="payPanel">
<h4>Оплата заказа</h4>
<div class="payHtml"></div>
</div>
<style>
.payPanel {display:none;text-align:center;float:left;width:100%;padding: 40px 20px;background:#fff;border-radius:4px;}
#main .payPanel h4 {color:#0f0f0f !important;}
.button1 {display: inline-block;width:200px;line-height: 38px;transition: all .3s;border-radius: 4px;background: #4caf50;color: #e8fbe9;margin: 20px auto 0 auto;outline:none;border:none;}
.button1:hover {transition: all .3s;background: #6ec071;color: #fff;}
</style>
<script>
function ePay() {
var eTransfer = JSON.parse(localStorage["ePay"]);
//alert(eTransfer);
if ( eTransfer[0] == 'wm' ) {
var upOrder = 'Заказ №' + eTransfer[3]; // номер заказа
var urlSuccess = 'http://' + location.hostname + '/success?' + eTransfer[3];
var urlFail = 'http://' + location.hostname + '/fail';
//$('.payPanel').show();
//$('.payHtml').html('<iframe src="http://www.free-kassa.ru/merchant/forms.php?gen_form=1&writer=seller&targets=234234234234&default-sum=100&button-text=Оплатить&hint= &encoding=UTF8&o=234234234234&oa=100&type=big&cur=RUR&m=42158&form_id=&id=26838" width="650" height="700" frameBorder="0" ></iframe>');
$('.payPanel').show();
$('.payHtml').html('<form action="https://merchant.webmoney.ru/lmi/payment.asp" method="POST" accept-charset="windows-1251"><input type="hidden" name="LMI_PAYMENT_AMOUNT" value="' + eTransfer[1] + '"><input type="hidden" name="LMI_PAYMENT_DESC" value="' + upOrder + '"><input type="hidden" name="LMI_PAYEE_PURSE" value="' + upPurseWM + '"><input type="hidden" name="LMI_SUCCESS_URL" value="' + urlSuccess + '"><input type="hidden" name="LMI_SUCCESS_METHOD" value="2"><input type="hidden" name="LMI_FAIL_URL" value="' + urlFail + '"><input type="hidden" name="LMI_FAIL_METHOD" value="2"><div align="center"><input type="submit" class="button1" value="Оплатить"></div></form>');
}
////////////////////////// --- Ya.Money --- //////////////////////////////
if ( eTransfer[0] == 'yamoney' ) {
var upOrder = 'Заказ №' + eTransfer[3]; // номер заказа
var successURL = 'http://' + location.hostname + '/success?' + eTransfer[3];
//$('.payPanel').html('<iframe frameborder="0" allowtransparency="true" scrolling="no" src="https://money.yandex.ru/quickpay/shop-widget?account=' + upPurse + '&quickpay=shop&payment-type-choice=on&mobile-payment-type-choice=on&writer=seller&targets=' + upOrder + '&targets-hint=&default-sum=' + eTransfer[1] + '&button-text=01&successURL=' + successURL + '" width="450" height="198"></iframe>');
$('.payPanel').show();
$('.payHtml').html('<iframe frameborder="0" allowtransparency="true" scrolling="no" src="https://money.yandex.ru/quickpay/shop-widget?account=' + upPurseYD + '&quickpay=shop&payment-type-choice=on&mobile-payment-type-choice=on&writer=seller&targets=' + upOrder + '&targets-hint=&default-sum=' + eTransfer[1] + '&button-text=01&successURL=' + successURL + '" width="450" height="198"></iframe>');
}
////////////////////////// --- Ya.Money --- //////////////////////////////
}
if ( localStorage.ePay != null ) {
ePay();
}
else
{location.href= '/' ;}
</script>
3. Создаем третью страницу с названием «Успешная оплата», в SEO-настройках в поле «адрес (ЧПУ)» вписываем
success. Внимание! Если вы впишите другое значение, это приведет к неправильной работе скрипта!На созданной странице размещаем виджет «Свой код» вставляем следующий код:
<div class="successPay">
<h4>Заказ оплачен!</h4>
<p>Ваш заказ успешно оплачен. Благодарим за покупки в нашем магазине! Приходите к нам еще :)</p>
</div>
<style>
.successPay {display:none;text-align:center;float:left;width:100%;padding: 40px 20px;background:#fff;border-radius:4px;}
#main .successPay h4 {color: #0f0f0f !important;margin: 0 0 10px 0;}
#main .successPay p {color: #0f0f0f !important;}
</style>
<script>
if ( localStorage["ePay"] != null) {var eTransfer = JSON.parse(localStorage["ePay"]);}
var ssURL = location.href.split('?');
if ( localStorage["ePay"] != null && eTransfer[3] == ssURL[1]) {
$('.successPay').show();
//alert('успешная оплата');
localStorage.removeItem("ePay"); // удаление содержимого
}
if ( localStorage["ePay"] != null && eTransfer[0] == 'unitpay') {
$('.successPay').show();
//alert('успешная оплата');
localStorage.removeItem("ePay"); // удаление содержимого
}
else {
// location.href= '/';
}
</script>
4. Создаем четвертую страницу с названием «Ошибка платежа», в SEO-настройках в поле «адрес (ЧПУ)» вписываем
fail. Внимание! Если вы впишите другое значение, это приведет к неправильной работе скрипта!На созданной странице размещаем виджет «Свой код» вставляем следующий код:
<div class="successPay">
<h4>Заказ НЕ оплачен!</h4>
<p>Вероятно, при попытке оплаты произошла ошибка... попробуйте еще раз.</p>
</div>
<style>
.successPay {text-align:center;float:left;width:100%;padding: 40px 20px;background:#fff;border-radius:4px;}
#main .successPay h4 {color: #0f0f0f !important;margin: 0 0 10px 0;}
#main .successPay p {color: #0f0f0f !important;}
</style>
5. Создаем пятую страницу с названием «Генератор», в SEO-настройках в поле «адрес (ЧПУ)» вписываем
generate. Создание этой страницы не обязательно, если для построения каталога товаров будет использоваться только виджет «Карточка».На созданной странице размещаем виджет «Свой код» вставляем следующий код:
<div class="basket-page">
<h2 class="mc-title">Генерация ссылки</h2>
<ul class="nav-tabs">
<li class="t-goods-i active" data-item="tab1"><span>«Кнопка»</span></li>
<li class="t-delivery-i" data-item="tab2"><span>«Прайс»</span></li>
</ul>
<div class="tabs">
<div class="tab" id="tab1"><div class="tab-wrap">
<h3>Генерация для виджета «Кнопка»</h3>
<div class="g-line">
<p>Название товара</p>
<input type="text" class="goodTitle"><span class="ul-widget-feedBack-form-control-feedback icon-content-special-required"></span>
</div>
<div class="g-line" >
<p>Изображение товара</p>
<input type="text" class="goodImg"><span class="ul-widget-feedBack-form-control-feedback icon-content-special-required"></span>
</div>
<div class="g-line">
<p>Цена товара</p>
<input type="text" class="goodCoast"><span class="ul-widget-feedBack-form-control-feedback icon-content-special-required"></span>
</div>
<div class="g-line noVis">
<p>Ссылка для вставки</p>
<textarea class="url-btn"></textarea>
</div>
<div class="g-line">
<input type="submit" value="Получить ссылку" onclick="getLink('btn')">
</div>
</div> <!-- / #tab-wrap -->
</div> <!-- / #tab1 -->
<div class="tab" id="tab2"><div class="tab-wrap">
<h3>Генерация для виджета «Прайс»</h3>
<p>Ввиду особенностей этого виджета, идентификатор товара необходимо указывать вручную. Он не должен повторяться с другими сгенерированными товарами, если вы хотите, чтобы все работало корректно.</p>
<div class="g-line">
<p>Название товара</p>
<input type="text" class="goodTitlePrice"><span class="ul-widget-feedBack-form-control-feedback icon-content-special-required"></span>
</div>
<div class="g-line" >
<p>Изображение товара</p>
<input type="text" class="goodImgPrice"><span class="ul-widget-feedBack-form-control-feedback icon-content-special-required"></span>
</div>
<div class="g-line">
<p>Цена товара</p>
<input type="text" class="goodCoastPrice"><span class="ul-widget-feedBack-form-control-feedback icon-content-special-required"></span>
</div>
<div class="g-line">
<p>ID товара</p>
<input type="text" class="goodIdPrice"><span class="ul-widget-feedBack-form-control-feedback icon-content-special-required"></span>
</div>
<div class="g-line noVisP">
<p>Ссылка для вставки</p>
<textarea class="url-btnPrice"></textarea>
</div>
<div class="g-line">
<input type="submit" value="Получить ссылку" onclick="getLink('price')">
</div>
</div> <!-- / #tab-wrap -->
</div> <!-- / #tab2 -->
</div>
</div>
<script>
$(document).ready(function() {
$('.nav-tabs li').on('click', function() {
$('.nav-tabs li').removeClass('active');
$(this).addClass('active');
$('.tab').hide();
$('#' + $(this).attr('data-item') ).fadeIn(500);
});
});
var Base64 = {
_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
//метод для кодировки в base64 на javascript
encode : function (input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0
input = Base64._utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if( isNaN(chr2) ) {
enc3 = enc4 = 64;
}else if( isNaN(chr3) ){
enc4 = 64;
}
output = output +
this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
}
return output;
},
//метод для раскодировки из base64
decode : function (input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = this._keyStr.indexOf(input.charAt(i++));
enc2 = this._keyStr.indexOf(input.charAt(i++));
enc3 = this._keyStr.indexOf(input.charAt(i++));
enc4 = this._keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if( enc3 != 64 ){
output = output + String.fromCharCode(chr2);
}
if( enc4 != 64 ) {
output = output + String.fromCharCode(chr3);
}
}
output = Base64._utf8_decode(output);
return output;
},
// метод для кодировки в utf8
_utf8_encode : function (string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if( c < 128 ){
utftext += String.fromCharCode(c);
}else if( (c > 127) && (c < 2048) ){
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
},
//метод для раскодировки из urf8
_utf8_decode : function (utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while( i < utftext.length ){
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
}else if( (c > 191) && (c < 224) ) {
c2 = utftext.charCodeAt(i+1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
}else {
c2 = utftext.charCodeAt(i+1);
c3 = utftext.charCodeAt(i+2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
function getLink(id) {
if ( id == 'btn') {
$('.url-btn').val( window.location.protocol + location.hostname + '/?cart-on&=' + Base64.encode($('.goodTitle').val() ) + '&=' + $('.goodImg').val() + '&=' + $('.goodCoast').val() );
$('.noVis').show();
}
if ( id == 'price') {
$('.url-btnPrice').val( window.location.protocol + location.hostname + '/?cart-on&=' + Base64.encode($('.goodTitlePrice').val() ) + '&=' + $('.goodImgPrice').val() + '&=' + $('.goodCoastPrice').val() + '&=' + $('.goodIdPrice').val() );
$('.noVisP').show(); }
}
</script>
<style>
.basket-page {float:left;width:100%;overflow:hidden;}
.mc-title {margin: 0;float:left;width:100%;}
.nav-tabs {padding:0;margin:0;width:100%;float:left;}
.nav-tabs li {background:#132026;text-align:center;width:50%;color:#DAE1E6;transition: all 0.3s;display:inline-block;font-size: 14px !important;float:left;line-height:40px;cursor:pointer;}
.nav-tabs li:before, .prevTab:before, .payStart:before {font: normal normal normal 16px/1 FontAwesome;display:inline-block;margin-right:10px;}
.nextTab:after {font: normal normal normal 16px/1 FontAwesome;display:inline-block;margin-left:10px;}
.nav-tabs li:first-child {border-radius: 4px 0 0 0;}
.nav-tabs li:last-child {border-radius: 0 4px 0 0;}
.nav-tabs li:hover {background: #23363e;transition: all 0.3s;}
.nav-tabs li.active {background:#4caf50;color:#e8fbe9;cursor: default}
.nav-tabs li.active:hover {background: #6ec071;}
.nav-tabs li:first-child:before {content: "\f0c8" !important;}
.nav-tabs li:nth-child(2):before {content: "\f00b" !important;}
.tabs {float:left;width:100%;background: #f5f5f5;color:#333333;border-radius:0 0 4px 4px;}
.tab-wrap {padding:20px;float:left;width:100%;}
.tab-wrap h3 {float:left;width:100%;margin: 0 0 20px 0;font-size:24px !important;}
.tab {display:none;width:100%;float:left;}
.tab:first-child {display:block;}
#tab1 .tab-wrap {padding-bottom:10px;}
.g-line {width:100%;margin: 0 0 10px 0;position:relative;float:left;}
#main .g-line p {color:#333;font-weight:700;margin: 0 0 5px 0;padding:0 !important;}
#body .g-line > span {color: #8da8b8;position: absolute;right: 5px;top: 28px;font-size: 10px;}
.g-line input {border-radius:4px;border:2px solid #DBE2E8; line-height:36px;padding: 0 10px;outline:none;margin: 0 0 10px 0;width:100%;transition: all .3s;}
.g-line textarea {border-radius:4px;border:2px solid #DBE2E8; padding: 10px;outline:none;margin: 0 0 10px 0;width:100%;transition: all .3s;}
.g-line input:focus, .g-line textarea:focus {border-color: #8DA8B8;transition: all .3s;}
.g-line input[type="submit"] {display: inline-block;width:100%;line-height: 38px;transition: all .3s;border-radius: 4px;background: #4caf50;color: #e8fbe9;width:100%;outline:none;border:none;}
.g-line input[type="submit"]:hover {transition: all .3s;background: #6ec071;color: #fff;}
.noVisP, .noVis {display:none;}
</style>
Второй шаг: подключение библиотек и функций
Все необходимые библиотеки и функции подключаются в панели управления сайтом uKit. Для корректной работы скрипта требуется установить 3 вставки кода с разными настройками:
1. Создаем первую вставку кода под названием «Библиотеки» и вставляем в нее следующий код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://uscript.pro/arh/_files/js/jquery.maskedinput.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
var unitID = 'demo'; // ваш ID магазина в UnitPay
var upPurseWM = 'R000000000000'; // Кошелек WebMoney
var upPurseYD = '41000000000000'; // Кошелек Яндекс.Деньги
var cur = ' руб.'; // валюта в корзине
var curUnitpay = 'RUB'; // Валюта для платежной системы Unitpay,
// доступны значения RUB, UAH, BYR, EUR, USD
var noGoodsImg = 'https://ukit.com/uploads/s/w/5/x/w5x31j9njgve/img/full_wqPifKd0.png'; // изображение, если нет картинок в карточе, либо используется иконка
// промокод (если сумма по товарам меньше номинала промокода - он не будет засчитан, на доставку промокод не распространяется)
var pCode = [true, 1, 0.2, 'NY2017']; // [активен или нет, фикс. или процентное значение, 'сам промокод']
// true - активен, false - нет,
// 0 - фиксированная сумма, 1 - процент от суммы
// значение (фиксированная, пример: 300; процент, пример: 0.2;)
// можно использовать анг.буквы, цифры
// промокод
</script>
Настройки: в HEAD и на все страницы сайта.
2. Создаем вторую вставку кода под названием «Виджет корзины» и вставляем в нее следующий код:
<div class="cart-widget">
<div class="cw-wrap">
<i class="fa fa-shopping-cart"></i>
<div class="cw-goods-count">0</div>
</div>
</div>
<div class="cart-panel-right"><div class="cpr-wrap">
<div class="cpr-navigate">
<h3>Товары в корзине</h3>
<i class="fa fa-angle-left cpr-back" onclick="outShadow()"></i>
</div>
<div class="cartList scrollblock"><div><div class="cl-wrap">В корзине нет товаров :(</div></div></div>
<div class="cart-btn">
<ul class="cw-total">
<li>Товаров: <span class="cw-goods">0</span></li>
<li>Итого: <span class="cw-summ">0</span></li>
</ul>
<span class="btn-clear" onclick="ucClearAll()">Очистить</span>
<a class="btn-order" href="/basket">Оформить</a>
</div>
</div></div>
<div class="shadow"><div class="grey-back" onclick="outShadow()"></div></div>
<style>
.cart-widget {transition: all 0.4s;cursor:pointer;z-index:100;position:fixed; width:80px;height:80px;bottom:50px;left:50px;background:rgba(76,175,80, 1); border-radius:50%;}
.cart-widget:before {
transition: all .8s ease;
}
.cart-widget:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 0 2px rgba(76,175,80, 0.1);
opacity: 0;
filter: alpha(opacity=0);
transform: scale(0.9);
pointer-events: none;
border-radius: 50%;
}
.cart-widget:hover{
transform: scale(0.9);transition: all 0.4s;
}
.cart-widget:hover:after {
animation: sonarEffect 1s ease-out 75ms;
}
@keyframes sonarEffect {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(76,175,80, 0.03), 0 0 4px 6px rgba(76,175,80, 0.1), 0 0 0 6px rgba(76,175,80, 0.1);
}
100% {
box-shadow: 0 0 0 2px rgba(76,175,80, 0.03), 0 0 4px 6px rgba(76,175,80, 0.1), 0 0 0 6px rgba(76,175,80, 0.1);
transform: scale(1.5);
opacity: 0;
}
}
@keyframes cartScale {
0% {transform: scale(1);}
35% {transform: scale(1.2);}
75% {transform: scale(0.8);}
100% {transform: scale(1);}
}
.c-size {animation: cartScale 0.5s ease;}
.cw-wrap {position:relative;text-align:center;}
.cart-widget i {font-size:40px;width:40px;height:40px;margin:20px 23px 20px 17px;color:#e8fbe9;}
.cw-goods-count {position:absolute;top:0px;right:0px;background:#fff;color:#000;width:24px;font-size:12px;line-height:24px;border-radius:50%;text-align:center;}
.cart-panel-right {z-index:300;position:fixed;top:0;left:-320px;width:320px;background: #f5f5f5;height:100%;}
.cpr-navigate {line-height:50px;width:100%;background:#132026;float:left;}
.cpr-navigate h3 {float:left;width:270px;line-height:50px;padding-left:10px;color:#DAE1E6;font-size:16px;margin:0;}
.cpr-back {transition: all 0.3s;cursor:pointer;float:right;font: normal normal normal 14px/1 FontAwesome;content: "\f104";width:50px;text-align:center;line-height:32px;font-size:32px;padding: 9px 0;background:#263845;color:#fff;}
.cpr-back:hover {transition: all 0.3s;background: #2d4556;}
.cpr-wrap {position:relative;height:100%;}
.cart-btn {position:absolute;bottom:10px;left:10px;width:300px;display:none;border-radius:4px;background: #DBE2E8;}
.btn-clear, .btn-order {font-size:16px;display:inline-block;float:left;width:50%;line-height:38px;text-align:center;}
.btn-clear {transition: all 0.3s;cursor:pointer;transition: all 0.5s;border-radius: 4px 0 0 4px;border:2px solid #132026;background:#132026;color:#DAE1E6;}
.btn-clear:hover {transition: all 0.3s;background: #23363e;border-color: #23363e;}
.btn-order {transition: all 0.3s;border-radius: 0 4px 4px 0;background:#4caf50;border:2px solid #4caf50;color:#e8fbe9;}
.btn-order:hover, .btn-order:focus, .cart-widget:hover {transition: all 0.3s;outline:none;background: #6ec071;border-color: #6ec071;color:#fff;text-decoration:none;}
.cw-total {margin:0;padding:10px;float:left;width:100%;}
.cw-total li {float:left;width:100%;line-height:24px;list-style: none;font-weight:bold;}
.cw-total li span {float:right;font-weight:normal;}
.cartList {padding:0 10px 0 10px !important;margin: 10px 0 0 0 !important;float:left;width:100%;}
.g-item {float:left;margin: 0 0 10px 0;border-radius:4px;overflow:hidden;background:#fff;width:100%;}
.cl-wrap .g-item:last-child {margin:0;}
.g-img {float: left;width: 60px;padding: 6px;}
.g-img div {width:48px;height:48px;border-radius:4px;float:left;}
.g-body {float: left;width: 220px;padding: 6px 6px 0 0;margin:0;}
.g-body li {line-height:24px;list-style:none;width:100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.gi-price span {font-weight:bold;color: #6ec071;}
.gi-tools {float: right;width: 20px;text-align: center;line-height:20px;}
.gi-up, .gi-down, .gi-del {background: #DBE2E8;transition: all .3s;cursor:pointer;}
.gi-up:hover, .gi-down:hover, .gi-del:hover {background:rgba(112, 148, 167, 0.5);transition: all .3s;}
.scrollblock {overflow:auto;height:calc(100% - 190px);}
.shadow {display:none;width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;z-index:299;}
.grey-back {
position: absolute;width:100%;height:100%;background-color: rgba(35,45,50,1);opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);-moz-opacity: 0.6;-khtml-opacity: 0.6;z-index:3;}
.custom-scroll_container {
overflow: hidden !important;
position: relative;
}
.custom-scroll_inner {
overflow: scroll;
padding: 0 !important;
height: 100%;
*position: absolute; /* ie7 fix */
*left: 0;
*right: 0;
}
.custom-scroll_inner::-webkit-scrollbar { width: 0; height: 0; }
.custom-scroll_inner{ -ms-overflow-style: none; }
.custom-scroll_bar-y,
.custom-scroll_bar-x {
cursor: default;
position: absolute;
border-radius: 1px;
z-index: 1;
background: #4caf50;
opacity: .7;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
transition: opacity .2s;
}
.custom-scroll_bar-y {
top: 0;
right: 3px;
width: 4px;
}
.custom-scroll_hidden-y > .custom-scroll_bar-y,
.custom-scroll_hidden-x > .custom-scroll_bar-x {
opacity: 0;
visibility: hidden;
transition: opacity .2s, visibility step-end .3s;
}
</style>
<script>
$(document).ready(function(){
if ( localStorage.sProduct != null ) {redrawWidget();}
});
$(function(){
$.getScript('https://uscript.pro/arh/_files/js/jquery.custom-scroll.min.js', function() {
$('.scrollblock').customScroll();
})
})
var i, gTC, scu;
var BoxProduct = [];
var sProductOpt = [];
function redrawWidget() {
var NewBox = JSON.parse(localStorage["sProduct"]); // BoxProduct - получаем массив из хранилища
// gTC - счетчик для формирования суммы и числа товаров
var cuGoodsTotal = 0;
//var cuGoodsCoast = 0;
for ( gTC = 0; gTC < NewBox.length; gTC++ ) {
cuGoodsTotal += NewBox[gTC][3]*1;
//cuGoodsCoast += NewBox[gTC][1]*1*NewBox[gTC][3];
//alert(cuGoodsTotal);
}
if (NewBox.length > 0){
$('.cw-goods-count').html(cuGoodsTotal);
}
else
{
$('.cw-goods-count').html('0');
}
}
function cartList() {
var StartBox = JSON.parse(localStorage["sProduct"]); // StartBox - получаем массив из хранилища
var ukStart = '';
var ukNumTotal = 0;
var uksumTotal = 0;
for ( scu=0;scu<StartBox.length;scu++ ) {
// номер //название // цена //количество //сумма
//ukStart += '<div class="g-item"><div class="g-img"><div style="background: url(' + StartBox[scu][4] + ') no-repeat;background-size: cover;"></div> </div><ul class="g-body"><li class="gi-title">' + StartBox[scu][2] + '</li><li class="gi-price"><span>' + StartBox[scu][1] + cur + '</span> x ' + StartBox[scu][3] + '</li></ul> <div class="gi-tools"> <div class="gi-up"><i class="fa fa-angle-up" onclick="plusGood(\'' + StartBox[scu][0] + '\')"></i></div> <div class="gi-del"><i class="fa fa-trash-o" onclick="delGood(\'' + StartBox[scu][0] + '\')"></i></div> <div class="gi-down"><i class="fa fa-angle-down" onclick="minusGood(\'' + StartBox[scu][0] + '\')"></i></div> </div></div>';
ukStart += '<div class="g-item"><div class="g-img"><div style="background: url(' + StartBox[scu][4] + ') no-repeat;background-size: cover;"></div> </div><ul class="g-body"><li class="gi-title">' + StartBox[scu][2] + '</li><li class="gi-price"><span>' + StartBox[scu][1] + cur + '</span> x ' + StartBox[scu][3] + '</li></ul> <div class="gi-tools"> <div class="gi-up" onclick="plusGood(\'' + StartBox[scu][0] + '\')"><i class="fa fa-angle-up"></i></div> <div class="gi-del" onclick="delGood(\'' + StartBox[scu][0] + '\')"><i class="fa fa-trash-o"></i></div> <div class="gi-down" onclick="minusGood(\'' + StartBox[scu][0] + '\')"><i class="fa fa-angle-down"></i></div> </div></div>';
ukNumTotal += StartBox[scu][3];
uksumTotal += StartBox[scu][3]*1*StartBox[scu][1];
}// собираем таблицу
if (StartBox.length > 0) {
$('.cl-wrap').html(ukStart)
$('.cw-goods').html(ukNumTotal);
$('.cw-summ').html(uksumTotal+cur);
}
else {
$('.cl-wrap').html('Вы удалили все товары из корзины :(')
$('.cw-goods').html('0');
$('.cw-summ').html('0'+cur);
}
}// конец функции
$('.cart-widget').on('click', function() {
$('.cart-btn').show();
if ( localStorage.sProduct != null ) {cartList();}
$(this).animate({bottom: '-140px'}, 150);
$('.shadow').fadeIn(650);
$('.cart-panel-right').delay(350).animate({left: '0px'}, 400);
});
////////////// --- Клик в карточке --- ///////////////
$('div[data-widget="goods"] a.ul-goods-view-button-link').on('click', function() {
if ( $(this).attr('href') == '' ) {
$('.cart-widget').addClass('c-size');
setTimeout(function () {$('.cart-widget').removeClass('c-size');}, 500);
var pParent = $(this).parent().parent().parent().parent().parent().attr('id'); // ID родителя
var sProductPrice = $('#' + pParent + ' .ul-goods-view-price meta[itemprop="price"]').attr('content'); // Цена
var sProductTitle = $('#' + pParent +' .ul-goods-view-title .js-goods-contenteditable').text(); // Название
if ( $('#' + pParent +' .js-goods-image-changebtn-wrapper img').length > 0 ) {
var goodsImg = $('#' + pParent +' .js-goods-image-changebtn-wrapper img').attr('src');
}
else {
var goodsImg = noGoodsImg;
}
var sProductNum = 1; // Количество товара
//localStorage["sProduct"] = JSON.stringify(sProduct); // Пуш массива в хранилище
//console.log(localStorage["sProduct"]);
// var BoxProduct = JSON.parse(localStorage["sProduct"]); // BoxProduct - получаем массив из хранилища
if ( localStorage.sProduct != null ) {
BoxProduct = JSON.parse(localStorage["sProduct"]); // BoxProduct - получаем массив из хранилища
var k = false;
for ( i=0;i<BoxProduct.length;i++ ) {
if ( BoxProduct[i][0] == pParent) { // проверка товара-дубля
BoxProduct[i][3] = BoxProduct[i][3]*1 + 1; //увеличиваем чисто товаров +1
localStorage["sProduct"] = JSON.stringify(BoxProduct); // Пуш массива в хранилище
// alert(localStorage["sProduct"]);
k = true;
}
} // цикл
if (k == false) { // запись нового товара в хранилище
var sProductOpt = [pParent, sProductPrice, sProductTitle, sProductNum, goodsImg];
BoxProduct.push(sProductOpt);
localStorage["sProduct"] = JSON.stringify(BoxProduct);
}// запись нового товара в хранилище
} // Хранилище наполнено
else {
var sProductOpt = [pParent, sProductPrice, sProductTitle, sProductNum, goodsImg];
BoxProduct.push(sProductOpt);
localStorage["sProduct"] = JSON.stringify(BoxProduct);
}
redrawWidget(); // Обновляем корзину - виджет
return false;
}
}); // Клик по кропке В КОРЗИНУ
function outShadow() {
if ( localStorage.sProduct != null ) {redrawWidget();}
$('.shadow').fadeOut(650);
$('.cart-widget').delay(600).animate({bottom: '40px'}, 150);
$('.cart-panel-right').delay(250).animate({left: '-320px'}, 400);
}
function ucClearAll() {
localStorage.removeItem("sProduct");
localStorage.removeItem("sDelivery");
localStorage.removeItem("sPay");
localStorage.removeItem("sPromocode");
$('.cw-goods-count, .cw-goods').html('0');
$('.cw-summ').html('0'+cur);
$('.cl-wrap').html('Вы удалили все товары из корзины :(');
BoxProduct = [];
$('.custom-scroll_bar-y').css('height', '0px');
outShadow(); // закрываем корзину
}
function delGood(id) {
var ucD;
var DelGoodBox = JSON.parse(localStorage["sProduct"]); // DelGoodBox - получаем массив из хранилища
for (ucD=0; ucD < DelGoodBox.length;ucD++) {
if ( DelGoodBox[ucD][0] == id ) { DelGoodBox.splice(ucD,1); break;}
}
localStorage["sProduct"] = JSON.stringify(DelGoodBox); // Пуш массива в хранилище
cartList();
if ( DelGoodBox.length == 0) {
$('.shadow').fadeOut(650);
$('.cart-widget').delay(600).animate({bottom: '40px'}, 150);
$('.cart-panel-right').delay(250).animate({left: '-320px'}, 400);
if ( localStorage.sProduct != null ) {redrawWidget();}
}
}
function plusGood(id) {
var ucP;
var plusGood = JSON.parse(localStorage["sProduct"]); // plusGood - получаем массив из хранилища
for (ucP=0; ucP < plusGood.length;ucP++) {
if ( plusGood[ucP][0] == id ) { plusGood[ucP][3] = plusGood[ucP][3]*1+1; break;}
}
localStorage["sProduct"] = JSON.stringify(plusGood); // Пуш массива в хранилище
cartList();
}
function minusGood(id) {
var ucM;
var minusGood = JSON.parse(localStorage["sProduct"]); // plusGood - получаем массив из хранилища
for (ucM=0; ucM < minusGood.length;ucM++) {
if ( minusGood[ucM][0] == id ) { if ( minusGood[ucM][3]*1 > 1) {minusGood[ucM][3] = minusGood[ucM][3]*1-1; break;} }
}
localStorage["sProduct"] = JSON.stringify(minusGood); // Пуш массива в хранилище
cartList();
}
var Base64 = {
_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
//метод для кодировки в base64 на javascript
encode : function (input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0
input = Base64._utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if( isNaN(chr2) ) {
enc3 = enc4 = 64;
}else if( isNaN(chr3) ){
enc4 = 64;
}
output = output +
this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
}
return output;
},
//метод для раскодировки из base64
decode : function (input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = this._keyStr.indexOf(input.charAt(i++));
enc2 = this._keyStr.indexOf(input.charAt(i++));
enc3 = this._keyStr.indexOf(input.charAt(i++));
enc4 = this._keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if( enc3 != 64 ){
output = output + String.fromCharCode(chr2);
}
if( enc4 != 64 ) {
output = output + String.fromCharCode(chr3);
}
}
output = Base64._utf8_decode(output);
return output;
},
// метод для кодировки в utf8
_utf8_encode : function (string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if( c < 128 ){
utftext += String.fromCharCode(c);
}else if( (c > 127) && (c < 2048) ){
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
},
//метод для раскодировки из urf8
_utf8_decode : function (utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while( i < utftext.length ){
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
}else if( (c > 191) && (c < 224) ) {
c2 = utftext.charCodeAt(i+1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
}else {
c2 = utftext.charCodeAt(i+1);
c3 = utftext.charCodeAt(i+2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
///////////// --- Клик по виджету кнопка --- ////////////////
$('div[data-widget="button"] a').on('click', function() {
var btnURL = $(this).attr('href');
btnURL = btnURL.split('?');
if ( btnURL[1].indexOf('cart-on') == 0 ) {
var sliceUrl = btnURL[1].split('&=');
$('.cart-widget').addClass('c-size');
setTimeout(function () {$('.cart-widget').removeClass('c-size');}, 500);
var pParent = $(this).parent().attr('id'); // ID родителя
var sProductPrice = sliceUrl[3]; // Цена
var sProductTitle = Base64.decode(sliceUrl[1]); // Название
if ( sliceUrl[2] != '') {
var goodsImg = sliceUrl[2];
}
else {
var goodsImg = noGoodsImg;
}
var sProductNum = 1; // Количество товара
if ( localStorage.sProduct != null ) {
BoxProduct = JSON.parse(localStorage["sProduct"]); // BoxProduct - получаем массив из хранилища
var k = false;
for ( i=0;i<BoxProduct.length;i++ ) {
if ( BoxProduct[i][0] == pParent) { // проверка товара-дубля
BoxProduct[i][3] = BoxProduct[i][3]*1 + 1; //увеличиваем чисто товаров +1
localStorage["sProduct"] = JSON.stringify(BoxProduct); // Пуш массива в хранилище
// alert(localStorage["sProduct"]);
k = true;
}
} // цикл
if (k == false) { // запись нового товара в хранилище
var sProductOpt = [pParent, sProductPrice, sProductTitle, sProductNum, goodsImg];
BoxProduct.push(sProductOpt);
localStorage["sProduct"] = JSON.stringify(BoxProduct);
}// запись нового товара в хранилище
} // Хранилище наполнено
else {
var sProductOpt = [pParent, sProductPrice, sProductTitle, sProductNum, goodsImg];
BoxProduct.push(sProductOpt);
localStorage["sProduct"] = JSON.stringify(BoxProduct);
}
redrawWidget(); // Обновляем корзину - виджет
return false}
});
///////////// --- Клик по виджету кнопка --- ////////////////
///////////// --- Клик по виджету Прайс --- ////////////////
$('a.ul-w-price-button').on('click', function() {
var btnURL = $(this).attr('href');
btnURL = btnURL.split('?');
if ( btnURL[1].indexOf('cart-on') == 0 ) {
var sliceUrl = btnURL[1].split('&=');
$('.cart-widget').addClass('c-size');
setTimeout(function () {$('.cart-widget').removeClass('c-size');}, 500);
var pParent = sliceUrl[4]; // ID родителя
var sProductPrice = sliceUrl[3]; // Цена
var sProductTitle = Base64.decode(sliceUrl[1]); // Название
if ( sliceUrl[2] != '') {
var goodsImg = sliceUrl[2];
}
else {
var goodsImg = noGoodsImg;
}
var sProductNum = 1; // Количество товара
if ( localStorage.sProduct != null ) {
BoxProduct = JSON.parse(localStorage["sProduct"]); // BoxProduct - получаем массив из хранилища
var k = false;
for ( i=0;i<BoxProduct.length;i++ ) {
if ( BoxProduct[i][0] == pParent) { // проверка товара-дубля
BoxProduct[i][3] = BoxProduct[i][3]*1 + 1; //увеличиваем чисто товаров +1
localStorage["sProduct"] = JSON.stringify(BoxProduct); // Пуш массива в хранилище
// alert(localStorage["sProduct"]);
k = true;
}
} // цикл
if (k == false) { // запись нового товара в хранилище
var sProductOpt = [pParent, sProductPrice, sProductTitle, sProductNum, goodsImg];
BoxProduct.push(sProductOpt);
localStorage["sProduct"] = JSON.stringify(BoxProduct);
}// запись нового товара в хранилище
} // Хранилище наполнено
else {
var sProductOpt = [pParent, sProductPrice, sProductTitle, sProductNum, goodsImg];
BoxProduct.push(sProductOpt);
localStorage["sProduct"] = JSON.stringify(BoxProduct);
}
redrawWidget(); // Обновляем корзину - виджет
return false}
});
///////////// --- Клик по виджету Прайс --- ////////////////
</script>
Настройки: в конец BODY на тех страницах, где должен отображаться виджет и добавляться товары. На системных страницах, которые созданы в рамках этой инструкции виджет нельзя отображать!
3. Создаем третью вставку кода под названием «Уведомления» и вставляем в нее следующий код:
<div class="shadow"><div class="grey-back"></div></div>
<div class="orderOutW">
<div class="tap1">
<div class="cssload-container">
<div class="cssload-loading"><i></i><i></i></div>
</div>
<h4 class="orderStatus">Заказ оформляется...</h4>
</div>
<!-- // -->
<div class="tap2">
<h4 class="orderStatus">Заказ оформлен!</h4>
<div class="ordPayContent pSelf">
<p>Ваш заказ успешно оформлен, хотите продолжить покупки?</p>
<a href="/" class="payGoBtn">Продолжить покупки</a>
</div>
<div class="ordPayContent ePay">
<p>Ваш заказ успешно оформлен, теперь вы можете его оплатить</p>
<a href="/pay" class="payGoBtn">Перейти к оплате</a>
</div>
</div>
</div>
Настройки: в конец BODY на страницу «Оформление заказа».
Третий шаг: настройка платежных систем
Всего сейчас доступно 4 способа оплаты: наличными, Яндекс.Деньги, WebMoney и Unitpay.
1. Яндекс.Деньги. Сперва пройдите процесс регистрации и создайте кошелек: https://money.yandex.ru/. Все платежные настройки расположены во вставке кода «Библиотеки», поэтому идем туда. Находим код
var upPurseYD = '41000000000000'; // Кошелек Яндекс.Деньги и заменяем номер кошелька на свой. Прием платежей ТОЛЬКО в рублях.
2. WebMoney. Сперва пройдите процесс регистрации и создайте кошелек: https://www.webmoney.ru/. Затем перейдите к настройке кошелька для оплаты: https://merchant.webmoney.ru/conf/purses.asp и установите для нужного кошелька настройки в соответствии со скриншотом:
var upPurseWM = 'R000000000000'; // Кошелек WebMoney и заменяем номер кошелька на свой. Прием платежей будет в той валюте, в которой кошелек.
3. Unitpay. Сперва пройдите процесс регистрации и создайте кошелек: https://unitpay.ru/. В настройках проекта активируйте опцию «Направить клиента на специальные страницы проекта» и укажите соответствующие страницы в формате
адрес-сайта/success и адрес-сайта/fail. Далее необходимо получить идентификатор проекта. на скриншоте он показан стрелочкой и выделен голубым цветом:
var unitID = 'demo'; // ваш ID магазина в UnitPay и заменяем demo на скопированный идентификатор.
Здесь же есть две переменные валют: первая выводится у товаров в корзине, можно сформировать любое название, вторая - валюта платежной системы Unitpay, разрешенные форматы указаны в комментарии к переменной.
Четвертый шаг: промокод, загрузка иконок
В этой версии корзины появилась возможность использовать промокоды, доступно два типа: фиксированная сумма и процент от суммы. Настройка производится в специальном массиве во вставке кода «Библиотеки».
Все объяснено в комментарии к массиву
var pCode = [true, 1, 0.2, 'NY2017'];.Для корректной работы необходимо загрузить иконки платежных систем, способов доставки и дефолтную иконку товара к себе в библиотеку изображений из папки «иконки». Затем кликните на значек лупы у миниатюры иконки в библиотеке, на открывшемся изображении кликните правой кнопкой мыши и выберите пункт «Копировать URl изображения». Таким образом необходимо указать ссылки на иконки в способах оплаты и доставки (они расположены в первом виджете «Сво код» на странице «Оформление заказа»). Во вставке кода «Библиотеки» есть переменная
var noGoodsImg = 'https://ukit.com/uploads/s/w/5/x/w5x31j9njgve/img/full_wqPifKd0.png'; в ней необходимо указать ссылку на дефолтную иконку товара.
Пятый шаг: дополнительные настройки
Мы почти закончили установку скрипта, осталось внести некоторые изменения в код скрипта и стили CSS.
1. Сначала необходимо получить ID формы обратной связи со страницы «Оформление заказа», сделать это можно через инспектр кода:
#main #ul-id-2-4 {display:none !important;}. Замените в ней #ul-id-2-4 на ID установленной формы и сохраните изменения. Не забудьте опубликовать сайт, чтобы изменения вступили в силу. Если вы все сделали верно - форма обратной связи на странице «Оформление заказа» будет скрыта (либо она изначально скрылась, так как ID совпали).
2. Чтобы скрипт осуществлял отправку информации только через предназначенные для этого формы обратной связи, необходимо отредактировать пути обращения к элементам формы. Для этого перейдите к редактированию второго виджета «Свой код» и замените #ul-id-2-4 во всех встречающихся местах в коде на ID формы обратной связи, расположенной на странице «Оформление заказа».
3. Созданные страницы являются служебными, поэтому доступ к ним необходимо закрыть, удалив из меню сайта, а также исключить из индексации.
4. Доставка и оалата. Наименование способов доставки, описание и величина наценки регулируется на странице «оформление заказа» в первом виджете «Свой код». За это отвечают следующие строки:
<tr id="delivery-block-1" class="deliveryBlock">
<th class="dRadio"><input type="radio" name="delivery" value="1" class="delivery-item" id="del-type-1" onclick="shDel('self',0,'Забрать самостоятельно','del-type-1')"></th>
<td class="dIcon"><img src="/uploads/s/w/5/x/w5x31j9njgve/img/full_UXWFCzUt.png"></td>
<td class="dDesc"><label class="label" for="del-type-1">Забрать самостоятельно</label>При выборе такого варианта получения товара покупатель и продавец (или его представитель) встречаются в заранее обусловленном месте. Время получения товара с 10:00 до 18:00. Заказ можно оплатить по безналичному расчету или наличными при встрече. <br>Стоимость доставки — БЕСПЛАТНО!</td>
</tr>
<tr id="delivery-block-2" class="deliveryBlock">
<th class="dRadio"><input type="radio" name="delivery" value="2" class="delivery-item" id="del-type-2" onclick="shDel('courier',200,'Доставка курьером','del-type-2')"></th>
<td class="dIcon"><img src="/uploads/s/w/5/x/w5x31j9njgve/img/full_gtObAX4P.png"></td>
<td class="dDesc"><label class="label" for="del-type-2">Доставка курьером</label> Доставка заказов курьером осуществляется только по Ростову-на-Дону не позднее следующего дня с момента оформления заказа. Товар будет доставлен после предварительного звонка по телефону для согласования времени доставки. <br>Стоимость доставки — 200 руб.</td>
</tr>
<tr id="delivery-block-3" class="deliveryBlock">
<th class="dRadio"><input type="radio" name="delivery" value="3" class="delivery-item" id="del-type-3" onclick="shDel('courier',400,'Доставка почтой','del-type-3')"></th>
<td class="dIcon"><img src="/uploads/s/w/5/x/w5x31j9njgve/img/full_9rZ5J2BQ.png"></td>
<td class="dDesc"><label class="label" for="del-type-3">Доставка почтой</label> Доставка заказа осуществляется Почтой России по всей стране, отправка происходит на следующий день после оплаты заказа. <br>Стоимость доставки — 400 руб.</td>
</tr>
Стоимость доставки указывается в этой строке: onclick="shDel('courier',200,'Доставка курьером','del-type-2')". Чтобы изменить стоимость, необходимо 200 заменить на любую целочисленную сумму, например, 250. Здесь же указывается название способа доставки, его тип и ID активного инпута. Нельзя использовать несколько способов доставки с одним ID.
Аналогично устроены и способы оплаты:
<tr id="pay-block-0" class="payBlock">
<th class="dRadio"><input type="radio" name="pay" value="0" class="pay-item" id="pay-type-0" onclick="shPay('cash','Наличными при получении','pay-type-0')"></th>
<td class="dIcon"><img src="/uploads/s/w/5/x/w5x31j9njgve/img/full_ZwgRB0Gj.png"></td>
<td class="dDesc"><label class="label" for="pay-type-0">Наличными при получении</label> Вы можете оплатить свой заказ при получении товара в одном из пунктов выдачи.</td>
</tr>
<tr id="pay-block-1" class="payBlock">
<th class="dRadio"><input type="radio" name="pay" value="1" class="pay-item" id="pay-type-1" onclick="shPay('unitpay','UnitPay','pay-type-1')"></th>
<td class="dIcon"><img src="/uploads/s/w/5/x/w5x31j9njgve/img/full_fFaQt4eQ.png"></td>
<td class="dDesc"><label class="label" for="pay-type-1">UnitPay</label> Оплата заказа с помощью электронных денег WebMoney, Яндекс.Деньги, Qiwi, PayPal, смс-сообщений, через денежные/банковские переводы, через терминалы оплаты и конечно банковске карты VISA, MasterCard</td>
</tr>
<tr id="pay-block-3" class="payBlock">
<th class="dRadio"><input type="radio" name="pay" value="3" class="pay-item" id="pay-type-3" onclick="shPay('yamoney','Яндекс.Деньги','pay-type-3')"></th>
<td class="dIcon"><img src="/uploads/s/w/5/x/w5x31j9njgve/img/full_u5R6QOs4.png"></td>
<td class="dDesc"><label class="label" for="pay-type-3">Яндекс.Деньги</label> Оплата заказа при помощи электронной валюты Яндекс.Деньги, а также при помощи банковских карт и SMS-платежей.</td>
</tr>
<tr id="pay-block-4" class="payBlock">
<th class="dRadio"><input type="radio" name="pay" value="4" class="pay-item" id="pay-type-4" onclick="shPay('wm','WebMoney','pay-type-4')"></th>
<td class="dIcon"><img src="/uploads/s/w/5/x/w5x31j9njgve/img/full_rnREdMMR.png"></td>
<td class="dDesc"><label class="label" for="pay-type-4">WebMoney</label> Оплата заказа при помощи электронной валюты WebMoney, а также при помощи банковских карт VISA, MasterCard и другие способы оплаты.</td>
</tr>
6. Настройка виджета «Карточка»: в карточке в обязательном порядке должны присутствовать заголовок и цена. При этом цена указывается без пробелов, например, 5500. При использовании разделения расчет будет неверным, например, 4 300.
Шестой шаг: кнопка и прайс
Для добавления товаров с виджетов «Кнопка» и «Прайс» требуется формирование специальных ссылок при помощи генератора, который был установлен на первом шаге инструкции. Здесь все просто: заполняете требуемые поля на соответствующей вкладке, затем получаете ссылку, копируете и идете в конструктор. У нужной кнопки выбираете добавление ссылки - внешняя и вставляете эту ссылку, сохраняете. На этом все. После публикации по клику на кнопку будет добавлен товар в корзину.
Из особенностей: цена должна быть указана без пробелов, только цифры. Для прайса требуется указание уникального ID. Рекомендую использовать английские буквы и цифры, главное чтобы не повторялось с другими товарами. Ссылка на картинку должна быть прямой, формат практически любой. Для корректной работы необходимо загрузить иконки платежных систем, способов доставки и дефолтную иконку товара к себе в библиотеку изображений. Затем кликните на миниатюру иконом в библиотеке, на открывшемся изображении кликните правой кнопкой мыши и выберите пункт «Копировать URl изображения». Таким образом необходимо указать ссылки на иконки в способах оплат и доставки (они расположены в первом виджете «Свой код» на странице «Оформление заказа»). Во вставке кода «Библиотеки» есть переменная
var noGoodsImg = 'https://ukit.com/uploads/s/w/5/x/w5x31j9njgve/img/full_wqPifKd0.png'; в ней необходимо указать ссылку на дефолтную иконку товара.
Установка завершена. Если у вас возникли вопросы, которые не затрагивались в документации, спрашивайте в комментариях к товару.