style-graficzne:js-shop

Shop

Zmienna globalna Shop zawiera klasę MooTools rozszerzoną o (implementującą) obsługę zdarzeń.

Klasa zawiera minimalną ilość sztywno określonych selektorów, klas, tagów, etc. Jej funkcjonalność jest w większości abstrakcyjna i musi zostać dookreślona przez skrypt stylu graficznego.

W ramach klasy Shop zamknięte są również pod-klasy do określonej funkcjonalności (np. głosowania na produkt, lub obsługi wariantów), dlatego pełni on także funkcję namespace.

Atrybuty, metody

W deklaracji klasy Shop została umieszczona minimalna ilość niezbędnych atrybutów i funkcji. Pozostałe są przypisane do samej zmiennej (funkcji).

Metody i atrybuty klasy

version - string, wersja klasy
urls{}
- skin - adres bezwzględny (zaczynający się od /) do plików stylu graficznego
- base - adres bezwzględny do sklepu
selectorFunctions{} - mapowania selektor → funkcja
perBrowserFix{} - mapowania przeglądarka → funkcja
options{}
- debug - boolean, debugowanie
- profile - boolean, użyj FireBug Profiler
status{}
- domready - boolean, określa czy wystąpiło już zdarzenie /window.domready/
- load - boolean, określa czy wystąpiło już zdarzenie /window.load/
url() - funkcja uzupełniająca adresy URL

Pozostałe funkcje są do użycia wewnętrznego. W celu dodania/modyfikacji powyższych należy użyć funkcji implement().

Shop.implement({
    perBrowserFix : {
        chrome : function() {
            ....
        }
    }
});

Metody i atrybuty zmiennej (funkcji)

Dla większej przejrzystości deklaracji klasy, większość funkcjonalności została wyciągnięcia poza nią - do osobnych funkcji.

Funkcje:

urlParser() - nadanie wartości Shop.urls na podstawie tagów <link> w <head>
runPerBrowserFix() - uruchomienie wybranych funkcji z mapy perBrowserFix{}
runSelectorFunctions() - uruchomienie wybranych funkcji z mapy selectorFunctions{} dla zdarzenia /window.domready/
addeventSelectorFunctions - uruchomienie wybranych funkcji z mapy selectorFunctions{} dla zdarzenia /Shop.element.add/
galleryInit() - inicjalizacja galerii Milkbox
preinit() - funkcja (domyślnie pusta) do wywołania na początku inicjalizacji klasy Shop
postinit() - funkcja (domyślnie pusta) do wywołania na końcu inicjalizacji klasy Shop

Atrybuty:

Shop.lang{} - frazy w języku strony
values{} - mapa na wartości pochodzące z szablonów (wewnątrz kodu HTML)
useroptions{} - mapa do przechowywania opcji dla administratora (szybka modyfikacja np. w user.js)

Deklaracja klasy vs funkcji

Do wszystkich atrybutów i funkcji instancja klasy Shop dostaje się poprzez funkcję pomocniczą

    get(name)

Najpierw przeszukiwana jest instancja klasy, następnie funkcji. Dzięki temu możliwe jest szybkie przesłonięcie poprzez implement(). Na przykładzie mapy fraz:

    Shop.implement({
        lang : {
            basket : {
                address_request_error : "Błąd podczas pobierania adresu."
            }
        }
    });

Jeżeli argument get() zawiera kropki, jest on rozbijany na części i każda poszukiwana jest oddzielnie.

    var s = new Shop();
    s.get('lang.basket.address_request_error');

Dzięki temu, poprzez implement() można przesłaniać tylko część atrybutów, a pozostałe zostaną odszukane w atrybutach funkcji, np.

    var s = new Shop();
    s.get('lang.common.product_select_stock');
    // == Shop.lang.common.product_select_stock

Pod-klasy

Większe funkcjonalności Shop pogrupowane zostały w pod-klasy, deklarowane jako atrybuty funkcji, np.

    Shop.productVoter = new Class({ .... });

