Advanced Integration with Custom JavaScript, demo #1
Widget Preview
Loading widget...
- Widget Type
- Wheel Fitment Finder
Demo Details:
This demo showcases the powerful Custom JavaScript feature (paid tier) by solving a real client integration
challenge with an elegant automated solution.
The Business Problem:
E-commerce platforms often use internal parameter IDs rather than human-readable values in their product
filters. A tire/wheel shop needs to link from the widget to their catalog, but faces this challenge:
- Widget Returns: Bolt pattern values like "5x112", "4x100", "6x139.7"
- Shop Requires: Internal parameter IDs like "5166", "5201", "5449"
- Issue: Shop's search system doesn't support building queries with parameter names—only numeric IDs
Without a solution, every "Shop These Wheels" link would fail to filter products correctly, resulting in
poor user experience and lost sales.
The Solution: Custom JavaScript Mapping
The Custom JavaScript field enables automatic real-time transformation of widget output to match your shop's
requirements:
// Bolt pattern to Shop ID mappings
const BOLT_PATTERN_MAPPINGS = {
'5x112': '5166',
'4x100': '5201',
'6x139.7': '5449',
// ... 30+ mappings included
};
// Automatically replaces bolt patterns in all links
function replaceBoltPatterns() {
document.querySelectorAll('a[href]').forEach(link => {
// Find filter_traits[5123]=5x112
// Replace with filter_traits[5123]=5166
});
}
How It Works:
- Custom Output Template generates links with bolt pattern values:
<a href="https://shop.com/wheels?filter_traits[5123]={{ technical.bolt_pattern }}">
Shop These Wheels - {{ technical.bolt_pattern }}
</a>
- Custom JavaScript automatically intercepts and transforms URLs:
- Detects bolt pattern parameter in links
- Looks up corresponding shop ID from mapping table
- Replaces value before user clicks
- Works with dynamic content via MutationObserver
- Result: User clicks "Shop 5x112 Wheels" → lands on correctly filtered shop page showing only 5x112
products
Technical Features:
- ✅ Real-time URL transformation - No server-side changes needed
- ✅ Dynamic content support - Works with AJAX-loaded results
- ✅ Comprehensive mapping - Handles 30+ bolt pattern variations including Central Lock
- ✅ Error-proof - Unmapped patterns pass through unchanged
- ✅ Performance optimized - Minimal overhead, instant execution
- ✅ Console logging - Debug-friendly with replacement tracking
Use Cases:
- E-commerce Integration: Map any widget output to shop-specific parameter systems
- Legacy System Compatibility: Bridge modern widget with older catalog platforms
- Multi-shop Deployments: Different ID mappings per domain/language
- Custom Analytics: Inject tracking codes into generated links
- URL Standardization: Transform URLs to match SEO or routing requirements
- Third-party API Integration: Adapt widget output for external product databases
Why Custom JavaScript?
This paid feature provides unlimited flexibility for complex integrations that go beyond standard widget
configuration. You can:
- Transform any widget output in real-time
- Integrate with any e-commerce platform or CMS
- Implement business-specific logic and validation
- Create custom user interactions and tracking
- Solve unique technical challenges without waiting for feature requests
Implementation Complexity: Medium - requires JavaScript knowledge but provides complete control over widget
behavior and integration logic.
ROI Impact: High - converts a broken integration into a seamless user experience, directly improving
conversion rates and reducing cart abandonment from incorrect product filtering.
Try clicking the "Shop These Wheels" buttons to see how bolt patterns are automatically transformed into the
correct shop parameter IDs, creating a flawless shopping experience.
📝 Custom Output Template
This custom template shows how to display widget data with dynamic variables:
<a class="inline-block rounded-md bg-white px-3.5 py-2 text-sm font-semibold text-gray-900 ring-1 shadow-xs ring-gray-300 ring-inset hover:bg-gray-50" href="https://example.com/pol_m_Felgi-152.html?filter_traits[5123]={{ technical.bolt_pattern }}" target="_blank" class="btn btn-primary">Shop These Wheels - {{ technical.bolt_pattern }}</a>⚙️ Custom JavaScript
Custom JavaScript code for enhanced widget functionality:
(function() {
'use strict';
// Bolt pattern to Shop ID mappings
const BOLT_PATTERN_MAPPINGS = {
'3x112': '7816',
'4x98': '5124',
'4x100': '5201',
'4x108': '5177',
'4x110': '7815',
'4x114.3': '5554',
'5x98': '5583',
'5x100': '5201',
'5x105': '5415',
'5x108': '5180',
'5x110': '5465',
'5x112': '5166',
'5x114.3': '5162',
'5x115': '5418',
'5x118': '5226',
'5x120': '5155',
'5x120.65': '8034',
'5x127': '5377',
'5x130': '5385',
'5x139.7': '5533',
'5x150': '9043',
'5x165.1': '5647',
'6x114.3': '5513',
'6x115': '5561',
'6x120': '5536',
'6x125': '7902',
'6x127': '5553',
'6x130': '5222',
'6x132': '7901',
'6x135': '7900',
'6x139.7': '5449',
'Central Lock': '11056'
};
function replaceBoltPatterns() {
// Find all links
document.querySelectorAll('a[href]').forEach(link => {
let href = link.href;
// Look for filter_traits[5123]= followed by a value
const regex = /filter_traits\[5123\]=([^&]+)/;
const match = href.match(regex);
if (match) {
// Decode the bolt pattern value
const boltPattern = decodeURIComponent(match[1]);
// Check if we have a mapping for this bolt pattern
const mappedId = BOLT_PATTERN_MAPPINGS[boltPattern];
if (mappedId) {
// Replace the bolt pattern with the mapped ID in the href
href = href.replace(
`filter_traits[5123]=${match[1]}`,
`filter_traits[5123]=${mappedId}`
);
// Update the link
link.href = href;
console.log(`Replaced bolt pattern "${boltPattern}" with ID
"${mappedId}"`);
}
}
});
}
// Run when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', replaceBoltPatterns);
} else {
replaceBoltPatterns();
}
// Watch for dynamic content
const observer = new MutationObserver(() => {
replaceBoltPatterns();
});
observer.observe(document.body, {
childList: true,
subtree: true
});
console.log('Bolt pattern replacement initialized');
})();