This tutorial will hopefully help you better understand how to invalidate certain private data 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.
