Verkkokaupan ulkoasua ja käyttöliittymää voidaan muokata käyttämällä omaa jQuery-koodia. Koodi voidaan lisätä Asetukset > Yleiset asetukset > Lisäasetukset -sivulle, jolloin se vaikuttaa kaikilla sivuilla. Jos koodin halutaan toimivan vain yksittäisellä sivulla, koodi voidaan lisätä sivun kuvaus-kenttään painamalla <html> -nappia sisällön muokkauksessa.
Huomio Koska myös epages-järjestelmä käyttää jQuerya verkkokaupan toiminnoissa, voi virheellisen koodin lisääminen aiheuttaa konfliktin joissain verkkokaupan toiminnoissa (esim tuotesivun tai ostsokorin toiminnassa). jQuerya ei siis pidä ladata uudestaan, vaan se on olemassa jo valmiina. Testaa aina koodin muokkaamisen jälkeen oman koodin toimivuuden lisäksi verkkokaupan normaalit toiminnot (tuotteen lisääminen ostoskoriin, ostoskorin muokkaaminen ja tilaaminen).
Lisää koodit <script> </script> -tagien sisään ja alusta koodisi require(['jquery', '$ready!'], function ($)
Näin:
<script>
require(['jquery', '$ready!'], function ($) {
// jQuery koodisi tähän
});
</script>
Jos haluat kauppasi ulkoasuun enemmän tyylillisiä muutoksia, jotka ei ole mahdollisia suoraan ulkaosun asetuksista, niin niitä on mahdollista yleensä tehdä CSS-koodilla. Lue täältä lisää CSS-koodin käyttämisestä kaupassa: https://www.vilkas.fi/tuki/suite/tuki/ulkoasun-muokkaus-css-koodilla
Esimerkkikoodeja
Seuraavista esimerkeistä voit poimia kauppaasi ideoita.
Ylänavigaation lukitus
NavBarTop lukitaan ruudun ylälaitaan.
Puhelinnumeron validointi
Osoitelomakkeella voidaan tarkistaa, että puhelinnumero on oikeassa (Suomen) muodossa, eli alkaa nollalla tai +-merkillä.
Elementtien siirtely
Kaikkia sivuilla näkyviä elementtejä voidaan siirtää toiseen paikkaan esimerkiksi appendTo -metodilla. Esimerkki: siirretään tuotesivun sosiaalisen median painikkeet tuotesivulla tuotekuvan alta sivun alalaitaan:
require(['jquery', '$ready!'], function ($) { $("div.SocialMedia").appendTo("div.ContentAreaWrapper"); });
Tilaa rekisteröitymättä oletusvalinnaksi
Tilausprosessin ensimmäisessä vaiheessa asiakas valitsee kolmesta vaihtoehdosta: Kirjaudu sisään/Tilaa rekisteröitymättä/Tilaa ja rekisteröidy. Seuraava koodi avaa "tilaa rekisteröitymättä" valinnan oletuksena. Toimii vain uudessa, vaiheittaisessa tilausprosessissa.
require(['jquery', '$ready!'], function ($) {
$('input[value="NonMember"]').click();
});
Siirry sivun ylälaitaan
Sivulle voidaan lisätä "Siirry ylös" linkki, joka tulee näkyviin sen jälkeen kun sivua on vierittänyt alaspäin.
Siirretään evästeilmoitus vähemmän häiritsevään paikkaan