Sending param from front to the "backend"

Hello, I have a question. I added a parameter to the theme code through the template editor, but I noticed that the additional information was added only once. I’ve run multiple tests, so why might this happen?

I’m confused about how it’s possible that the first attempt was successful while the rest failed.

Let me explain the idea I’m following. I have an additional parameter that gets passed as a URL GET parameter when a user visits the Shopify store. I wrote a script to store it in cookies and localStorage. The second script adds this parameter to the cart. I had one positive test where I found my parameter in the order in the admin panel, but the remaining three tests failed.

I placed the script in theme.liquid before the closing tag.

It should work on every page since users can enter on any page. That’s why I tried to parse the parameter every time.

The second script adds the additional notes parameter to the cart once it exists.

Finally, I want to receive a webhook or get orders data via the API. I prefer to receive a webhook, but there are too many parameters in the JSON.


<script>
// admitad
function setCookie(name, value) { 
  var days = 90; 
  var date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  var expires = "; expires=" + date.toUTCString();
  document.cookie = name + "=" + (value || "") + expires + "; path=/“;
}

// get admitad_uid
if (window.location.search.indexOf('admitad_uid=') !== -1 || window.location.search.indexOf('tagtag_uid=') !== -1) {
  var params = new URLSearchParams(window.location.search);
  var uid = params.get('admitad_uid') || params.get('tagtag_uid’);
  if (uid) {
    // cookie
    setCookie('admitad_uid', uid);

    // localStorage
    localStorage.setItem('admitad_uid', uid);

    // save indexedDB
    var request = indexedDB.open("AdmitadDB", 1);
    request.onupgradeneeded = function(event) {
      var db = event.target.result;
      db.createObjectStore("uids", { autoIncrement: true });
    };
    request.onsuccess = function(event) {
      var db = event.target.result;
      var transaction = db.transaction(["uids"], "readwrite”);
      var store = transaction.objectStore("uids”);
      store.put(uid);
    };
  }
}
</script>
    <script>
document.addEventListener('DOMContentLoaded', function() {
  var uid = localStorage.getItem('admitad_uid') ||
            document.cookie.split('; ').find(row => row.startsWith('admitad_uid=')).split('=')[1];

  if (uid) {
    var form = document.querySelector('form[action="/cart"]’);
    if (form) {
      var input = document.createElement('input’);
      input.type = ‘hidden’;
      input.name = 'attributes[admitad_uid]’;
      input.value = uid;
      form.appendChild(input);
    }
  }
});
</script>


Have you looked into using an App Proxy for this? Display dynamic store data with app proxies

1 Like

Hi Liam,

Thank you for your response. I’m not just focused on receiving data; I’m also interested in having my parameters exist in a specific order. As you can see in the first screenshot, I’m unsure about how to handle the additional details. Could you guide me on this?

Collecting data about orders via the API is working well, but using a proxy isn’t the best solution for me, as I need to temporarily collect and store data before sending it. Thank you in advance for your assistance!