Skinning CE4 Cart

Matthew · 2014-07-30 16:10:13

Hi all,

I'm working on re-skinning the cart to be more sexy and functional. My work-in-progress is here:
http://campagnapictures.com/galleries/c … lery-test/

So far, only the add-to-cart modal is changed. This is the pop-up that appears when you click the cart button on an image.

I've tested on desktop browsers, and on iPhone and iPad in Safari.

When I get home tonight, I will need to recharge my Nexus 7 tablet, then I'll try that as well.

I would greatly appreciate any additional testing you all can provide, especially on mobile devices that I don't readily have access to, such other other Android devices, Windows phones and tablets, etc.

Please let me know your findings.

Thanks,
Matt

Matthew · 2014-07-30 16:15:24

I just got my hands on an Android phone here at the café and the modal works really well in Android Chrome.

Kris · 2014-07-30 17:46:03

Look very nice, a huge improvement on previous.

Couple of problems on Chrome on android 4.4.4 ...

1. There is a quantity / remove / pricing layout glitch.

2. Another formatting error when clicking on 'change' on an item already in your cart.

Edit - errors display on both phone and tablet. the second error causes the tab to freeze and become unresponsive.

See images at:

https://drive.google.com/folderview?id= … sp=sharing

I'll keep playing with it.

Last edited by Kris (2014-07-30 17:50:26)

Matthew · 2014-07-30 17:51:35

Hi Kris,

Are you talking about the cart view? If so, that's just beginning to get worked on and is still very buggy. I'll update this thread when it's ready for testing, but it's probably not worth your digging into at this point.

Presently, the only thing that's ready for viewing/testing is the modal add-to-cart view in the gallery.

Not much more is likely to change today. I'm just about to head out for some dinner, and I'm not sure whether I'll spend any more time on this this evening. I'll be back at it tomorrow, though.

Matthew · 2014-07-30 17:54:31

Kris,

Specifically, what's that second screen? Is that the add-to-cart modal on Android 4.4.4 / Chrome?

Kris · 2014-07-30 17:56:48

OK.

Yes, it was in the cart view.

I'll just play with the 'add to cart' section then for now.

I've added another image that demonstrates the error on the tablet

Kris · 2014-07-30 18:00:14

Got one for you.

Android 4.4.4.

When a phone screen is filled with square thumbnails from a gallery, the finger scroll will not work and will not allow me to scroll the page up or down. I can select an image for large view however.

If there is a section of screen that does not have a square thumbnail, then scrolling from that point re-enables scrolling.

Hope that makes sense.

Kris · 2014-07-30 18:02:40

Matthew wrote:

Kris,
Specifically, what's that second screen? Is that the add-to-cart modal on Android 4.4.4 / Chrome?

No, that's the results of view cart >> Change button.

The first and second image is 4.4.4 Chrome.

The third image is tablet chrome on 4.2.2.

Last edited by Kris (2014-07-30 18:08:08)

Kris · 2014-07-30 18:38:20

Once a package has been chosen and the customer has selected an image, I think the text:

Assign an item to a package

would be better replaced with

Assign this image to your chosen package

Also, I think that the ItemName and ItemID (the filename) is less relevant to the customer than the actual product being added. Is it possible to only have the product in the add to cart dialogue box without anything superfluous. I say this because I had one school this year where I swear nobody could ever have bought anything on the Internet in their lives, so anything that can confuse them will.

I think Cancel would be better as an actual button rather than the current text link.

Last edited by Kris (2014-07-30 18:48:42)

Ben · 2014-07-30 19:48:02

Kris wrote:

Once a package has been chosen and the customer has selected an image, I think the text:
Assign an item to a package
would be better replaced with
Assign this image to your chosen package

Hi Kris, in case you missed it, all text items can be changed via the Admin->Settings->Localisations->Manage Localisation function.

Matthew · 2014-07-30 19:58:30

Kris wrote:

Also, I think that the ItemName and ItemID (the filename) is less relevant to the customer than the actual product being added. Is it possible to only have the product in the add to cart dialogue box without anything superfluous. I say this because I had one school this year where I swear nobody could ever have bought anything on the Internet in their lives, so anything that can confuse them will.

You may have a point there.

Kris wrote:

I think Cancel would be better as an actual button rather than the current text link.

I do think we want to encourage people to add the item to the cart, yes? In design, we should not give equally weight to things we do not want people to do. This is subliminal encouragement. ;-)

Matthew · 2014-07-30 20:00:23

Kris wrote:

Got one for you.
Android 4.4.4.
When a phone screen is filled with square thumbnails from a gallery, the finger scroll will not work and will not allow me to scroll the page up or down. I can select an image for large view however.

Try now. Be sure to refresh, clearing the cache. I Googled, found an Android bug that might be the cause, and have applied the reported fix. But I can't test it.

Kris · 2014-07-30 20:05:44

OK. give me a minute.

Btw, if you add a second package to the cart when you already have an incomplete first package in the cart, it throws an error and then actually mixes up the two packages, e.g., what was 2 of 6x4s in the first package will transfer to the second.

Last edited by Kris (2014-07-30 20:06:06)

Kris · 2014-07-30 20:12:53

Matthew wrote:

Kris wrote:
Got one for you.
Android 4.4.4.
When a phone screen is filled with square thumbnails from a gallery, the finger scroll will not work and will not allow me to scroll the page up or down. I can select an image for large view however.
Try now. Be sure to refresh, clearing the cache. I Googled, found an Android bug that might be the cause, and have applied the reported fix. But I can't test it.

