Custom code preselect product checkout

Ask the community
3

Hi @Ecom_Gabriele,

Here’s a JavaScript solution that can be used to automatically select the product variant based on the URL parameter.

Step-by-Step Guide:

1. Add URL Parameters to Your Landing Pages

  • Modify the URLs of your landing pages so that they include a variant parameter.
  • Example:
    • Landing 1: https://yourdomain.com/checkout?variant=shirt1
    • Landing 2: https://yourdomain.com/checkout?variant=shirt2
    • Landing 3: https://yourdomain.com/checkout?variant=shirt3

2. JavaScript Code to Auto-Select Variant

  • Add the following JavaScript code to the checkout page. This script will automatically select the appropriate variant based on the URL parameter:
<script>
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 select the correct variant option based on the URL parameter
    function selectVariant(variant) {
        // Iterate through all product items
        document.querySelectorAll('.pl-item').forEach(function(item) {
            const productId = item.getAttribute('data-pid');
            
            // Find the correct variant options for this product
            const variantOptions = item.querySelectorAll('.pl-variant-options input[data-variant]');
            
            variantOptions.forEach(function(option) {
                // Match the variant based on the URL parameter value
                if (option.value === variant) {
                    option.checked = true; // Select the variant
                    option.closest('label').classList.add('selected'); // Add selected class to the label
                } else {
                    option.checked = false; // Deselect other variants
                    option.closest('label').classList.remove('selected'); // Remove selected class from other labels
                }
            });
        });
    }

    // Get the variant from the URL
    const variant = getQueryParameter('variant');
    if (variant) {
        selectVariant(variant);
    } else {
        console.warn('Variant parameter not found in URL');
    }
});
</script>

Explanation:

  1. Query Parameter Extraction:

    • The getQueryParameter function extracts the value of the variant parameter from the URL.

  2. Variant Selection:

    • The selectVariant function iterates through each product item (.pl-item).
    • It looks for input elements within .pl-variant-options that have a data-variant attribute.
    • The script checks the value of the variant against the URL parameter. If it matches, the corresponding radio button is selected, and the selected class is added to the label. Any other options are deselected.

  3. Customizing the Code:

    • Ensure the variant parameter in the URL matches the value of the radio buttons in your HTML.
    • The code assumes the presence of the data-variant attribute on the radio buttons.

3. Where to Place the Code:

  • Custom Codes: In your Funnelish page editor, follow these steps:
    1. Click on the three dots (more actions) to the left of the Go back to funnel button in the page editor where you want to add this code.
    2. Navigate to the “Custom Codes” menu.
    3. You’ll find three tabs—choose the “Body HTML” tab.
    4. Paste the JavaScript code into this section.
    5. Save and publish your changes.

4. Customization:

  • Variant Selector Value: Ensure the variant parameter in the URL matches the value of the radio buttons in your HTML markup.
  • Testing: After adding the code, test by navigating to different landing pages with URL parameters like ?variant=1, ?variant=2, etc., and ensure the correct variant is pre-selected on the checkout page.

This setup should allow you to automatically select the correct product variant on the checkout page based on the landing page the customer arrived from, enhancing the user experience.