How is the mini-cart's dropdown implemented?

dmitry_fedyuk · April 25, 2018, 5:19pm

Initialization

Step 1

magento/magento2/blob/2.2.3/app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml#L27-L44


<?php if ($block->getIsNeedToDisplaySideBar()): ?>
    <div class="block block-minicart empty"
         data-role="dropdownDialog"
         data-mage-init='{"dropdownDialog":{
            "appendTo":"[data-block=minicart]",
            "triggerTarget":".showcart",
            "timeout": "2000",
            "closeOnMouseLeave": false,
            "closeOnEscape": true,
            "triggerClass":"active",
            "parentClass":"active",
            "buttons":[]}}'>
        <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
            <!-- ko template: getTemplate() --><!-- /ko -->
        </div>
        <?= $block->getChildHtml('minicart.addons') ?>
    </div>
<?php endif ?>

Step 2

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js#L74-L76


miniCart.on('dropdowndialogopen', function () {
    initSidebar();
});

Step 3

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js#L26-L72


function initSidebar() {
    if (miniCart.data('mageSidebar')) {
        miniCart.sidebar('update');
    }


    if (!$('[data-role=product-item]').length) {
        return false;
    }
    miniCart.trigger('contentUpdated');


    if (sidebarInitialized) {
        return false;
    }
    sidebarInitialized = true;
    miniCart.sidebar({
        'targetElement': 'div.block.block-minicart',
        'url': {
            'checkout': window.checkout.checkoutUrl,
            'update': window.checkout.updateItemQtyUrl,
            'remove': window.checkout.removeItemUrl,
            'loginUrl': window.checkout.customerLoginUrl,
            'isRedirectRequired': window.checkout.isRedirectRequired
        },
        'button': {
            'checkout': '#top-cart-btn-checkout',
            'remove': '#mini-cart a.action.delete',
            'close': '#btn-minicart-close'
        },
        'showcart': {
            'parent': 'span.counter',
            'qty': 'span.counter-number',
            'label': 'span.counter-label'
        },
        'minicart': {
            'list': '#mini-cart',
            'content': '#minicart-content-wrapper',
            'qty': 'div.items-total',
            'subtotal': 'div.subtotal span.price',
            'maxItemsVisible': window.checkout.minicartMaxItemsVisible
        },
        'item': {
            'qty': ':input.cart-item-qty',
            'button': ':button.update-cart-item'
        },
        'confirmMessage': $.mage.__('Are you sure you would like to remove this item from the shopping cart?')
    });
}

Step 4

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Checkout/view/frontend/web/js/sidebar.js#L28-L34


/**
 * Create sidebar.
 * @private
 */
_create: function () {
    this._initContent();
},

Step 5

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Checkout/view/frontend/web/js/sidebar.js#L48-L126


_initContent: function () {
    var self = this,
        events = {};


    this.element.decorate('list', this.options.isRecursive);


    /**
     * @param {jQuery.Event} event
     */
    events['click ' + this.options.button.close] = function (event) {
        event.stopPropagation();
        $(self.options.targetElement).dropdownDialog('close');
    };
    events['click ' + this.options.button.checkout] = $.proxy(function () {
        var cart = customerData.get('cart'),
            customer = customerData.get('customer');


        if (!customer().firstname && cart().isGuestCheckoutAllowed === false) {
            // set URL for redirect on successful login/registration. It's postprocessed on backend.
            $.cookie('login_redirect', this.options.url.checkout);


            if (this.options.url.isRedirectRequired) {
                location.href = this.options.url.loginUrl;
            } else {
                authenticationPopup.showModal();
            }


            return false;
        }
        location.href = this.options.url.checkout;
    }, this);


    /**
     * @param {jQuery.Event} event
     */
    events['click ' + this.options.button.remove] =  function (event) {
        event.stopPropagation();
        confirm({
            content: self.options.confirmMessage,
            actions: {
                /** @inheritdoc */
                confirm: function () {
                    self._removeItem($(event.currentTarget));
                },


                /** @inheritdoc */
                always: function (e) {
                    e.stopImmediatePropagation();
                }
            }
        });
    };


    /**
     * @param {jQuery.Event} event
     */
    events['keyup ' + this.options.item.qty] = function (event) {
        self._showItemButton($(event.target));
    };


    /**
     * @param {jQuery.Event} event
     */
    events['click ' + this.options.item.button] = function (event) {
        event.stopPropagation();
        self._updateItemQty($(event.currentTarget));
    };


    /**
     * @param {jQuery.Event} event
     */
    events['focusout ' + this.options.item.qty] = function (event) {
        self._validateQty($(event.currentTarget));
    };


    this._on(this.element, events);
    this._calcHeight();
    this._isOverflowed();
},

Layout

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Checkout/view/frontend/layout/default.xml#L22-L55


