Yhteenveto Interface-merkkauksen päivityksistä

Interface merkkaukseen on tullut uusia hyviä muutoksia, joista merkittävimmät ovat päivitetty syntaksi, joka mahdollistaa sisäkkäiset tagit sekä yhtenäistetty {Products} tagin toiminta. Uusi syntaksi mahdollistaa Interface tagien käyttämisen tagien attribuuteissa. Tagien käyttö attribuuttien arvona Sisäkkäisten tagien avulla suunnittelu on helpompaa ja pystyt luomaan näkymiä, jotka eivät ennen olleet mahdollisisa. {CategoryNewProducts(before:'<h2>Uudet tuotteet ryhmässä {CategoryName}</h2>’)} Tagi tulostaa uudet tuotteet tuoteryhmästä…

Interface merkkaukseen on tullut uusia hyviä muutoksia, joista merkittävimmät ovat päivitetty syntaksi, joka mahdollistaa sisäkkäiset tagit sekä yhtenäistetty {Products} tagin toiminta.

Uusi syntaksi mahdollistaa Interface tagien käyttämisen tagien attribuuteissa.

Tagien käyttö attribuuttien arvona
Sisäkkäisten tagien avulla suunnittelu on helpompaa ja pystyt luomaan näkymiä, jotka eivät ennen olleet mahdollisisa.

{CategoryNewProducts(before:'<h2>Uudet tuotteet ryhmässä {CategoryName}</h2>')}

Tagi tulostaa uudet tuotteet tuoteryhmästä ja mikäli niitä löytyy niin niiden eteen tulostetaan otsikko, joka sisältää tuoteryhmän nimen.

{Banners(code:'BannersForCategory-{CategoryId}')}

Tagin avulla on mahdollista toteuttaa tuoteryhmäkohtaiset bannerisetit. Tagi tarvitsee tueksi banneriryhmät, joille annetaan koodit muodossa BannersForCategory-99 jossa 99 on tuoteryhmän yksilöllinen ID-numero.

Helper -koodi tagin attribuuttina

{NewProducts(
before: ’<ul>’,
helper: ’{{
<li><a href=”{ProductURL}”>{ProductName}</a></li>
}}’,
after:’</ul>’
)}

Sisäkkäisiä tageja voi hyödyntää myös siihen, että helper-tiedostojen sisällöt korvataan suoraan tagin attribuutiksi kirjoitettavalla koodilla joka tulee {{ ja }} merkkien sisään. Esimerkiksi tähän tapaan:

Or -attribuutti
{CategoryNewProducts(or:’Tuoteryhmässä ei ole uusia tuotteita.’}

Kaikki tagit tukevat or-attribuuttia, jolla voit määritellä tulostuksen, kun tagi ei palauta mitään.

Uudistettu {Products} tagi ja monipuolisemmat attribuutit

{Products} tagi on uudistettu ja sen avulla voidaan tulostaa lähes kaikki erilaiset tuotelistaukset. Tuotteita listaavien tagien toiminnallisuutta ja nopeutta on parannettu. Nyt sinulla on käytössä paljon uusia attribuutteja, joilla voit hienosäätää tagien toimintaa.

Esimerkiksi attribuutilla subcategories:’true’ voit hakea tuotteet myös kaikista alaryhmistä. Jos haluat listaan ainoastaan mainostettavaksi merkityt tuotteet voidaan haulle lisätä suodatin attribuutilla filter:’featured’. Suodattimia voidaan myös yhdistellä, joten esimerkiksi alennuksessa olevien mainostettavaksi merkittyjen tuotteiden tulostus saadaan antamalla attribuutiksi filter:’discounted|featured’.

Tarkempia tietoja {Products} tagilla käytössä olevista attribuuteista löytyy suunnittelijan ohjeesta.

Uusia sivupohjia

Uudet sivupohjat on lisätty kampanjoille, kassan vaiheille, sähköposti-ilmoituksille sekä tilanteelle, jossa versioon pääsy on rajoitettu.
Katso kaikki näkymät

Uusia Interface-tageja

Uusia Interface tageja on lisätty kymmenittäin. {Products} tagin lisäksi kymmenet muut Interface tagit ovat päivittyneet. Uudet sivupohjat ja ominaisuudet tuovat mukanaan joukon uusia tageja.
Kaikki tagit on listattu Interface dokumentaatiossa

Muutamia poimintoja hyödyllisistä tageista:

  • {CampaignProducts} – Tulostaa kampanjan tuotteet
  • {ProductStockBalance} – Tulostaa tuotteen varastosaldon, mahdollistaa esimerkiksi scriptin rakentamisen, jolla ilmaistaan, että tuotetta on enää hyvin vähän varastossa
  • {ProductPriceValidity} – Tulostaa hinnan viimeisen voimassaolopäivämäärän, mahdollistaa esimerkiksi scriptin rakentamisen, jolla ilmaistaan, että hinta on voimassa enää X päivää.

Ostoprosessin uudet tagit ja sivupohjat

Ostoskorin ja kassan uudet kujeet! Tämä on varmasti odotetuin päivitys Interface merkkauksessa. Uusien sivupohjien ja tagien avulla voit räätälöidä ostoskorin, ostotapahtuman, sähköposti-ilmoitukset ja kuitit juuri sellaisiksi kuin tahdot!

  • Ostoskorin ulkonäköä voi muokata vapaasti käyttämällä helpereitä
  • Voit muokata jokaisen kassan vaiheen sivupohjaa tai laittaa koko kassan yhdelle sivulle
  • Pyytää asiakasta antamaan alennuskoodi ostoskorissa tai kassalla
  • Näyttää tai olla näyttämättä arvonlisäveron tiedot ostoskorissa ja kassalla
  • Muokata jokaista sähköposti-ilmoitusta eli vaikkapa luoda erilaiset tilaus- ja toimitusvahvistukset

Ostoskoriin, kassaan ja tilauksiin liittyvät tagit löydät täältä
Kassat suunnittelijan näkökulmasta

Teeman asetustiedosto

Teemakohtaiseen theme.xml tiedostoon saa tallennettua teeman asetuksia, tässä ensimmäisessä vaiheessa kuvien koot. Theme.xml tiedostoa tullaan laajentamaan tulevaisuudessa kattamaan muitakin teeman asetuksia.
Katso oletusteeman theme.xml Githubista

{Analytics} tagin uudistus

{Analytics} tagin uudistus mahdollistaa kaikkien laajennusten seurantaskriptien ja -kuvien tulostamisen yhden tagin kautta. Käytännössä sinun täytyy lisätä {Analytics(for:’head’)} tagi jokaisen sivun yläosaa (helpers/header.html tai vastaava) <head> ja </head> tagin väliin. Vastaavasti {Analytics(for:’body’)} tagi tulee lisätä jokaisen sivun loppuun (helpers/footer.html) ennen </body> tagia. Nämä tagit huolehtivat konversiotietojen tulostamisesta lähdekoodiin.

Kielitiedoston käyttö teemasta

Verkkokaupan sanakirjan käyttö teemasta onnistuu tageilla kuten {%HelloWorld} (HelloWorld on sanakirjan kielikoodi). Näiden avulla voit toteuttaa monikielisen teeman samaan tapaan kuin uusi MyCashflow oletusteema.

Päivitetty oletusteema

Uusi MyCashflow oletusteema löytyy Githubista ja sisältää paljon parannuksia, jotka hyödyntävät Interface merkkauksen uudistuksia. Päivitämme Githubissa sijaitsevia koodeja säännöllisesti, joten mikäli teet oman teemasi oletusteeman päälle, niin kannattaa aika ajoin kurkata mitä päivityksiä on tarjolla. Lisätietoa artikkelissa Uudistuksia oletusteemassa.