Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.

Send data from store to an app extension

VishalChandola
Shopify Partner
11 0 0

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?"

Replies 6 (6)

devmont-digital
Shopify Partner
40 8 8

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

Not-Login-User.PNG

 

Login User

Login-User.PNG

 

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 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at info@devmontdigital.io
VishalChandola
Shopify Partner
11 0 0

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

devmont-digital
Shopify Partner
40 8 8

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.

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at info@devmontdigital.io
VishalChandola
Shopify Partner
11 0 0

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
Shopify Partner
40 8 8

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 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at info@devmontdigital.io
VishalChandola
Shopify Partner
11 0 0

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?"