Nope, still demonstrating the same fault on tablet and phone. Cleared history and cache too.

Even on 11" android tablet that displays the desktop view.

Last edited by Kris (2014-07-30 20:13:39)

Kris · 2014-07-30 22:59:37

Matthew wrote:

Kris wrote:
Also, I think that the ItemName and ItemID (the filename) is less relevant to the customer than the actual product being added. Is it possible to only have the product in the add to cart dialogue box without anything superfluous. I say this because I had one school this year where I swear nobody could ever have bought anything on the Internet in their lives, so anything that can confuse them will.
You may have a point there.

Excellent.

The filename only becomes necessary after an order to trace the exact image required, yet appears equal font and above the actual product that is being added to the cart..

How about only having the filename as a mouseover on the thumbnail image, or in small font under the thumbnail image?

Matthew · 2014-07-30 23:06:59

The cart allows sale of items other than images, so there should always be a title. We don't necessarily need to show the Item ID, though.

krabydick · 2014-07-31 02:35:57

The touch scroll over the thumbnails is working now (nexus 5 android 4.4.4). However while you're working on the cart, it would seem a good time to raise the issue of the download links that are supplied after checking out have the same problem that I mentioned in the CE4 galleries.

Ben · 2014-07-31 10:07:33

Kris wrote:

OK. give me a minute.
Btw, if you add a second package to the cart when you already have an incomplete first package in the cart, it throws an error and then actually mixes up the two packages, e.g., what was 2 of 6x4s in the first package will transfer to the second.

Hi Kris, this shouldn't be the case. Are you adding two of the same package? If so, it may be that you're mixing up which was the old and which is the new when viewing the cart. Also, what error was thrown?
It would be great if you could provide a link and steps to follow so I can see this happen.

Ben · 2014-07-31 10:08:16

krabydick wrote:

it would seem a good time to raise the issue of the download links that are supplied after checking out have the same problem that I mentioned in the CE4 galleries.

What issue is that?

Matthew · 2014-07-31 10:52:12

I'd really like to keep this thread on topic, Kris. All I need here is feedback on the re-skinning and browser compatibility on various devices. If you have other topics to discuss, please start another thread.

And the scrolling issue is apparently related to the "Touch" presentation type, which I will need to investigate separately. For now, I've switched the test gallery over to Magnific.

Matthew · 2014-07-31 17:48:58

The first cart view page is now more or less complete. Nothing beyond that first page, though.

Matthew · 2014-07-31 20:39:31

I lied. Not quite finished. I forgot to format display of packages. Tomorrow, perhaps. Or late this evening if insanity takes hold yet again.

Matthew · 2014-08-01 13:55:43

I've sorted out display of packages, and the first cart view page is now complete.

Matthew · 2014-08-02 12:41:46

Now running the finished release candidate here:
http://campagnapictures.com/galleries/c … lery-test/

All customer-facing pages should now be redesign-complete, and substantially improved on mobile in particular.

I have some related updates to make to CE4 Gallery, then will be packaging builds to hopefully get some testing done on the weekend. If all goes well, then I think a public release early in the week is likely to happen.

Kris · 2014-08-02 17:13:51

I'll have a play later.

I'll try and replicate my package merging problem as well.

One minor point, any chance to have 'skip to checkout' to actually scroll to the relevant area (a la return to top ), rather than a hard jump?

Last edited by Kris (2014-08-02 17:15:05)

Community @ The Turning Gate

#1 2014-07-30 16:10:13

Skinning CE4 Cart

#2 2014-07-30 16:15:24

Re: Skinning CE4 Cart

#3 2014-07-30 17:46:03

Re: Skinning CE4 Cart

#4 2014-07-30 17:51:35

Re: Skinning CE4 Cart

#5 2014-07-30 17:54:31

Re: Skinning CE4 Cart

#6 2014-07-30 17:56:48

Re: Skinning CE4 Cart

#7 2014-07-30 18:00:14

Re: Skinning CE4 Cart

#8 2014-07-30 18:02:40

Re: Skinning CE4 Cart

#9 2014-07-30 18:38:20

Re: Skinning CE4 Cart

#10 2014-07-30 19:48:02

Re: Skinning CE4 Cart

#11 2014-07-30 19:58:30

Re: Skinning CE4 Cart

#12 2014-07-30 20:00:23

Re: Skinning CE4 Cart

#13 2014-07-30 20:05:44

Re: Skinning CE4 Cart

#14 2014-07-30 20:12:53

Re: Skinning CE4 Cart

#15 2014-07-30 22:59:37

Re: Skinning CE4 Cart

#16 2014-07-30 23:06:59

Re: Skinning CE4 Cart

#17 2014-07-31 02:35:57

Re: Skinning CE4 Cart

#18 2014-07-31 10:07:33

Re: Skinning CE4 Cart

#19 2014-07-31 10:08:16

Re: Skinning CE4 Cart

#20 2014-07-31 10:52:12

Re: Skinning CE4 Cart

#21 2014-07-31 17:48:58

Re: Skinning CE4 Cart

#22 2014-07-31 20:39:31

Re: Skinning CE4 Cart

#23 2014-08-01 13:55:43

Re: Skinning CE4 Cart

#24 2014-08-02 12:41:46

Re: Skinning CE4 Cart

#25 2014-08-02 17:13:51

Re: Skinning CE4 Cart

Board footer