Opening an external link in a popup window in Order history section to display shipment activity

[devansh_wsdn]

Hello, I have implemented the API for shipment tracking provided by my shipping partner on a subdomain tracking.mysite.com.

I want to add a link in Order history section for each order, that opens inside a popup to display content of the page ( Similar to Size Chart and other links that open in popups on product page ).

I am able to add link to redirect to the external tracking page but not successful in making it open as a popup using the resources available online. ( I pass Order ID as a hyperlink Parameter )

I am using Shella Theme.

[PageFly-Amelia]

Hi @devansh_wsdn ,

This is Amelia from PageFly - a Landing Page Builder App

You can use a combination of JavaScript and Liquid code. Here's a step-by-step guide to help you achieve this:

Step 1: Create a Popup Template

1. Create a new snippet:

   • In your Shopify admin, go to Online Store > Themes.

   • Click on Actions > Edit code.

   • Under the Snippets folder, click Add a new snippet and name it order-tracking-popup.

2. Add HTML and JavaScript for the Popup:

   • Add the following code to the order-tracking-popup.liquid snippet:

<div id="tracking-popup" style="display:none;">
  <div class="popup-content">
    <span class="close-popup">&times;</span>
    <iframe id="tracking-iframe" src="" width="100%" height="400px"></iframe>
  </div>
</div>

<style>
  #tracking-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .popup-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    max-width: 600px;
    position: relative;
  }
  .close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var links = document.querySelectorAll('.tracking-link');
    var popup = document.getElementById('tracking-popup');
    var iframe = document.getElementById('tracking-iframe');
    var close = document.querySelector('.close-popup');

    links.forEach(function(link) {
      link.addEventListener('click', function(event) {
        event.preventDefault();
        var url = link.getAttribute('href');
        iframe.setAttribute('src', url);
        popup.style.display = 'flex';
      });
    });

    close.addEventListener('click', function() {
      popup.style.display = 'none';
      iframe.setAttribute('src', '');
    });

    window.addEventListener('click', function(event) {
      if (event.target == popup) {
        popup.style.display = 'none';
        iframe.setAttribute('src', '');
      }
    });
  });
</script>

Step 2: Add the Popup Snippet to Your Order History Template

1. Locate the Order History Template:

   • In the Sections folder, find the template file that renders the order history. This might be account-orders.liquid or a similar file.

2. Include the Popup Snippet:

   • Add the following code where you want the "Order Tracking" link to appear:

{% for order in customer.orders %}
  <!-- Your existing order details code -->
  <a href="https://tracking.mysite.com?order_id={{ order.id }}" class="tracking-link">Track Order</a>
{% endfor %}

{% include 'order-tracking-popup' %}

Step 3: Test the Implementation

• Save your changes and test the implementation by going to the Order history section and clicking on the "Track Order" link. The tracking page should open in a popup.

I hope that my solution works for you.

Best regards,

Amelia | PageFly