Solved

Theme App Extension open popup on click

carecare
Shopify Partner
12 3 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

 

<!-- 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!

Accepted Solution (1)
carecare
Shopify Partner
12 3 1

This is an 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

View solution in original post

Replies 3 (3)

carecare
Shopify Partner
12 3 1

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
Shopify Partner
2 0 0

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
Shopify Partner
12 3 1

This is an 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