Magento 2 Knockout variable from response in controller via ajax

Question

Assume I've got something like this

<div class="greet welcome" data-bind="scope: 'customer'">
    <!-- ko if: blockIsLoggedIn == '1'  -->
    <span data-bind="text: new String('<?= $block->escapeHtml(__('According to the block logic you are currently logged In')) ?>')"></span>
    <!-- /ko -->
    <!-- ko ifnot: blockIsLoggedIn == '1'  -->
    <span data-bind="text: new String('<?= $block->escapeHtml(__('as according to the block logic you are not currently logged in')) ?>')"></span>
    <!-- /ko -->
</div>

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "customer": {
                    "component": "Magento_Customer/js/view/customer",
                    "blockIsLoggedIn": "<?= $block->escapeJs($block->isCustomerLoggedIn()); ?>"
                }
            }
        }
    }
}
</script>

And my block logic looks a bit like this

    /**
     * Check is Customer Logged In
     * @return int
     */
    public function isCustomerLoggedIn()
    {
        $isLoggedIn = $this->customerContext->getValue(\Magento\Customer\Model\Context::CONTEXT_AUTH);
        return (bool) $isLoggedIn ? 1 : 0;
    }

The trouble is the blockIsLoggedIn value is cached in FPC on page load. Which means you can't reliably use this approach.

Is it possible to convert this so this variable comes from an ajax lookup on a controller instead?

I'm aware of other ways in which to check whether you are logged in. This is just an example. I've had similar scenarios recently and I end up just using jQuery. When I use jQuery I feel like I'm reinventing the wheel.

Update

My logged in example has caused confusion. Let's say I want to use KO to fetch a review count for currently viewed product (I assume via ajax request) on product page - on page load - that works through FPC.

Answer 1

If your create your custom uicomponent like below

<script type="text/x-magento-init">
    {
      "*":{
          "Magento_Ui/js/core/app": {
              "components": {
                  "customer": {
                      "component":"Mbs_PunchHole/js/checklogin"                  
                  }
              }
          }
      }
    }
</script>

and your javascript file like below:

define([
    'uiComponent',
    'Magento_Customer/js/model/customer'
], function (Component, customer) {
    'use strict';

    return Component.extend({      
        blockIsLoggedIn: function() {
           return customer.isLoggedIn();
        }
    });
})


<div class="greet welcome" data-bind="scope: 'customer'">
    <!-- ko if: blockIsLoggedIn == '1'  -->
    <span data-bind="text: new String('<?= $block->escapeHtml(__('According to the block logic you are currently logged In')) ?>')"></span>
    <!-- /ko -->
    <!-- ko ifnot: blockIsLoggedIn == '1'  -->
    <span data-bind="text: new String('<?= $block->escapeHtml(__('as according to the block logic you are not currently logged in')) ?>')"></span>
    <!-- /ko -->
</div>

In the above snippet, the line customer.isLoggedin is an observable.

If you open the file vendor/magento/module-customer/view/frontend/web/js/model/customer.js, you will see it quite clearly.

Now, the technology of observable and escaping FPC issue relies on the section data. I suspect deep down, you'd prefer have a php/phtml solution rather than using javascript like the above solution.

If you want to keep your php function and yet enable an observable variable, you will need to take a look at how implementing a customer-data section in Magento.

the module https://bitbucket.org/magstaging/punchhole/src/master/ does pretty much just that.

Answer 2

I guess it is not about AJAX but about checking i user is logged or not in knockout js context. Then here is your answer:

In general:

You can use **customer-data.js (**outside of checkout context)

define([
    'Magento_Customer/js/customer-data',
], function(customerData) {
    //...
    var customer = customerData.get('customer');

    if (customer().fullname && customer().firstname) {
        // loged
    }
    else {
        // not logged
    }
    
});

In checkout context you can use Magento_Customer/js/model/customer.js

define([
    'Magento_Customer/js/model/customer'
], function(customer) {
    'use strict';

    if(customer.isLoggedIn()) {
        // ...
    }
    else {
      // ..
    }
});

Also you use translation module in JS

instead of:

<span data-bind="text: new String('<?= $block->escapeHtml(__('as according to the block logic you are not currently logged in')) ?>')"></span>

do this:

<span data-bind="text: getMessage()">

and in your js define dependency 'mage/translate' and use it to set variable/ko variables like

