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>
Knappen skal have attribut
data-product-group-number, der angiver nummeret på produktgruppen. Derudover skal knappen have klassen
esProductGroupButton
for at nedenstående javascript fungerer.
<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>