Как добавить кнопку «Очистить корзину» в миникарту

Как добавить кнопку «Пустая корзина» в миникарту в Magento 2?

Возможно ли это с макетом XML?

Я только что создал подходящий модуль для вашего вопроса:

Нам нужно объявить пользовательский JS-компонент и HTML-шаблон:

Приложение / код / Vendor / MiniCart / вид / интерфейс / расположение / default.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="minicart">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="types" xsi:type="array"/>
                    <item name="components" xsi:type="array">
                        <item name="minicart_content" xsi:type="array">
                            <item name="component" xsi:type="string">Vendor_MiniCart/js/view/minicart</item>
                            <item name="config" xsi:type="array">
                                <item name="template" xsi:type="string">Vendor_MiniCart/minicart/content</item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Приложение / код / Vendor / MiniCart / вид / интерфейс / веб / JS / просмотр / minicart.js

   define([
    'jquery',
    'Magento_Checkout/js/view/minicart',
    'Magento_Ui/js/modal/alert',
    'Magento_Ui/js/modal/confirm'
], function ($ ,Component, alert, confirm) {
    'use strict';

    return Component.extend({
        confirmMessage: $.mage.__('Are you sure you would like to remove all items from the shopping cart?'),
        emptyCartUrl: window.checkout.emptyMiniCart,

        emptyCartAction: function (element) {
            var self = this,
                href = self.emptyCartUrl;
            $(element).on('click', function () {
                var el = this;
                confirm({
                    content: self.confirmMessage,
                    actions: {
                        confirm: function () {
                            self._removeAllItems(href, el);
                        },
                        always: function (event) {
                            event.stopImmediatePropagation();
                        }
                    }
                });
            });
        },

        _removeAllItems: function (href, elem) {
            $.ajax({
                url: href,
                type: 'post',
                dataType: 'json',
                beforeSend: function () {
                    $(elem).attr('disabled', 'disabled');
                },
                complete: function () {
                    $(elem).attr('disabled', null);
                }

            }).done(function (response) {
                if (!response.errors) {

                } else {
                    var msg = response.message;

                    if (msg) {
                        alert({
                            content: msg
                        });
                    }
                }
            }).fail(function (error) {
                console.log(JSON.stringify(error));
            });
        }
    });
});

emptyCartUrl: window.checkout.emptyMiniCart, мы получим пустую ссылку из конфигурации оформления заказа: app/code/Vendor/MiniCart/Plugin/Cart/ConfigPlugin.php (объявим позже).

Нам нужно скопировать содержимое миникарты из исходного файла: vendor/magento/module-checkout/view/frontend/web/template/minicart/content.html . И затем, в наш пользовательский файл, нам нужно добавить текст действия:

Приложение / код / Vendor / MiniCart / вид / интерфейс / веб / шаблон / minicart / content.html

 <!-- ko if: getCartParam('summary_count') -->
    <div class="actions">
        <div class="secondary">
            <a class="action empty-cart" id="empty-minicart" data-bind="afterRender: emptyCartAction">
                <span><!-- ko i18n: 'Empty Cart Now' --><!-- /ko --></span>
            </a>
        </div>
    </div>
 <!-- /ko -->

Объявите DI, чтобы добавить пустую ссылку в конфигурацию оформления заказа:

Приложение / код / Vendor / MiniCart / и т.д. / интерфейс / di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Cart\Sidebar">
        <plugin name="empty_cart_url" type="Vendor\MiniCart\Plugin\Cart\ConfigPlugin" sortOrder="20" />
    </type>
</config>

Приложение / код / Vendor / MiniCart / Plugin / Корзина / ConfigPlugin.php

<?php

namespace Vendor\MiniCart\Plugin\Cart;

use Magento\Framework\UrlInterface;

class ConfigPlugin
{
    /**
     * @var UrlInterface
     */
    protected $url;

    /**
     * ConfigPlugin constructor.
     * @param UrlInterface $url
     */
    public function __construct(
        UrlInterface $url
    ) {
        $this->url = $url;
    }

