Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Backspace & tietojen päivitys?

Sivun loppuun

Puhelin99 [10.04.2009 20:01:02]

#

Hep,

arvon Osaajat.

Useissa verkkokaupoissa on Lisää koriin -toiminnon jälkeen mahdollista valita 'palaa edelliselle sivulle' (tai backspace) - joka ei päivitä "ostoskori statusta" sivulle johon palataan.

Näin myös oletusarvona itsellä omassa työn alla olevassa kaupassa (clovershop).

Osaisitteko kertoa miten tuon ostoskorin statuksen saisi päivittymään kun Asiakas palaa tuotevalintansa ("Lisää koriin") jälkeen takaisin selaamaan muita tuotteita - käyttäen "Siirry edelliselle sivulle" -painiketta tai Backspacea (ilman ylimääräistä Refreshausta) ?

On lukuisia esimerkkejä siitä miten sen ei pitäisi toimia:
pulju.net (ostoskorin status alhaalla), valitse tuote & kts. alapalkkia, palaa edelliselle sivulle "Siirry edelliselle sivulle" ja katso taas ko. alapalkkia. Vast kun painat REFRESH niin päivittyy.
pelaamaan.com sama juttu (ostoskorin status aivan ylhäällä)

Mutta yhden (ja vain yhden) oiken toimivan olen nyt löytänyt: Taulutelevisio.fi. Ostoskori on _koko ajan_ ajantasalla. Eli se ON mahdollista, mutta miten ihmeessä?

Ei liene aivan simppeli asia kun tuo lähes järjestäen puuttuu (tai sitten toiminnetta ei yleisesti pidetä tärkeänä .. no itse kuitenkin pidän)

- Puhelin

mikkop92 [10.04.2009 20:08:17]

#

Siinä on varmaan joku AJAX-koodinpätkä mikä käy hakemassa ostoskorin tiedot palvelimelta. Tuon enempää en osaa sanoa.

Puhelin99 [10.04.2009 20:29:31]

#

Tarkennuksena vielä "kuulijakunnasta". Olin itse koodannut edellisen kerran n. 8v takaperin (asm, c, c++) ja opettelin nyt vasta verkkokaupan myötä ensimmäisen kerran html:n ja kattelin että php:n syntaksi muistutti kovin c++:aa (josta epäilemättä voi olla muitakin mielipiteitä :). Itse kauppa on tehty PHP:lla.

Eli ne nyt jossain määrin menee.. AJAXiin tai vaikka Java scripteihin en ole ehtinyt tutustua jos ko. asia vaatii sellaisia niin niistä tarvitsisin tosiaan hieman enemmän konkreettista koodiesimerkkiä. :(

mikkop92 [10.04.2009 20:37:37]

#

W3Schoolsissa on jonkinlainen tutoriaali AJAX:sta.

http://www.w3schools.com/Ajax/Default.Asp

En ole ihan varma siitä, että mainitsemasi ostoskorin tietojen päivitykset käyttävät AJAX:ia, mutta sillä sellaisen saisi todennäköisesti tehtyä. Varmaan yksinkertaisempiakin keinoja on.

jo123 [10.04.2009 21:04:53]

#

Eikös tuolla putkan omalla oppaallakin pääse ainenkin alkuun tuon ajaxin kanssa.

Smuliii [10.04.2009 21:33:02]

#

En ole aivan varma millaista systeemiä tarkoitit mutta netin syövereistä löytyi Build An AJAX Powered Shopping Cart-opas. Kai tuosta jotain voi soveltaa.

Puhelin99 [10.04.2009 22:16:04]

#

Smuliii kirjoitti:

En ole aivan varma millaista systeemiä tarkoitit mutta netin syövereistä löytyi Build An AJAX Powered Shopping Cart-opas. Kai tuosta jotain voi soveltaa.

Voi olla että jotain voisi sovelta, voi olla ettei. En myöskään tiedä, vaan voi olla että joudun viimeisenä keinona ottamaan selvän (eli kiitos vinkistä). :) Tuntuu vain kovin raskaalta lähteä opettelemaan perustavanlaatuisesti koko kieltä, jotta voisi löytää yksittäiseltä sivulta potentiaalisesti sovellettavan osion.

Viitaten aiemmin mainittuun sivustoon (taulutelevisio.fi) _Tiedän_ että joku tällaisen tempun jo osaa tehdä. Joten tietysti toiveissa olisi että näin taitava kaveri löytyisi täältä - ilman että sitä täytyisi kantapään kautta lähteä hakemaan näillä lähtötiedoin. :)

Vasta_alkaja [11.04.2009 19:50:38]

#

Jos oikein ymmärsin tuon homman, niin eikö nuo tuotteet olisi sama laittaa sessioniin vai ?

Metabolix [11.04.2009 20:33:42]

#

Puhelin99 kirjoitti:

Mutta yhden (ja vain yhden) oiken toimivan olen nyt löytänyt: Taulutelevisio.fi. Ostoskori on _koko ajan_ ajantasalla. Eli se ON mahdollista, mutta miten ihmeessä?

Ei. Tuo on itse asiassa linkittämistäsi sivuista se pahiten väärin toimiva. Kokeile: Lisää tuote, paina back, nyt kori on "ajan tasalla". Päivitä sitten tämä sivu. Mitä ihmettä, koriin ilmestyi tyhjästä tuote?!

