MyCashflow blogi

Ismo kirjoitti 15.2.2012 kategoriaan Verkkokaupan kehittäminen Yleinen avainsanoilla Toimitustavat Varastointi: 0

Kokemuksia Nettivarasto palvelusta

Olen vuosien ajan etsinyt eri projektien yhteydessä helppoa ja toimivaa varastointipalvelua verkkokaupoille. Vaatimukset eivät sinänsä ole olleet mitenkään erityiset: helppokäyttöinen ja helposti käyttöön otettava ratkaisu, järkevä ja kohtuullinen hinnoittelu, toimiva asiakaspalvelu sekä fiksut tekniset rajapinnat ja halua kehittää palvelua edelleen. Valitettavasti näytti ettei sellaista ole, kunnes vuosien jälkeen törmäsimme lupaavaan palveluun, josta kerron tässä artikkelissa.

Nettivarasto on uusi suomalaisille verkkokaupoille suunnattu varastointipalvelu

Nettivarasto sopii kaikille verkkokauppiaille ja verkon kautta tilauksia vastaanottaville yrityksille. Nettivaraston hinnoittelun perustana on periaate, että maksat vain toteutuneista tapahtumista ja tehdystä työstä. Palvelussa ei ole aloitusmaksua eikä kuukausittaista vakiomaksua. Täten Nettivarasto sopii vaikkapa verkkokaupoille, joilla on vain hyvin vähän, jopa ainoastaan yksi tuote. Veloitus syntyy vain käytetystä varastotilasta ja tapahtumista, esimerkiksi tuotetilauksista. Lisäksi veloitetaan toteutuneet toimitusmaksut.

Nettivarasto on helppokäyttöinen verkkokaupan varastointipalvelu, joka on verkkokauppiaiden suunnittelema ja luotu verkkokauppiaiden tarpeisiin. Palvelussa verkkokauppias ulkoistaa joko koko tuotevarastonsa tai osan tuotevarastoaan Nettivaraston huolehdittavaksi. Verkkokaupan tuotetilaukset välittyvät Nettivarastoon, josta tuotteet lähetetään asiakkaille. Verkkokauppiaan ei tarvitse investoida omaan varastoon ja henkilökuntaan, jolloin kauppias voi keskittyä myyntiä tuottavaan työhön.

Olemme käyttäneet palvelua n. puolisen vuotta omassa Pakkaustarvikkeita.fi verkkokaupassa. Pääsimme helposti alkuun varaston osittaisella varaston ulkoistuksella. Vain ulkomailta ostamamme tuotteet toimitetaan Nettivaraston kautta ja Suomessa valmistettujen tuotteiden osalta tilaukset välitetään Suomen varastollemme toimitettavaksi, kuten aikaisemminkin (käytämme tähän Webhooks-laajennusta).

Helppoa tuote- ja tilaustiedon hallintaa

Helpoin tapa sopimuksen teon jälkeeen on tilata verkkokaupassasi myytävät tuotteet suoraan toimittajalta Nettivarastolle. Nettivarastolla lähetyksesi vastaanotetaan, tarkistetaan ja hyllytetään. Sen jälkeen uudet saldot päivittyvät verkkokauppaan.

Nettivarastoa voi käyttää suoraan web-käyttöliittymän välityksellä. Web-käyttöliittymän avulla pystyt hallinnoimaan tuotteita ja tehdä manuaalisesti tilauspyyntöjä ja sisäänostoja. Käytännössä web-käyttöliittymään tarvitaan harvakseltaan, koska voimme hyödyntää MyCashflown valmista Nettivarasto-laajennusta. Sen avulla verkkokaupan tilaukset välittyvät Nettivarastolle automaattisesti. MyCashflow myös merkitsee tilaukset Nettivaraston toimitustiedon perusteella toimitetuiksi sekä päivittää verkkokaupan saldot vastaamaan Nettivaraston todellista tilannetta.

Nettivarastolla voit teettää myös varastointiin ja tilausten käsittelyyn liittyvät erikoistyöt. Tuntityönä voi esimerkiksi tarroittaa tuotteitasi, leikata metritavarasta oikean mittaisia myyntieriä ja pakata tavaroita uudelleen. Kaikki on neuvoteltavissa ja toteutetaan edullisella tuntihinnalla. Teetämme Nettivarastolla usein yksinkertaisia varastotöitä, kuten isojen tuote-erien niputtamista pienempiin pakkauksiin, joita asiakkaamme mieluummin ostavat (pienet erät on myös katteeltaan parempia).

