How is a mini-cart rendered?

dmitry_fedyuk · March 8, 2016, 10:06am

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/view/frontend/layout/default.xml#L25-L25


<item name="template" xsi:type="string">Magento_Checkout/minicart/content</item>

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html#L68-L72


<ol id="mini-cart" class="minicart-items" data-bind="foreach: { data: getCartParam('items'), as: 'item' }">
    <!-- ko foreach: $parent.getRegion($parent.getItemRenderer(item.product_type)) -->
        <!-- ko template: {name: getTemplate(), data: item, afterRender: function() {$parents[1].initSidebar()}} --><!-- /ko -->
    <!-- /ko -->
</ol>

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js#L126-L139


/**
 * Get cart param by name.
 * @param {String} name
 * @returns {*}
 */
getCartParam: function (name) {
    if (!_.isUndefined(name)) {
        if (!this.cart.hasOwnProperty(name)) {
            this.cart[name] = ko.observable();
        }
    }


    return this.cart[name]();
}

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js#L107-L109


getItemRenderer: function (productType) {
    return this.itemRenderer[productType] || 'defaultRenderer';
},

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/view/frontend/layout/checkout_cart_sidebar_item_renderers.xml#L16-L20


<item name="itemRenderer" xsi:type="array">
    <item name="default" xsi:type="string">defaultRenderer</item>
    <item name="simple" xsi:type="string">defaultRenderer</item>
    <item name="virtual" xsi:type="string">defaultRenderer</item>
</item>

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/view/frontend/layout/checkout_cart_sidebar_item_renderers.xml#L25-L28


<item name="config" xsi:type="array">
    <item name="displayArea" xsi:type="string">defaultRenderer</item>
    <item name="template" xsi:type="string">Magento_Checkout/minicart/item/default</item>
</item>

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/etc/frontend/di.xml#L41-L45


<type name="Magento\Checkout\CustomerData\ItemPoolInterface">
    <arguments>
        <argument name="defaultItemId" xsi:type="string">Magento\Checkout\CustomerData\DefaultItem</argument>
    </arguments>
</type>

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/CustomerData/ItemPool.php#L39-L55


/**
 * Construct
 *
 * @param ObjectManagerInterface $objectManager
 * @param string $defaultItemId
 * @param array $itemMap
 * @codeCoverageIgnore
 */
public function __construct(
    ObjectManagerInterface $objectManager,
    $defaultItemId,
    array $itemMap = []
) {
    $this->objectManager = $objectManager;
    $this->defaultItemId = $defaultItemId;
    $this->itemMap = $itemMap;
}

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/CustomerData/ItemPool.php#L66-L84


/**
 * Get section source by name
 *
 * @param string $type
 * @return ItemInterface
 * @throws LocalizedException
 */
protected function get($type)
{
    $itemId = isset($this->itemMap[$type]) ? $this->itemMap[$type] : $this->defaultItemId;
    $item = $this->objectManager->get($itemId);


    if (!$item instanceof ItemInterface) {
        throw new LocalizedException(
            __('%1 doesn\'t extend \Magento\Checkout\CustomerData\ItemInterface', $type)
        );
    }
    return $item;
}

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/CustomerData/DefaultItem.php#L64-L86


protected function doGetItemData()
{
    $imageHelper = $this->imageHelper->init($this->getProductForThumbnail(), 'mini_cart_product_thumbnail');
    return [
        'options' => $this->getOptionList(),
        'qty' => $this->item->getQty() * 1,
        'item_id' => $this->item->getId(),
        'configure_url' => $this->getConfigureUrl(),
        'is_visible_in_site_visibility' => $this->item->getProduct()->isVisibleInSiteVisibility(),
        'product_name' => $this->item->getProduct()->getName(),
        'product_url' => $this->getProductUrl(),
        'product_has_url' => $this->hasProductUrl(),
        'product_price' => $this->checkoutHelper->formatPrice($this->item->getCalculationPrice()),
        'product_image' => [
            'src' => $imageHelper->getUrl(),
            'alt' => $imageHelper->getLabel(),
            'width' => $imageHelper->getWidth(),
            'height' => $imageHelper->getHeight(),
        ],
        'canApplyMsrp' => $this->msrpHelper->isShowBeforeOrderConfirm($this->item->getProduct())
            && $this->msrpHelper->isMinimalPriceLessMsrp($this->item->getProduct()),
    ];
}

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/CustomerData/AbstractItem.php#L24-L31


public function getItemData(Item $item)
{
    $this->item = $item;
    return \array_merge(
        ['product_type' => $item->getProductType()],
        $this->doGetItemData()
    );
}

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/CustomerData/Cart.php#L143-L163


