MyCashflow blogi

Olet täällä: MyCashflow blogi

Kirjoitukset aiheesta Ladattavat teemat

Miska kirjoitti 9.5.2011 kategoriaan Interface-merkkaus Yleinen avainsanoilla : 1

MyCashflow verkkokauppa Facebookiin

Meiltä on useamman kerran kyselty Facebookiin omalle sivulle lisättävän kaupan perään ja tähän päivään asti ainoa tapa MyCashflow’n lisäämiseksi omalle sivulle olisi ollut palkata suunnittelija suunnittelemaan omalle kaupalle teema, joka toimii Facebook-sivun välilehdellä. Olemme kuitenkin helpottaneet tätä prosessia suunnittelemalla valmiiksi Facebook-ystävällisen teeman, joka on mahdollista lisätä omalle sivulle tekemällä Facebookiin oma sovellus, jonka voi lisätä sivulleen.

Prosessi ei ole aivan mutkaton, mutta lopputulos on vaivan arvoinen ja lopputulosta pääset katsomaan MyCashflow’n Facebook-sivulta. Mikäli ohjeet tuntuvat vaikeilta ymmärtää, niin kannattaa kääntyä asiakaspalvelumme puoleen tai ottaa yhteys omaan ulkoasun suunnittelijaan.

Teeman lataaminen ja asentaminen kauppaan

Koko prosessi lähtee siitä, että kauppaan on lisättävä teema Facebookia varten. Olemme luoneet tällaisen teeman valmiiksi ja se on ladattavissa sivuiltamme. Teeman asennusohjeet löytyvät täältä.

Päivitys 8.9.2011: Ladattavaa teemaa on päivitetty kassojen, Facebookin APIn osalta, sekä teeman toimintavarmuutta eri tilanteissa paranneltu.

Kaupan version luominen

Facebookissa toimiva kauppa tarvitsee oman osoitteensa ja oman teemansa, eli sille täytyy tehdä oma versio. Version voit luoda Ulkoasu -> Versiot sivulta ja prosessin tarkemmat ohjeet löydät täältä. Tälle versiolle teemaksi asetetaan edellä ladattu teema ja osoite voi olla esimerkiksi fb.verkkokauppasi.mycashflow.fi tai voit tilata tälle versiolle oman verkkotunnuksen tai aliverkkotunnuksen ohjauksen.

Facebook-sovelluksen luominen

Tämän jälkeen luodaan kaupalle sovellus Facebookiin. Tämä onnistuu helposti Facebookin kehittäjäsivustolta. Sovelluksen tekemisen edellytyksenä on, että käyttäjätunnuksesi on varmistettu, mutta tämä onnistuu näppärästi yhdellä tekstiviestillä.

Sovelluksen tärkeimmät asetukset

Alla on listattuna sovelluksen toiminnan kannalta tärkeimmät sovelluksen asetukset. Lisäksi tietysti sovelluksella on muita asetuksia, kuten nimi, kuvaus ja logot, joita emme tässä käy erikseen läpi.

Yksityisyystiedot ja käyttöehdot
Sovelluksella olisi hyvä olla yksityisyystiedot, sekä käyttöehdot. Nämä eivät siis ole vastaavat kuin kaupan toimitusehdot, mutta yksityisyystietoina on periaatteessa mahdollista käyttää kaupan rekisteriselostetta.

Sivuston url ja verkkotunnus
Tähän tulevat kauppasi osoite ja verkkotunnus, eivät siis Facebook-version osoitteet. Meidän demokaupassamme esimerkiksi asetukset olisivat http://demo.mycashflow.fi/ ja demo.mycashflow.fi

Facebook-integrointi
Tämä on tärkein osuus kaupan integroinnissa. Alla listattuna mitä asetuksia mihinkin kenttiin tulee, muut voit jättää tyhjäksi:

  • Canvas -> IFrame-koko: Auto-Resize, teema pitää sisällään valmiiksi skriptit, jotka muuttavat Facebook-sivun koon kaupan sivua vastaavaksi
  • Page Tabs -> Välilehtinimi: Tähän tulee esimerkiksi teksti “Verkkokauppa”. Näkyy sivuillasi välilehden nimenä.
  • Page Tabs -> Välilehden URL: Aiemmin luomasi uuden version osoite
  • Page Tabs -> Secure Tab URL: Pakollinen 1.10.2011 alkaen. Mikäli käytät .mycashflow.fi päätteistä osoitetta, voit käyttää tässä https://verkkokauppasi.mycashflow.fi osoitetta, jolloin liikenne kaupasta on salattua. Jos käytössäsi on oma verkko-osoite, SSL-sertifikaatti pitää tilata erikseen esimerkiksi asiakaspalvelumme kautta.

