Lightbox - Dynamic Prefill

Hi, updating this thread with a new question.

We have products that have dynamically changing SKU's based on product options chosen.

The form currently pulls the SKU from the page on first load, however I need the SKU to populate the form whenever the SKU changes OR I need the form itself to refresh so that the SKU pulled will be the new SKU.Is this possible?

Additionally, we have some SKUs that are bundled with other SKUs, so they will be "SKU+SKU."

However, the form only pulls the following into the SKU field: "SKU SKU", removing the plus symbol.

Is there a way to ensure that ALL characters within the SKU are pulled into the form?

Hi Brandster,

Thank you for reaching out to Jotform Support. After a bit of experimenting, I was able to get the code working with the current SKU each time. When testing locally, I did have to set up my page slightly differently, but I've tried to adjust my code to fit what you have on your page when sharing it here. One issue I had, that I saw was happening on your page as well at the moment, was that each time the SKU changes, an additional popup is opened when trying to open the form. The only way I was able to solve this was to basically recreate the form link each time the sku variable changes and replacing the old link with that new copy. I also made the creation of the form variable into a function, which is then called after each change of the SKU.

For the plus sign, unfortunately, this is expected behavior. I'm not sure about the reason, but plus signs in prefill values does get replaced by spaces. The best workaround I could find for this was to simply replace the plus sign in the string after getting the value from skuElement. For the part of your code where the sku value is set, I simply added .replace(). I used a so-called fullwidth plus sign in my code below, but you could use other characters as well.

Here's the adjusted code. This would be replacing the whole current DOMContentLoaded event listener.

document.addEventListener('DOMContentLoaded', function () {

    var formLink = document.querySelector('.lightbox-222403990475054');

    var skuElement = document.querySelector('dd.productView-info-value.productView-info-value--sku');

    var sku = skuElement ? skuElement.textContent.trim().replace("+", "＋") : '';



    // Observe changes to the SKU element

    var observer = new MutationObserver(function (mutations) {

        mutations.forEach(function (mutation) {

            if (mutation.type === 'childList' || mutation.type === 'characterData') {

                //Create a clone of the link element and replace original

                var old_element = document.getElementsByClassName("lightbox-222403990475054")[0];

                var new_element = old_element.cloneNode(true);

                old_element.parentNode.replaceChild(new_element, old_element);

                // Update the SKU

                sku = skuElement.textContent.trim().replace("+", "＋");

                // Create a new form variable with the new SKU

                createJFL(sku);

            }

        });

    });



    // Configuration of the observer:

    var config = { attributes: true, childList: true, characterData: true, subtree: true };



    // Start observing the SKU element for changes

    observer.observe(skuElement, config);



    // Function to create new form variable

    function createJFL(currentSku) {

        var JFL_222405778878168 = new JotformFeedback({

            formId: '222405778878168',

            base: 'https://form.jotform.com/',

            windowTitle: 'Request Free Catalog / Price List',

            backgroundColor: '#FFA500',

            fontColor: '#FFFFFF',

            type: '1',

            height: 700,

            width: 700,

            openOnLoad: false,

            iframeParameters: {

                'sku': currentSku,

                'url': window.location.href.split('/')[2]

            },

        });

    }

    // Create initial form

    createJFL(sku);

});

Please give this a try. But as I mentioned, my test environment is quite different from your full website, so it's possible that some things need to be changed in the above code.

If there are any issues or questions, please don't hesitate to reach out.

So this DOES work; however, after making the necessary changes to the code so that it targets each form individually, the forms will not open.

If I have only 1 of the forms operating in the new code, then it works as intended, but the other form is obviously still using the old code, and it does not pull in any new data.

Hi Brandster,

Thanks for getting back to us. Can you share with us the link to the webpage where the form is embedded? Please leave the embed codes applied so we can make some tests and see what's going on further.

After we hear back from you, we’ll have a better idea of what’s going on and how to help.

Hi Brandster,

I made an updated version of the code that updates both of the forms. On my side it allowed both of the forms to use the updated SKU value.

