Magento 2 – Compare Products Not Showing in Sidebar

javascriptknockoutjsmagento2PHP

On a new site build, I'm trying to figure out why the compare products information is not showing up in the sidebar for the category page or the customer account page. It a new M2 install with a custom theme that is inheriting from Luma. When I click any product's "add to compare" button, the page will re-load, but there is no success message and nothing shows up in the sidebar, even after I wait for the page to fully (and I mean fully) load.

So far, this is the path I have gone down to test why the items are not showing up.

I have checked to make sure that the data is getting set in the DB on the catalog_compare_item table when I hit the "add to compare" button, and it is. It's being stored with the user ID when I'm logged in and not when I'm not. This table is matching a test dev site I set up to play with debugging this.

This lead me to check the compare page itself at {{site-root}}/catalog/product_compare/index/ and the products that I have added are showing up just fine. All the data is being pulled in and I can use all the functionality on this page.

This points to the Knockout JS templates that are being used to display the content. I tracked the template down using this file {{site-root}}/vendor/magento/module-catalog/view/frontend/layout/default.xml which points to this file for display logic {{site-root}}/vendor/magento/module-catalog/view/frontend/web/js/view/compare-products.js. When I put in a console.log for the Customer object that is driving the data for the file:

define([
    'uiComponent',
    'Magento_Customer/js/customer-data'
], function (Component, customerData) {
    'use strict';
    console.log(customerData);

I get back an empty object. So this points to a null value coming back from the file {{site-root}}/vendor/magento/module-customer/view/frontend/web/js/customer-data.js.

So why would this file be returning with nothing?

Best Answer

For whatever reason, in my version of Magento 2.1.4, this functionality actually does work with the full_page cache enabled. This has tripped up my team at least once before with a different issue.

php bin/magento cache:enable full_page
php bin/magento cache:status # if you're curious

Note, as you would imagine, this makes development quite tricky. My workaround workflow:

Enable full-page caching
Refresh page. Now you should be able to see those products in your Wishlist and Compare list. At this point, I use the Chrome Inspector to make my CSS updates. When ready, paste CSS into your text editor as usual.
Since full-page caching is enabled, the page will not reflect your changes on refresh. Run php bin/magento cache:flush full_page.
Now, on page refresh, you will see your CSS updates (assuming that you have the reset of the CSS workflow happening correctly).

Other than this odd example, I keep the Magento caches enabled for development except for block_html and full_page. This provides a nice balance between seeing CSS and template changes immediately while retaining the performance benefit of having the cache enabled.

Related Solutions

Magento – Magento 2: Add to Cart JS Override works on product page but not on category page

I had the same issue and I resolved the issue by this code.

1 => In your app\code\Custom\Module\view\frontend\requirejs-config.js

Add following code.

var config = {
    map: {
        '*': {
         'Magento_Catalog/js/catalog-add-to-cart':'Custom_Module/js/catalog-add-to-cart',
         catalogAddToCart:'Custom_Module/js/catalog-add-to-cart'
        }
    }
};

2 => Put your add to cart file in app\code\Custom\Module\view\frontend\web\js path with name catalog-add-to-cart.js

Now you can copy paste the parent file code in the overridden file and make your changes.

Above code will override the file and also replace the parent file

Magento – How to display all wishlist items in wishlist sidebar

You can do it by plugin or overwrite of **Magento\Wishlist\CustomerData\Wishlist**. I will cover pluginize **getSectionData** for achieving this.

VendorName/ModuleName/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\Wishlist\CustomerData\Wishlist">
        <plugin name="customer_data_wishlist" type="VendorName\ModuleName\Plugin\Wishlist\CustomerData\Wishlist" sortOrder="1"/>
    </type>
</config>

VendorName/ModuleName/Plugin/Wishlist/CustomerData/Wishlist.php



> namespace VendorName\ModuleName\Plugin\Wishlist\CustomerData;


class Wishlist
{
    /**
     * @var \Magento\Wishlist\Helper\Data
     */
    protected $wishlistHelper;

    /**
     * @var \Magento\Catalog\Helper\ImageFactory
     */
    protected $imageHelperFactory;

    /**
     * @var \Magento\Framework\App\ViewInterface
     */
    protected $view;

    /**
     * @var \Magento\Wishlist\Block\Customer\Sidebar
     */
    protected $block;

    /**
     * Wishlist constructor.
     *
     * @param \Magento\Wishlist\Helper\Data $wishlistHelper
     * @param \Magento\Wishlist\Block\Customer\Sidebar $block
     * @param \Magento\Catalog\Helper\ImageFactory $imageHelperFactory
     * @param \Magento\Framework\App\ViewInterface $view
     */
    public function __construct(
        \Magento\Wishlist\Helper\Data $wishlistHelper,
        \Magento\Wishlist\Block\Customer\Sidebar $block,
        \Magento\Catalog\Helper\ImageFactory $imageHelperFactory,
        \Magento\Framework\App\ViewInterface $view
    ) {
        $this->wishlistHelper = $wishlistHelper;
        $this->imageHelperFactory = $imageHelperFactory;
        $this->block = $block;
        $this->view = $view;
    }

    public function aroundGetSectionData(
        \Magento\Wishlist\CustomerData\Wishlist $subject,
        \Closure $proceed
    ) {
        $counter = $this->getCounter();
        return [
            'counter' => $counter,
            'items' => $counter ? $this->getItems() : [],
        ];
    }

    /**
     * @return string
     */
    protected function getCounter()
    {
        return $this->createCounter($this->wishlistHelper->getItemCount());
    }

    /**
     * Create button label based on wishlist item quantity
     *
     * @param int $count
     * @return \Magento\Framework\Phrase|null
     */
    protected function createCounter($count)
    {
        if ($count > 1) {
            return __('%1 items', $count);
        } elseif ($count == 1) {
            return __('1 item');
        }
        return null;
    }

    /**
     * Get wishlist items
     *
     * @return array
     */
    protected function getItems()
    {
        $this->view->loadLayout();

        $collection = $this->wishlistHelper->getWishlistItemCollection();
        $collection->clear()->setInStockFilter(true)->setOrder('added_at');

        $items = [];
        foreach ($collection as $wishlistItem) {
            $items[] = $this->getItemData($wishlistItem);
        }
        return $items;
    }

    /**
     * Retrieve wishlist item data
     *
     * @param \Magento\Wishlist\Model\Item $wishlistItem
     * @return array
     */
    protected function getItemData(\Magento\Wishlist\Model\Item $wishlistItem)
    {
        $product = $wishlistItem->getProduct();
        return [
            'image' => $this->getImageData($product),
            'product_url' => $this->wishlistHelper->getProductUrl($wishlistItem),
            'product_name' => $product->getName(),
            'product_price' => $this->block->getProductPriceHtml(
                $product,
                'wishlist_configured_price',
                \Magento\Framework\Pricing\Render::ZONE_ITEM_LIST,
                ['item' => $wishlistItem]
            ),
            'product_is_saleable_and_visible' => $product->isSaleable() && $product->isVisibleInSiteVisibility(),
            'product_has_required_options' => $product->getTypeInstance()->hasRequiredOptions($product),
            'add_to_cart_params' => $this->wishlistHelper->getAddToCartParams($wishlistItem, true),
            'delete_item_params' => $this->wishlistHelper->getRemoveParams($wishlistItem, true),
        ];
    }

    /**
     * Retrieve product image data
     *
     * @param \Magento\Catalog\Model\Product $product
     * @return \Magento\Catalog\Block\Product\Image
     * @SuppressWarnings(PHPMD.NPathComplexity)
     */
    protected function getImageData($product)
    {
        /** @var \Magento\Catalog\Helper\Image $helper */
        $helper = $this->imageHelperFactory->create()
            ->init($product, 'wishlist_sidebar_block');

        $template = $helper->getFrame()
            ? 'Magento_Catalog/product/image'
            : 'Magento_Catalog/product/image_with_borders';

        $imagesize = $helper->getResizedImageInfo();

        $width = $helper->getFrame()
            ? $helper->getWidth()
            : (!empty($imagesize[0]) ? $imagesize[0] : $helper->getWidth());

        $height = $helper->getFrame()
            ? $helper->getHeight()
            : (!empty($imagesize[1]) ? $imagesize[1] : $helper->getHeight());

        return [
            'template' => $template,
            'src' => $helper->getUrl(),
            'width' => $width,
            'height' => $height,
            'alt' => $helper->getLabel(),
        ];
    }
}

Clear cache.

NB: Only refresh is not enough for testing working or not. Add/Remove wishlist item then magento fire sidebar section data and load.

Best Answer

Related Solutions

Magento – Magento 2: Add to Cart JS Override works on product page but not on category page

Magento – How to display all wishlist items in wishlist sidebar

Related Topic