Если у вас есть вопросы по статье или нужна помощь в создании сайта, пишите нам в чат на сайте или Вконтакте. Не забудьте оставить свой e-mail и мы ответим в самое ближайшее время.
HOSTCMS v.6. Краткая корзина в модальном окне
Предлагаю вариант показа отложенного товара и содержимого краткой корзины в модальном окне в момент, когда Пользователь откладывает товар для совершения покупки.
Решение делалось на основе встроенного в HostCMS адаптивного шаблона с подключеной библиотекой Bootstrap. Если библиотека у вас не подключена, то загрузите ее в корень сайта из этого архива и подключите в основном макете*.
Итак, по-порядку:
1. Если у вас версия HostCMS старше v.6.5, убираем из <head> код, который показывает содержимое краткой корзины при наведении на нее. Вот этот фрагмент:
// Little cart
var delay=500, setTimeoutConst;
$('.little-cart').hover(function() {
clearTimeout(setTimeoutConst );
$(this).addClass('cart-active').find('.more-cart-info').stop().slideDown();
}, function(){
var littleCart = $(this);
setTimeoutConst = setTimeout(function(){
littleCart.removeClass('cart-active').find('.more-cart-info').stop().slideUp();
}, delay);
});
2. Убираем также в шапке макета код показа краткой корзины и заменяем на обычную иконку (картинку) с сылкой на корзину магазина. Это чтобы не было конфликта с краткой корзиной в модальном окне.
3. В коде макета, перед закрывающит тегом </body>, размещаем модальное окно id="basicModal" с кодом вызова краткой корзины. Если вы вдруг уже используете модальное окно Bootstrape с аналогичным id, то переименуйте окно корзины (не забудьте также заменить id модального окна в кнопке "В корзину").
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-box">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">x</button>
<h2 class="modal-title" id="myModalLabel">Ваша корзина покупок</h2>
</div>
<div class="little-cart">
<?php
// Краткая корзина
$Shop_Cart_Controller_Show = new Shop_Cart_Controller_Show(
Core_Entity::factory('Shop', 3)
);
$Shop_Cart_Controller_Show
->xsl(
Core_Entity::factory('Xsl')->getByName('МагазинКорзинаКраткаяСайт2')
)
->couponText(isset($_SESSION) ? Core_Array::get($_SESSION, 'coupon_text') : '')
->itemsPropertiesList(FALSE)
->show();
?>
</div>
</div>
</div>
</div>
</div>
4. Заменяем код XSL-шаблона "МагазинКорзинаКраткаяСайт2" (для старых версий "МагазинКорзинаКраткая") на этот:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:hostcms="http://www.hostcms.ru/" exclude-result-prefixes="hostcms">
<xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/> <!-- МагазинКорзинаКраткая --> <xsl:decimal-format name="my" decimal-separator="," grouping-separator=" "/> <xsl:template match="/shop">
<div class="modal-cart mt-cart"> <div class="little-cart-info"> <xsl:choose> <!-- В корзине нет ни одного элемента --> <xsl:when test="count(shop_cart) = 0"> <div class="empty-cart"> <div>0 товаров — 0 руб.</div> </div> </xsl:when>
<xsl:otherwise> <div class="full-cart"> <div> <xsl:variable name="totalQuantity" select="sum(shop_cart[postpone = 0]/quantity)" /> <!-- Вывод общих количества, веса и стоимости товаров --> <xsl:value-of select="$totalQuantity"/> <xsl:text> </xsl:text><xsl:call-template name="declension"><xsl:with-param name="number" select="$totalQuantity"/></xsl:call-template> <xsl:text> на сумму </xsl:text><xsl:value-of select="format-number(total_amount, '### ##0,00', 'my')"/><xsl:text> </xsl:text><xsl:value-of disable-output-escaping="yes" select="shop_currency/name"/> </div> </div> </xsl:otherwise> </xsl:choose> </div>
<div class="more-cart"> <xsl:choose> <!-- В корзине нет ни одного элемента --> <xsl:when test="count(shop_cart[postpone = 0]) = 0"> <div class="cart-item-list-empty">В корзине нет ни одного товара</div> </xsl:when> <xsl:otherwise> <div class="row cart-item-list"> <xsl:apply-templates select="shop_cart[postpone = 0]/shop_item" /> </div> <div class="cart-link"><a href="/shop/cart/" class="button"><span class="bg-color2"><span>ОФОРМИТЬ ЗАКАЗ</span></span></a></div> </xsl:otherwise> </xsl:choose> </div> </div>
</xsl:template> <xsl:template match="shop_item"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 cart-item clearfix"> <a class="cart-item-image" title="{name}" href="{url}"> <xsl:choose> <xsl:when test="image_small != ''"> <img alt="{name}" src="{dir}{image_small}" /> </xsl:when>
<!-- Картинка родительского товара --> <xsl:when test="modification_id and shop_item/image_small != ''"> <img alt="{name}" src="{shop_item/dir}{shop_item/image_small}" /> </xsl:when> <xsl:otherwise></xsl:otherwise> </xsl:choose> </a> <div class="cart-item-details"> <div class="cart-item-name"> <a href="{url}"><xsl:value-of disable-output-escaping="yes" select="name"/></a> </div> <div class="cart-price"> <xsl:value-of disable-output-escaping="yes" select="price"/><xsl:text> </xsl:text><xsl:value-of disable-output-escaping="yes" select="/shop/shop_currency/name"/> </div> </div> </div>
</xsl:template> <!-- Склонение после числительных --> <xsl:template name="declension"> <xsl:param name="number" select="number"/> <!-- Именительный падеж --> <xsl:variable name="nominative"> <xsl:text>товар</xsl:text> </xsl:variable> <!-- Родительный падеж, единственное число --> <xsl:variable name="genitive_singular"> <xsl:text>товара</xsl:text> </xsl:variable> <xsl:variable name="genitive_plural"> <xsl:text>товаров</xsl:text> </xsl:variable> <xsl:variable name="last_digit"> <xsl:value-of select="$number mod 10"/> </xsl:variable> <xsl:variable name="last_two_digits"> <xsl:value-of select="$number mod 100"/> </xsl:variable> <xsl:choose> <xsl:when test="$last_digit = 1 and $last_two_digits != 11"> <xsl:value-of select="$nominative"/> </xsl:when>
<xsl:when test="$last_digit = 2 and $last_two_digits != 12 or $last_digit = 3 and $last_two_digits != 13 or $last_digit = 4 and $last_two_digits != 14">
<xsl:value-of select="$genitive_singular"/> </xsl:when> <xsl:otherwise> <xsl:value-of select="$genitive_plural"/> </xsl:otherwise> </xsl:choose> </xsl:template> </xsl:stylesheet>
5. Также заменяем стили для краткой корзины в адаптивном шаблоне. Либо просто втавьте их во вкладку CSS в основной макете.
/*====== Модальное окно ======*/
.modal-content {width:100%; max-width:600px; padding:10px; margin:0 auto;}
.modal-header {border:0; padding:0 0 20px;}
.modal-box {padding: 15px 20px; border: 5px solid rgba(29,29,29,.4); border-radius: 5px;}
/*====== Корзина в модальном окне ======*/
.modal-cart .little-cart-info { margin-bottom:15px;}
.modal-cart .full-cart {margin-left:0;}
.modal-cart .cart-link {float:none; text-align:right;}
.modal-cart .cart-link {padding:15px 0 0;}
.modal-cart .little-cart-info {background: none repeat scroll 0 0 #f2f2f2; width: 100%;}
.modal-cart .full-cart > div, .modal-cart .empty-cart > div {padding: 8px 20px;}
.modal-cart .cart-item{border-bottom:1px solid #f2f2f2; height:100px;}
.modal-cart .cart-item-image img {max-height:90px; max-width:100%}
.modal-cart .cart-item-image{float:left;min-width:100px;padding-left:10px;padding-right:10px;text-align:center}
.modal-cart .cart-item-list{margin-bottom:0px}
.modal-cart .cart-item-name {padding-left: 10px; padding-top: 10px;}
.modal-cart .cart-price {font-size: 13px; color: #999; padding-left: 10px;}
6. И последнее. Заменяем код кнопки "В корзину" (или как она у вас называется), который вызовет наше модальное окно с краткой корзиной. Можете использовать целиком код ниже, либо в вашей кнопке разместить выделенный фрагмент.
<a class="button" onclick="return $.bootstrapAddIntoCart('{/shop/url}cart/', {@id}, 1)" href="#" data-toggle="modal" data-target="#basicModal">
<span class="bg-color3"><i class="fa fa-shopping-cart bg-color5"></i>
<span>В корзину</span>
</span>
</a>
Переключатель data-toggle указывает библиотеке Bootstrap, что нужно открыть всплывающее окно, а data-target указывает на идентификатор элемента для открытия. После нажатия на кнопку "В корзину" появится модальное окно id="basicModal". В модальном окне будет показана краткая корзина с уже отложенными товарами (картинка ниже).
Поскольку данные о только что отложенном товаре подгружаются на ajax и скорость обмена информацией зависит от провайдера Интернет Пользователя и работоспособности вашего сервера, то может быть небольшая задержка с показом товара в момент открытия модального окна.
На этом все. Если что-то не получается или есть вопросы, то пишите в комментариях.
Вы можете заказать у нас выполнить данную интеграцию для своего сайта.
Стоимость 500р.
* Подключаем библиотеку Bootstrap.
В <head> вначале подключаем стили:
<!-- Stylesheets -->
<?php
Core_Page::instance()
->prependCss('/bootstrap/css/bootstrap.min.css')
->css('/bootstrap/css/font-awesome.min.css')
->showCss();
?>
и затем скрипт:
<?php
Core_Page::instance() ->js('/bootstrap/js/bootstrap.min.js') ->showJs();
?>