<item name="minicart_content" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Checkout/js/view/minicart</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">Magento_Checkout/minicart/content</item>
    </item>
    <item name="children" xsi:type="array">
        <item name="subtotal.container" xsi:type="array">
            <item name="component" xsi:type="string">uiComponent</item>
            <item name="config" xsi:type="array">
                <item name="displayArea" xsi:type="string">subtotalContainer</item>
            </item>
            <item name="children" xsi:type="array">
                <item name="subtotal" xsi:type="array">
                    <item name="component" xsi:type="string">uiComponent</item>
                    <item name="config" xsi:type="array">
                        <item name="template" xsi:type="string">Magento_Checkout/minicart/subtotal</item>
                    </item>
                </item>
            </item>
        </item>
        <item name="extra_info" xsi:type="array">
            <item name="component" xsi:type="string">uiComponent</item>
            <item name="config" xsi:type="array">
                <item name="displayArea" xsi:type="string">extraInfo</item>
            </item>
        </item>
        <item name="promotion" xsi:type="array">
            <item name="component" xsi:type="string">uiComponent</item>
            <item name="config" xsi:type="array">
                <item name="displayArea" xsi:type="string">promotion</item>
            </item>
        </item>
    </item>
</item>

Template

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html#L7-L100


<div class="block-title">
<strong>
    <span class="text" translate="'My Cart'"/>
    <span
        class="qty empty"
        text="getCartParam('summary_count')"
        data-bind="css: { empty: !!getCartParam('summary_count') == false },
                   attr: { title: $t('Items in Cart') }">
    </span>
</strong>
</div>


<div class="block-content">
<button type="button"
        id="btn-minicart-close"
        class="action close"
        data-action="close"
        data-bind="attr: { title: $t('Close') }">
    <span translate="'Close'"/>
</button>


<if args="getCartParam('summary_count')">
    <div class="items-total">
        <span class="count" if="maxItemsToDisplay < getCartLineItemsCount()" text="maxItemsToDisplay"/>
        <translate args="'of'" if="maxItemsToDisplay < getCartLineItemsCount()"/>
        <span class="count" text="getCartLineItemsCount()"/>
        <translate args="'Item in Cart'" if="getCartLineItemsCount() === 1"/>
        <translate args="'Items in Cart'" if="getCartLineItemsCount() > 1"/>
    </div>


    <each args="getRegion('subtotalContainer')" render=""/>
    <each args="getRegion('extraInfo')" render=""/>


    <div class="actions" if="getCartParam('possible_onepage_checkout')">
        <div class="primary">
            <button
                    id="top-cart-btn-checkout"
                    type="button"
                    class="action primary checkout"
                    data-action="close"
                    data-bind="
                        attr: {
                            title: $t('Proceed to Checkout')
                        },
                        click: closeMinicart()
                    "
                    translate="'Proceed to Checkout'"
            />
            <div data-bind="html: getCartParam('extra_actions')"></div>
        </div>
    </div>
</if>


<if args="getCartParam('summary_count')">
    <strong class="subtitle" translate="'Recently added item(s)'"/>
    <div data-action="scroll" class="minicart-items-wrapper">
        <ol id="mini-cart" class="minicart-items" data-bind="foreach: { data: getCartItems(), as: 'item' }">
            <each args="$parent.getRegion($parent.getItemRenderer(item.product_type))"
                  render="{name: getTemplate(), data: item, afterRender: function() {$parents[1].initSidebar()}}"
            />
        </ol>
    </div>
</if>


<ifnot args="getCartParam('summary_count')">
    <strong class="subtitle empty"
            data-bind="visible: closeSidebar()"
            translate="'You have no items in your shopping cart.'"
    />
    <if args="getCartParam('cart_empty_message')">
        <p class="minicart empty text" text="getCartParam('cart_empty_message')"/>
        <div class="actions">
            <div class="secondary">
                <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
                    <span translate="'View and Edit Cart'"/>
                </a>
            </div>
        </div>
    </if>
</ifnot>


<div class="actions" if="getCartParam('summary_count')">
    <div class="secondary">
        <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
            <span translate="'View and Edit Cart'"/>
        </a>
    </div>
</div>


<div id="minicart-widgets" class="minicart-widgets">
    <each args="getRegion('promotion')" render=""/>
</div>
</div>
<each args="getRegion('sign-in-popup')" render=""/>

dropdownDialog

github.com

magento/magento2/blob/2.2.3/lib/web/mage/dropdown.js#L6-L267


