Recover customer data on product page
-
16-04-2021 - |
문제
I am trying to recover customer data on product page as I cannot pass by php because of full page cache I want to do it in js.
I added an phtml block on my page in footer, catalog_product_view.xml
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<referenceContainer name="footer-container">
<block class="My\Module\Block\VisitRecorder" template="My_Module::visit_recorder.phtml" name="visit_recorder" after="-"/>
</referenceContainer>
</page>
In this block I instanciate a widget managing the process
<div id="visit-recording">
<?= $this->getBlockHtml('formkey');?>
</div>
<script>
require(
[
'jquery',
'visitRecorder',
'domReady!'
], function ($, visitRecorder) {
var url = window.location.href;
var formKey = $("#visit-recording [name='form_key']").val();
$('#visit-recording').visitRecorder({
"url": url,
"formKey": formKey,
});
});
</script>
In my requirejs-config.js I registered my widget :
var config = {
map: {
'*': {
visitRecorder: 'My_Module/js/visitRecorder',
}
}
};
In widget I tried to recover customer data :
define(
[
'jquery',
'Magento_Customer/js/customer-data',
'domReady!'
],
function (
$, customerData
) {
$.widget('namespace.visitRecorder', {
options: {
url : "",
formKey : "",
},
_create: function () {
var self = this;
this._super();
},
/**
* @private
*/
_init: function () {
this._super();
var customer = customerData.get('customer');
console.log(customer);
console.log(customer().firstname);
},
});
return $.namespace.visitRecorder;
});
I saw I core checkout magento the same method are used so I don't understand why this is not working.
해결책
You're getting the observable, this is why u see a function in console.log. Its a knockout JS Observable, so to you get the current value use the following syntax:
customerData.get('customer')()
You can also subscribe to it observable example:
customerData.get('customer').subscribe(function (newVal) {
console.log(newVal);
});
This way your code works always with latest value, or do something when it changes. If you're using knockoutJS template you can easily keep your template up to date
다른 팁
You can set block cacheable="false"
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<referenceContainer name="footer-container">
<block class="My\Module\Block\VisitRecorder" template="My_Module::visit_recorder.phtml" name="visit_recorder" after="-" cacheable="false"/>
</referenceContainer>
</page>
Hope it's useful for you.