Custom Code Checkout Support

Technical
1

Hello everyone,

We have a landing page with 3 bundles and a CTA under each. We want to make it so, if the client clicks the cta under Bundle1, Bundle1 becomes highlighted & pre-selected on the checkout.

There was a similar thread here (Custom code pre-select product on checkout) but this one is for variants, we want it for products. Thanks!

2

Hi @Andrea_Chimienti

To achieve the pre-selection and highlighting of a product bundle based on the URL parameter, you can use JavaScript to detect the bundle1, bundle2, or bundle3 parameters in the URL. Here’s how to implement it:

JavaScript Code:

document.addEventListener("DOMContentLoaded", function() {
    // Function to get URL parameter value by name
    function getQueryParameter(name) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }

    // Function to highlight and select the bundle
    function selectBundle(bundleParam) {
        // Iterate through all product items
        document.querySelectorAll('.pl-item').forEach(function(item) {
            const productId = item.getAttribute('data-pid');
            const radioInput = item.querySelector('input.pl-radio');
            
            // Match the product ID based on the bundle
            if ((bundleParam === "bundle1" && productId === "1183950") ||
                (bundleParam === "bundle2" && productId === "1722518") ||
                (bundleParam === "bundle3" && productId === "1769726")) {
                
                // Select the radio button
                radioInput.checked = true;
                // Highlight and add the 'selected' and 'highlight' classes
                item.classList.add('selected', 'highlight');
            } else {
                // Deselect other products and remove 'highlight' and 'selected' classes
                radioInput.checked = false;
                item.classList.remove('selected', 'highlight');
            }
        });
    }

    // Get the bundle from the URL parameter (e.g., ?bundle1=product1)
    const bundle1 = getQueryParameter('bundle1');
    const bundle2 = getQueryParameter('bundle2');
    const bundle3 = getQueryParameter('bundle3');

    if (bundle1) {
        selectBundle('bundle1');
    } else if (bundle2) {
        selectBundle('bundle2');
    } else if (bundle3) {
        selectBundle('bundle3');
    } else {
        console.warn('No bundle parameter found in URL');
    }
});

Explanation:

  1. Get the URL Parameter:

    • The getQueryParameter function retrieves the value of the query parameter (bundle1, bundle2, or bundle3).

  2. Select the Bundle:

    • The selectBundle function finds the corresponding product using the data-pid and checks the appropriate radio button. It also adds the selected class to highlight the product.
    • The logic compares the bundle parameter (bundle1, bundle2, bundle3) and selects the corresponding data-pid for each bundle.

  3. Deselect Other Bundles:

    • When a specific bundle is selected, the others are deselected by removing the selected class and unchecking their radio inputs.

Where to Place the Code:

  1. Custom Codes in Funnelish:
    • Navigate to the page editor for your checkout page in Funnelish.
    • Open the Custom Codes menu by clicking the three dots (more actions).
    • Place this code inside the Body HTML tab.
    • Save and publish the changes.

Customization:

  • Product IDs: Ensure the data-pid in the HTML matches the correct product IDs for your bundles (1183950, 1722518, and 1769726 in the example).
  • Bundle Parameters: Modify the URL parameters to match the exact parameter names and values you’re using on the landing pages.

Testing:

  • Test by visiting the checkout page with the following URLs:

    • https://yourdomain.com/checkout?bundle1=product1
    • https://yourdomain.com/checkout?bundle2=product2
    • https://yourdomain.com/checkout?bundle3=product3

    Each should highlight and pre-select the corresponding product based on the parameter in the URL.