Быстрый просмотр карточки товара в модальном окне Fancybox 3



  • Приветствую. Может кому пригодится. Быстрый просмотр товара не заходя в него, как это сейчас реализовано во многих магазинах типа Wildberries и т.п.

    1. Подключаем к сайту Fancybox 3
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
    
    <!-- JS -->
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="jquery.fancybox.min.js"></script>
    
    
    1. Устанавливаем плагин из репозитория MODX SwitchTemplate (документация - тыц)
    2. Создаём шаблон "Товары-Fancy"
    3. Заполняем в соответствии с нашими требованиями, что вы будете выводить в быстром просмотре.
      Например:
    <div class="container">
    	<div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6">
                <div lass="some-img">
                	<img src="[[pthumb?input=`assets/catimg/[[*image]]`&options=`w=560&h=560&bg=ffffff&far=1`]]" alt="[[*longtitle]]" >
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6">
            	[[*pagetitle]]
            	<div class="row shk-item">
    				<form action="[[~[[*resource_id]]? &scheme=`abs`]][[*alias]]/" method="post">
                        <input type="hidden" name="shk-id" value="[[*id]]" />
                        <input type="hidden" name="shk-name" value="[[*pagetitle]]" />
                        <input type="hidden" name="shk-count" value="1" />
                                
                        <div class="product-price">
                            Цена: <span class="shk-price">[[!*price:shk_curr_rate:num_format]]</span>
                            [[!+shk_currency]]
                        </div>
                                
                        <div class="padding-lr-30">
                            <h5>Дополнительные услуги</h5>
                            [[*param1]]
                        </div>
                                
                        <div class="product-price">
                            <button class="btn btn-lg btn-primary" type="submit" class="shk-but">В корзину</button>
                        </div>
                    </form>
            	</div>
            </div>
        </div>
    </div>
    
    1. Идём в админке Приложения - SwitchTemplate
    2. Кликаем на New Setting
    3. Заполняем (просто пример, каждый заполняет как хочет):

    Setting Name (Имя): quick
    Setting Key (Ключ который мы будем потом приписывать к адресу): quick-link
    Chunk/Template Name (шаблон который будем подставлять): Товары-Fancy (который мы создали в пункте 3
    Template Type: Template
    Cache the Output: Да

    1. Идём в чанк карточки товара product_box и добавляем там ссылку:
    <a data-fancybox data-type="ajax" data-src="[[~[[+resource_id]]?&scheme=`abs`]][[+alias]]/?mode=quick-link" href="javascript:;" data-toggle="tooltip" title="Быстрый просмотр" class="pro-btn quick-view"><span class="lnr lnr-magnifier"></span></a>
    

    в data-src мы указываем ссылку на страницу и ключ ?mode=quick-link что бы плагин открыл нам именно этот товар с нашим шаблоном, который мы указали в настройках

    В принципе такой вариант можно использовать для вывода чего угодно и где угодно.



Последние темы

Похоже, подключение к Форум | MODX Shopkeeper было разорвано, подождите, пока мы пытаемся восстановить соединение.