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

[carecare]

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

<!-- sections/size-chart.liquid -->
<div class="size-chart">
    <div class="popup" onclick="myFunction()">Click me!
        <span class="popuptext" id="myPopup">{{ section.settings.size_chart_content }}</span>
    </div>
</div>

<script src="{{ 'size-chart.js' | asset_url }}" defer></script>
{% 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!

[carecare]

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?

[cbohnert]

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!

[carecare · Accepted solution]

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