Tarvittavat muokkaukset teemaan

Teema ei ole suoraan käyttövalmis, vaan siihen täytyy tehdä vielä pieniä muutoksia, jotta esimerkiksi kommentit ja tykkäykset menevät oikeaan paikkaan ja jotta kaupan ylläpitäjä pystyy hallitsemaan kaupan kommentteja ja seuraamaan tilastoja. Alla listattuna tiedostot, joihin muutoksia pitää tehdä ja mitkä ovat tarvittavat muutokset. Kaikki paikat joihin muutoksia täytyy tehdä on teemassa merkitty selkeästi isoilla kirjaimilla.

  • helpers/footer.html -> Lisää edellä luomasi sovelluksen tunniste (ID), jonka löydät kehittäjäsivustolta sovelluksesi hallintasivulta.
  • helpers/opengraph.html
    • fb:admins -> Tänne tulee pilkulla erotettuna niiden käyttäjien ID:t jotka ovat oikeutettuja hallitsemaan sivuja. Käyttäjä-ID:n näet esimerkiksi käyttäjän nimessä olevasta linkistä.
    • fb:app_id -> Edellä luomasi sovelluksen tunniste (ID).
    • og:url -> Kaupan osoite.
  • helpers/og-product.html-> og:image -> Kaupan osoite.
  • product.html -> Kaksi kohtaa, joihin tulee kaupan osoite.

Kaupan lisääminen Facebook-sivulle

Tässä vaiheessa, kun kaikki alkaa olla valmista, kannattaa vierailla kaupan versiolle antamassasi osoitteessa ja testata, että kaikki teemassa toimii oikein ja käydä tilausprosessi kertaalleen läpi. Mikäli kaikki näyttää hyvältä, olet valmis julkaisemaan kauppasi Facebook-sivullasi.

Kaupan saat lisättyä sivuillesi menemällä sovelluksesi profiilisivulle, jonka linkin löydät tekemäsi sovelluksen kehittäjäsivulta. Tältä sivulta löydät vasemmasta palstasta linkin “Lisää sivulleni”, joka kysyy mille sivulle haluat sovelluksen lisätä ja olet valmis.

Mikäli haluat seurata sovelluksesi Facebook-tykkäämisiä ja kommentointeja, voit ottaa käyttöön Facebook Insights seurantaohjelman valitsemalla seurattavaksi lähteeksi luomasi sovelluksen.

Jos artikkeli herätti enemmän kysymyksiä kuin tarjosi vastauksia, jätä rohkeasti kommenttia tähän artikkeliin tai lähesty asialla reipasta asiakaspalveluamme.

Miska kirjoitti 19.2.2011 kategoriaan Automaattiset päivitykset avainsanoilla : 1

Uusi oletusulkoasu ja ladattavat teemat

Julkaisimme juuri uusimman version MyCashflow’n oletusulkoasusta ja huh-huh, siinäpä sitä on vasta päivitystä kerrakseen. Alla nopea katsaus siitä mitä uutta tai muuttunutta oletusulkoasussa on:

  • Voit mainostaa näyttävämmin – Bannerit on otettu käyttöön etusivulla, alaosassa ja sivupalstoissa. Etusivun bannerit tarjoillaan tyylikkäässä karusellissa.
  • Tuotelistat tuotemerkeittäin – Sivun alaosassa on nyt tuotemerkkinavigaatio, jossa käytetään tuotemerkin logoja, mikäli ne on asetettu.
  • Tuotteet koriin nopeammin – Variaatiottomat tuotteet on nyt mahdollista ostaa suoraan tuotelistasta. Tuote lisätään koriin ilman sivulatausta ja siitä näytetään käyttäjälle selkeä ilmoitus.
  • Hakutuloksia välittömästi – Hakukenttä toimii nyt ns. live-hakuna, eli aloittaa hakemisen heti kun käyttäjä kirjoittaa siihen jotain ja näyttää tulokset hakukentän alla.
  • Entistäkin nopeammat latausajat – Tyylitiedostot ja skriptit tarjoillaan valmiiksi minimoituna.
  • Helpommin muokattava teema – Helperit löytyvät nyt omasta alihakemistostaan ja molemmat sivupalstat tarjoillaan myös helperin kautta. Lisäksi mahdollista bannereiden avulla kirjoittaa tyylimäärittelyjä suoraan <head> elementin sisään muokkaamatta itse teemaa.
  • Ja paljon muita pieniä korjauksia ja parannuksia…

