Tässä artikkelissa käydään läpi MyCashflow'n teemajärjestelmän tuotevariaatioihin liittyviä työkaluja ja esimerkkejä erilaisista teematoteutuksista.

Tuotevariaatioiden valinta sisältyy ostolomakkeen tulostavaan {ProductBuy}-tagiin, mutta tuotevariaatioille voidaan toteuttaa lisätoiminnallisuuksia tuotesivulla.

Variaatiokuvien toteuttaminen tuotesivulla

Variaatioihin voidaan liittää kuvia kahdella vaihtoehtoisella tavalla, joiden teematoteutusta varten on saatavilla kolme eri työkalua:

  • Tuotekortin variaatiokuvatyökalu: hallintatyökalun tuotekortilla voit valita tuotekuvien joukosta kuvan variaatiolle, jolloin teemassa on käytettävä variaatiokuvien Interface-tageja.
  • Variaation nimen kanssa täsmätty tuotekuvan kuvateksti: voit liittää tuotekuvan variaatioon myös antamalla halutulle kuvalle kuvatekstiksi variaation nimen, jolloin teemassa on oltava käytössä toinen seuraavista JavaScript-plugineista:
    • images.js (Barebones-teema ja sen päälle kehitetyt teemat)
    • mcf.productimages.js (vanha Perinteinen oletusteema, pluginin kehittäminen on lopetettu)

Teematuki tuotekortin variaatiokuvatyökalulle

Jos verkkokaupassa ovat käytössä tuotekortin variaatiokuvatyökalulla liitetyt variaatiokuvat, voit lisätä verkkokaupan tuotesivulle niiden toteutuksen.

Alla näet esimerkin variaatiokuvien toteuttamisesta Barebones-teeman tuotesivulla (themes/shop/THEME/product.html) käyttämällä variaatioiden Interface-tageja:

{ProductVariations(
	before: '<div style="display: flex; margin: -5px;">',
	after: '</div>',
	helper: {{
		<a href="{ProductUrl}?variation_id={VariationID}" style="border: 1px solid #e0e0e0; margin: 5px; width: 20%;">
			{VariationImage(link: false)}
			<div style="display: block; padding: 3px;">{VariationName}</div>
		</a>
	}}
)}
{ProductBuy}
  • {ProductVariations}-tagin avulla laaditaan itse variaatiolistaus. Oletusarvoisesti tagi ei tulosta mitään, vaan sen helper-attribuutissa määritellään mitä variaatioiden tietoja sivulla halutaan näyttää.
  • Jokaisesta variaatiosta luodaan linkki tuotesivulle käyttämällä {ProductURL} ja {VariationID} -tageja.

    Lopullinen linkki on muodossa /product/2?variation_id=3. Loppuosan variation_id-parametri asettaa kävijän painaman variaation valituksi ostolomakkeella ja tuotekuvagalleriassa.

  • Variaatioista esitetään niiden kuva ja nimi käyttämällä {VariationImage}- ja {VariationName}-tageja.
  • Variaatiolistan jälkeen sijoitetaan ostolomake käyttämällä {ProductBuy}-tagia. Ostolomakkeella näytetään valittuna sama variaatio, jonka kävijä valitsee sen yllä olevalta variaatiolistalta.

Alla näet mallin tällä tavoin toteutetuista variaatiokuvista tuotesivulla:

Barebones-teeman images.js-plugin

Barebones-teema sisältää images.js-pluginin, jonka avulla voit käyttää teemassa kuvatekstin avulla variaatioihin liitettyjä tuotekuvia.

Plugin mahdollistaa myös zoomattavien tuotekuvien ja tuotekuvagallerian toteuttamisen teemassa.

Voit käyttää pluginia missä tahansa teemassa lisäämällä pluginin JavaScript-tiedoston teemaan ja alustamalla sen.

Jos käytät verkkokaupassa kuvatekstin avulla variaatioihin liitettyjä kuvia, images.js-plugin on suositeltavin teematyökalu tätä varten. Pluginia kehitetään aktiivisesti ja sen käyttäminen on vaivatonta.

Katso Barebones-teeman ohjeet images.js-pluginin käyttöön.

mcf.productimages.js-plugin