protected function getRecentItems()
{
    $items = [];
    if (!$this->getSummaryCount()) {
        return $items;
    }


    foreach (array_reverse($this->getAllQuoteItems()) as $item) {
        /* @var $item \Magento\Quote\Model\Quote\Item */
        if (!$item->getProduct()->isVisibleInSiteVisibility()) {
            $productId = $item->getProduct()->getId();
            $products = $this->catalogUrl->getRewriteByProductStore([$productId => $item->getStoreId()]);
            if (!isset($products[$productId])) {
                continue;
            }
            $urlDataObject = new \Magento\Framework\DataObject($products[$productId]);
            $item->getProduct()->setUrlDataObject($urlDataObject);
        }
        $items[] = $this->itemPoolInterface->getItemData($item);
    }
    return $items;

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/CustomerData/Cart.php#L87-L100


public function getSectionData()
{
    $totals = $this->getQuote()->getTotals();
    return [
        'summary_count' => $this->getSummaryCount(),
        'subtotal' => isset($totals['subtotal'])
            ? $this->checkoutHelper->formatPrice($totals['subtotal']->getValue())
            : 0,
        'possible_onepage_checkout' => $this->isPossibleOnepageCheckout(),
        'items' => $this->getRecentItems(),
        'extra_actions' => $this->layout->createBlock('Magento\Catalog\Block\ShortcutButtons')->toHtml(),
        'isGuestCheckoutAllowed' => $this->isGuestCheckoutAllowed(),
    ];
}

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/view/frontend/web/template/minicart/item/default.html#L7-L112


<li class="item product product-item" data-role="product-item">
<div class="product">
    <!-- ko if: product_has_url -->
    <a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo">
        <!-- ko foreach: $parent.getRegion('itemImage') -->
            <!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
        <!-- /ko -->
    </a>
    <!-- /ko -->
    <!-- ko ifnot: product_has_url -->
    <span class="product-item-photo">
        <!-- ko foreach: $parent.getRegion('itemImage') -->
            <!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
        <!-- /ko -->
    </span>
    <!-- /ko -->


    <div class="product-item-details">
        <strong class="product-item-name">
            <!-- ko if: product_has_url -->
            <a data-bind="attr: {href: product_url}, text: product_name"></a>
            <!-- /ko -->
            <!-- ko ifnot: product_has_url -->
                <!-- ko text: product_name --><!-- /ko -->
            <!-- /ko -->
        </strong>


        <!-- ko if: options.length -->
        <div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
            <span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>


            <div data-role="content" class="content">
                <strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
                <dl class="product options list">
                    <!-- ko foreach: { data: options, as: 'option' } -->
                    <dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
                    <dd class="values">
                        <!-- ko if: Array.isArray(option.value) -->
                            <span data-bind="html: option.value.join('<br>')"></span>
                        <!-- /ko -->
                        <!-- ko ifnot: Array.isArray(option.value) -->
                            <span data-bind="html: option.value"></span>
                        <!-- /ko -->
                    </dd>
                    <!-- /ko -->
                </dl>
            </div>
        </div>
        <!-- /ko -->


        <div class="product-item-pricing">
            <!-- ko if: canApplyMsrp -->


            <div class="details-map">
                <span class="label" data-bind="i18n: 'Price'"></span>
                <span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
            </div>
            <!-- /ko -->
            <!-- ko ifnot: canApplyMsrp -->
            <!-- ko foreach: $parent.getRegion('priceSidebar') -->
                <!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
            <!-- /ko -->
            <!-- /ko -->


            <div class="details-qty qty">
                <label class="label" data-bind="i18n: 'Qty', attr: {
                       for: 'cart-item-'+item_id+'-qty'}"></label>
                <input data-bind="attr: {
                       id: 'cart-item-'+item_id+'-qty',
                       'data-cart-item': item_id,
                       'data-item-qty': qty
                       }, value: qty"
                       type="number"
                       size="4"
                       class="item-qty cart-item-qty"
                       maxlength="12"/>
                <button data-bind="attr: {
                       id: 'update-cart-item-'+item_id,
                       'data-cart-item': item_id,
                       title: $t('Update')
                       }"
                        class="update-cart-item"
                        style="display: none">
                    <span data-bind="i18n: 'Update'"></span>
                </button>
            </div>
        </div>


        <div class="product actions">
            <!-- ko if: is_visible_in_site_visibility -->
            <div class="primary">
                <a data-bind="attr: {href: configure_url, title: $t('Edit item')}" class="action edit">
                    <span data-bind="i18n: 'Edit'"></span>
                </a>
            </div>
            <!-- /ko -->
            <div class="secondary">
                <a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"
                   class="action delete">
                    <span data-bind="i18n: 'Remove'"></span>
                </a>
            </div>
        </div>
    </div>
</div>
</li>

Magento_Test · May 12, 2017, 1:32pm

How can i open minicart by default in my custom page?
and also i need always open when user click on anywhere
I am trying this code

var minicart = $(’.minicart-wrapper’);
minicart.find(’[data-role=“dropdownDialog”]’).dropdownDialog(“open”);

But issue is how can i know mini cart is rendered completely and write this code any idea?

Vin_Martin · October 16, 2017, 8:10am

Hello sir ,
can you please tell me in minicart where can we edit the buttons in like “view cart” and “checkout” buttons and from which files these buttons are displaying .can you tell me the path sir.

These cart items are displaying only on cart pages i need to display on all pages sir.
please let me know asap.
Thank you sir.

dmitry_fedyuk · October 16, 2017, 9:36am

Learn how to pay for my support “asap”, “sir”.

dmitry_fedyuk · April 25, 2018, 5:28pm

How is the mini-cart’s dropdown implemented?