Private data

Luma has offered us a JavaScript API to handle private data - retrieved from the server and stored in local storage. Here is the Loki Theme alternative.

Magento overview

Messages that are triggered from PHP are sent to the frontend in various ways: AJAX calls can be made towards the URL customer/section/load (with an optional GET parameter sections) to retrieve private data. The resulting JSON is received by the Knockout.js component customer-data and then stored in local storage under the key mage-cache-storage.

Alpine store localStorage

An Alpine store LumaLocalStorage has been added as a front for the logic of the original Knockout.js component. When the store is initialized, it checks whether local storage data is available under the key mage-cache-storage. If so, the data will be copied into the store. If the data is not there (because of a new session or a previous reset), an AJAX call will be made to retrieve the data from the URL customer/section/load.

The store offers the following methods:

• get(sectionName): Retrieving all data of a specific section. If a section is empty, an AJAX call will be made;
• set(sectionName, data): Set the internal data of a specific section and save everything to local storage;
• remove(sectionName): Remove the internal data of a specific section and save everything to local storage;
• refresh(sectionNames): Trigger an AJAX refresh and save everything to local storage;
• save(): Saving all internal data into local storage;
• reset(): Remove all internal data and local storage (and force a refresh at the next call);

Examples

Retrieve the summary count from the cart section:

const cartSection = Alpine.store('LumaLocalStorage').get('cart');
const summaryCount = cartSection.summary_count ?? 0;

Refresh the customer section:

Alpine.store('LumaLocalStorage').refresh('customer');