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();
?>
