An ajax-powered product details modal

Update: 03/31/2023 - Revised the modal for better responsive behavior. Added ESC key support for closing the modal.

1. Create a 🟦 Products collection with fields for all the desired product data.

2. Create a 🟦 Products collection list on a static page and place a Product Link link block inside the collection item, linking to the item's corresponding collection page where the modal content will live. Style the clickable product preview inside this link block.

3. Create a div on the 🟦 Products collection template page with the ID #modal-content. Place & style the data you'd like to appear in the modal inside that div.

4.Create a modal on the static page (outside of the 🟦 Products collection) containing a div with the ID #ajax-container, which defines where the modal content will be injected on click.

5. Apply an interaction to the Product Link class that will trigger the modal. Set preload to prefetch.

6. Create a Modal Trigger element inside the modal wrapper but behind the modal content, so that the user will click on it whenever they click outside of the modal itself. Apply an interaction that will close the modal on click.

7. Add the Close Modal class to the Modal Trigger element to re-enable scrolling when the modal is dismissed.

8. Paste the following Javascript at the end of the Body of the static page.

<script>
$(document).on('click', '.product-link', function(event) {
 // Prevent link from opening product page
 event.preventDefault()
 // Disengage scrolling when modal is opened
 $('body').css('overflow', 'hidden');
 //Get URL from product link
 var postURL = $(this).attr('href');
 console.log(postURL);
 loadDoc(postURL);  
});

// Re-engage scrolling, clear modal after close animation finishes (200ms)
$('.close-modal').click(function() {
 $('body').css('overflow', 'auto');
 setTimeout(() => { document.getElementById('ajax-container').innerHTML = ''; }, 200);
});

// Retrieve #model-content from product page
// Inject #modal-content into #ajax-container 
function loadDoc(postURL) {
 $( "#ajax-container" ).load( postURL + " #modal-content" );
}

// Close on ESC button
$('.close-modal') && $(document).keydown(function (e) {
 if (e.key === 'Escape') {
  $('.close-modal').click();
 }
});
</script>

9. Treat yourself to an ice cold glass of Yoo-Hoo chocolatey drink. You are done.