Javascript

Platform variable eksempler

Som du sikkert har læst på Javascript variable så indeholder platform variablen en masse information om den løsning du er på. Det gælder information, lige fra hvilken side du er på, hvilken valuta der er valgt til hvilken template der bliver vist. 

Note: Den nemmeste måde at se hvad der er af information, er ved at kigge på det via consolen i din browsers udviklingsværktøj. Hvor informationerne er tilgængelig som det er beskrevet på siden: Javascript variable. Lig mærke til at informationerne er forskellige fra side til side. Varekortet har ikke nødvendigvis de samme informationer som et blog indlæg.

Eksemplerne nedenfor viser hvordan platform variablen kan bruges:

window.platform.page eksempler:

Hvis sidens id er 10, udfør script.

(function () {
    if (window.platform.page.id === "10") {
       ...
    } 
})();

Hvis siden ligger i mappen i sidetræet med id 5, udfør script.

(function () {
    if (window.platform.page.categoryId === "5") {
        ...
    } 
})();

Hvis siden er af sidetypen nyhed og sproglaget er dansk, udfør script.

(function () {
    if (window.platform.page.isNews && window.platform.language.iso === "DK") {
        ...
    } 
})();

window.platform.template eksempler:

Indsæt et billed med stien til løsningens CDN (hurtigere load af billeder):

(function () {
    var img = new Image();
    img.src = window.platform.template.cdn + "/upload_dir/gfx/timeglas.png";
    document.getElementById("#loader").appendChild(img);

    // eller med et billed i template mappen
    var img2 = new Image();
    img.src = window.platform.template.path + /gfx/timeglas.png";
    document.getElementById("#loader").appendChild(img2);
})();

Brug template / design manager farve til at farve baggrunden på et element:

(function () {
    var farve = window.platform.template.settings.DESIGN_BODY_BACKGROUND_COLOR;
    document.getElementById("#element").style.backgroundColor = farve;
})();

window.text eksempel:

Lav en knap og giv den en translation tekst, som passer til det valgte sproglag: 

(function () {
    var btn document.createElement("button");
    btn.innerHTML = window.text.PRODUCT_CATALOG_PRODUCT_BUY;
    document.getElementById("#form").appendChild(btn);
})();

window.platform.product eksempel:

platform.product er en variabel, der kun sættes på varekoret, men som indeholder mange af informationerne om det produkt du er inde på. Forneden er et eksempel på, hvordan det kan bruges til at udføre et script, hvis produktet er en variant af typen dropdown:

(function () {
    var product = window.platform.product
    if (product && product.Type === "variant" && product.VariantDisplayMode === "dropdown") {
        ...
    }
})();

 

Platform funktions eksempler:

Ud over de informationerne omkring frameworket og systemet, der kan hentes ud, er der også indbygget nogle funktioner i platforms variablen. 
Eksemplerne nedenfor viser hvordan nogle af dem kan bruges:

window.platform.currency_format eksempel:

Eksemplet viser hvordan du kan bruge platform.currency_format til at formatere tal, så det bliver til et beløb med den rigtige valuta anvisning. platform.currency_format overholder indstillingerne i shopindstillinger som fortæller om valuta værdien skal stå til venstre eller højre for beløbet.

(function () {
    var amount = window.platform.currency_format(100);
    // amount er nu "100,00 DKK" hvis du er på en shop med dansk valuta valgt
})();

window.template.bp.current eksempel:

Selve template.bp variablen indeholder informationer om de breakpoints templaten har. Men en i breakpoint objektet findes der også en funktion, template.bp.current, som kan fortælle hvilket TorqueUI breakpoint browseren er på nu, med andre ord, kan funktionen bruges til at køre noget specielt kode på et specielt breakpoint. Funktionen retunere 'xl', 'l', 'm' eller 's' som passer med de breakpoints der er i TorqueUI.

