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.