define([
'jquery',
'jquery/ui',
'mage/translate'
], function ($) {
'use strict';


var timer = null;


/**
 * Dropdown Widget - this widget is a wrapper for the jQuery UI Dialog
 */
$.widget('mage.dropdownDialog', $.ui.dialog, {
    options: {
        triggerEvent: 'click',
        triggerClass: null,
        parentClass: null,
        triggerTarget: null,
        defaultDialogClass: 'mage-dropdown-dialog',
        dialogContentClass: null,
        shadowHinter: null,
        closeOnMouseLeave: true,
        closeOnClickOutside: true,
        minHeight: null,
        minWidth: null,
        width: null,
        modal: false,
        timeout: null,
        autoOpen: false,
        createTitleBar: false,
        autoPosition: false,
        autoSize: false,
        draggable: false,
        resizable: false,
        bodyClass: '',
        buttons: [
            {
                'class': 'action close',
                'text': $.mage.__('Close'),


                /**
                 * Click action.
                 */
                'click': function () {
                    $(this).dropdownDialog('close');
                }
            }
        ]
    },


    /**
     * extend default functionality to bind the opener for dropdown
     * @private
     */
    _create: function () {
        var _self = this;


        this._super();
        this.uiDialog.addClass(this.options.defaultDialogClass);


        if (_self.options.triggerTarget) {
            $(_self.options.triggerTarget).on(_self.options.triggerEvent, function (event) {
                event.preventDefault();
                event.stopPropagation();


                if (!_self._isOpen) {
                    $('.' + _self.options.defaultDialogClass + ' > .ui-dialog-content').dropdownDialog('close');
                    _self.open();
                } else {
                    _self.close(event);
                }
            });
        }


        if (_self.options.shadowHinter) {
            _self.hinter = $('<div class="' + _self.options.shadowHinter + '"/>');
            _self.element.append(_self.hinter);
        }
    },


    /**
     * Extend default functionality to close the dropdown
     * with custom delay on mouse out and also to close when clicking outside
     */
    open: function () {
        var _self = this;


        this._super();


        if (_self.options.dialogContentClass) {
            _self.element.addClass(_self.options.dialogContentClass);
        }


        if (_self.options.closeOnMouseLeave) {


            this._mouseEnter(_self.uiDialog);
            this._mouseLeave(_self.uiDialog);


            if (_self.options.triggerTarget) {
                this._mouseLeave($(_self.options.triggerTarget));
            }
        }


        if (_self.options.closeOnClickOutside) {
            $('body').on('click.outsideDropdown', function (event) {
                if (_self._isOpen && !$(event.target).closest('.ui-dialog').length) {
                    if (timer) {
                        clearTimeout(timer);
                    }
                    _self.close(event);
                }
            });
        }
        // adding the class on the opener and parent element for dropdown
        if (_self.options.triggerClass) {
            $(_self.options.triggerTarget).addClass(_self.options.triggerClass);
        }


        if (_self.options.parentClass) {
            $(_self.options.appendTo).addClass(_self.options.parentClass);
        }


        if (_self.options.bodyClass) {
            $('body').addClass(_self.options.bodyClass);
        }


        if (_self.options.shadowHinter) {
            _self._setShadowHinterPosition();
        }
    },


    /**
     * extend default functionality to reset the timer and remove the active class for opener
     */
    close: function () {
        this._super();


        if (this.options.dialogContentClass) {
            this.element.removeClass(this.options.dialogContentClass);
        }


        if (this.options.triggerClass) {
            $(this.options.triggerTarget).removeClass(this.options.triggerClass);
        }


        if (this.options.parentClass) {
            $(this.options.appendTo).removeClass(this.options.parentClass);
        }


        if (this.options.bodyClass) {
            $('body').removeClass(this.options.bodyClass);
        }


        if (timer) {
            clearTimeout(timer);
        }


        if (this.options.triggerTarget) {
            $(this.options.triggerTarget).off('mouseleave');
        }
        this.uiDialog.off('mouseenter');
        this.uiDialog.off('mouseleave');
        $('body').off('click.outsideDropdown');
    },


    /**
     * _setShadowHinterPosition
     * @private
     */
    _setShadowHinterPosition: function () {
        var _self = this,
            offset;


        offset = _self.options.position.of.offset().left -
            _self.element.offset().left +
            _self.options.position.of.outerWidth() / 2;
        offset = isNaN(offset) ? 0 : Math.floor(offset);
        _self.hinter.css('left', offset);
    },


    /**
     * @private
     */
    _position: function () {
        if (this.options.autoPosition) {
            this._super();
        }
    },


    /**
     * @private
     */
    _createTitlebar: function () {
        if (this.options.createTitleBar) {
            this._super();
        } else {
            // the title bar close button is referenced
            // in _focusTabbable function, so to prevent errors it must be declared
            this.uiDialogTitlebarClose = $('<div>');
        }
    },


    /**
     * @private
     */
    _size: function () {
        if (this.options.autoSize) {
            this._super();
        }
    },


    /**
     * @param {Object} handler
     * @private
     */
    _mouseLeave: function (handler) {
        var _self = this;


        handler.on('mouseleave', function (event) {
            event.stopPropagation();


            if (_self._isOpen) {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(function (e) {
                    _self.close(e);
                }, _self.options.timeout);
            }
        });
    },


    /**
     * @param {Object} handler
     * @private
     */
    _mouseEnter: function (handler) {
        handler.on('mouseenter', function (event) {
            event.stopPropagation();


            if (timer) {
                clearTimeout(timer);
            }
        });
    },


    /**
     * @param {String} key
     * @param {*} value
     * @private
     */
    _setOption: function (key, value) {
        this._super(key, value);


        if (key === 'triggerTarget') {
            this.options.triggerTarget = value;
        }
    }
});


return $.mage.dropdownDialog;
});

This file has been truncated. show original

dmitry_fedyuk · April 25, 2018, 5:28pm