Tässä artikkelissa esitellään Barebones-teeman työkalut ja tyylit joilla voit muotoilla verkkokaupan lomakkeita.
Numerokentät
Barebones-teeman spinners.js-pluginin avulla voit lisätä lomakkeiden numerokentille +/--painikkeet, jotka helpottavat numerokenttien käyttöä varsinkin mobiililaitteilla.
Plugin vaatii jQueryn toimiakseen. Voit lisätä jQueryn teemaan käyttämällä {SupportScripts}-tagia.
Oletusteemoihin jQuery on lisätty valmiiksi.
Löydät pluginin oletusteeman tiedostosta /scripts/plugins/spinners.js.
Painikkeiden ulkoasu määritellään tiedostossa /styles/scss/modules/_spinners.scss.
Oletusteemassa spinners.js-pluginia on käytetty tuotesivulla tuotteen määrän valintaan.
Plugin otetaan käyttöön alustamalla se teemassa. Alustaminen tapahtuu komennolla MCF.Spinners.init().
Kun spinners.js on käytössä, se lisää +/--painikkeet automaattisesti kaikille <input type="number">-kentille.
Lomakkeiden ulkoasu
Teeman lomakkeiden ja syötekenttien ulkoasu määritellään tiedostossa /styles/scss/common/_form.scss.