0

i want to Add "add to compare" and "add to Wishlist" functionality in minicart magento 2.

I cannot find where to modify. Can you help me, please?

thanks

0

Hope you doing well.

please find this file here.

magento-directory/vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

please override this template file and your Wishlist and Compare Functionality as Edit and delete functionality work here.

this is Block file from where magento set url and all data.

magento-directory/vendor/magento/module-checkout/Block/Cart/Sidebar.php

Please find related files here:

magento-directory/vendor/magento/module-checkout/view/frontend/web/template/minicart/content.html

magento-directory/vendor/magento/module-checkout/view/frontend/web/js/view/minicart.js

magento-directory/vendor/magento/module-checkout/view/frontend/web/js/sidebar.js

please properly check and do as Delete Functionality works in minicart. so you can easily achieve what you want.

magento-directory/vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

<a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"
                       class="action delete">
                        <span data-bind="i18n: 'Remove'"></span>
                    </a>

magento-directory/vendor/magento/module-checkout/view/frontend/web/js/view/minicart.js

'url': {
         'remove': window.checkout.removeItemUrl,
       },
'button':{
         'remove': '#mini-cart a.action.delete',
        },

magento-directory/vendor/magento/module-checkout/view/frontend/web/js/sidebar.js

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();
                        }
                    }
                });
            };

_removeItem: function (elem) {
            var itemId = elem.data('cart-item');

            this._ajax(this.options.url.remove, {
                'item_id': itemId
            }, elem, this._removeItemAfter);
        },

Thanks

0

I have implemented Add To Wishlist functionality in the minicart.

There are two things to do.

  1. Override Magento_Checkout mini-cart template in your theme. i.e.

Take vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html into app/design/frontend/Custom/theme/Magento_Checkout/web/template/minicart/item/default.html

Add Add To Wishlist anchor tag near Remove Item anchor tag. Like,

<div class="product actions">
     <div class="secondary">
          <!-- ko if: is_visible_in_site_visibility -->
          <a data-bind="attr: {'data-post': wishlist_data, title: $t('Add to wishlist')}" class="action wishlist">
               <span data-bind="i18n: 'Add to wishlist'"></span>
          </a>
          <!-- /ko -->
          <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>
  1. Override Magento_Checkout CustomerData DefaultItem.php file.

Add below in Custom module's di.xml

<preference for="Magento\Checkout\CustomerData\DefaultItem"
type="Custom\Module\CustomerData\Preference\DefaultItem"/>

Added below code in preference overrided file.

<?php
namespace Custom\Module\CustomerData\Preference;
use Magento\Framework\App\ObjectManager;
use Magento\Catalog\Model\Product\Configuration\Item\ItemResolverInterface;

class DefaultItem extends \Magento\Checkout\CustomerData\DefaultItem
{
/**
 * @var \Magento\Catalog\Helper\Image
 */
protected $imageHelper;

/**
 * @var \Magento\Msrp\Helper\Data
 */
protected $msrpHelper;

/**
 * @var \Magento\Framework\UrlInterface
 */
protected $urlBuilder;

/**
 * @var \Magento\Catalog\Helper\Product\ConfigurationPool
 */
protected $configurationPool;

/**
 * @var \Magento\Checkout\Helper\Data
 */
protected $checkoutHelper;

/**
 * @var \Magento\Framework\Escaper
 */
private $escaper;

/**
 * @var ItemResolverInterface
 */
private $itemResolver;

/**
 * @var \Magento\Wishlist\Helper\Data
 */
private $wishlistHelper;

/**
 * @param \Magento\Catalog\Helper\Image $imageHelper
 * @param \Magento\Msrp\Helper\Data $msrpHelper
 * @param \Magento\Framework\UrlInterface $urlBuilder
 * @param \Magento\Catalog\Helper\Product\ConfigurationPool $configurationPool
 * @param \Magento\Checkout\Helper\Data $checkoutHelper
 * @param \Magento\Wishlist\Helper\Data $wishlistHelper
 * @param \Magento\Framework\Escaper|null $escaper
 * @param ItemResolverInterface|null $itemResolver
 * @codeCoverageIgnore
 */
public function __construct(
    \Magento\Catalog\Helper\Image $imageHelper,
    \Magento\Msrp\Helper\Data $msrpHelper,
    \Magento\Framework\UrlInterface $urlBuilder,
    \Magento\Catalog\Helper\Product\ConfigurationPool $configurationPool,
    \Magento\Checkout\Helper\Data $checkoutHelper,
    \Magento\Wishlist\Helper\Data $wishlistHelper,
    \Magento\Framework\Escaper $escaper = null,
    ItemResolverInterface $itemResolver = null
) {
    $this->wishlistHelper = $wishlistHelper;
    $this->escaper = $escaper ?: ObjectManager::getInstance()->get(\Magento\Framework\Escaper::class);
    $this->itemResolver = $itemResolver ?: ObjectManager::getInstance()->get(ItemResolverInterface::class);
    parent::__construct($imageHelper, $msrpHelper, $urlBuilder, $configurationPool, $checkoutHelper);
}

/**
 * {@inheritdoc}
 */
protected function doGetItemData()
{
    $imageHelper = $this->imageHelper->init($this->getProductForThumbnail(), 'mini_cart_product_thumbnail');
    $productName = $this->escaper->escapeHtml($this->item->getProduct()->getName());

    return [
        'options' => $this->getOptionList(),
        'qty' => $this->item->getQty() * 1,
        'item_id' => $this->item->getId(),
        'configure_url' => $this->getConfigureUrl(),
        'wishlist_data' => $this->getAddToWishlistParams(),
        'is_visible_in_site_visibility' => $this->item->getProduct()->isVisibleInSiteVisibility(),
        'product_id' => $this->item->getProduct()->getId(),
        'product_name' => $productName,
        'product_sku' => $this->item->getProduct()->getSku(),
        'product_url' => $this->getProductUrl(),
        'product_has_url' => $this->hasProductUrl(),
        'product_price' => $this->checkoutHelper->formatPrice($this->item->getCalculationPrice()),
        'product_price_value' => $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()),
    ];
}

protected function getAddToWishlistParams()
{
    $params = ['qty' => $this->item->getQty()];
    return $this->wishlistHelper->getAddParams($this->item->getProduct(), $params);
}
}

This will add a link in Mini-cart near Remove Item and Clicking on it will add cart item into wishlist.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.