Send data from store to an app extension

[VishalChandola]

I've developed a discount app that provides instant discounts to logged-in users. To determine a customer's login status, I implemented code within theme.liquid, utilizing local storage to set items as 'true' or 'false' based on user activity:

{% if customer %}
localStorage.setItem('isLoggedIn', 'true');
{% else %}
localStorage.setItem('isLoggedIn', 'false');
{% endif %}

I'm encountering an error in my app console that reads: 'Uncaught ReferenceError: 'localStorage' is not defined.' How can I transfer data from the store to the app?

Any suggestions to resolve this?"

[devmont-digital]

Hi @VishalChandola,
Try this code, tested on dev store.

{% capture isLoggedIn %}
 {% if customer %}
   true
 {% else %}
   false
 {% endif %}
{% endcapture %}
<script>localStorage.setItem('isLoggedIn', '{{ isLoggedIn }}');</script>

Not Login User

Login User

If you will unable to implement, I'm happy to help you. I will implement the code changes on your store.
Hopefully it will help you.

If yes then Please don't forget hit Like and Mark it as solution!

Best Regards
@devmont-digital 

[VishalChandola]

Hi @devmont-digital I attempted the solution provided earlier, but unfortunately, it hasn't resolved the issue. Any further suggestions?

[devmont-digital]

Yes, We can discuss it more for that, I need some brief about the feature you want to develop. As per your initial draft, we understand that you are facing the issue of setting up local storage values.

Share more details and store url we will look into it.

[VishalChandola]

I've developed a Shopify app extension for discounts. If a customer is logged into the store and has a specific meta field, they'll receive a 40% discount; otherwise, no discount will be applicable. To know that customer is logged into the store or not I have user the below code:

{% if customer %}
localStorage.setItem('isLoggedIn', 'true');
{% else %} 
localStorage.setItem('isLoggedIn', 'false');
{% endif %}

However, I encountered an error while using localStorage.getItem. The error message 'Uncaught ReferenceError: 'localStorage' is not defined' is displayed.

Any suggestions to resolve this?" 

[devmont-digital]

Got it!
Extensions are run in a web worker, so accessing localstorage is impossible. If you are using React JS, you can use the WebWorkers.

WebWorkers has multiple access like: (location, importScripts, JSON, Worker, IndexedDB) in your case you can use IndexedDB

Basic Example of  IndexedDB

document.addEventListener('DOMContentLoaded', function() {
  // Open or create the IndexedDB database
  const dbName = 'shopifyData';
  const request = indexedDB.open(dbName, 1);

  // Setup the database schema
  request.onupgradeneeded = function(event) {
    const db = event.target.result;
    const objectStore = db.createObjectStore('storeData', { keyPath: 'id' });
    // You can add more fields as needed
    objectStore.createIndex('name', 'name', { unique: false });
  };

  request.onsuccess = function(event) {
    const db = event.target.result;

    // Perform operations on the database
    // For example, adding data
    const transaction = db.transaction(['storeData'], 'readwrite');
    const objectStore = transaction.objectStore('storeData');

    const data = { id: 1, name: 'example data' };
    const addRequest = objectStore.add(data);

    addRequest.onsuccess = function() {
      console.log('Data added successfully');
    };

    addRequest.onerror = function(error) {
      console.error('Error adding data: ', error);
    };

    // Retrieving data
    const getRequest = objectStore.get(1);

    getRequest.onsuccess = function() {
      const result = getRequest.result;
      console.log('Retrieved data:', result);
    };

    getRequest.onerror = function(error) {
      console.error('Error retrieving data: ', error);
    };

    // Don't forget to close the database connection when done
    transaction.oncomplete = function() {
      db.close();
    };
  };

  request.onerror = function(event) {
    console.error('Error opening database: ', event.target.error);
  };
});

This example demonstrates creating an IndexedDB database named 'shopifyData' with an object store named 'storeData'. The object store has an index named 'name'. You can modify this example to suit your specific data storage needs in the Shopify extension.

Remember that IndexedDB operations are asynchronous, so you need to handle success and error events appropriately. Additionally, make sure to handle the opening and closing of the database connection correctly based on the flow of your extension.

Give it a try, Your issue will be resolved, let me know if you want to know anything related to the above explanation.

Hopefully, it will help you.

If yes then Please don't forget to hit Like and Mark it as a solution!

Best Regards
@devmont-digital 

[VishalChandola]

Hi @devmont-digital I'm exploring ways to implement a Shopify discount app extension using React JS. Do you have any insights or solutions for incorporating React JS within a Shopify discount app extension?"