document.addEventListener('DOMContentLoaded', function () {

    var skuElement = document.querySelector('dd.productView-info-value.productView-info-value--sku');

    var sku = skuElement ? skuElement.textContent.trim().replace("+", "＋") : '';



    // Observe changes to the SKU element

    var observer = new MutationObserver(function (mutations) {

        mutations.forEach(function (mutation) {

            if (mutation.type === 'childList' || mutation.type === 'characterData') {

                //Create a clone of the link element and replace original

                var old_element54 = document.getElementsByClassName("lightbox-222403990475054")[0];

                var new_element54 = old_element54.cloneNode(true);

                old_element54.parentNode.replaceChild(new_element54, old_element54);

                //Do the same for the other form

                var old_element68 = document.getElementsByClassName("lightbox-222405778878168")[0];

                var new_element68 = old_element68.cloneNode(true);

                old_element68.parentNode.replaceChild(new_element68, old_element68);



                // Update the SKU

                sku = skuElement.textContent.trim().replace("+", "＋");

                // Create a new form variable with the new SKU

                createJFLs(sku);

            }

        });

    });



    // Configuration of the observer:

    var config = { attributes: true, childList: true, characterData: true, subtree: true };



    // Start observing the SKU element for changes

    observer.observe(skuElement, config);



    // Function to create new form variables

    function createJFLs(currentSku) {

        var JFL_222405778878168 = new JotformFeedback({

            formId: '222405778878168',

            base: 'https://form.jotform.com/',

            windowTitle: 'Request Free Catalog / Price List',

            backgroundColor: '#FFA500',

            fontColor: '#FFFFFF',

            type: '1',

            height: 700,

            width: 700,

            openOnLoad: false,

            iframeParameters: {

                'sku': currentSku,

                'url': window.location.href.split('/')[2]

            },

        });

        window.JFL_222403990475054 = new JotformFeedback({

            formId: '222403990475054',

            base: 'https://form.jotform.com/',

            windowTitle: 'Request Free Catalog / Price List - Main',

            background: '#FFA500',

            fontColor: '#FFFFFF',

            type: '1',

            iframeParameters: {

                'sku': currentSku,

                'url': window.location.href.split('/')[2]

            },

            height: 800,

            width: 700,

            openOnLoad: false

        });

    }

    // Create initial forms

    createJFLs(sku);

});

Would you be able to give this code a try to see if it works on your page as well?

I've installed the code on the website (https://brandster-sandbox.mybigcommerce.com/alfresco-alxe-36-36-built-in-grill/).

The script is still preventing the forms from opening.

You can find the script on the page here:

#topOfPage > div.body > div.container > div.productView-scope > div.productView > div.productView-detailsWrapper > div > section:nth-child(3) > div:nth-child(3) > div > div > div > div > script

Let me know if I've done anything incorrectly.

Hi Brandster,

I'm sorry you're having trouble with this. I did test the code my colleague Lars, provided and I was able to replicate the issue. I'm getting an error message that 'JotformFeedBack is not defined', which is the same error shown in your website's console log. Adding the script below into your website, should help fix the issue:

<script src ="https://form.jotform.com/static/feedback2.js" type="text/javascript"></script>

Give it a try and let us know how it goes.

That works, thanks!

I'll chime in here again if I run into any additional issues, but we should be good to go now.

So doing some more testing with the new script, seems to work fine on BigCommerce :)

I have a new problem though, we also run this same form on a couple of Shopify Stores.

Here's the store in question that I'm working to get this made for https://trueflamegrills.com/collections/grills/products/trueflame-40-grill-tf-40-grill

Trying to modify the working script for those stores does not seem to be working. For reference, here's the form script/code that we currently have on the shopify store:

