VirtueMart Forum

VirtueMart 2 + 3 + 4 => 3rd party extension => Topic started by: Eugen S. on February 04, 2016, 17:10:53 PM

Title: One Page Checkout like apple.com
Post by: Eugen S. on February 04, 2016, 17:10:53 PM
Hi there,

I'm not selling anything here  8)

I've developed an onepage checkout for a client.

please take a look and tell me if you like the process:

Feedback - Feedback - Feedback - Feedback !!! Thanks  8)

http://daedelow.temfy.com/shop
Title: Re: One Page Checkout like apple.com
Post by: VMTemplates.net on February 04, 2016, 17:50:09 PM
Hi,

looks and works great :). I would change only one thing - I would set different color for innactive tabs ;)
Maybe you should consider to share it for free as an extension for VirtueMart :D

Otherwise, Good Job!
Title: Re: One Page Checkout like apple.com
Post by: jjk on February 06, 2016, 20:58:15 PM
Hi Eugen,
Currently I get an error when clicking 'Next' after selecting 'Checkout as Guest' and entering an address. The Button doesn't work in my Firefox browser:
ReferenceError: event is not defined
...://daedelow.temfy.com/media/temfy/assets/js/com_virtuemart/jquery.temfy.vm.checkout.js
Line 734

Does it make sense to use jQuery 2.1.3 when Joomla 3.5 seems to stick with jQuery 1.11.3 (that's what they currently have in the J 3.5 beta2)?
Title: Re: One Page Checkout like apple.com
Post by: Eugen S. on February 09, 2016, 14:15:48 PM
Quote from: VMTemplates.net on February 04, 2016, 17:50:09 PM
Hi,

looks and works great :). I would change only one thing - I would set different color for innactive tabs ;)
Maybe you should consider to share it for free as an extension for VirtueMart :D

Otherwise, Good Job!

Thank you very much for your tip.

I talked with my client and we changed it so it is more clear which area is active.

http://daedelow.temfy.com/shop
Title: Re: One Page Checkout like apple.com
Post by: Eugen S. on February 09, 2016, 14:18:17 PM
Quote from: jjk on February 06, 2016, 20:58:15 PM
Hi Eugen,
Currently I get an error when clicking 'Next' after selecting 'Checkout as Guest' and entering an address. The Button doesn't work in my Firefox browser:
ReferenceError: event is not defined
...://daedelow.temfy.com/media/temfy/assets/js/com_virtuemart/jquery.temfy.vm.checkout.js
Line 734

Does it make sense to use jQuery 2.1.3 when Joomla 3.5 seems to stick with jQuery 1.11.3 (that's what they currently have in the J 3.5 beta2)?


THANK YOU VERY MUCH for error reporting.

We fixed that!

http://daedelow.temfy.com/shop


We use our own Framework which disables all Joomla JavaScript because we want to load everything async to get pagespeed 100.

AFAIK the difference betwenn jQuery 1.x and 2.x is just old browser compatibility support. Version 2 don't support all IE Versions...
Title: Re: One Page Checkout like apple.com
Post by: Eugen S. on February 10, 2016, 11:51:02 AM
We tuned the speed ;-)

Please check and tell me your feedback.

Do you like the checkout process?
Title: Re: One Page Checkout like apple.com
Post by: Jörgen on February 10, 2016, 12:28:31 PM
Hello

I can not get past the first page in the checkout. Pressing NEXT does Nothing.

Explorer 11

regards

Jörgen @ Kreativ Fotografi
Title: Re: One Page Checkout like apple.com
Post by: Eugen S. on February 10, 2016, 15:22:26 PM
Quote from: Jörgen on February 10, 2016, 12:28:31 PM
Hello

I can not get past the first page in the checkout. Pressing NEXT does Nothing.

Explorer 11

regards

Jörgen @ Kreativ Fotografi

Hello Jörgen,

we've added some features this morning. Maybe there was a conflict for a few minutes.

Can you PLEASE check again?
Title: Re: One Page Checkout like apple.com
Post by: Jörgen on February 10, 2016, 15:32:42 PM
Nope

I tried yesterday, stopped working after Your "we fixed that"

regards

Jörgen @ Kreativ Fotografi

Title: Re: One Page Checkout like apple.com
Post by: Eugen S. on February 10, 2016, 17:39:31 PM
Quote from: Jörgen on February 10, 2016, 15:32:42 PM
Nope

I tried yesterday, stopped working after Your "we fixed that"

regards

Jörgen @ Kreativ Fotografi



THANK YOU VERY MUCH Jörgen for your help.

I debugged for 2 hours to fix it in Explorer 11 ;-)

I looooove IE #not
Title: Re: One Page Checkout like apple.com
Post by: Jörgen on February 10, 2016, 19:51:59 PM
Hello

Now it seem to be working. Do You have a heavy load on the server ? It runs slower than the other day it seems.

The blue tabs numbered 1 to 4 seems to be clickable, but nothing happens. Make them non clickable since You have to use the next button and edit button to make any changes.

regards


Jörgen @ Kreativ Fotografi
Title: Re: One Page Checkout like apple.com
Post by: Studio 42 on February 10, 2016, 23:49:29 PM
Hi Eugen, it's not possible ot have 100 in pagespeed.
A good score is 85 and more is wastle of time, if you have some images, JS and CSS load.
If you load all async, then your customer have broken render.
So preconised by Google, is to split your CSS, one for the main render and the other for your javascript needs.
Another important think is the pageloading time, browser cache and images.
If you want to check, you can check my pagespeeds here : https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fshop.st42.fr%2Fen%2F&tab=mobile
This is optimised at 95% and don't use CDN.
SI if i use CDN i get perhaps 92 or 93 pagespeed, but why ? This don't change anything. Google itself have not 100 but 88 ;)
Title: Re: One Page Checkout like apple.com
Post by: Studio 42 on February 10, 2016, 23:57:38 PM
For the checkout process :
I tested the checkout and dont think it's clear. Is apple using this ?
P.S: i dont know if you do some test, but last pageload was 48 secondes !
Title: Re: One Page Checkout like apple.com
Post by: Jörgen on February 11, 2016, 11:10:30 AM
This still need some work ....

