jQuery-koodin käyttäminen verkkokaupassa

Starter Yes
Mini Yes
Active Yes
Pro Yes

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>
     

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:

Elementtien siirtely appendTo metodilla

    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.

Automaattinen klikkaus jQueryllä

    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

Jaa sisältö