Muissa kaupoissa ostoskori on esimerkiksi eri framessa tai AJAXilla toteutettu, jolloin paluu ei vaikuta sen näkymään. Tässä tapauksessa sen sijaan ostoskori on suoraan pääsivulla. Kun selaimella palataan edelliselle sivulle, selain ei lataa sivua uudestaan, joten ostoskorikin näyttää samalta kuin viimeksi. Evästeisiin ostoskori sen sijaan on yhä päivittynyt, joten uudella sivunlatauksella näkyy taas oikea ostoskori.

Mitään tapaa sivunlatauksettomaan (tai AJAXittomaan) peruutukseen ei ole, ja muutenkaan en tuollaista lähtisi kehittelemään, koska esimerkiksi itse käytän back-nappia navigointivälineenä (esim. takaisin tuotelistaan) ja esittämäsi ominaisuus tyhjentäisi ostoskorin ihan turhaan. Sen sijaan ostoskoriin voisi kyllä lisätä jonkinlaisen peruuta-napin.

Puhelin99 [11.04.2009 22:25:16]

#

Metabolix kirjoitti:

Puhelin99 kirjoitti:

Mutta yhden (ja vain yhden) oiken toimivan olen nyt löytänyt: Taulutelevisio.fi. Ostoskori on _koko ajan_ ajantasalla. Eli se ON mahdollista, mutta miten ihmeessä?

Ei. Tuo on itse asiassa linkittämistäsi sivuista se pahiten väärin toimiva. Kokeile: Lisää tuote, paina back, nyt kori on "ajan tasalla". Päivitä sitten tämä sivu. Mitä ihmettä, koriin ilmestyi tyhjästä tuote?!

Muissa kaupoissa ostoskori on esimerkiksi eri framessa tai AJAXilla toteutettu, jolloin paluu ei vaikuta sen näkymään. Tässä tapauksessa sen sijaan ostoskori on suoraan pääsivulla. Kun selaimella palataan edelliselle sivulle, selain ei lataa sivua uudestaan, joten ostoskorikin näyttää samalta kuin viimeksi. Evästeisiin ostoskori sen sijaan on yhä päivittynyt, joten uudella sivunlatauksella näkyy taas oikea ostoskori.

Mitään tapaa sivunlatauksettomaan (tai AJAXittomaan) peruutukseen ei ole, ja muutenkaan en tuollaista lähtisi kehittelemään, koska esimerkiksi itse käytän back-nappia navigointivälineenä (esim. takaisin tuotelistaan) ja esittämäsi ominaisuus tyhjentäisi ostoskorin ihan turhaan. Sen sijaan ostoskoriin voisi kyllä lisätä jonkinlaisen peruuta-napin.

Pitipiäs hetken oikein ihmentellä tuota 'nurinkujrista' kommenttia kun kerroin nimenomaan päinvastaisesta, mutta kokeilun kautta tulin siihen lopputulemaan että käytät Firefoxia? Sillä tuo näköjään toimii yhtä huonosti kuin muillakin mainituilla saiteilla(??). Sen sijaan parjatulla I-explorerilla tuo toimii juuri kuten toivoa saattaa. Ilmeisesti sitten AJAXin kautta?

Seuraavat kappaleet mennee samaan aiemman väärinkäsityksen ajatusvirtaan. Esittämäni ominaisuus 'backspace' tai 'palaa aiemmalle sivulle (histori -1)' palaa nimenomaan aiemman sivun esillä olleelle riville, mutta pitää ostoskorin ajantasalla. Se on se tarkoitus. Ei tosiaan mitään ostoskorin tyhjennyksiä tai muuta tuubaa..

Metabolix [11.04.2009 22:57:22]

#

Anteeksi, käsitin jostain syystä viestisi aivan väärin, kun itse käyttämäni kaupat toimivat aivan oikein ja esimerkkisi taas toimii ainakin Firefoxilla juuri väärin. IE:llä se tosiaan näytti toimivan.

En tutkinut tarkemmin, mutta taulutelevisio.fi luultavasti lataa ostoskorin sivun onload-tapahtumassa. IE ajaa tämän tapahtuman myös silloin, kun sivulle palataan takaisin, kun taas monet muut selaimet palauttavat aiemman tilanteen täysin — siis tilanteen, jossa onload-tapahtuma on käsitelty jo aikaa sitten. Ongelman voi kuitenkin kiertää asettamalla myös onunload-tapahtumalle käsittelijän, vaikka tyhjänkin.

Joten otetaanpa uusiksi: Voit laittaa ostoskorin erilliseen kehykseen tai luoda sen JS:llä onload-tapahtumassa. Jälkimmäisessä tapauksessa on taas kaksi vaihtoehtoa: ostoskorin voi ladata palvelimelta AJAXilla tai sen voi aina päivittää kekseihin sivunlatauksen yhteydessä ja kopioida sieltä paikalleen. Tämä viimeisin mahdollistaa ostoskorin päivittämisen sulavasti silloinkin, kun käyttäjällä on monta tabia auki selaimessaan ja ostoksia lisätään milloin mistäkin.

Viimeisin ehdotukseni toimisi siis JS:n puolelta tähän malliin:

var ostoskori = {
  paivita: function() {
    // Tässä funktiossa pitäisi laittaa evästeestä tiedot ostoskoriruutuun.
  },
  interval: null
};

// Ladatessa luodaan kori ja laitetaan se päivittymään 5 sekunnin välein.
window.onload = function () {
  ostoskori.paivita();
  ostoskori.interval = setInterval(function() {ostoskori.paivita();}, 5000);
}
// Lopetettaessa otetaan päivitys pois päältä.
window.onunload = function () {
  clearInterval(ostoskori.interval);
}

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta