Этот вариант основывается на плагине дополнительных товаров, который обычно подключают к своим финишным страницам, чтобы отображать на ней товары, рекомендуемые к приобритению клиентам.
Плагин подключаемых товаров:
- Размещает на странице «Спасибо за заказ» список товаров, которые можно приобрести
- Приобрести дополнительные товары нажатием одной кнопки
Подключение
<link rel="stylesheet" href="http://img.apishops.org/SinglePageWebsites/custom/css/apishopsForm.css">
<script src="http://img.apishops.org/SinglePageWebsites/custom/js/apishopsAdditionalProductForm.js"></script>
<link href="http://img.apishops.org/SinglePageWebsites/custom/css/apishopsAdditionalProductForm.css" rel="stylesheet" type="text/css">
Инициализация плагина к странице
Инициализация плагина в два этапа:
- Создание контейнера в пределах для размещения списка товаров
- Инициализация компонента
Создание контейнера
<div class="additionalProducts"></div>
Инициализация компоненты
<script>
$(document).ready(function(){
$(".additionalProducts").apishopsAdditionalProductForm({
siteId: XXXX,
orderId: YYYY
});
});
</script>
Переменные для инициалзации компоненты
- XXXX — id сайта в системе ApiShops
- YYYY – id заказа в системе ApiShops (обычно берется из GET параметра "orderId" страницы, на которую редиректит пользователя после заказа)
Пример использования плагина
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Пример</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div class="additionalProducts"></div>
<link rel="stylesheet" href="http://img.apishops.org/SinglePageWebsites/custom/css/apishopsForm.css">
<script src="http://img.apishops.org/SinglePageWebsites/custom/js/apishopsAdditionalProductForm.js"></script>
<link href="http://img.apishops.org/SinglePageWebsites/custom/css/apishopsAdditionalProductForm.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function(){
$(".additionalProducts").apishopsAdditionalProductForm({
siteId: 16836,
orderId: 395092
});
});
</script>
</body>
</html>