Close

April 11, 2017

Magento2 Issue with Binding

While working on a new Magento 2 site, we were trying to customized a menu item to display the current number of items in a user shopping cart, dynamically. For some reason the code was working properly and then suddenly stopped when we added a new patch.

The error we received was something like “Uncaught TypeError: Unable to process binding”.

The key was to look up how Magento core was doing the coding in
/vendor/magento/module-checkout/view/frontend/templates/cart/minicart.phtml

When we built our custom code, we had removed the knockout template code bindings in the div layers, so when Magento2 called back to get our data, it had know idea how to handle our calls.

<div class="top-right-links top-cart" data-block="minicart">
                <a href="<?php echo $baseurl .'checkout/cart'; ?>" data-bind="scope: 'minicart_content'">
                    <span id="toptopcart" >
 
			    <!-- ko if: getCartParam('summary_count') == 1 -->
				<!-- ko text: getCartParam('summary_count') --><!-- /ko -->
			    <!-- /ko -->
			    <!-- ko if: getCartParam('summary_count') != 1 -->
				<!-- ko text: getCartParam('summary_count') --><!-- /ko -->
			    <!-- /ko -->
			</span>
                </a>
            </div>

After a quick comparison with the magento core file we put in the correct data bindings (scope and block) and the summary_count (ie: provides the number of items in the cart) started rendering properly again. What was a bit off putting, was that if you didn’t have those data binding setups correctly, the entire page would break, because of the knockout JS code not successfully rendering. So the entire page would “break” with bad javascript.

Magento2 opens up a whole new world of hilarity. Don’t hesitate to contact us to help you out with any of your Magento 2 needs.