Блог

Краткая корзина в модальном окне для 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();
?>

Вас может заинтересовать:

Блог

  • 29 марта 2018 г.
    Боковое выпадающее меню на CSS для каталога товаров. HostCMS v.6
    Создадим раздвижное меню для каталога товаров с несколькими уровнями вложенности разделов. Меню будет открыто в основных разделах, лежащих в корневом каталоге. В принципе, вам нужно просто скопировать шаблон, CSS стили и пользоваться этим меню...
  • 07 марта 2018 г.
    Тенденции веб-дизайна в 2018 году
    В 2018 году, дизайнеры начинают разработку чистых и простых сайтов, способных соответствовать стандартам мобильных достижений. Центр внимания сосредотачивается на проекты с прямолинейным, но эффективным и оптимизированным дизайном.
  • 26 января 2018 г.
    Что такое лендинг пейдж?
    Дословно лендинг пейдж переводится с английского (landing page) как целевая страница. В Рунете можно встретить еще один перевод термина лендинг пейдж – посадочная страница...
  • 28 декабря 2017 г.
    Внедрение в макет кода формы с reCaptcha. HostCMS 6
    Хочу поделиться с вами кодом, который размещается в макете страницы и подгружает в нее форму с reCaptcha...
  • 24 ноября 2017 г.
    Выводим производителей с разбивкой по алфавиту. HostCMS v.6
    Если у вас в интернет-магазине много производителей (брендов), то приведенное нами решение поможет организовать показ всех производителей с разбивкой по алфавиту...
  • 07 сентября 2017 г.
    Четыре причины, почему Facebook необходим для маркетинговых кампаний
    Успех вашего онлайн-бизнеса зависит от того, как вы реализуете свою стратегию цифрового маркетинга во взаимодействии с вашей целевой аудиторией...
  • 17 июня 2017 г.
    Варианты создания логотипа сайта
    Фундаментом фирменного стиля является логотип. Непосредственно на логотип, в первую очередь, обращают внимание клиенты любой компании, к тому же, логотип должен быть обязательно размещён на такой имиджевой продукции, как ручки, чашки фирменные бланки и прочее.

Все статьи

Наши услуги по созданию сайтов

WEB ДИЗАЙН

Разработка дизайна сайта. Использование шаблонов для "быстрых" проектов.

ПОДДЕРЖКА САЙТА

Поддержка работоспособности и безопасности. Написание текстов и статей. Наполнение товаром.

ПРОДАЖА ГОТОВЫХ РЕШЕНИЙ

Готовые интернет-магазины и интеграционные решения для сайтов на HostCMS

ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ

Графический дизайн (разработка логотипа). Написание seo-текстов. Редизайн сайта. Замена CMS. Кодинг

Подробный ПРАЙС-ЛИСТ