skip to Main Content

I have a Magento 2 website which has been set up to allow customers to have their own pricing. However, as a result of this the FPC (for category and product pages) is now being generated uniquely for each user.

To get round this, I want to load the price via Knockout JS so that the FPC can be shared across all logged in users, yet the pricing will be loaded dynamically depending on what pricing system that user has been assigned.

I started off by following this article: https://magently.com/blog/full-page-cache-hole-punching-in-magento-2/

I have been able to successfully configure the Knockout JS to render the ‘timestamp’ (from the above tutorial) on a category page and I have tested that the FPC is being shared across all logged-in users.

However, the problem I am now having is that I need to pass the product ID to the block so that I can use the class to return the correct price for that product. I have looked through various articles, questions on here etc. but can’t seem to find an answer to this.

2

Answers


  1. To enhance dynamic functionality in Magento 2 that bypasses the full page cache feature, I have written hole punch feature that may help you to see a working example. (see https://bitbucket.org/magstaging/punchhole for more details

    step 1: create a model that implements
    step 2: define in a frontend di.xml a section node for the model
    step 3: enable the node to be activated with an action (for instance checkout/cart/add
    step 4: create a phtml template that will use your node
    step 5: create a js file in view/frontend/web/js/jspart.js

    define( [ ‘uiComponent’, ‘Magento_Customer/js/customer-data’ ], function (Component, customerData) { ‘use strict’;

    Good luck

    Login or Signup to reply.
  2. It seems that to achieve your goal you should initialize the javascript component in the product list template, this way you will be able to generate an array with IDs of the products the user sees from the collection object. Then to pass the data to the javascript you just need to add another key-value pair under component section in x-magento-init as shown in one of my other articles https://magently.com/blog/introduction-knockout-js-magento-2/

    Mind you can also use knockout bindings to show values fetched by your UI Component instead of writing additional scripts.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search