(function () {
    var breakpoint = window.template.bp.current();

    if (breakpoint === "xl") {
        ...
    }

    if (breakpoint === "l") {
        ...
    }

    if (breakpoint === "m") {
        ...
    }

    if (breakpoint === "s") {
        ...
    }
})();

platform events:

Platform events bygger på platform funktionerne platform.subscribe, platform.publish og platform.unsubscribe. Funktionerne er en del af det programmerings design pattern, som kaldes for PubSub og som grundlæggende går ud på at sende beskeder om begivenheder frem og tilbage i et system.

• window.platform.subscribe: Bruges til at abonnere på begivenheder.
• window.platform.publish: Bruges til at udsende begivenheder.
• window.platform.unsubscribe: Bruges til at fjerne abonnementer på begivenhender.

window.platform.subscribe

window.platform.subscribe virker på den måde, at du skal skrive det event du vil abonnere på, som en string, som den første parameter til subscribe funktionen. Den næste parameter skal være den funktion, der skal håndtere eventen. Se eksemplet forneden, hvordan det kan sættes op:

(function () {
    window.platform.subscribe("/product/buy/warning", function(event, data) { 
        ... 
    });
})();

Funktionen der skal håndtere eventet, modtager to argumenter; Event, der er det event der bliver kaldt og data, der er et array med de parametere som begivenheden udsender.

window.platform.publish

window.platform.publish er den anden del af PubSub, der går ud på at udsende event. Det foregår simpet ved at give publish funktionen to parametre en string med det event der skal udsendes og et array med de data der skal sendes med. Se eksemplet forneden, hvordan det kan sættes op:

(function () {
    window.platform.publish("/mit/eget/event", ["custom", "data"]);

Varekort events

På varekortet er det med platform.subscribe muligt at abonnere på begivenheder, der er listet nedenfor:

For produktet kan du abonnere på "/product/buy/warning" som udsendes, når brugeren får en fejlbesked ved forsøger på at købe et produkt, men f.eks. mangler at vælge alle varianttyper.:

For pakkeprodukter kan du abonnere på 3 begivenheder:

• "/product/packet/selected": Udsendes når et samlet pakkeprodukt er valgt.
• "/product/packet/unselected": Udsendes når en af pakkerne i et pakkeprodukt fravælges / afvælges, så alle ikke er valgt.
• "/product/packetItem/selected": Udsendes når en af pakkerne i et pakkeprodukt er valgt.

For alle produkter af typen Variant kan du abonnere på 2 begivenheder:

• "/product/variant/selected": Udsendes når en variant er valgt.
• "/product/variant/unselected": Udsendes når en variant er fravalgt, fordi en af varianttyperne fravælges / afvælges.

For alle produkter af typen Variant og visningstypen Knapper kan du abonnere på 3 begivenheder:

• "/variant/variantData/selected": Udsendes når en knap er valgt.
• "/variant/variantData/unselect": Udsendes når en knap er fravalgt / afvælges.
• "/variant/variantData/unselected": Udsendes når alle knapper er fravalgt / afvælges.

For alle produkter af typen Variant og visningstypen Dropdown eller Bestillingsseddel dropdown kan du abonnere på 1 begivenhed:

• "/variant/variantType/selected": Udsendes når en variant er valgt.

 

jQuery eksempel

Med Hostedshop platformen loader vi automatisk jQuery ind ved hjælp af app.js filen. Så det er ikke nødvendigt for dig også at hente jQuery ind. Men vi har alligevel et lille tip, for at vise hvordan du kan være sikker på det faktisk er jQuery du får fat i når du tilgår $ variablen. Dette eksempel er især til dig, der loader andre eksterne scripts ind, som evt. overskriver $ variablen med f.eks. MooTools.

(function($) {
    function start_slider () {
        ...
    }

    function start_menu () {
        ...
    }

    $(function() {
        start_slider();
        start_menu();
    });
})(jQuery);

Eksemplet viser hvordan man f.eks. kan lave et script der skal starte en Javascript slider og en Javascript dropdown menu.