Introduktion
I denne artikel viser vi med en række eksempler, hvordan du kan tilgå shoppens variabler med din egen kode, i dette tilfælde med JavaScript og direkte i shoppens designfiler via template sproget Smarty. Det kan nemlig være nyttigt hvis man vil hente data ud til egne tilpasninger, hvor man vil reagere på en bestemt hændelse i shoppen eller sende data videre til en ekstern service mv.
Bemærk: Denne artikel omhandler avanceret brug af shoppens funktioner og danner bro til vores udvikler univers. Artiklen forudsætter at du som minimum har kendskab til JavaScript og din browsers udvikler værktøjer. Vi linker til uddybende artikler nederst på denne side, så der er mulighed for at gå i dybden med de forskellige emner. Husk at vi ikke supporterer egen tilpasning af shoppens kode.
Sådan gør du
Benyt din browsers udviklingsværktøjer til at inspicere en side på shoppen. I browserens konsol kan du hurtigt se hvilket objekter der er tilgængelige for JavaScript og udlæse værdierne direkte.
I dette eksempel vil vi vide om den pågældende side er et produkt. Det kan vi gøre ved at indsætte window.platform.page.isProduct
for at få udlæst værdien for isProduct
som befinder sig i page
objektet:
Hvis vi vil omsætte ovenstående eksempel til JavaScript kan det gøres således:
<script>
var state = window.platform.page.isProduct;
if(state == true)
{
alert("Dette er et produkt");
}
</script>
Vi kan gøre det samme direkte på Smarty objekterne ved at benytte "literal" escape sekvensen som vist her:
<script>
var state = {/literal}{$page.isProduct}{literal};
if(state == 1)
{
alert("Dette er et produkt");
}
</script>
Escape sekvensen bevirker at Smarty udskriver sin værdi direkte i sidens kode. Begge scripts kan på denne måde benyttes i shoppens design manager via funktionen "Indsæt Javascript".
Hvis vi derimod arbejder i shoppens designfiler skal scriptet escapes som vist her, da vi arbejder i Smarty:
{if $page.isProduct }
{literal}
<script>
alert("Dette er et produkt");
</script>
{/literal}
{/if}
I eksemplet har vi flyttet vores if-statement over i Smarty, da vi har direkte adgang til objekterne når vi arbejder i template filerne.
Kan jeg få en oversigt over alle variabler?
Det er muligt at få vist alle standard variabler der ikke er indsat ved brug af Controllers (hvilket vi gennemgår i næste afsnit). Design templaten henter automatisk en række data ind, som er påkrævet for at templaten fungerer. Det er muligt at få vist disse data ved at indsætte Smarty tagget {debug}
i shoppens design manager via "Indsæt Javascript":
{/literal}{debug}{literal}
Ved ovenstående metode vises en Pop-up med alle variabler inkl. de aktuelle data for den pågældende side:
Tagget {debug}
kan også indsættes direkte i template filerne hvis man ønsker det. Bemærk: Husk at tillade pop-ups i din browser når du benytter {debug}
funktionen. Og sørg for at arbejde på en deaktiveret kopi af det aktive design for ikke at påvirke den aktive design template.
Jeg mangler en variabel, hvordan gør jeg?
Hvis du mangler en eller flere variabler kan de gøres tilgængelige i template koden igennem en Controller. Du kan læse mere om Controllers, Collections og Entitys i vores Smarty guide for udviklere.
Selv om mange værdier kan gøres tilgængelige i fronten, så vil der være egenskaber som ikke er eller kan eksponeres i shoppens front. Det kan f.eks. være kostprisen på et produkt. Så selv om vi kan se at objektet product
indeholder BuyingPrice
, fordi det er en del af den underliggende specifikation, vil værdien altså ikke kunne udlæses i fronten.
Værd at vide
Hvis du ønsker at vide hvilken template dit design oprindeligt er baseret på (det kan f.eks. være blevet tilpasset og omdøbt), så kan du indsætte window.platform.template.meta
i konsollen i din browser. Meta objektets DEMO_LINK
property indeholder navnet på den oprindelige template:
Nyttige links