$t('Some string')

In your case:

I see here you want to edit template used by 'Magento_Customer/js/view/customer'

I guess you could use here mixin:

customer-mixin.js (in your theme Magento_Customer/js/view/) or in your module

define([
  'mage/translate'
], function ($t) {
  'use strict';

  var mixin = {
    getMessage: function() {
      if (this.customer().fullname && this.customer().firstname) {
        return $t('Your message for logged users that can be translated');
      } else {
        return $t('Your message for non logged users that can be translated');
      }
    }
  }

  return function(target) {
    return target.extend(mixin);
  };
});

and in requirejs-config.js (in your theme in Magento_Customer/require-config.js) or in your module (then path to mixin will be different)

var config = {
  config: {
    mixins: {
      'Magento_Customer/js/view/customer': {
        'Magento_Customer/js/view/customer-mixin': true
      },
    }
  }
};

I wrote it more or less from memory so if there will be any issues let me know.

UPDATE:

You are right. To fetch count reviews you can use ajax. Check how Magento module review works.

Example: http://demo-acm-2.bird.eu/joust-duffle-bag.html

Look at process-reviews.js However they could add there perhaps some localStorage to cache result.

In general you should use JS and ajax request or and in some cases customer data sections.

I also recommend to look at https://devdocs.magento.com/guides/v2.4/extension-dev-guide/cache/page-caching/private-content.html and public content section

And if needed read few articles related to using sections like: https://amasty.com/blog/how-to-use-sections-in-magento-2

Answer 3

I'm a backend dev so my frontend skills are limited. But I've put together something to demonstrate what my current understanding is how to achieve what I'm describing. But it seems to me like it's long winded and I'm very much reinventing the wheel or that there is an easier way to achieve what I'm doing.

https://github.com/DominicWatts/Ajax

So I've got a controller which could do anything dynamic

https://github.com/DominicWatts/Ajax/blob/87cca1700e9e0ca1fa3da3e4bd060037d2b149fb/Controller/Ajax/Fetch.php#L43-L49

            return $this->jsonResponse([
                'reviewFound' => true,
                'reviewWording' => __(
                    "%1 reviews for product %2",
                    22,
                    $product
                )]);

By anything I mean literally anything. You are not bound by the restrictions of what private data functionality currently does and you don't have to use plugins to get it to do more.

If you go here review/ajax/index

You see this

https://github.com/DominicWatts/Ajax/blob/master/view/frontend/templates/ajax/index.phtml

Hello ajax/index.phtml

<input type="hidden" id="product-id" value="123" />

<div class="greet welcome" data-bind="scope: 'ajax'">
    <!-- ko template: getTemplate() -->
    <p data-bind="text: html"><?= $block->escapeHtml('Review count to go here'); ?></p>
    <!-- /ko -->
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "ajax": {
                        "component": "Xigen_Ajax/review/ajax",
                        "template" : "Xigen_Ajax/review/ajax"
                    }
                }
            }
        }
    }
</script>

Inside my script

https://github.com/DominicWatts/Ajax/blob/master/view/frontend/web/review/ajax.js

I've got the ajax requst

https://github.com/DominicWatts/Ajax/blob/87cca1700e9e0ca1fa3da3e4bd060037d2b149fb/view/frontend/web/review/ajax.js#L16-L19

            var url = '/review/ajax/fetch',
                param = 'product=' + $('#product-id').val(),
                reviewWording,
                reviewFound = false;

Which catchs the paramater to send from the hidden input, fetches and then assigns the values for the template based on the result from the controller.

https://github.com/DominicWatts/Ajax/blob/87cca1700e9e0ca1fa3da3e4bd060037d2b149fb/view/frontend/web/review/ajax.js#L34-L36

            this.response = reviewWording;
            this.reviewFound = reviewFound;
            this.observe(['response']);

Then in my template https://github.com/DominicWatts/Ajax/blob/master/view/frontend/web/template/review/ajax.html

I can do something like this

<p data-bind="html: response"></p>
<!-- ko if: reviewFound == '1'  -->
<span>Review is found</span>
<!-- /ko -->
<!-- ko ifnot: reviewFound == '1'  -->
<span>Review is not found</span>
<!-- /ko -->

Which gives me the following

And here is my ajax response

And here is Knockout context debugging show variables set