How to load page in a modal

Table of Contents

• Overview
• Key Features
• Creating a Modal
• One-Time Pop-Up for New Visitors

Overview

Creating modals in AmeriCommerce themes is straightforward and flexible, allowing you to enhance user interaction by displaying content in a pop-up window. This guide will show you how to create modals and configure them as one-time pop-ups for new visitors.

Key Features

• Easy to Implement: Use simple HTML markup to create modals.
• Customizable: Add titles and dynamic content to modals.
• Engaging User Experience: Provide important information or promotions in a non-intrusive manner.
• One-Time Pop-Up: Display modals only once for new visitors to improve user experience.

Creating a Modal

To have an item turn into a clickable modal, you just need to add the following three things to the HTML markup:

• class="quick-view"
  • The "quick-view" class needs to be added into the element that you want the customer to click on.
• data-href="/"
  • The item needs a data-href attribute, pointed to the page you want to show in a modal. Note: This will only work for pages on the same domain. It's not possible to link an external site into a modal in this manner.
• data-title="Modal Title"
  • This is optional, but sets the title on the modal itself.

Here are a couple examples. Syntax from this KB will be in bold:

• <p class="quick-view" data-href="/schematic-drawing" data-title="Data Schematic">Click here to see a schematic of this item!</p>
  • If you had a schematic drawing uploaded on the storefront, you could load this in a modal window with the above syntax. The data-href attribute would need to be updated to the correct path.
• <button class="quick-view" data-href="/store/shopcart.aspx" data-title="Shopping Cart">My Cart</button>
  • This would be a way you can load the entire shopping cart page in a modal.

As you can see, it is relatively easy to use the modal functionality for the AmeriCommerce online stores platform.

One-Time Pop-Up for New Visitors

To provide the modal as a one-time pop-up for new visitors, you can simply add a script to your theme. This script will check if the visitor is new and display the modal accordingly.

Here are the steps to implement a pop-up for new visitors:

1. Navigate to Themes, click on the Edit button, then go to Header > HTML Editor.
2. Copy and paste the following script into the HTML editor, changing "/your-modal-page" to the page you want to display:

<script>
document.addEventListener("DOMContentLoaded", function() {
    if (!localStorage.getItem('modalShown')) {
        localStorage.setItem('modalShown', 'true');
        showModal();
    }
});

function showModal() {
    var modal = document.createElement('div');
    modal.classList.add('quick-view');
    modal.setAttribute('data-href', '/your-modal-page');
    modal.setAttribute('data-title', 'Welcome!');
    document.body.appendChild(modal);
    modal.click();
}
</script>

This script will ensure that the modal is shown only once for new visitors. It uses localStorage to track if the modal has been shown before.