Làm thế nào để thêm nút trống trống Cart vào nút minicart
Câu trả lời:
Tôi vừa tạo một mô-đun thích hợp cho câu hỏi của bạn:
Chúng ta cần khai báo thành phần js và mẫu html tùy chỉnh:
ứng dụng / mã / Nhà cung cấp / MiniCart / view / frontend / layout / 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>
ứng dụng / mã / Nhà cung cấp / MiniCart / view / frontend / web / js / view / 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,chúng tôi sẽ nhận được liên kết trống từ cấu hình thanh toán: app/code/Vendor/MiniCart/Plugin/Cart/ConfigPlugin.php(khai báo sau).
Chúng ta cần sao chép nội dung minicart từ tệp gốc : vendor/magento/module-checkout/view/frontend/web/template/minicart/content.html. Và sau đó, trong tệp tùy chỉnh của chúng tôi, chúng tôi cần thêm văn bản hành động:
ứng dụng / mã / Nhà cung cấp / MiniCart / view / frontend / web / template / 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 -->
Khai báo DI để thêm liên kết trống vào cấu hình thanh toán:
ứng dụng / mã / Nhà cung cấp / MiniCart / etc / frontend / 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>
ứng dụng / mã / Nhà cung cấp / MiniCart / Plugin / Giỏ hàng / 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;
}
}
Bây giờ, chúng ta cần xây dựng bộ điều khiển:
ứng dụng / mã / Nhà cung cấp / MiniCart / etc / frontend / Rout.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>
ứng dụng / mã / Nhà cung cấp / MiniCart / Trình điều khiển / Giỏ hàng / 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);
}
}
Cần tải lại phần giỏ hàng:
ứng dụng / mã / Nhà cung cấp / MiniCart / etc / frontend / part.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>
Nhớ tạo registration.phpvàmodule.xml
ứng dụng / mã / Nhà cung cấp / MiniCart / đăng ký.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Vendor_MiniCart',
__DIR__
);
ứng dụng / mã / Nhà cung cấp / MiniCart / etc / 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>
[HÌNH ẢNH DEMO]
Giỏ hàng nhỏ:
Xác nhận tin nhắn:
Cảm ơn giải pháp chi tiết và đầy đủ như vậy! Nó hoạt động, ngoại trừ mã vào giỏ hàng trống. Để làm cho nó hoạt động vào ngày 2.1.10, tôi đã phải thay đổi nó một chút pastebin.com/sYmhqYRL
—
Viperet
Và thậm chí ngắn hơn một chút pastebin.com/2tMEMdeA
—
Viperet
@Viperet Tôi đồng ý với bạn. Nên dùng
—
Khoa TruongDinh
$this->cart->truncate()->save();. Hãy chỉnh sửa câu trả lời của tôi.
@KhoaTruongDinh giỏ hàng nhỏ chỉ hiển thị nút "Giỏ hàng trống ngay" sau khi thực hiện mã ở trên. Bất kỳ giải pháp?
—
Vishal
Phiên bản Magento của tôi là 2.2.6. Bạn có thể giúp tôi không?
—
Rohan Hapani