Maksat ainoastaan toteutuneista tapahtumista ja tehdystä työstä

Nettivarasto palvelun on kehittänyt suomalainen Koivua Oy. Kustannustehokas konsepti perustuu siihen, että Nettivaraston uusi, moderni varastotila sijaitsee Tallinnan lähistöllä. Loppuasiakkaalle tilaukset voidaan toimittaa suoraan maailmalle virolaisten logistiikkayhtiöiden kautta (usein suomen hintoja edullisemmin) tai “bulkkitoimituksina”, jolloin kaikki Nettivarastolta lähtevä tavara rahdataan kerralla Helsinkiin Itellan ja Matkahuollon logistiikkakeskuksiin loppuasiakkaille toimitettavaksi.

Tässä esimerkkejä palvelun hinnoista (isolla volyymilla saat vielä edullisemmat hinnat):

• Aloitus- ja kuukausimaksut, 0€
• Pientavarahyllyn vuokra (lev. 50cm), 0,04€/vrk
• Toimitettava tilaus, 2,99€/lähetys
• Lisätuotteet tilauksessa, 0,79€/tuote
• Vastaanotettu ja hyllytetty tuotenimi, 1,99€/hylly
• Ylimääräiset työt tarvittaessa, 17€/tunti

Kiinnostuitko? Tutustu tarkemmin Nettivarastoon

P.S. Mikäli verkkokauppasi päämarkkinat ovat Keski-Euroopassa, niin haluat varmaan kysyä myynnistämme myös vaihtoehtoisia automaattivarastoinnin ratkaisuja, jotka sijaitsevat lähempänä markkinoita ja mahdollistavat siten nopeammat toimitukset edullisemmilla postimaksuilla.

Ismo kirjoitti 23.12.2011 kategoriaan Yleinen: 0

Lehdistötiedote: Verkkokauppa kasvattaa suosiotaan

Ismo kirjoitti 1.10.2011 kategoriaan Yleinen: 0

Verkkokaupan suunnittelun helppous

Kuinka helppoa/vaikeaa verkkokaupan ulkoasun suunnittelu on MyCashflown avulla? Se on suhteellista. MyCashflown Interface-merkkaus rakentuu Internetin peruskielen HTML:n varaan ja noudattelee sen standardeja. Siten kavereille, joille verkkosivujen tekeminen HTML-kielellä on tuttua, MyCashflow on nopeasti opittavissa. Vastaavasti kaverille, jolle verkkoon suunnittelu on uutta, tulee olemaan enemmän opiskeltavaa.

Kaverille, jolle tavallisten kotisivujen toteutus ja HTML on hepreaa, myös MyCashflown Interface-merkkaus tulee olemaan hepreaa. Ainakin aluksi. HTML-koodauksen lisäksi verkkokaupan ulkoasun toteutuksessa on eduksi myös CSS-tyylitiedostojen tuntemus. Jos ponnistaa tyhjästä, niin opeteltavaa on. MyCashflown kanssa ei kuitenkaan tarvitse tuntea palvelinpuolen ohjelmointikieliä (esim. PHP) eikä tietokantoja (esim. MySQL), kuten esimerkiksi avoimen lähdekoodin ohjelmistojen kanssa on.

Kaverille, joka on toteuttanut kotisivuja ja tuntee HTML-kielen, MyCashflow on heti helpompi. Interface-merkkauksen oppimiskynnys on pieni ja suunnittelija pääsee nopeasti “työntämään kädet saveen”. Toki opittavaa on, esimerkiksi sivupohjien ja Interface-tagien kanssa.

Kaverit, jotka ovat toteuttaneet verkkokauppoja muilla ohjelmistoilla, ovat päässeet yleensä nopeasti sisään MyCashflown maailmaan ja antaneet jälkikäteen kiitollista palautetta erityisesti suunnittelun nopeudesta ja helppoudesta, sekä siitä ettei ulkoasua muuttamalla voi “rikkoa” verkkokaupan toimintaa. Suunnittelija voi keskittyä ulkoasun ja käyttökokemuksen suunnitteluun, koska palvelinohjelmoinnista tai tietokannoista ei tarvitse huolehtia.

