Jump to content

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

Recommended Posts

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

 

 

Screenshot 2023-07-26 at 15.13.42.png

Screenshot 2023-07-26 at 15.12.51.png

Photographer and 3D Animation Artist - https://boyangeorgiev.com/

Link to comment
  • Replies 5
  • Views 688
  • Created
  • Last Reply

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.