<style>a{color:#4496f6; cursor:pointer;}</style>

<hr>

<div>

<span style="display: block; margin-bottom: 10px; font-size: 16px;">

<a class="btn lightbox-222403990475054" style="text-decoration: underline;">

<strong>Request Free Catalog / Price List</strong>

</a>

</span>

<span style="display: block; margin-bottom: 10px; font-size: 16px;">

<a class="btn lightbox-222405778878168" style="text-decoration: underline;">

<strong>Request Contract / To The Trade Discount</strong>

</a>

</span>

</div>

<hr>

<!-- JotForm Scripts (old) -->

<script src ="https://form.jotform.com/static/feedback2.js" type="text/javascript"></script>

<script type="text/javascript">

var JFL_222403990475054 = new JotformFeedback({

formId: '222403990475054',

base: 'https://form.jotform.com/',

windowTitle: 'Request Free Catalog / Price List - Main',

onload: 'window.parent.scrollTo(0,0)',

background: '#FFA500',

fontColor: '#FFFFFF',

type: '1',

iframeParameters: {

'sku': document.querySelector('.product-block--sku > div > span').innerHTML,

'url': window.location.href.split('/')[2]

},

height: 800,

width: 700,

openOnLoad: false

});

</script>

<script src ="https://form.jotform.com/static/feedback2.js" type="text/javascript"></script>

<script type="text/javascript">

var JFL_222405778878168 = new JotformFeedback({

formId: '222405778878168',

base: 'https://form.jotform.com/',

windowTitle: 'Request Contract / To The Trade Discount - Main',

background: '#FFA500',

fontColor: '#FFFFFF',

type: '1',

iframeParameters: {

'sku':document.querySelector('.product-block--sku > div > span').innerHTML,

'url': window.location.href.split('/')[2]

},

height: 800,

width: 700,

openOnLoad: false

});

</script>

And here is the modified version of the updated script for Shopify:

<style>a{color:#4496f6; cursor:pointer;}</style>

<hr>

<div>

<span style="display: block; margin-bottom: 10px; font-size: 16px;">

<a class="btn lightbox-222403990475054" style="text-decoration: underline;">

<strong>Request Free Catalog / Price List</strong>

</a>

</span>

<span style="display: block; margin-bottom: 10px; font-size: 16px;">

<a class="btn lightbox-222405778878168" style="text-decoration: underline;">

<strong>Request Contract / To The Trade Discount</strong>

</a>

</span>

</div>

<hr>



<!-- JotForm Scripts -->

<script src ="https://form.jotform.com/static/feedback2.js" type="text/javascript"></script>

<script>

document.addEventListener('DOMContentLoaded', function () {

var skuElement = document.querySelector('.product-block--sku > div > span').innerHTML; 

var sku = skuElement ? skuElement.textContent.trim().replace("+", "＋") : '';



// Observe changes to the SKU element

var observer = new MutationObserver(function (mutations) {

mutations.forEach(function (mutation) {

if (mutation.type === 'childList' || mutation.type === 'characterData') {

//Create a clone of the link element and replace original

var old_priceList = document.getElementsByClassName("lightbox-222403990475054")[0];

var new_priceList = old_priceList.cloneNode(true);

old_priceList.parentNode.replaceChild(new_priceList, old_priceList);

//Do the same for the other form

var old_proContract = document.getElementsByClassName("lightbox-222405778878168")[0];

var new_proContract = old_proContract.cloneNode(true);

old_proContract.parentNode.replaceChild(new_proContract, old_proContract);



// Update the SKU

sku = skuElement.textContent.trim().replace("+", "＋");

// Create a new form variable with the new SKU

createJFLs(sku);

}

});

});



// Configuration of the observer:

var config = { attributes: true, childList: true, characterData: true, subtree: true };



// Start observing the SKU element for changes

observer.observe(skuElement, config);



// Function to create new form variables

function createJFLs(currentSku) {

var JFL_222405778878168 = new JotformFeedback({

formId: '222405778878168',

base: 'https://form.jotform.com/',

windowTitle: 'Request Contract / To The Trade Discount',

backgroundColor: '#FFA500',

fontColor: '#FFFFFF',

type: '1',

height: 700,

width: 700,

openOnLoad: false,

iframeParameters: {

'sku': currentSku,

'url': window.location.href.split('/')[2]

},

});

window.JFL_222403990475054 = new JotformFeedback({

formId: '222403990475054',

base: 'https://form.jotform.com/',

windowTitle: 'Request Free Catalog / Price List',

background: '#FFA500',

fontColor: '#FFFFFF',

type: '1',

height: 700,

width: 700,

openOnLoad: false,

iframeParameters: {

'sku': currentSku,

'url': window.location.href.split('/')[2]

}            

});

}

// Create initial forms

createJFLs(sku);

});

</script>

Hi Brandster,

Thanks for getting back to us. I'm sorry you're having trouble with this. I understand that you're trying to Add Your Form to Shopify. Let me walk you through it:

1. In Form Builder, in the orange navigation bar on top, click on Publish.

2. In the section on the left, click on Platforms.

3. Enter Shopify on Search Bar and select it.

4. Click on Copy Code button to copy the embedded code of the form.

Now, you'll need to embed the code to add your form to Shopify.

5. Log in to your Shopify account, and click on Pages under the Online Store section.

6. Under Pages, click on the page where you want to embed/display the form.

7. In the Editor, click on the Show HTML icon on the right side of the other group of icons.

8. Paste your Form's Embed Code where you want the form to appear in the HTML box.

9. Click on the Save Button at the top or bottom off the page and that's it. You're done.

I tested your Shopify Code in my end and it worked properly. Check out the screencast below:

If the above method did not work it's possible that your scripts overlap with the scripts of the website that you embed your form. You can also check out our Jotform Solutions Partner Directory for a list of consultants who can help you with this.

Give it a try and let us know how it goes.

So we currently have the JotForms integrated very similarly to how we have them integrated on BigCommerce. So the issue I'm having is NOT how to integrate the form, its how best can I modify the previous script for Shopify (if at all).

The reason being that when I go to update the script with the new Dynamic SKU functionality, the form refuses to open with the new code.

I attached the code that we have currently integrated on the link provided, but ideally I want to integrate the new jotform script so functionality of these forms is standard across our e-commerce sites.

Hi Brandster,

Thanks for the clarification, and I'm sorry you're still having trouble with this. Can you reshare the code that's currently integrated? Unfortunately, it failed to be included in your last reply for some reason.

After we hear back from you, we'll be able to help you more with this.

Here's the store in question that I'm working to get this made for:
https://trueflamegrills.com/collections/grills/products/trueflame-40-grill-tf-40-grill

These are the current scripts live on the website:

<style>a {color: #4496f6;cursor: pointer;}</style>

<hr>

<div>

    <span style="display: block; margin-bottom: 10px; font-size: 16px">

        <a class="btn lightbox-222403990475054" style="text-decoration: underline">

            <strong>Request Free Catalog / Price List</strong>

        </a>

    </span>

    <span style="display: block; margin-bottom: 10px; font-size: 16px">

        <a class="btn lightbox-222405778878168" style="text-decoration: underline">

            <strong>Request Contract / To The Trade Discount</strong>

        </a>

    </span>

</div>

<hr>

<!-- Jotform Scripts (old) -->

<script src="https://form.jotform.com/static/feedback2.js" type="text/javascript"></script>

<script type="text/javascript">

    var JFL_222403990475054 = new JotformFeedback({

        formId: "222403990475054",

        base: "https://form.jotform.com/",

        windowTitle: "Request Free Catalog / Price List - Main",

        onload: "window.parent.scrollTo(0,0)",

        background: "#FFA500",

        fontColor: "#FFFFFF",

        type: "1",

        iframeParameters: {

            sku: document.querySelector(".product-block--sku > div > span").innerHTML, 

            url: window.location.href.split("/")[2],

        },

        height: 800,

        width: 700,

        openOnLoad: false,

    });

</script>

<script src="https://form.jotform.com/static/feedback2.js" type="text/javascript"></script>

<script type="text/javascript">

    var JFL_222405778878168 = new JotformFeedback({

        formId: "222405778878168",

        base: "https://form.jotform.com/",

        windowTitle: "Request Contract / To The Trade Discount - Main",

        background: "#FFA500",

        fontColor: "#FFFFFF",

        type: "1",

        iframeParameters: {

            sku: document.querySelector(".product-block--sku > div > span").innerHTML,

            url: window.location.href.split("/")[2],

        },

        height: 800,

        width: 700,

        openOnLoad: false,

    });

</script>



Here is the updated script:

<style>a{color: #4496f6;cursor: pointer;}</style>

<hr>

<div>

    <span style="display: block; margin-bottom: 10px; font-size: 16px;">

        <a class="btn lightbox-222403990475054" style="text-decoration: underline;">

            <strong>Request Free Catalog / Price List</strong>

        </a>

    </span>

    <span style="display: block; margin-bottom: 10px; font-size: 16px;">

        <a class="btn lightbox-222405778878168" style="text-decoration: underline;">

            <strong>Request Contract / To The Trade Discount</strong>

        </a>

    </span>

</div>

<hr>





<!-- New Jotform Scripts -->

<script src="https://form.jotform.com/static/feedback2.js" type="text/javascript"></script>

<script>

    document.addEventListener('DOMContentLoaded', function () {

        var skuElement = document.querySelector('.product-block--sku > div > span').innerHTML;

        var sku = skuElement ? skuElement.textContent.trim().replace("+", "＋") : '';





        // Observe changes to the SKU element

        var observer = new MutationObserver(function (mutations) {

            mutations.forEach(function (mutation) {

                if (mutation.type === 'childList' || mutation.type === 'characterData') {

                    //Create a clone of the link element and replace original

                    var old_priceList = document.getElementsByClassName("lightbox-222403990475054")[0];

                    var new_priceList = old_priceList.cloneNode(true);

                    old_priceList.parentNode.replaceChild(new_priceList, old_priceList);

                    //Do the same for the other form

                    var old_proContract = document.getElementsByClassName("lightbox-222405778878168")[0];

                    var new_proContract = old_proContract.cloneNode(true);

                    old_proContract.parentNode.replaceChild(new_proContract, old_proContract);





                    // Update the SKU

                    sku = skuElement.textContent.trim().replace("+", "＋");

                    // Create a new form variable with the new SKU

                    createJFLs(sku);

                }

            });

        });





        // Configuration of the observer:

        var config = { attributes: true, childList: true, characterData: true, subtree: true };





        // Start observing the SKU element for changes

        observer.observe(skuElement, config);





        // Function to create new form variables

        function createJFLs(currentSku) {

            var JFL_222405778878168 = new JotformFeedback({

                formId: '222405778878168',

                base: 'https://form.jotform.com/',

                windowTitle: 'Request Contract / To The Trade Discount',

                backgroundColor: '#FFA500',

                fontColor: '#FFFFFF',

                type: '1',

                height: 700,

                width: 700,

                openOnLoad: false,

                iframeParameters: {

                    'sku': currentSku,

                    'url': window.location.href.split('/')[2]

                },

            });

            window.JFL_222403990475054 = new JotformFeedback({

                formId: '222403990475054',

                base: 'https://form.jotform.com/',

                windowTitle: 'Request Free Catalog / Price List',

                background: '#FFA500',

                fontColor: '#FFFFFF',

                type: '1',

                height: 700,

                width: 700,

                openOnLoad: false,

                iframeParameters: {

                    'sku': currentSku,

                    'url': window.location.href.split('/')[2]

                }

            });

        }

        // Create initial forms

        createJFLs(sku);

    });

</script>

Hi Brandster,

I just checked your website and both button are, currently, working as shown in the screenshot.

Is the current website still using the old code? If yes, could you add a new button with the new script code so that we can check out the error?

Once we hear back from you, we'll be able to help you with this.

Here is a test product with the new forms attached. Please excuse the SKU not updating on the page (I believe it is not updating because this product is a draft product). Aside from that, the forms do not open, and I'm not entirely sure why.

https://cq01y53cxptw6xef-79701803283.shopifypreview.com/products_preview?preview_key=abb768ae9790d6b425e92ed126c8fd17

Hi Brandster,

Thanks for getting back to us. I’m sorry you're having difficulties with this. I checked your test product link and tested it to see if I could replicate the issue, and I ran into the same issue. When I click both Request Free Catalog / Price List and Request Contract / To The Trade Discount, nothing happens.

I understand the issue, but I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Hi Brandster,

We really appreciate your patience and understanding while we’re looking into this. Can you please replace this block of code from your updated script?

Replace that with the ones below:

var skuElement = document.querySelector('.product-block--sku > div > span');

var sku = skuElement ? skuElement.innerHTML.trim().replace("+", "＋") : '';

Give it a try and if the same thing happens again, we'll investigate it more to see if we can figure out what's going on.

That works!

I'll keep testing around with different products (especially products with the + symbol), but it looks like the form is functioning as intended.

So just tested with a product with multiple SKUs and + symbols, and the form opens, pulls in the SKU, replaces only 1 of the + symbols and removes the rest of them. Ideally, ALL of the + symbols would be replaced and appear within the form, but only the 1st is being replaced while the others are simply removed.

https://screenrec.com/share/oOuK4QENkU

Just tested the BigCommerce version of the script, and it also is not pulling the SKU while replacing ALL of the + symbols and only is replacing the first symbol: https://brandster-sandbox.mybigcommerce.com/36-s-series-grill-package---includes-grill-w/-cart-charcoal-tray-smoker-box-and-rotisserie-kit---c2sl36-c1s36ct-cchtray12-csbx/

So, I found a solution with the following:

replacing "+" with /\+/g

var sku = skuElement ? skuElement.innerHTML.trim().replace(/\+/g, "＋") : '';

sku = skuElement.textContent.trim().replace(/\+/g, "＋");

let me know if there's a better way to accomplish this.

Hi Brandster,

Thanks for getting back to us. I checked your test product link and tested it to see if I could replicate the issue, but I can confirm now that the forms are now showing as expected with the right SKU. Check out the screencast below to see my results:

Can you try it again and see how it goes? If you run into the same issue again, let us know, and we'll do some more testing to see what's going on. 

In the meantime, let us know if you have any other questions.