Hi, I have a funnel with 12 different landing pages that redirect to one checkout, each landing page has the same product but a different variant, how can I do to pre-select the product in the checkout based on the landing they come from?
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:
Query Parameter Extraction:
The getQueryParameter function extracts the value of the variant parameter from the URL.
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.
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:
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.
Navigate to the “Custom Codes” menu.
You’ll find three tabs—choose the “Body HTML” tab.
Paste the JavaScript code into this section.
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.