Articles on: BFG

BFG Cascade - Smart Retail Stock Locator Installation Guide

This guide provides step-by-step instructions for installing the BFG Cascade Smart Retail Stock Locator on your eCommerce website. By integrating Cascade, customers can easily locate retailers with available stock directly from your product pages.

Prerequisites

Before proceeding with the installation, ensure:

Your company is fully onboarded with BFG Cascade.
You have access to edit your website's HTML, JavaScript, and CSS files.

Step 1: Adding the JavaScript Code

The following JavaScript code enables the Cascade modal to display when users interact with a designated link or button.

<script>
window.onload = function() {
    // Event listener for opening the modal
    document.querySelector(".open-dealer-locations-finder").addEventListener('click', function() {
        document.querySelector(".responsive-iframe-wrapper").style.display = "grid";
        document.body.classList.add("modal-open");
    });

    // Event listener for closing the modal
    document.querySelector(".responsive-iframe-wrapper").addEventListener('click', function(event) {
        const element = event.target;
    
        // Check if the clicked element is not a close button and not inside .responsive-iframe
        if (!element.classList.contains("close-btn")) {
            if (element.closest(".responsive-iframe")) {
                return;
            }
        }
    
        document.querySelector(".responsive-iframe-wrapper").style.display = "none";
        document.body.classList.remove("modal-open");
    });
};
</script>

Add this script to your product page or include it in your global JavaScript file.

Step 2: Adding the CSS Code

The following CSS ensures the modal and its components are styled correctly.

.modal-open {
    position: fixed;
    width: 100%;
}

.responsive-iframe-wrapper {
    display: none;
    position: fixed;
    z-index: 9995;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    
    .close-btn {
        position: absolute;
        right: 2rem;
        top: calc(40px + 2rem);
        cursor: pointer;
        font-weight: bold;
        z-index: 1000;
    }
    
    > div {
        position: relative;
    }
}

.responsive-iframe {
    width: 1400px;
    margin: 40px auto;
    position: relative;
    background-color: white;
    
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

Add this CSS code to your website's stylesheet.

Step 3: Adding the Link Element

Add the following HTML snippet to your product pages where you want the Cascade modal to be triggered:

<a href="#" class="open-dealer-locations-finder"><i class="fa-solid fa-up-right-from-square"></i> In Stock at Dealers</a>
<div class="responsive-iframe-wrapper">
    <div>
        <i class="fa-regular fa-xmark close-btn"></i>
        <div class="responsive-iframe">
            <iframe src="[YOUR_CASCADE_IFRAME_URL]?upc=[upc_code]" title="Dealer locations" width="1200" height="600">
            </iframe>
        </div>
    </div>
</div>

Replace [YOUR_CASCADE_IFRAME_URL] with the URL provided by BFG Cascade.
Replace [upc_code] with the appropriate UPC code dynamically from your product data.

Step 4: Testing the Integration

Navigate to a product page on your website.
Click the In Stock at Dealers link.
Verify that the modal opens, displays the iframe content, and closes correctly when interacting with the close button or outside the modal.

Troubleshooting

Ensure the JavaScript, CSS, and HTML code snippets are correctly implemented.
Check the browser console for any JavaScript errors.
Verify that the iframe URL is correct and accessible.

If you encounter any issues, contact BFG Cascade support for assistance.

Updated on: 01/02/2025

Was this article helpful?

Thank you!