Wszystkie style graficzne posiadają plik /js/main.js, który konfiguruje klasę Shop oraz tworzy jej instancję. Cały kod zamknięty jest w warunek

if($chk(window.Shop)) {
    ....
}

Pozwala to uniknąć błędów w przypadku braku Shop.

Shop.implement({
    selectorFunctions : {
        gotourl : {
            selector : '.gotourl',
            domready : function(el) {
                el.removeEvents('change').addEvent('change', function(e) {
                    new Event(e).stop();
                    if(this.value.length)
                        window.location.href = this.value;
                });
            }
        },
 
        bottest : {
        ....
    }
});

Funkcje wykonywane na określonych elementach DOM.

• gotourl - <select> z klasą gotourl, zdarzenie onChange powoduje przejście pod adres z value
• bottest - usunięcie wszystkich elementów z tą klasą, jest to jeden z testów który pozwala filtrować boty wrzucające spam w formularze (nie obsługują one JavaScript)
• clickhide - zniknięcie elementu w zdarzeniu onClick, zabezpieczenie przed dwukrotnym kliknięciem przycisku złożenia zamówienia
• titlealert - pokazanie komunikatu z treścią zawartą w title w zdarzeniu onClick, link dodania komentarza do produktu kiedy użytkownik jest niezalogowany
• titlequestion - przejście pod adres z linku po uprzednim potwierdzeniu pytania z title, usuwanie wpisów z książki adresowej użytkownika
• nojs - nadanie wszystkim input[name=nojs] value równego 0, używane przy wariantowanych produktach, przekazuje aplikacji informację czy wybór wariantu został ograniczony tylko do istniejących, za pomocą JavaScript
• box_producers_select - ustawienie wybranego producenta w <select> modułu producentów, na podstawie aktualnego adresu strony; wybór aktualnego nie jest dokonywany po stronie PHP/tpl w celu przyśpieszenia generowania strony
• resetsubmit - wyczyszczenie wszystkich inputów w formularzu i wysłanie go, przycisk czyszczenia w filtrze produktów
• reset - wyczyszczenie wszystkich inputów w formularzu
• flashmessageclose - zniszczenie wiadomości np. o dodaniu do koszyka za pomocą linku „zamknij”
• popupsmall - otwarcie linku w nowym oknie o małych rozmiarach
• popup - otwarcie linku w nowej zakładce/oknie
• basketsubmit - sprawdzenie czy input[name^=stock_id] w formularzu dodania do koszyka ma wartość, w przeciwnym wypadku alert o konieczności wybrania wariantu produktu
• boxslider - obsługa przewijania poziomego we wszystkich moduły z klasą slider
• comment - ukrycie formularza dodania komentarza na starcie
• addcomment - odsłonięcie formularza dodania komentarza i przewinięcie strony do niego, link „dodaj opinię”
• minigalleryhover - zmiana głównego zdjęcia produktu po najechaniu na małe zdjęcie pod nim, adres musi znajdować się w alt mniejszego zdjęcia
• foldenbox - zwijanie modułów z klasą folden, używane w filtrze produktów (wyszukiwanie)
• productimg - jeżeli img.productimg ma klasę gallery_ID oznacza to, że produkt posiada galerię złożoną z więcej niż jednego zdjęcia; ponieważ zdjęcie główne jest zduplikowane (na samej górze i w module galerii), pierwsze wystąpienie nie może zostać zamknięte w <a rel=„milkbox:gall”> - spowodowałoby to również jego duplikację w Milkbox; dlatego obiekt otrzymuje zdarzenie onClick, które jest przekazywane do a#prodimgID symulując kliknięcie na pierwsze zdjęcie z galerii

Shop.implement({
    perBrowserFix : {
        chrome : function() {
            $$('.centercol input', '.centercol button').each(function(el) {
                if(el.get('value').length > 0 &&
                   el.get('name').match(/(mail|pass|login)/)) {
                       el.focus();
                       el.blur();
                }
            });
        },
 
        ie67 : function() {
        ....
    }
});

Funkcje wykonywane w określonych przeglądarkach.

• chrome - próba usunięcia żółtego tła z pól <input> logowania, poprzez nadanie focusa
• ie6 i ie67 - niezbędne poprawki do nieprawidłowo działających przeglądarek

Shop.skinPreviewBox.condition = function() {
    return !!('string' == typeOf(Cookie.read('skinpreview')) && Cookie.read('skinpreview').length);
}

Zamknięcie podglądu stylu ma się pojawić tylko kiedy istnieje ciastko o nazwie skinpreview.

Shop.imageSlider.condition = function() {
    var div = $$('#box_productfull .productimg .smallgallery')[0];
    if($chk(div)) {
        Shop.imageSlider.options = {
            container : div,
            left_arrow_img : this.url('images/so_left.png', true),
            right_arrow_img : this.url('images/so_right.png', true)
        };
        return true;
    } else {
        return false;
    };
}

Przewijanie miniatur działa tylko kiedy istnieje kontener z klasą smallgallery na kacie produktu.

Shop.imageZoom.condition = function() {
    var img = $$('img.innerzoom')[0];
    if(!$chk(img))
        img = $$('img.outerzoom')[0];
    if($chk(img)) {
        Shop.imageZoom.options = {
            img: img,
            inner: img.hasClass('innerzoom')
        };
        return true;
    } else {
        return false;
    };
}

Powiększanie zdjęcia produktu działa tylko kiedy jego <img> ma nadaną klasę innerzoom lub outerzoom.

Shop.basketHandler.condition = function() {
    if($chk($('box_basketlist'))) {
        Shop.basketHandler.options = {
            step : 1,
            containers : {
                step1 : $$('#box_basketlist table.productlist tfoot').pop()
            },
            selectors : {
                deliveryrow : 'tr.delivery',
                paymentrow : 'tr.payment',
                deliverychangelink : 'tr.deliveryhead em.fold a',
                paymentchangelink : 'tr.paymenthead em.fold a',
                paymentheadlabel : 'tr.paymenthead td.desc em.color',
                paymentrlabel : 'td.name label',
                paymentradios : 'tr.payment input[type=radio]',
                deliveryradios : 'tr.delivery input[type=radio]',
                deliveryheadlabel : 'tr.deliveryhead td.desc em.color',
                deliveryheadvalue : 'tr.deliveryhead td.value em.color',
                deliverytrlabel : 'td.name label',
                deliverytrvalue : 'td.value',
                trradio : 'input[type=radio]',
                countrytr : 'tr.deliverycountry',
                trcountryselect : 'select'
            },
            ordersumfield : $$('#box_basketlist table.productlist tfoot tr.sum td.value').pop()
        };
        return true;
    }
 
    if($chk($('box_basketaddress'))) {
        Shop.basketHandler.options = {
            step : 2,
            containers : {
                step2 : $('box_basketaddress')
            },
            selectors : {
                trdifferentaddress : 'tr.different',
                differentaddress : 'input[name=different]',
                personaladdress : '#address_type1',
                companyaddress : '#address_type2',
                formcompanyname : 'input[name=coname]',
                formtaxid : 'input[name=nip]',
                formcompanyname2 : 'input[name=coname2]',
                formtaxid2 : 'input[name=nip2]',
                countryselect : 'select[name=country]',
                addresstyperadios : 'input[type=radio][name^=address_type]',
                addressselectsubmit : '*[type=submit][name^=address_submit]',
                addressselect : 'select[name^=address]',
                addressinput : '*[name={name}]'
            },
            getaddressurl : 'panel/getaddress/id/{id}'
        };
        return true;
    }
 
    return false;
}

Obsługa koszyka w zależności od obecności modułu #box_basketlist (krok pierwszy) lub #box_basketaddress (krok drugi, wpisanie adresu).

Shop.productVoter.condition = function() {
    var span = $$('span.votestars')[0];
    return !!($chk(span) && span.get('id'));
}

Głosowanie na produkt tylko kiedy istnieje span.votestars i ma nadane id.

Shop.fadingText.condition = Function.from(true);

Ponieważ dynamiczny tekst pól <input> działa tylko dla tych wybranych selectorem, nie ma potrzeby ograniczania go dodatkowym warunkiem.

Shop.stockDownloader.condition = Function.from(true);
Shop.stockDownloader.options = {
    getstockurl : 'product/getstock/stock/{sid}/imgwidth/{imgwidth}/imgheight/{imgheight}',
    selectors : {
        stockid : '#box_productfull form.basket input[name^=stock_id]',
        productimg : '#box_productfull td.productimg img.productimg',
        ddavailability : '#box_productfull td.availability dd.availability',
        dddelivery : '#box_productfull td.availability dd.delivery',
        dtdelivery : '#box_productfull td.availability dt.delivery',
        price : '#box_productfull table.maininfo div.price',
        nettoprice : '#box_productfull table.maininfo div.nettoprice',
        addtofav : '#box_productfull .additionalinfo a.addtofav',
        basketform : '#box_productfull form.basket fieldset',
        unit : '#box_productfull form.basket span.unit',
        smallgallery : '#box_productfull .smallgallery a img'
    }
}

Ponieważ pobieranie wariantów produktów działa tylko wywołane przez obsługę wariantów, nie ma potrzeby kolejnego warunku dla jego działania.

Shop.stockHandler.condition = function() {
    if($chk(Shop.values.OptionsConfiguration)) {
        Shop.stockHandler.options = {
            selectstockselector : 'div.stocks select',
            inputselector : '#box_productfull form.basket input[name^=stock_id]'
        };
        return true;
    } else {
        return false;
    }
}

Włączenie obsługi wariantów tylko kiedy zdefiniowana jest sama mapa wariantów.

Shop.useroptions.slider = {
    fadearrows : false
}

• fadearrows - ukrywanie strzałek lewo/prawo w modułach z przewijaną listą produktów do czasu najechania na obszar listy

Na końcu pliku znajduje się kod tworzący instancję klasy Shop w zdarzeniu domready.

window.addEvent('domready', function() {
    window.ShopInstance = new Shop();
});