2

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?

1

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.

2

After some more searching I found this post Magento 2 minicart, welcome message, other do not work with page cache disabled after customer login which didn't seem to have the same problem but when I turned the site's cache back on (i turn that off when ever I'm working on a site) and the functionality is now working correctly.

To get more into the weeds of the problem (but not really explain why it is that this happened) I was looking through the file {{site-root}}/vendor/magento/module-customer/view/frontend/web/js/customer-data.js and looking at this block of code:

var customerData = {
    init: function() {
        var countryData,
            privateContent = $.cookieStorage.get('private_content_version');
            console.log(privateContent);

When I shot out the console log the value was returning null and looking at the dev tools in Chrome, I could see that private_content_version was not being set at all and not present in the Resources tab. After turning on the Cache, this value started being set. And the compare products is working fine. I would think this is a bug, but not sure where it could be coming from.

  • Which cache? full_page? – nshiff Apr 17 '17 at 16:16
  • I'm using the built in cache, so that includes full page cache as it was known in M1, and then all the other built in block caching and what not. I'm not running redis or vagrent. It also would seem (after a few months of working with this) that a lot of the issue comes down to the JS fully loading on the site. Once the JS loads all the way, everything works fine (this is why caching helps to speed up that process). Checking the network tab in your inspector, you can see after page refresh that files might still be loading. – circlesix Apr 17 '17 at 19:31
  • 1
    Ok, thanks. Yeah, if you run php bin/magento cache:status, you can see that multiple caches -- notably block_html, layout, and full_page -- are included under the label of "magento cache". I develop with all caches enabled except block_html and full_page, as is noted in the DevDocs. After some experimentation, I determined that it was indeed full_page that makes the difference. Thx again. – nshiff Apr 17 '17 at 21:09
  • That's good to know! You could post this an another answer to the question, it's always good to get other points of view on these issues. – circlesix Apr 17 '17 at 21:14
-1

Magento 2.0 ver display compare product left sidebar

File Path : /Magento_Catalog/templates/product/compare/sidebar.phtml

Past all bellow code :

<?php
/**
 * Magento
 *  * NOTICE OF LICENSE
 *  * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *  * DISCLAIMER
 *  * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *  * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* @var $this \Magento\Catalog\Block\Product\Compare\Sidebar */
?>
<?php
$_helper = $this->helper('Magento\Catalog\Helper\Product\Compare');
$_items = $_helper->getItemCount() > 0 ? $_helper->getItemCollection() : null;
$count = $_helper->getItemCount();
?>
<div class="block block-compare">
    <div class="block-title">
        <strong id="block-compare-heading" role="heading" aria-level="2"><?php echo __('Compare Products') ?></strong>
        <?php if($count > 0): ?>
        <span class="counter qty"><?php echo ($count == 1) ? __('1 item') : __('%1 items',$count) ?></span>
        <?php endif; ?>
    </div>
    <div class="block-content" aria-labelledby="block-compare-heading">
        <?php if($_helper->getItemCount() > 0): ?>
            <ol id="compare-items" class="product-items product-items-names"
                data-mage-init='{"compareItems":{
                    "removeConfirmMessage":"<?php echo __("Are you sure you would like to remove this item from the compare products?") ?>",
                    "removeSelector":"#compare-items a.action.delete",
                    "clearAllConfirmMessage":"<?php echo __("Are you sure you would like to remove all products from your comparison?") ?>",
                    "clearAllSelector":"#compare-clear-all"
                }}'>
            <?php foreach($_items as $_index => $_item): ?>
            <li class="product-item">
                <input type="hidden" class="compare-item-id" value="<?php echo $_item->getId() ?>"/>
                <strong class="product-item-name">
                    <a href="<?php echo $this->getProductUrl($_item) ?>" class="product-item-link">
                        <?php echo $this->helper('Magento\Catalog\Helper\Output')->productAttribute($_item, $_item->getName(), 'name') ?>
                    </a>
                </strong>
                <?php $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');?>

                <a href="#" data-post='<?php echo $compareHelper->getPostDataRemove($_item); ?>'
                   title="<?php echo __('Remove This Item') ?>"
                   class="action delete">
                    <span><?php echo __('Remove This Item') ?></span></a>
            </li>
        <?php endforeach; ?>
    </ol>
    <div class="actions-toolbar">
        <div class="primary">
            <a href="<?php echo $_helper->getListUrl() ?>" class="action compare primary"><span><?php echo __('Compare') ?></span></a>
        </div>
        <div class="secondary">
            <a id="compare-clear-all" href="#" data-post='<?php echo $_helper->getPostDataClearList() ?>' class="action clear">
                <span><?php echo __('Clear All') ?></span>
            </a>
        </div>
    </div>

List item

<?php else: ?>
    <div class="empty"><?php echo __('You have no items to compare.') ?></div>
<?php endif; ?>
</div>

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.