Ensimmäiselle ryhmälle valitettavasti MyCashflowssa ei ole vedä-ja-pudota -tyyppistä työkalu ulkoasun rakentamiseen. Lähtökohtaisesti suosittelemme näissä tilanteissa ulkoasun suunnittelijan palkkaamista. Ei siksi, että HTML/CSS olisi vaikeaa (lopulta se on aika helppoa) vaan siksi, että verkkosivustojen suunnittelu on laaja-alainen tehtävä, joka vaatii osaamista myös käyttöliittymäsuunnittelusta, informaatioarkkitehtuurista, käytettävyydestä, ostamisen psykologiasta, hakukoneista, parhaista käytännöistä, verkkokäyttäytymisestä, eri selaimista (ts. bugeista selaimissa) ja monesta muusta asiasta, joiden täytyy loksahtaa kohdalleen, jotta verkkokauppa myy tehokkaasti. Kaiken tämän opiskeleminen nopealla aikataululla on haasteellinen tehtävä jopa meistä fiksuimmille.

Meillä on toki useita asiakkaita, jotka ovat toteuttaneet verkkokaupan ulkoasun itse käytännössä ensimmäisenä verkkosivusto-projektinaan ja verkkokaupan liiketoiminta lähtenyt lupaasti liikkeelle. Ulkoasun toteuttaminen MyCashflow verkkokauppaan on siis mahdollista ilman aikaisempaa kokemustakin, mutta se edellyttää opiskelua. Siihen en pysty ottamaan kantaa, oliko opiskeluun panostaminen lopulta ulkopuolisen palkkaamista järkevämpi ratkaisu, mutta toivotaan, että verkkokauppiaat kommenteissa kertovat omia kokemuksiaan.

Kun sanomme, että MyCashflowssa ulkoasun suunnittelu on helppoa, niin tarkoitamme, että se on helppoa näille kahdelle jälkimmäiselle ryhmälle. MyCashflow ohjelmistoa on alusta alkaen toteutettu helposti ylläpidettäväksi verkkokauppiaalle ja ulkoasultaan mahdollisimman joustavaksi ulkoasun suunnittelijalle, joka lähtökohtaisesti tuntee webiin tekemisen työkalut ja vaatimukset. Tällöin Interface-merkkaus on helppoa ja luontevaa, koska se rakentuu tunnettujen web-standardien päälle ja helpottaa suunnittelijan elämää piilottamalla palvelinpuolen ohjelmoinnin, tietokannat ja muut nörttien asiat yksinkertaisten tagien taakse. Näin esimerkiksi {NewProducts} tulostaa uudet tuotteet HTML-muodossa ja suunnittelijan tehtäväksi jää tagin laittaminen oikeaan kohtaa sivua sekä HTML-koodin tyylien muotoilu CSS:llä.

Miska kirjoitti 9.5.2011 kategoriaan Interface-merkkaus Yleinen avainsanoilla Facebook Ladattavat teemat: 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 10.3.2011 kategoriaan Markkinointi avainsanoilla Facebook Interface-merkkaus Sosiaalinen media: 0

Facebookin integroiminen osaksi verkkokauppaa

Tämä lähinnä verkkokaupan ulkoasun suunnittelijoille tarkoitettu postaus käsittelee Facebookin integroimista tiiviimmin osaksi verkkokauppaa.

Jos olet kauppias ja haluat nämä toiminnot kauppaasi, ota yhteys ulkoasun suunnittelijaasi ja pyydä häntä lisäämään OpenGraph tiedot kauppaasi. Mikäli käytät MyCashflow’n oletusulkoasua, tulemme lisäämään osan näistä ominaisuuksista oletusulkoasun seuraavaan päivitykseen.

OpenGraphin hyödyt

OpenGraph protokolla mahdollistaa verkkokaupan sivujen integroimisen tiiviiksi osaksi Facebookia. Kun sisällytät OpenGraph tiedot verkkokauppaan, sivun tykkääminen tekee kyseisestä verkkokaupan sivusta Facebook-sivun ja luo yhteyden käyttäjän ja kaupan sivun välille. Tuote näkyy nyt kävijän kiinnostuksen kohteissa ja kauppiaan on mahdollista julkaista päivityksiä näiden käyttäjien profiileissa tuotteen nimissä. Tämän lisäksi tykätyt tuotteet löytyvät nyt Facebookin haulla ja esimerkiksi mainonnan kohdistaminen tuotteesta tykkääville on mahdollista.