Teema on automaattisesti käytössä kaupassasi mikäli käytät oletusulkoasua ja voit asentaa sen kauppaasi myös hallinnan Ulkoasu sivulta. Mikäli haluat tutkailla miten teema on tehty, voit myös ladata sen koneellesi.

Kuinka lisäät bannereita helposti oletusulkoasussa

Ensinnäkin sinulla täytyy olla käytössäsi oletusulkoasu tai uusin ladattava versio oletusulkoasusta. Näissä teemoissa on tehty mahdolliseksi lisätä bannereita helposti käyttämällä vain tiettyjä nimiä banneriryhmillä. Kun banneriryhmän nimi vastaa teemassa käytettyä, tässä ryhmässä olevat bannerit poimitaan tiettyyn kohtaan ulkoasua.

Banneriryhmien koodinimet ja minne ulkoasussa tämän ryhmän bannerit poimitaan

frontpage
Kun banneriryhmän koodinimi on “frontpage“, niin kyseisen banneriryhmän bannerit poimitaan etusivulle, jossa etusivun tuoteryhmäkuvasta ja tämän ryhmän bannereista muodostetaan tyylikäs karuselli. Huomaa että tähän ryhmään syötettyjen bannereiden kuvien täytyy olla erityisen isoja ja mielellään vaakamallisia sekä saman korkuisia, jotta karuselli näyttää mahdollisimman hyvältä.

sidebar-right ja sidebar-left
Jos banneriryhmän koodinimi on joko “sidebar-right” tai “sidebar-left“, niin kyseisen ryhmän bannerit poimitaan teeman vasempaan tai oikeaan laitaan. Nämä ovat hyviä paikkoja esimerkiksi maksutapabannereille.

footer
Banneriryhmän “footer” bannerit poimitaan sivun alaosaan uuden tuoteryhmävalikon alle. Nämä bannerit ovat isompia kooltaan kuin sivupalstojen bannerit ja näyttävät parhaalta vaakamallisina. Täällä kannattaa esimerkiksi toistaa etusivun banneriruletissa pyörivät bannerit mahdollisimman suuren tehon saavuttamiseksi.

Miska kirjoitti 3.6.2010 kategoriaan Automaattiset päivitykset avainsanoilla : 0

Ristiinmyyntituotteet rullaamaan tuotesivun alaosaan

Oletusulkoasu on jälleen kehityksen kohteena, kun uusimpana tulokkaana olemme lisänneet sivuttain rullaavan ristiinmyyntituotelistan tuotetietojen jälkeen, sekä ostoskorin alareunaan.

Kyseinen listaus tunnetaan paremmin “Tämän tuotteen ostaneet ostivat myös…” -listana. Lista hakee kaikki tilaukset, joissa kyseisen tuotteen lisäksi on muita tuotteita ja suosittelee näitä sekä lisäksi se hakee tuotteen tilanneiden asiakkaiden muista tilauksista suositeltavia tuotteita. Ostoskorissa toiminto on muuten sama, mutta lähtökohtana käytetään kaikkia korin tuotteita ja eniten suosituksia saaneet tuotteet tulostetaan ensin.

Olemme toteuttaneet listan sivuttain rullaavana karusellina täysien tuotetietojen jälkeen ja oletuksena listaus tulostaa neljä ruudullista tuotteita, eli 12 kappaletta, kun tuotteita tulostetaan kolme rinnakkain. Jos kyseistä tuotetta ei ole myyty, jolloin listaus ei sisällä tuotteita, mitään ei tulosteta.

Lisäksi tuotesivun oikean palstan nostotuotteita sisältävät listat on vaihdettu yhteensopiviin ja samankaltaisiin tuotteisiin, joita voit hallita hallinnan tuotesivun ristiinmyyntivälilehdeltä. Näidenkään listojen otsikoita ei tulosteta ollenkaan, mikäli kyseisiä tuotteita ei ole hallinnasta yhtään asetettuna.

Nämä ja muut uudet herkut on tietysti myös päivitetty ladattavaan oletusulkoasuun, josta voitte poimia haluamianne ominaisuuksia omiin projekteihinne tai käyttää sitä ulkoasunne pohjana.

Miska kirjoitti 1.6.2010 kategoriaan Automaattiset päivitykset avainsanoilla : 2

Tuotteet ostoskoriin ja sieltä pois ilman sivunvaihtoa