    /**
     * @param \Magento\Checkout\Block\Cart\Sidebar $subject
     * @param array $result
     * @return array
     */
    public function afterGetConfig(
        \Magento\Checkout\Block\Cart\Sidebar $subject,
        array $result
    ) {
        $result['emptyMiniCart'] = $this->url->getUrl('minicart/cart/emptycart');
        return $result;
    }
}

Теперь нам нужно построить контроллер:

Приложение / код / Vendor / MiniCart / и т.д. / интерфейс / routes.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="minicart" frontName="minicart">
            <module name="Vendor_MiniCart" />
        </route>
    </router>
</config>

Приложение / код / Vendor / MiniCart / Controller / Корзина / EmptyCart.php

<?php

namespace Vendor\MiniCart\Controller\Cart;

use Magento\Framework\Controller\Result\JsonFactory;
use Magento\Framework\Json\Helper\Data;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Checkout\Model\Session;
use Psr\Log\LoggerInterface;

class EmptyCart extends Action
{
    /**
     * @var Session
     */
    protected $checkoutSession;

    /**
     * @var JsonFactory
     */
    protected $jsonFactory;

    /**
     * @var Data
     */
    protected $jsonHelper;

    /**
     * @var LoggerInterface
     */
    protected $logger;

    /**
     * @var Magento\Checkout\Model\Cart
     */
    protected $cart;

    /**
     * EmptyCart constructor.
     *
     * @param Context $context
     * @param Session $session
     * @param JsonFactory $jsonFactory
     * @param Data $jsonHelper
     * @param LoggerInterface $logger
     */
    public function __construct(
        Context $context,
        Session $session,
        JsonFactory $jsonFactory,
        Data $jsonHelper,
        LoggerInterface $logger,
        \Magento\Checkout\Model\Cart $cart
    ) {
        $this->checkoutSession = $session;
        $this->jsonFactory = $jsonFactory;
        $this->jsonHelper = $jsonHelper;
        $this->logger = $logger;
        $this->cart = $cart;
        parent::__construct($context);
    }

    /**
     * Ajax execute
     *
     */
    public function execute()
    {
        $response = [
            'errors' => false
        ];

        if ($this->getRequest()->isAjax()) {
            try {
                $this->cart->truncate()->save();
                $response['message'] = __('Empty Cart.');

            } catch (\Exception $e) {
                $response = [
                    'errors' => true,
                    'message' => __('Some thing went wrong.')
                ];
                $this->logger->critical($e);
            }
        } else {
            $response = [
                'errors' => true,
                'message' => __('Need to access via Ajax.')
            ];
        }
        /** @var \Magento\Framework\Controller\Result\Raw $resultRaw */
        $resultJson = $this->jsonFactory->create();
        return $resultJson->setData($response);
    }
}

Необходимо перезагрузить раздел корзины:

Приложение / код / Vendor / MiniCart / и т.д. / интерфейс / sections.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
    <action name="minicart/cart/empty">
        <section name="cart"/>
    </action>
</config>

Не забудьте создать registration.phpиmodule.xml

Приложение / код / Vendor / MiniCart / registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_MiniCart',
    __DIR__
);

Приложение / код / Vendor / MiniCart / и т.д. / module.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_MiniCart" setup_version="1.0.0"/>
</config>

[ИЗОБРАЖЕНИЯ ДЕМО]

Мини-корзина:

Подтверждение сообщения:

— Хоа ТруонгДинь
источник

Спасибо за такое подробное и полное решение! Работало, кроме кода для пустой корзины. Чтобы заставить его работать на 2.1.10, мне пришлось немного его изменить pastebin.com/sYmhqYRL

— Viperet

И даже немного короче pastebin.com/2tMEMdeA

— Виперет

@Виперет, я согласен с тобой. Следует использовать $this->cart->truncate()->save();. Не стесняйтесь редактировать мой ответ.

— Khoa TruongDinh

@KhoaTruongDinh мини-корзина, показывающая только кнопку «Очистить корзину сейчас» после реализации кода выше. Любое решение?

— Вишал

Моя версия Magento - 2.2.6. Не могли бы вы мне помочь?

— Рохан Хапани