MyCashflow'n vanha Perinteinen oletusteema sisältää mcf.productimages.js-JavaScript-pluginin, jonka avulla voit käyttää teemassa kuvatekstin avulla variaatioihin liitettyjä tuotekuvia.

Voit käyttää pluginia missä tahansa teemassa lisäämällä pluginin JavaScript-tiedoston teemaan ja alustamalla sen.

Barebones-teeman images.js-plugin on suositeltavampi työkalu kuvatekstin avulla liitettyjen variaatiokuvien käyttöön. mcf.productimages.js-pluginia ei kehitetä aktiivisesti.

Näin otat pluginin käyttöön teemassa:

  1. Lataa mcf.productimages.js-plugin-tiedosto.
  2. Sijoita plugin-tiedosto teeman JavaScript-kansioon.

    Esimerkiksi Perinteisen oletusteeman JavaScript-kansio on js/

  3. Lisää teemaan kutsu pluginiin.

    Skriptikutsut on usein toteutettu teeman tiedostossa helpers/scripts.html. Varmista että tiedostosta löytyy esimerkissä lihavoitu rivi.

    {MinifyJS(
    	mode: 'production',
    	support_scripts: 'false',
    	files: 'js/vendor/jquery-1.7.1.min.js|
    		js/vendor/underscore.min.js|
    		js/vendor/jquery.serializeobject.js|
    		js/vendor/jquery.tinypubsub.min.js|
    		js/vendor/jquery.scroll.js|
    		js/vendor/jquery.customselect.js|
    		js/vendor/jquery.colorbox.js|
    		js/vendor/jquery.typewatch.js|
    		js/vendor/jquery.viewport.js|
    		js/vendor/jquery.ba-deparam.js|
    		js/mcf.pubsub.js|
    		js/mcf.variationsplitter.js|
    		js/mcf.productimages.js|
    		js/mcf.packaging.js|
    		js/mcf.main.js|
    		js/mcf.onepagecheckout.js|
    		js/mcf.checkout.js|
    		js/mcf.klarnacheckout.js'
    )}

Räätälöidyn ostolomakkeen toteuttaminen tuotevariaatioille

Tuotevariaatioiden valinta sisältyy oletusarvoiselle, {ProductBuy}-tagin tulostamalle ostolomakkeelle, mutta voit toteuttaa teemassa myös oman variaatioiden ostolomakkeen käyttämällä variaatioiden Interface-tageja.

Räätälöity ostolomake ei tue räätälöitäviä tuotteita

Tämän kappaleen ohjeiden mukaan toteutettu variaatioiden ostolomake ei näytä tuotesivulla lainkaan tuoteräätälöintejä, joita voidaan normaalisti käyttää yhdessä tuotevariaatioiden kanssa.

Jos tuotteilla on käytössä tuoteräätälöintejä, oman ostolomakkeen toteuttaminen ei ole suositeltavaa.

Alla näet esimerkin variaatioiden ostolomakkeen toteutuksesta:

{ProductVariations(
	before: '<div style="display: flex; margin: -5px;">',
	after: '</div>',
	helper: {{
		<div style="border: 1px solid #e0e0e0; margin: 5px; width: 20%; text-align: center;">
			<a href="{ProductUrl}?variation_id={VariationID}">
				{VariationImage(link: false)}
				<div style="padding: 3px;">{VariationName}</div>
			</a>
			{ProductAddToCart(
				before: '<div class="CartButton">',
				after: '</div>'
			)}
		</div>
	}},
	or: {ProductBuy(variations: 'radio')}
)}
  • {ProductVariations}-tagin avulla laaditaan itse variaatiolistaus. Oletusarvoisesti tagi ei tulosta mitään, vaan sen helper-attribuutissa määritellään mitä variaatioiden tietoja sivulla halutaan näyttää.
  • Listauksessa näytetään variaatioiden kuvat käyttämällä variaatiokuvien tageja (katso tarkempi kuvaus variaatiokuvien toteutuksesta).
  • Jokaisen variaation kohdalla näytetään {ProductAddToCart}-tagin avulla ostopainike.
  • Jos tuotteella ei ole variaatioita, listauksen or-attribuutin kautta näytetään normaali ostolomake.

Alla näet kuvan ostolomakkeesta Barebones-teeman tuotesivulla: