Custom button in product page not appearing on mobile view (custom code included)

Hello, 

I have some custom code added to my website, through code injection on main Store page to affect products where I want to add a button that opens a lightbox with product dimensions. I have that part working almost fully but when I switch to mobile view that trigger disappears. When I look at the HTML I see that a whole new section for the products turns on and replaces it and that doesn't include my custom trigger. I hope someone could help me on this one. 

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const productPriceElement = document.querySelector('.variant-option-title');

    if (productPriceElement && isProductPage()) {
      const productDimensionsLink = document.createElement('a');
      productDimensionsLink.href = '/print-dimensions'; // Replace with the URL of your lightbox-specific page
      productDimensionsLink.textContent = 'Product Dimensions';
      productDimensionsLink.classList.add('lightbox-trigger');

      productPriceElement.parentNode.insertBefore(productDimensionsLink, productPriceElement);

      productDimensionsLink.addEventListener('click', function (e) {
        e.preventDefault();
        loadLightboxContent(productDimensionsLink.href);
      });
    }
  });

  function isProductPage() {
    // Get the current page URL
    const currentPageURL = window.location.href;

    // Check if the URL contains the '/store/p/' pattern
    return currentPageURL.includes('/store/p/');
  }

  function loadLightboxContent(url) {
    const lightbox = document.createElement('div');
    lightbox.classList.add('custom-lightbox');

    const closeButton = document.createElement('span');
    closeButton.classList.add('close-button');
    closeButton.innerHTML = '&times;'; // Add 'x' symbol to the close button
    closeButton.addEventListener('click', closeLightbox);

    lightbox.appendChild(closeButton);

    // Load the content into the lightbox using an iframe
    const iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allowfullscreen', 'true');
    lightbox.appendChild(iframe);

    document.body.appendChild(lightbox);
  }

  function closeLightbox() {
    const lightbox = document.querySelector('.custom-lightbox');
    if (lightbox) {
      document.body.removeChild(lightbox);
    }
  }
</script>


<style>
  /* Style for the lightbox trigger (link) */
  .lightbox-trigger {
    text-decoration: underline;
        font-size: 16px;
  }
  
 /* Style for the lightbox content (iframe) */
  .custom-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  iframe {
    /* Modify the max-width and max-height properties as needed */
    vertical-align: middle;
    max-width: 95%;
    max-height: 100%;
    width: 600px;
    height: 300px;
  }

  /* Style for the close button */
  .close-button {
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    font-size: 30px;
    color: #fff;
  }
</style>

Best,

Bobby

Hi,

Can you share link to this product? We can check easier

Hi @tuanphan,
I thought I included it, here is the link https://boyangeorgiev.com/store/p/empire-state-building-nyc-print
thank you for looking into it!

Hey @tuanphan have you had a chance to look at this?

It's not that it's gone, it's that your code doesn't run on mobile

Here is code structure on desktop

here is code structure on mobile, no lightbox-trigger tag

oh okay thanks, do you have a suggestion on how to also be able to run that in the mobile section?