How to use AutoUncle with Fahrzeugsuche (Car search)

Integrating the JavaScript library

The Autouncle scripts can be added to the Fahrzeugsuche search page in the TypoScript extension template:

page {
    jsFooterInline {
        10 = TEXT
        10.value (
            window.AuEmbed = {
                config: {
                    key: '###UNIQUE_KEY###', // Your unique configuration key
                    data: {
                        stockId: null,
                    },
                    customData: {
                        leadSource: 'Ankauf Lead',
                    }
                }
            };
            var s=document.createElement('script');s.async=true;s.src='https://www.autouncle.de/widgets/trade_in_valuations/embed_script.js?config_key='+encodeURIComponent(AuEmbed.config.key);s.id='au-trade-in-script';h=document.getElementsByTagName('head')[0];h.insertBefore(s,h.lastChild);
        )
    }
}

Integrating a button for part-exchange of the car

You can integrate the AutoUncle part-exchange button in single views as follows:

<a href="#" class="btn btn-arrow btn-primary" onclick="AuEmbed.TradeInCalculatorWidgetEmbedder.openTradeInModal(); return false;">
    <span class="link-label-wrap">Calculate</span>
</a>

Initialising Autouncle in detailed view

The script may need to be changed in the detailed view. Here we can execute some event-driven JavaScript and reinitialize the AutoUncle script:

    jQuery(document).on('fahrzeugsuche.after_show_detail ', function () {

        //
        // Auto Uncle
        if(typeof AuEmbed !== 'undefined') {
            AuEmbed.reset();
            if(jQuery('dt:contains("Marke")').next().text() === 'MERCEDES-BENZ') {
                window.AuEmbed = {
                    config: {
                        key: '###UNIQUE_KEY_MERCEDES###',
                        data: {
                            stockId: jQuery('*[data-fahrzeug-seller-inventory-key]').attr('data-fahrzeug-seller-inventory-key'),
                        },
                        customData: {
                            leadSource: 'Ankauf Lead'
                        }
                    }
                };
            }
            if(jQuery('dt:contains("Marke")').next().text() === 'SMART') {
                window.AuEmbed = {
                    config: {
                        key: '###UNIQUE_KEY_SMART###',
                        data: {
                            stockId: jQuery('*[data-fahrzeug-seller-inventory-key]').attr('data-fahrzeug-seller-inventory-key'),
                        },
                        customData: {
                            leadSource: 'Ankauf Lead'
                        }
                    }
                };
            }
            if(jQuery('dt:contains("Marke")').next().text() === 'SKODA') {
                window.AuEmbed = {
                    config: {
                        key: '###UNIQUE_KEY_SKODA###',
                        data: {
                            stockId: jQuery('*[data-fahrzeug-seller-inventory-key]').attr('data-fahrzeug-seller-inventory-key'),
                        },
                        customData: {
                            leadSource: 'Ankauf Lead'
                        }
                    }
                };
            }
            var s=document.createElement('script');s.async=true;s.src='https://www.autouncle.de/widgets/trade_in_valuations/embed_script.js?config_key='+encodeURIComponent(AuEmbed.config.key);s.id='au-trade-in-script';h=document.getElementsByTagName('head')[0];h.insertBefore(s,h.lastChild);
        }
    });

As you can see above, Autouncle is reinitialised with a new key for each car brand.

Tracking of URL parameters

please see HowTo "Url Parameter Tracking"