Barebones-teemassa voit luoda mobiilikäyttöön sopivan pudotusvalikon kaupan tuoteryhmistä. Tässä artikkelissa esitellään tuoteryhmävalikon toteuttaminen.

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.