Miten lisään OpenGraph tiedot verkkokauppaan?

OpenGraph lisätään html-tiedoston head-tagin sisälle seuraavasti:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
  <meta property="og:title" content="{Title}"/>
  <meta property="og:url" content="{CurrentUrl(before:'http://www.KAUPANOSOITE.fi')}"/>
  <meta property="og:site_name" content="{ShopName}"/>
  <meta property="og:type" content="product"/>
  <meta property="og:image" content="{ProductImageUrl(before:'http://www.KAUPANOSOITE.fi')}"/>
  <meta property="fb:admins" content="KAUPPIAAN FACEBOOK-KÄYTTÄJÄID"/>
  <!-- Valinnaiset sivun ja sovelluksen ID:t
    <meta property="fb:page_id" content="KAUPAN FB-SIVUN ID"/>
    <meta property="fb:app_id" content="KAUPAN FB-SOVELLUKSEN ID"/>
  -->
  <meta property="og:description" content="{MetaDescription}"/>
  ...
</head>

Huomaa myös html-tagille lisätyt xmlns-attribuutit, jotka laajentavat merkkauksen käsittämään myös OpenGraphin tarvitsemat tagit. Kaupan Facebook-sivun ID tai sovelluksen ID ei ole pakollinen, mutta kauppiaan Facebook käyttäjä-ID täytyy löytyä, jotta kauppias voi julkaista päivityksiä tuotteille ja muokata tuotteiden Facebook-sivuja.

Tässä vielä ladattavana pakettina Facebook OpenGraph esimerkki, joka on tehty oletusulkoasun header.html tiedoston päälle. Esimerkissä OpenGraph tiedot tulostetaan verkkokaupan tuotteille, tuoteryhmille, tuotemerkeille, uutisille ja infosivuille hieman eri tavoin, jotta kaikille saadaan asetettua asianmukainen kuva ja tyyppi.

Tykkääminen OpenGraphin avulla

Nyt kun tiedot on saatu lisättyä kauppaan, itse tykkäämisen lisääminen on todella simppeliä:

<script src="http://connect.facebook.net/fi_FI/all.js#xfbml=1"></script>
<fb:like href="{CurrentUrl(before:'http://www.KAUPANOSOITE.fi')}" show_faces="true" width="450" action="recommend"></fb:like>

