Plug-in der viser produkter hørende til given produktgruppe.

For at vise produkterne skal plug-in'et initieres via javascript, hvor nummeret på produktgruppen medgives som input.
For at gøre dette placeres koden under fanebladet Javascript på samme side som plug-in'et.

<div id="esTradeProductPlugin" class="esPlugin">
    <div id="esTradeProductPluginData" class="esPluginData">
        <div class="esPreviousPageUrl">[input]</div>
        <div class="esNextPageUrl">[input]</div>
    </div>
    <div id="esTradeProductPluginHtml" class="esPluginHtml">
    </div>
</div>

For hver produktgruppe placeres en knap på siden, således når brugeren klikker på en knap vises de tilhørende produkter i plug-in'et.

En knap kan have følgende HTML.

    <button data-product-group-number="1" type="button" class="btn esProductGroupButton"></span>El</button>
                    

    <script type="text/javascript">

        $('button.esProductGroupButton').bind('click', function (e) {

            // Get productgroupnumber. 
            //
            var esProductGroupNumber = this.getAttribute("data-product-group-number");

            // Set data for init event of esTradeProductPlugin.
            //
            var data = { 'plantnumber': esPlantNumber, 'productgroupnumber': esProductGroupNumber, 
                         'utilitynumber': esUtilityNumber };

            // Convert data to json.
            //
            var jsondata = eval('(' + JSON.stringify(data) + ')');

            $('#esProxy').trigger('esPluginEvent', ['esTradeProductPlugin', 'Init', jsondata]);
        });

        $(document).ready(function () {

            // Show products for the first productgroup.
            //
            $('.esProductGroupButton:first').trigger('click');
        });

    </script>