Wszystkie inicjalizowane są wraz z instancją Shop za pomocą funkcji

subclass(_class)

Dostęp do ich instancji można uzyskać przez obiekt classes{}

    var s = new Shop();
    s.classes.productVoter

Każda sub-klasa ma tylko jedną aktywną instancję w ramach obiektu Shop.

Warunkowa inicjalizacja pod-klas

Każda pod-klasa, o ile ma zostać zainicjalizowana, musi posiadać jako argument funkcję condition(), która zwraca true. Brak tej funkcji, lub inny zwrot spowoduje pominięcie. Przykładowa deklaracja ze skryptu stylu graficznego:

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

Powyższa funkcja sprawdza, czy istnieje przynajmniej jeden <span> z klasą votestarts i niepustym id, który jest niezbędny do działania dla productVoter.

Lista

basketHandler - obsługa koszyka (dostawy, płatności, adresy)
fadingText - wypełnienie <input> wartością domyślną, do czasu wpisania treści przez użytkownika
imageSlider - przewijanie miniatur zdjęć pod głównym zdjęciem produktu
imageZoom - powiększenie zdjęcia produktu w miejscu
productVoter - głosowanie na produkt
skinPreviewBox - zamknięcie podglądu stylu graficznego [wywołanego z Panelu Administracyjnego]
stockDownloader - pobieranie informacji o wariantach produktów
stockHandler - obsługa wariantów produktów [dynamiczne pola <select>]

Inicjalizacja

Klasa Shop wymaga, aby wszystkie elementy DOM istniały w momencie utworzenia jej instancji, dlatego należy ją wywołać najwcześniej w trakcie zdarzenia /window.domready/. Domyślnie style aplikacji tworzą tylko jedną instancję i przypisują ją do zmiennej globalnej ShopInstance.

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

W trakcie inicjalizacji wywoływane są kolejno:

this.status.domready = true
urlParser()
preinit()
runSelectorFunctions() - zdarzenia domready
runPerBrowserFix()
kontrolowane i tworzone są wszystkie podklasy
galleryInit()
postinit()

selectorFunctions

Wewnąŧrz selectorFunctions{} klasy należy umieścić obiekty zawierające selektor DOM oraz funkcję do wykonania na obiektach.

    Shop.implement({
        selectorFunctions : {
            popup : {
                selector : '.popup',
                domready : function(el) {
                    el.removeEvents('click').addEvent('click', function(e) {
                        new Event(e).stop();
                        $(this).blur();
                        window.open(this.href);
                    });
                },
                addelement : 'domready'
                load : false
            }
        }
    });

W powyższym przykładzie dla każdego obiektu zawierającego klasę „popup” zostanie dodane zdarzenie onClick. W trakcie inicjalizacji Shop dla każdego elementu wywoływana jest funkcja domready(). Ponadto można zadeklarować addelement - wywoływane dla zdarzenia /Shop.element.add/ oraz load - dla /window.load/. Jeżeli zamiast funkcji addelement będzie zawierało string 'domready', wywołana zostanie funkcja domready().

perBrowserFix

Wewnąŧrz perBrowserFix{} klasy należy umieścić mapowanie przeglądarka –> funkcja. Wywołane zostaną tylko odpowiednie funkcje.

    Shop.implement({
        perBrowserFix : {
            ie6 : function() {
                document.body.style.behavior = 'url("' + this.urls.base + 'styles/csshover3.htc")';
            },
            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();
                    }
                });
            }
        }
    });

Jako atrybutów można używać wszystkich przeglądarek rozpoznawanych przez MooTools oraz ie67 dla IE6 oraz IE7.

Opcje

Obiekt Shop.useroptions{} służy do przechowywania opcji modyfikujących zachowanie Shop. Dostępne opcje:

milkbox{} - obiekt z opcjami przekazywany do konstruktora Milkbox, można uzupełniać własnymi opcjami zgodnie z dokumentacją. Na przykład:

    Shop.useroptions.milkbox.autoSize = false; //wyłączenie dopasowania dużych zdjęć do okna