Voit tehdä haluamasi napin myös Facebookin kehittäjätyökalulla, kunhan vaihdat vain href-attribuutiksi Interface-tagin {CurrentUrl(before:’http://www.KAUPANOSOITE.fi’)} ja vaihdat tarvittaessa kielen suomeksi, hakemalla skriptit “fi_FI” kielikoodilla.

Suosittelen käyttämään aina XFBML-versiota koodista, jotta tykkäyksen kommentointi on kaikissa tilanteissa mahdollista.

Seuraa verkkokaupan tykkäämisiä ja muita Facebook-tapahtumia

Facebook on vasta julkaissut uuden version analytiikkatyökalustaan, jolla verkkokaupan Facebook-tapahtumia voidaan seurata. Kunhan verkkokaupasta löytyy joko kauppiaan Facebook-ID, kaupan Facebook-sivun ID tai kaupan sovelluksen ID, voit yhdistää verkkokaupan tapahtumat Facebook Insights sovellukseen ja seurata kaupan tykkäämisiä ja muita tapahtumia reaaliaikaisesti.

Tykkääminen on vasta alkua

Nyt kun kauppaan on lisätty OpenGraph tiedot, erilaisten Facebook-vimpaimien käyttö helpottuu kummasti. Voit esimerkiksi tehdä kaupan tuotteiden kommentoinnin Facebookin avulla, kunhan perustat kaupalle oman sovelluksen tai voit lisätä kauppaan Facebookin oman suosittelulaatikon, joka suosittelee kävijöille tuotteita, joista kävijän kaverit ja muut FB-käyttäjät ovat tykänneet.

Seuraavassa sosiaalisia vimpaimia käsittelevässä postauksessa käymmekin läpi pari vaihtoehtoa kaupan kommentoinnin toteuttamiseksi.

Miska kirjoitti 24.2.2011 kategoriaan Interface-merkkaus avainsanoilla bannerit Interface-merkkaus: 0

Bannerit ulkoasun suunnittelijan näkökulmasta

Kävimme bannereita hieman läpi viimeisimmässä oletusulkoasun päivitysuutisessamme, mutta se kosketti vain kauppiaita ja nyt aiommekin paikata tämän puutteen ja käsitellä asiaa hieman toiselta kantilta.

Bannerit alkavat olla tehokas työkalu ulkoasun suunnittelijoille. Kyseessä kun ei ole pelkkä anna-kuva-ja-toivo-parasta tyyppinen toteutus, vaan bannereita MyCashflow’ssa voidaan käyttää moninaisilla tavoilla, joista käymme alla läpi vain muutaman.

Kuvakarusellit

Kuvakarusellit ovat hyvä tapa näyttää useita isompia bannereita kerralla uhraamatta tarkoitukseen kokonaista sivua. Karusellin perusperiaate on liu’uttaa isäntäelementin – joka on asetettu piilottamaan ylimenevä sisältö – näkyvään osaan sen sisällä olevaa sisältöä. Tässä tapauksessa yksittäinen banneri.

Oletusulkoasussa menetelmää on käytetty etusivulla bannereiden kanssa hieman monimutkaisemmin, koska bannereiden tiedot ja navigointi näytetään vain jos hiiri on bannereiden päällä. Yksinkertaisimmillaan karusellin toteuttaa esimerkiksi jQueryn SerialScroll tai jQuery Tools scrollable pluginilla ja muutamalla rivillä koodia. Kannattaa ladata uusin oletusulkoasu ja tutkia kuinka asia on siellä tehty ja tehdä oma tulkinta aiheesta noudattamalla valitsemansa pluginin ohjeita.

Bannereiden tekstikentällä ihan mitä vaan

Bannereilla on myös tekstikenttä, johon sisältöä voidaan syöttää rajattomasti, jolloin bannereista voidaan ottaa paljon enemmän irti kuin pelkästä kuvabannerista. Alla muutamia näppäriä asioita joita tekstikentällä voit tehdä.

Tekstinostot

Kuka käskee että bannerin pitää olla kuva? Entä jos haluat etusivulle moniosaisen tekstinostoelementin, jossa otsikoista voidaan avata alla oleva sisältö.

Tämän voisi tehdä kyllä infosivuillakin, mutta bannerit ovat tähän huomattavasti kevyempi työkalu. Banneriryhmän tulostus on kätevä muokata helper attribuutilla, jolloin yksittäisen bannerin tulostuksen saa tehdä juuri kuten haluaa ja tulostuksessa voi käyttää tai olla käyttämättä kuvaa.

Tekstinostojen käyttöliittymää voi piristää vaikka jQueryUI:n mukana tulevalla haitari-pluginilla.

Tyylimäärittelyjä bannereiden läpi

Tätä tekniikkaa hyödynnetään tovi sitten julkaistussa oletusulkoasussa seuraavasti:

<style type="text/css" media="all">
  {BannerText(name:'head-styles')}
</style>

Kun hallintaan syötetään oletusulkoasua käytettäessä banneri jonka koodinimi on head-styles, niin tämän bannerin tekstikentän sisältö kirjoitetaan style tagien sisään teeman head elementtiin. Tällä voidaan muokata teemaa kevyesti ilman, että sitä täytyy asentaa omaan kauppaan muokattavaksi. Muista kuitenkin bannerin tekstikentän alkuun kirjoittaa notextile.. komento, jottei sekaan tule Textilen tekemiä <p> tageja.

Ulkoasun elementit kokonaan bannereilla

Yksi vaihtoehto on toteuttaa ulkoasun osia suoraan bannereiden läpi, jolloin asiakas voi järjestellä bannereita oman ryhmänsä sisällä tai vaihtaa niiden ryhmiä ja tämä heijastuu suoraan ulkoasun rakenteeseen. Suunnittelija voisi tehdä esimerkiksi banneriryhmät Vasen palsta ja Oikea palsta, joiden sisällä on bannereita, kuten Ostoskori, Tuotenosto, Suositut tuotteet, Kategorianavigaatio ja niin edelleen. Esimerkiksi Kategorianavigaatio bannerin tekstikenttä voisi näyttää tältä:

notextile..
<div id="CategoryNav" class="LayoutModule">
  {Categories(before:'<h2 class="LayoutModuleHeader">Tuoteryhmät</h2>')}
</div>

Tyylitiedostossa voisi olla sitten tarvittavat säännöt, jotta kaikki LayoutModule elementit toimivat missä järjestyksessä tahansa sivupalstoissa. Tällön asiakas saisi itse järjestellä ja muutella ulkoasua mielensä mukaan. Toiminto on tässä mainittu lähinnä kuriositeettina, koska saavutettu hyöty tästä jää hyvin minimaaliseksi ellei olla myymässä ulkoasuja valmistemplate-tyyliin, eikä asiakasta varten suunniteltuna.

Esimerkissä oleva “notextile..” on tärkeä rivi silloin, kun kirjoitetaan html-merkkausta MyCashflow’n tekstikenttiin tai muuten Textile käärii sisällön <p> tagin sisälle. Lisätietoa html-merkkauksen kirjoittamisesta Textilen sekaan löytyy Textilen kattavasta ohjeesta.

Siinäpä muutamia käyttötapoja bannereille, joilla pääsee kyllä alkuun, mutta ei bannereiden käyttö näihin vielä rajoitu. Työkalu on yksinkertaisuudessaan kuitenkin erittäin monikäyttöinen ja sille varmasti ajan mittaan tullaan keksimään mitä mielikuvituksellisimpia käyttötarkoituksia.

Miska kirjoitti 22.2.2011 kategoriaan Interface-merkkaus avainsanoilla Interface tagit Interface-merkkaus: 0

Kuinka toteuttaa livehaku omassa teemassa

Tässä ulkoasun suunnittelijoille tarkoitetussa ohjeessa käymme läpi kuinka on mahdollista toteuttaa livehaku omaan MyCashflow teemaan. Uusimmassa ladattavassa oletusulkoasussa tulee kyseinen ominaisuus mukana ja käytämmekin oletusulkoasun skriptejä esimerkissä ja puramme ne osiin.

Livehaku on äärimmilleen yksinkertaistettuna Interface-tagille lähetetty Ajax-kutsu muutamalla parametrillä. Jos tagi palauttaa onnistuneesti jotain, niin tämä palautus sitten tulostetaan listaan ja näytetään. Tietystihän todellisuus on aina hieman monimutkaisempi, mutta käydään oletusteeman koodi pala palalta läpi, niin huomaatte, ettei se kovin hankalaa ole.

Esimerkkikoodi vaatii toimiakseen jQueryn lisäksi myös typeWatch nimisen pluginin, joka on näppärä pikku skripti, jolla pidämme huolen ettei hakua aloiteta turhaan, vaan vasta sitten kun käyttäjä on lopettanut kirjoittamisen.

Esimerkkikoodi

var mcfLiveSearchResultsWidth = $("#SearchForm").css("width");
$("#SearchForm").append($('<ul id="LiveSearchResults" style="width: '+ mcfLiveSearchResultsWidth +'"></ul>').hide());

Alussa kaappaamme hakulomakkeen lomakkeen leveyden muuttujaan, sekä luomme hakukentän perään tyhjän listan, joka samalla piilotetaan ja jonka leveydeksi asetetaan hakulomakkeen lomakkeen leveys, jotta hakutulokset asettuvat kyseisen elementin kanssa nätisti linjaan.

$("#SearchInput").typeWatch({
  highlight:true,
  wait: 500,
  callback: function(txt) {

Seuraavaksi asetamme typeWatch pluginin tarkkailemaan muutoksia hakukentässä siten, että kun 500ms on kulunut viimeisimmästä näppäimen painalluksesta, suoritetaan asettamamme callback-funktio ja käyttäjän hakukenttään kirjoittama teksti asetetaan muuttujaan txt.

    $("#AjaxMsg").text("Haetaan");

Tulostamme ilmoitukseen tiedon kävijälle siitä, että jotain tapahtuu. Oletusulkoasussa on käytetty jQueryn globaalia ajaxStart tapahtumaa siten, että AjaxMsg elementti näytetään aina Ajax-pyynnön käynnistyessä ja teksti vaihtuu tapahtuman mukaan.

    $.ajax({
      url: "/interface/SearchProducts",
      data: {
        query: txt,
        limit: 5,
        helper: "helpers/livesearchresults"
      },

Tässä ovat Ajax-pyyntömme parametrit, joista pakollisia ovat vain url, joka on osoite jonne Ajax-pyyntö lähetetään ja data objektin query parametri, jonne haemme hakukenttään kirjoitetun tekstin. Livehaku pyytää hakutuloksia osoitteesta, jota voidaan käyttää myös Interface-tagien käyttämiseen MyCashflow’n ulkopuolella ja tästä löytyykin lisätietoa ohjeestamme.

Lisäksi asetamme tässä parametrin limit, joka rajaa tulostettavien tuotteiden määrän viiteen (vastaa Interface tagien limit attribuuttia), sekä helper parametrillä kerromme kutsulle, että haluamme käyttää tuotteiden tulostukseen helpers/livesearchresults.html tiedostoa (vastaa helper attribuuttia).

      beforeSend: function() {
        $(".SearchIndicator","#SearchForm").fadeIn(500);
      },

BeforeSend on funktio joka suoritetaan juuri ennen kuin Ajax-pyyntö lähetetään. Tässä tapauksessa funktio näyttää hakulomakkeen sisälle tulostetun hakuindikaattori elementin, jolle on CSS-tiedostossa asetettu taustakuvaksi latausanimaatio.

      success: function(results) {
        $('#AjaxMsg').slideUp(250);
        $("#LiveSearchResults").html(results).fadeTo(500,0.9);
        $(".SearchIndicator","#SearchForm").addClass("CloseSearchResults").click(function() {
          $("#SearchInput").val("").blur();
          $("#LiveSearchResults").html("");
          $(this).hide().removeClass("CloseSearchResults");
        });
      }

Success on funktio, joka suoritetaan, kun ajax-kutsu on mennyt onnistuneesti läpi. Funktion ensimmäinen argumentti sisältää palvelimen palauttaman tulostuksen ja tässä asetamme argumentin muuttujaan nimeltä results.

Ensimmäiseksi funktion sisällä liu’utamme AjaxMsg ilmoituksen pois näkyvistä, koska emme lataa enää tuotteita. Seuraavaksi tulostamme luomamme LiveSearchResults listan sisälle results muuttujan sisällön, eli itse hakutulokset sekä häivytämme hakutuloslistan näkyviin.

Lopuksi lisäämme hakuindikaattorille luokkanimen CloseSearchResults, joka vaihtaa elementin taustakuvan latausanimaatiosta ruksiksi, sekä liitämme elementin klikkaus tapahtumaan funktion, jolla voidaan piilottaa hakutulokset, tyhjentää hakukenttään kirjoitetut hakusanat ja piilottaa hakuindikaattori eli käytännössä perua haku.

    })
  }
}).attr("autocomplete","off").after('<span class="SearchIndicator"></span>').keyup(function() {
  if ($(this).val()==="") {
    $("#LiveSearchResults").html("");
    $(".SearchIndicator","#SearchForm").hide().removeClass("CloseSearchResults");
  };
});

jQueryn kätevän ketjutuksen avulla lisäämme vielä lopuksi aivan ketjun alussa valitulle SearchInput hakukenttäelementille attribuutin, joka estää selainten omat automaattiset täydennystoiminnot, sekä tulostamme tässä kohtaa hakuindikaattorielementin, jota aiemmin koodissa jo käytettiin.

Lisäksi lopussa tarkistamme jokaisen näppäimen vapautuksen yhteydessä onko hakukenttä kokonaan tyhjä ja mikäli on, niin piilotamme hakuindikaattorin, sekä poistamme siltä mahdollisen CloseSearchResults luokkanimen, joka määräsi onko hakuindikaattorin taustakuva latausanimaatio vai ruksi, jolla hakukentän voi piilottaa. Tämä sitä varten, että kun käyttäjä hakee heti uudestaan, ja luokkanimeä ei olisi poistettu, niin latausanimaation tilalla näkyisi ruksi.

Tässäpä se livehaku sitten olisi levällään kuin Jokisen eväät. Toivottavasti tästä julkisesta levittelystä joku oppikin jotain ja mikäli joku kohta tuntuu sekavalta, niin se johtuu todennäköisesemmin kirjoittajan sekavasta ulosannista, kuin lukijan käsityskyvyn rajallisuudesta. Tässä tapauksessa kannattaa laittaa kysymystä rohkeasti kommentteihin, niin pyrin auttamaan mahdollisten ongelmien kanssa.

Miska kirjoitti 19.2.2011 kategoriaan Automaattiset päivitykset avainsanoilla Ladattavat teemat uudet ominaisuudet: 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.

Ismo kirjoitti 17.2.2011 kategoriaan Interface-merkkaus avainsanoilla Interface tagit Interface-merkkaus Ristiinmyynti: 0

Kaikille Interface tageille before- ja after-attribuutit

Tämä on merkittävä päivitys, joka tekee ulkoasun suunnittelusta helpompaa. Kaikille Interface tageille on lisätty before- ja after-attribuutit, jotka toimivat siten, että mikäli tagi palauttaa jotain, niin ennen before-attribuutin sisältö lisätään tulostuksen eteen ja after-attribuutin sisältö tulostuksen perään.

Mitä väliä tällä sitten on? Annan esimerkin. Tuotenäkymässä käytettynä {CrossSaleProducts} tulostaa tuotteet, joita kyseisen tuotteen ostaneet asiakkaat ovat myös ostaneet. Ilman otsikkoa tuotelistaus ei kerro asiakkaalle paljoakaan, joten normaalisti sivupohjaan laitetaan otsikko ja tagi erikseen:

<h2>Tämän tuotteen ostaneet ostivat myös</h2>
{CrossSaleProducts}

Tämä toimii hienosti niin pitkään kun tuotteella on myyntihistoria, jonka kautta se linkittyy muihin tuotteisiin. Käytännössä kaikilla tuotteilla sitä ei ole – esimerkiksi uutuuksilla. Tästä seuraa, että tuotesivulla on yksinäinen otsikko ilman sisältöä. Tästä otsikosta pääsee eroon käyttämällä before-attribuuttia:

{CrossSaleProducts(before:'<h2>Tämän tuotteen ostaneet ostivat myös</h2>')}

Nyt otsikko näkyy vain silloin, kun ristiinmyytäviä tuotteita on. Kätevää.

After-attribuutti toimii, muuten samalla tavalla, mutta attribuutin sisältö lisätään tagin tulostuksen loppuun. Se on hyödyllinen esimerkiksi silloin, kun avaat before-attribuutissa uuden <div> elementin ja haluat luonnollisesti sulkea sen.

{CategoryHotPicks(before:’<div class=”KuumatTuotteet”><h2>Kuumat tuotteet tästä tuoteryhmästä</h2>’,after:’</div>’)}

Ja nämä tagit toimivat kaikilla tuotteilla, joten ehkä haluat tehdä esimerkiksi näin:

{News(before:'<h2>Ajankohtaista</h2>')}

Miska kirjoitti 17.2.2011 kategoriaan Interface-merkkaus avainsanoilla Interface tagit Interface-merkkaus: 1

Uusi näkymä: Tuotemerkki

Olemme joku tovi sitten lisänneet uuden näkymän tuotemerkeille MyCashflow’n Interface-merkkauksen kanssa käytettäväksi. Tuotemerkin näkymä käyttää sivupohjatiedostoa brand-list.html ja se mahdollistaa muutamia uusia asioita verrattuna normaaliin tuotelistan näkymään verrattuna.

Logo ja fiiliskuva erikseen

Näkymässä on mahdollista käyttää normaalia fiiliskuvaa ja sen lisäksi myös tulostaa tuotemerkille asetettu logo erikseen tagilla {BrandLogo}. Tämä mahdollistaa tuotemerkkisivujen “brändäämisen” juuri kyseiselle tuotemerkille sopivaksi.

Tuotemerkkinavigaatio logoilla

Tuotemerkkinavigaatio on mahdollista tulostaa helper-attribuuttia käyttäen, jolloin voi muokata navigaation näyttämään juuri siltä kuin haluat. Navigaatioon voi poimia kaikki tuotemerkin tiedot, kuten kuvauksen, logon tai vaikka tuotenostot kyseiseltä tuotemerkiltä.

Tuotemerkin nostot

Tuotemerkeille on myös tehty omat nostolistansa, joilla tuotemerkin myydyimmät, uudet, alennuksessa olevat ja mainostettavat tuotteet saadaan näkyviin.