Barebones-teemassa voit luoda mobiilikäyttöön sopivan pudotusvalikon kaupan tuoteryhmistä. Tässä artikkelissa esitellään tuoteryhmävalikon toteuttaminen.
Barebones-teema poistuu.
Teeman kehittäminen on lopetettu, ja kaikki sen sisältämät työkalut tullaan poistamaan käytöstä.
Jatkossa MyCashflow'n oletusteemana toimii Fluid-teema, jonka ulkoasua ja toimintoja on helppo mukauttaa graafisen käyttöliittymän avulla käyttämällä teema-asetuksia.
navigations.jg-plugin
Tämän pluginin avulla voit muuntaa tuoteryhmävalikon Drawer-elementissä pudotusvalikoksi. navigations.js-plugin on tarkoitettu käytettäväksi drawers.js-pluginin kanssa. Navigations-pluginin avulla on helppoa toteuttaa esimerkiksi mobiilivalikossa toimivia pudotusvalikkoja.
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/navigations.js.
Valikon ulkoasu on määritelty tiedostossa /styles/scss/modules/_navigations.scss.
Oletusteeman mobiilituoteryhmävalikko on toteutettu navigations.js-pluginin avulla.

Haluttu valikko suljetaan DrawerNavigation-luokalla merkityn elementin sisään. Plugin piilottaa jokaisen HasSubCategories-luokalla merkityn linkin lapsielementit ja lisää linkin yhteyteen avaajapainikkeen, jolla valikko avataan ja suljetaan.
Alla näet esimerkkitoteutuksen tuoteryhmävalikosta, jolla on käytössä navigations.js-plugin:
<div class="Drawer" data-drawer="menu" data-drawer-side="left">
{Categories(
show: 'all',
before: '<div class="DrawerNavigation">',
after: '</div>'
)}
{LanguageNavigation(
before: '
<div class="DrawerNavigation">
<ul>
<li class="HasSubCategories">
<a href="#">{CurrentLanguage}</a>',
after: '
</li>
</ul>
</div>'
)}
</div>
Plugin otetaan käyttöön teemassa alustamalla se komennolla MCF.Navigations.init()
.
Tuoteryhmänavigaation tyylit
Voit muuttaa valikkojen ulkoasua oletusteeman tiedostossa /styles/scss/modules/_navigations.scss. Täällä on määritetty tyylit sekä drawer-elementin sisältämälle tuoteryhmävalikolle että suurempien näyttökokojen navigaatiopalkille.