How to create a click-triggered popup in a theme app extension?

Technical Q&A
,
1

Hi there, I am trying to create theme app extension with the following behavior

  1. Text on a product page (think below product name) that prompts the user to click for more information

  2. A popup (ideally an iframe to an external URL, but that is not currently reflected in the code) over the entire page that opens on click (and closes on exit)

I have the following code right now:

size-chart.liquid


    
Click me!
        {{ section.settings.size_chart_content }}
    

{% schema %}
{
  "name": "Size Chart",
  "target": "section",
  "settings": [
    {
      "type": "text",
      "label": "Size Chart Content",
      "id": "size_chart_content",
      "default": "Add your size chart content here."
    }
  ]
}
{% endschema %}

size-chart.js

export default function myFunction() {
  // Get the popup element
  const popup = document.getElementById("myPopup");

  // Check if popup exists before accessing its properties
  if (popup) {
    console.log("Popup exists!");
    // Calculate the center position based on the window size
    const centerX = window.innerWidth / 2 - popup.offsetWidth / 2;
    const centerY = window.innerHeight / 2 - popup.offsetHeight / 2;

    // Set the position of the popup
    popup.style.left = centerX + "px";
    popup.style.top = centerY + "px";

    // Toggle the visibility of the popup
    if (popup.style.display === "block") {
      popup.style.display = "none";
    } else {
      popup.style.display = "block";
    }
  }
};

Right now this is resulting in an error stating “myFunction” is not available (exact error: Uncaught ReferenceError: myFunction is not defined), but I suspect my issues run deeper than just the reference error.

Any suggestions would be greatly appreciated!

2

Update: Removing “export default” removed the error and triggered the print statement; however, no popup appeared

When I put text in the span it appears and disappears on click; however, it stays within its block instead of centering on the page. Do I need to somehow connect this theme app extension to an embedded app? Is that even possible?

3

We have the same question, except we want to trigger the popup via a Checkout UI Extension app block. Any help here would be appreciated!

4

I ended up being able to do this by using a js function that toggled a hidden CSS class. Not going to call it the most elegant solution, but it works