Waiting forever at step 2.

regards


Jörgen @ Kreativ Fotografi
Title: Re: One Page Checkout like apple.com
Post by: Eugen S. on February 11, 2016, 16:59:54 PM
Quote from: Jörgen on February 10, 2016, 19:51:59 PM
Hello

Now it seem to be working. Do You have a heavy load on the server ? It runs slower than the other day it seems.

The blue tabs numbered 1 to 4 seems to be clickable, but nothing happens. Make them non clickable since You have to use the next button and edit button to make any changes.

regards


Jörgen @ Kreativ Fotografi

Hello Jörgen,

yes - I worked on the server. Should be better now...

I removed the "clickable" tabs. It doesn't look clickable anymore.

Thank you very much again ;-)
Title: Re: One Page Checkout like apple.com
Post by: Eugen S. on February 11, 2016, 17:00:24 PM
Quote from: Jörgen on February 11, 2016, 11:10:30 AM
This still need some work ....

Waiting forever at step 2.

regards


Jörgen @ Kreativ Fotografi

Yes - I worked on that yesterday. Works again.
Title: Re: One Page Checkout like apple.com
Post by: Eugen S. on February 11, 2016, 17:01:22 PM
Quote from: Studio 42 on February 10, 2016, 23:57:38 PM
For the checkout process :
I tested the checkout and dont think it's clear. Is apple using this ?
P.S: i dont know if you do some test, but last pageload was 48 secondes !

Not everybody likes it. It's cool

Fixed the pageload...
Title: Re: One Page Checkout like apple.com
Post by: Eugen S. on February 11, 2016, 17:04:51 PM
Quote from: Studio 42 on February 10, 2016, 23:49:29 PM
Hi Eugen, it's not possible ot have 100 in pagespeed.
A good score is 85 and more is wastle of time, if you have some images, JS and CSS load.
If you load all async, then your customer have broken render.
So preconised by Google, is to split your CSS, one for the main render and the other for your javascript needs.
Another important think is the pageloading time, browser cache and images.
If you want to check, you can check my pagespeeds here : https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fshop.st42.fr%2Fen%2F&tab=mobile
This is optimised at 95% and don't use CDN.
SI if i use CDN i get perhaps 92 or 93 pagespeed, but why ? This don't change anything. Google itself have not 100 but 88 ;)

You are wrong. Pagespeed 100 is absolutely easy to achieve. Check our Joomla Template at:
http://demotemfyone.temfy.com/

And the pagespeed 100 result:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fdemotemfyone.temfy.com%2F&tab=mobile

You don't need a CDN for Pagespeed 100.

Regarding css splitting. You need to split the css for "above the fold" and "below the fold" content. It has nothing to da with javascript.

Our own Joomla Framework handles that automatically ;-)

Summarized: Pagespeed 100 is very easy!!!

Title: Re: One Page Checkout like apple.com
Post by: Studio 42 on February 11, 2016, 17:40:03 PM
Lol you removed all our content, so any snapshot from you site is only the text.
But if you go here : https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fdemotemfyone.temfy.com%2Fblog%2Flove%2Fright-time-to-say-i-love-you&tab=desktop
You have a bad pagespeed.
Use gmetrix to have great advise and don't loose your time to have a slow site with a pagespeed of 100 in Google ;)
Title: Re: One Page Checkout like apple.com
Post by: Eugen S. on February 11, 2016, 19:32:39 PM
I got 100 in all 3 areas...

I havn't removed any content. Please note that this is a different joomla demo just to show you its possible...

The opc will also get 100 very soon, working on the overrides...

http://www.awesomescreenshot.com/image/988268/ee675d222e4ce8b98ccc8cc20cbf779c

and

http://www.awesomescreenshot.com/image/988276/f34340b729bd5b8240d4a9728eb4fcc3
Title: Re: One Page Checkout like apple.com
Post by: Studio 42 on February 12, 2016, 00:46:22 AM
I don't say this is not possible Eugen.
But this is not always good and if you do it right you don't have 100.
Why ?
Preconised by Google is to remove all external CSS files in head and include the CSS inside. use async for javascript ...
I know exactly how to reach a score of 100 but this not mean tha it's the best way to do. The worst tip is to include CSS in the head.
DO you think(be a little logic) it's better to reload each time a 100ko CSS or use an external cheat ?

This is OK when you don't have many CSS, but the time you use Some external javascript and CSS, you have a slower site on adding all in the head.

And to reach 100 in mobile, you have to serve bad quality images and replace it after. This slowdown your site too.
If you use image 600*800 and display this image using responsive in a width of 200, this is considerate as bad for google pagespeed too.
BUt on rotate your smartphone, you can have another resized width and need width of 600 image.

So what to do ? serve 200 pixels images and load after 600 pixels on rotate mobile ?

I think you don't get a faster shop on having 100 in google pagespeed. But perhaps you are right, my own experience never give better result on checking only on pagespeed and mostly the benefict was null after a level of 90.
Check other optimisation blogs and site, i think you find similar answer as me, if the articles are not a copy/paste from google. And sometime google contradicts himself depending the tools you use.