Oletusulkoasu saa jälleen uuden toivotun päivityksen, kun tuotteet singahtelevat jatkossa ostoskoriin ja sieltä pois, ilman että käyttäjää siirretään ostoskoriin. Tuotteen lisäämisen yhteydessä oikean palstan minikorin sisältö päivitetään vastaamaan nykyistä ostoskoria sekä näytetään käyttäjälle viestin tuotteen lisäämisen onnistumisesta ja tarjotaan vaihtoehdot siirtyä kaupan etusivulle, muokkaamaan ostoskoria tai kassalle.

Samassa yhteydessä toteutimme minikorista tuotteiden poistamisen samalla periaatteella. Kun käyttäjä klikkaa “Poista” tuotteen yhteydestä, häntä ei siirretä ostokoriin ja näytetä poistoilmoitusta, vaan tuote yksinkertaisesti kutistetaan näkyviltä pois ja päivitetään minikorin yhteissumma vastaamaan nykyistä ostoskoria. Yksinkertaista kuin pipo.

Nämä ominaisuudet tulevat myös ladattavan oletusulkoasun mukana ja toimivat kaikissa nykyaikaisissa selaimissa, joihin valitettavasti Internet Explorer 6 ei kuulu. Olemme kuitenkin pitäneet huolen, että kyseisessä selaimessa ostotoiminnot kuitenkin toimivat aivan kuten ennenkin.

P.s. Ulkoasun suunnittelijoille ja web-kehittäjille tiedoksi, että nämä ominaisuudet on toteutettu ajaxilla ja Facebook-ryhmässämme jo aiemmin hypetetyillä ominaisuuksilla, joiden avulla on mahdollista ohjelmoida omia Interface-tageja. Dokumentaatio löytyy uusitusta Interface-oppaastamme: Omien Interface-tagien ohjelmointi ja Interface-tagien käyttäminen teeman ulkopuolelta.

Miska kirjoitti 17.3.2009 kategoriaan Interface-merkkaus avainsanoilla : 0

Uudet ladattavat teemat ja Interface-rajapinnan päivitykset

Tänä aamuna nakkasimme linjoille uusimmat ladattavat teemat, eli oletusulkoasun ja demokaupan ulkoasun. Teemojen näkyvät muutokset ovat kohtalaisen vähäisiä, mutta kehittäjän kannalta erittäin hyödyllisiä. Uudet Interface-komennot nimittäin helpottavat teemojen käyttöönottoa ja organisointia huomattavasti.

Theme, eli teeman nimi

Uusi {Theme} komento tulostaa aktiivisen teeman kansion nimen, joten uudet teemat saat käyttöösi, kun vain lataat tiedostot omaan kansioonsa kaupan alla ja aktivoit teeman.

Helper-komento, ei siis komennon attribuutti

Lisäksi tuliterä ja paljon toivottu {Helper(file:’header’)} komento on nyt täällä ja mikä apu se onkaan! Oheinen komento kutsuu teeman hakemistosta helper.html-tiedoston ja sisällyttää sen template-tiedostoon. Komennolla on vain attribuutti file ja se on pakollinen. Mikäli tiedostoa ei löydy tai attribuuttia ei ole annettu, komento ei palauta mitään.

Width- ja height-attribuutit kuvilla

Kuvia tulostavat Interface-komennot ovat saaneet laajalla rintamalla avukseen width- ja height-attribuutit, joten hallinnassa määritetyt kuvakoot eivät enää ole ainoat kokovaihtoehdot käytössäsi. Voit siis käyttää samaa kuvaa vaihtelevasti eri kokoisena, mikäli hallinnan kokovaihtoehdot loppuvat kesken. Attribuutteihin syötetään koko pikseleinä, ilman hipsukoita: {ProductImage(width:480,height:360)}. Tällä hetkellä attribuutteja tukevat seuraavat komennot:

  • Logo
  • ProductImage
  • ProductThumbnails
  • ProductListImage
  • CategoryImage

Oma 404-virheilmoitus nyt käytettävissäsi

Lisäsimme myös erittäin hyödyllisen valinnaisen template-tiedoston, 404.html:n. Tiedosto on juuri sitä mitä nimi antaa ymmärtää, eli tiedostoa käytetään, mikäli pyydettyä sivua ei kaupan alta löydy. Oheisten ladattavien teemojen 404-sivuille tulostetaan ilmoitus ja hakulomake, jolla haluamaansa sivua voi etsiä, mutta se ei suinkaan ole ainoa vaihtoehto, sillä tiedostossa toimivat samat komennot kuin kaupan yleisessä sivupohjassa.

Lataa uudet MyCashflow ulkoasuteemat: