Magento 2 Knockout Library & Invalidate Private Data

Under , | Posted by admin | 0 Comments

This tutorial will hopefully help you to better understand how make certain private data invalidate when a user performs a certain request. This is done by using the Knockout syntax.

First, let’s create a file called reload.js and place it in your web/js/ folder.

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
define([
    'uiComponent',
    'Magento_Customer/js/customer-data'
], function (Component, customerData) {
        'use strict';
        return Component.extend({
            initialize: function () {
                this._super();
                this.personalData = customerData.get('personal-data');
            }
        });
    }
);

 

Next, let’s create a file called PersonalData.php and place it in the root of your module inside a CustomerData folder. Example: app/code/Your/Module/CustomerData/PersonalData.php

<?php 
/**  * Copyright © 2016 Magento. All rights reserved.  
* See COPYING.txt for license details.  
*/ namespace 

Your\Module\CustomerData; use Magento\Customer\CustomerData\SectionSourceInterface; 

class PersonalData implements SectionSourceInterface {     

protected $helper;     

    public function __construct(         
        \Your\Module\Helper\Data $helper     
    ) {         
        $this->helper = $helper;
    }
    /**
     * {@inheritdoc}
     */
    public function getSectionData()
    {
        return [
            'personalNameData' => $this->helper->getCustomName(), //Returns some sort of data
        ];
    }
}

 

Take notice to the getSectionData() function listed here. This function is important and needed to return the new data upon an action to invalidate a private section.

Next, let’s create a template file called personal.phtml. Example: app/code/Your/Module/CustomerData/view/frontend/templates/personal.phtml

<div data-bind="scope: 'koexample'">
    <!-- ko if: personalData().personalNameData -->
    <div id="view-liked-products-container" data-bind="text: personalData().personalNameData"></div>
    <!-- /ko -->
</div>
<script type="text/x-magento-init">
{"[data-role=liked-items]": {"Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>}}
</script>

 

Now let’s create a layout file called default.xml.

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="before.body.end">
            <block class="Magento\Framework\View\Element\Template" name="personal_data" before="-"
                   template="Your_Module::personal.phtml">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="personalData" xsi:type="array">
                                <item name="component" xsi:type="string">Your_Module/js/reload</item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

 

Finally, let’s tell Magento what post or put request will invalidate our container of data. To do this, simply create a file called sections.xml and place it inside the etc/frontend folder.

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
    <action name="module/personal/index">
        <section name="personal-data"/>
    </action>
</config>

 

 

You can learn more about this here: http://devdocs.magento.com/guides/v2.1/config-guide/cache/cache-priv-priv.html

If you are new to the Knockout library you can read more here: http://knockoutjs.com/documentation/introduction.html.