КОРЗИНА / КОРЗИНА-КРАТКАЯ в модальном окне

Заметка создана: 03 апреля 2025 г.
Убираем из <head> код для Краткой корзины.
Меняем код кнопки для вызова модального окна:
<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>
Модальное окно с корзиной:
<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
if (Core::moduleIsActive('shop'))
{
// Краткая корзина
$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>
Меняем код 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>

Стили 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;}