Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Moving forward, MS2 and beyond towards a responsive webshop


bruyndoncx

Recommended Posts

Hello all,

 

Our new version for the webshop is almost finished.

 

The webshop is an upgraded MS2 installation with contributions and custom code.

 

This last revision has focused on making the website more responsive, in particular getting a megamenu that fits within the allotted space (major issue on current live shopsite).

Furthermore trying to get a reasonable browsing experience on different (tablet) devices.

 

Mobile phones can use the site I think, but it is not optimized (yet) for mobile use (all data is still transferred, no responsive images or sliders, no lazy loading ...)

 

The BETA webshop is at http://www.keukenlust.be/beta/

 

this is the real database, just another customer frontend ! Please dont order unless you want it delivered ;)

 

I would very much appreciate it if you could have a look with small and big screens and let me know what works and even better what doesn't work properly.

I have windows machines, but no mac, samsung galaxy or ipad / iphone here.

 

If you want more information or pieces of code. Feel free to ask, I'll do my best to share what I can or point you to where things have developed from ...

 

Thanks

Carine

www.keukenlust.be/beta/

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

It's an interesting design. It adjusts reasonably well to every desktop size I tried, up to 3840 x 1080.

 

Some of the text is being cut off, likely due to a fixed height in pixels and a font picked from my installed list (Firefox on Linux). Screenshot here. That happens in the Browse other products in this category box on the product pages as well. I suggest you set the box heights in points instead.

 

Your free shipping banner is showing &eur; as text, but the prices show the correct symbol. Possibly a charset issue?

 

Is the Brands menu really more important than any other way of finding products? It does overwhelm the page. It took me a bit to find the main menu in the top bar.

 

The products I looked at were all lacking a description. Is that something that you haven't done yet? It's pretty much an essential.

 

I really like the Browse other products box on the products page. I would add the capability to select products from other categories as well, which allows you to do some cross-selling.

 

I like the look of it. It makes me want to go shopping, so it does seem to be effective. Good work.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

.js off - not good. Add a message - I like the style that Magento use, I shamelessly ripped theirs.

 

Other than that, I'm interested to see where this goes. Nice work.

Link to comment
Share on other sites

It's an interesting design. It adjusts reasonably well to every desktop size I tried, up to 3840 x 1080.

I've put a maxium width in the design for screens over 1600px, setting it back to 1280 as I felt that to be a good widescreen view.

With a 3840 screen, does it annoy you that it doesn't use the full width, or do you typically have 2 (or more?) windows side by side ?

 

Some of the text is being cut off, likely due to a fixed height in pixels and a font picked from my installed list (Firefox on Linux). Screenshot here. That happens in the Browse other products in this category box on the product pages as well. I suggest you set the box heights in points instead.

I'm not sure it that is going to fix it, it happens when the manufacturers name and products name is all rather long, or has long words in it making the products name wrap and it all taking up more lines than fit in the box. The size of the products box (the green on hover) is fixed to mimic products in a row, when it is not fixed, float left can have strange results. Possibly some tuning is possible to that for a given row, the height is set to the maximum needed for that particular row. The issue is mostly with the % off text, which I plan to superimpose on the image, like the bottom right corner. If that is done, the cutting off, becomes a minor issue. Yes, the issue is consistent throughout, it uses the same function call (wonder why hpdl never considered that), the product listings on products_new, specials and index, category, products_filter are also all the same module used. (I'm not sure, perhaps this is now also done in 2.3.1, wasn't in MS2 at least)

Your free shipping banner is showing &eur; as text, but the prices show the correct symbol. Possibly a charset issue?

typo of my late night update, should have read ampersand euro, forgot the o

Is the Brands menu really more important than any other way of finding products? It does overwhelm the page. It took me a bit to find the main menu in the top bar.

We sell practically all major branded products, so for our shop it is important, but your point about the top menu is also valid, somehow it doesn't stand out, while on the old site it is more clear.

I think if the top has more of a tabbed interface look, and the category labels in caps, it would probably be better.

I'm looking to integrate a kind of show/hide manufacturers menu so it's easily accessible, but not in your face all the time.

I also want it for google and stuff.

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

The products I looked at were all lacking a description. Is that something that you haven't done yet? It's pretty much an essential.

you are correct, our store is a physical one with a webshop since it is in a rural area with not that many inhabitants.

stats wise, we only have descriptions for about 10% of the active products, order wise, Over 80% of products ordered are without description. As we mostly sell branded products often the people know the products already, and reorder or complete their collection. We tend to use the brand and their reference model/type for the product to reassure the customer it is the same product.

We do have specifications for pots&pans, which is our core business, so that kinda compensates a little, also important ranges are setup with product families, where I added a language depended description in order not to copy the same stuff for each product. (manufacturers, and categories also have room for descriptions).

Evidently we have lots of room for improvement by populating all the available descriptions and specifications (and not to forget images ...)

 

I really like the Browse other products box on the products page. I would add the capability to select products from other categories as well, which allows you to do some cross-selling.

Not sure I understand completely, not sure if you can just pick any other category to show.

For product families, all products in the same family are listed in that area too, so that is possibly cross category, eg like for some alessi designers?

 

I like the look of it. It makes me want to go shopping, so it does seem to be effective. Good work.

thank you

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

.js off - not good. Add a message - I like the style that Magento use, I shamelessly ripped theirs.

Ah yes, need to doublecheck, added to the list. So I'll just rip yours ?

Other than that, I'm interested to see where this goes. Nice work.

I was thinking of starting to use github and upload then you could literally see where it goes :D

I understand the free version is fully public, but for a small price it is possible to setup a private repo which can be shared.

Do you have experience with it ?

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

Answering in order (more or less)

 

1. I normally keep the browser window around 1400 x 1080. This leaves room for the editor window and whatever else I might need at the moment. Other applications that don't relate to what I'm working on right now are kept on other desktops. I only opened your site at full size to see what it would do. It copes well, which is often a problem with floating width sites.

 

2. Fixed height boxes are a pain. I was thinking that the problem was that my font is larger, but if it's doing the same thing on your screen that's not going to help. Some sort of dynamic resizing may be needed. I don't have any good solutions for this.

 

3. I would look at putting the manufacturer in the top bar, so the customer could show it or not. The dull color of the top bar makes it fade into the background, especially with the same color in the Manufacturer list to the left. Perhaps moving the manufacturer into the top bar will fix this. I'm not the person to be giving color advice, so...

 

4. You can use one of the cross-sell (xsell) addons to allow you to select the additional products to show on each product page. This is most useful if you have products that have commonly used accessories or supplies. I put this on a site that sold very few accessories for their products, and their accessory sales (with a product) jumped to over 50%.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

Ah yes, need to doublecheck, added to the list. So I'll just rip yours ?

 

Sure thing! I'll do a blog tomorrow on it. Simples.

 

I was thinking of starting to use github and upload then you could literally see where it goes :D

I understand the free version is fully public, but for a small price it is possible to setup a private repo which can be shared.

Do you have experience with it ?

 

Unfortunately I don't. I could really do with buying a git book if there is one.

Link to comment
Share on other sites

Git has very poor documentation. If you find a resource that does a good job of explaining it, please share.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

this is a pretty comprehensive set of pages, I went to through the beginnner, intermediate and advanced section but I guess I'll need to play with it a little to really understand it.

I'm trying to get my head around how to then best setup my repository with is an MS2 fork with most but not all 2.3.1 changes applied.

There is also some discussion on submodules, but I think that applies more to e.g. the ext directory with jquery files.

Ultimately I'd like to keep up with the osCommerce2 developments , but I'm not sure how it works if I decide not to implement certain changes in 2.3.1.

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

I'm at just about the same stage as Carine, with Github.

 

I don't quite understand the following;

 

say I make a change in admin/categories.php on my fork.

Then Harald makes a change in his admin/categories.php

 

How do I grab Haralds change and insert to mine, with destroying my already made changes.

Link to comment
Share on other sites

.js off - not good. Add a message - I like the style that Magento use, I shamelessly ripped theirs.

The site makes use of less to generate css using javascript less.js file, I now included the plain css result inside the noscript tag so that while I finetune things further, at least some reasonable page layout is generated.

 

Cosmetic no javascript effects:

  • header shortcut jquery buttons on top
  • tabs on customer service pages (not functional, but shows all content on single page - good enough)

Not working without javascript:

  • enlarge/reset/reduce font links
  • the tabs used on the product page (shows non formatted content, looks out of order)
  • social buttons (google and facebook not showing) bottom right.

Maybe I can add an unobstrusive message in the header for the users without javascript, I'll check your site ;)

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

Carine - latest post in the blog.

 

For those who don't know where the blog is, please see my profile page where you will find a link.

Thanks gary, I already put something up, not nearly as nice though !

I was wondering, shouldnt we have a noscript fallback on the shoppingcart buttons and image gallery standard in osC 2.3.1 ?

I don't use the gallery, but do have the fancybox zoom which degrades nicely withouth javascript.

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

I was wondering, shouldnt we have a noscript fallback on the shoppingcart buttons and image gallery standard in osC 2.3.1 ?

 

Yes, we should. I'm not too bothered about the buttons as they are OK as links. The main problem is the gallery as the images are not resized down.

Link to comment
Share on other sites

  • 4 weeks later...

I really like the site and it's design, I think you've done a really good job. What imho is horrible is your logo, and to be more precise, the box with the picture of a pot and a glass on it. Good luck!

Link to comment
Share on other sites

  • 3 months later...

hello again, I've progressed a little bit since may and have just made the site live.

 

I know for small screen phones it is not yet optimal, but for tablets, netbooks, laptops big and small I expect things to work properly.

 

Please let me know if you find funny stuff or things not working. I've only done limited testing on IE and Firefox with this update.

If you have a look and no particular feedback, would you still please post the OS and browser you have used ?

 

Thanks a lot

 

www.keukenlust.be - please note this is a live site - no bogus orders please ...

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

I just added adaptive-images.com scripts, so the load should be a little lighter for big images

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

A couple of things:

1. The search bar says "Zoek Hier ...", but everything else is in English.

2. Clicking on the Discount filter sends me to a page with a huge image of an arrow pointing down. The image is named arrow_down2.png, and the original 14 x 14 pixels is being scaled to 1260 x1260. This is because it has a width set to 100%.

 

Firefox 15.0.1 on Linux.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

@@kymation thanks for the test

1. is fixed

2. I reversed the logic, to have the home page with the big image fit on the phone it needs 100% width set as I still have a left column, but setting 100% width in other areas is giving side-effects, so I backed out the 100% setting,

I'm gonna thinker a bit more on my beta site to find a solution for both (brand images on product pages where also hugh ...)

I could drop the left column on the phone, but then no filtering is possible, unless I put the product filters on top,

or I can just drop it on the home page and leave it to allow filtering

or I can put the filter in an accordeon menu on the phone layout ...

 

 

time to sleep on it :)

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

  • 4 months later...

I'm having strange display results in IE9 windows 7 on one PC here at the office, not on other PCs with similar configuration.

On the home page, the manufacturers list is moved just a little bit to the left outside the main content area, and when scrolling the foreground text color and background dark color act strange.

 

I have W3C HTML5 validated the page and nothing stands out as being wrongly coded. I'm just wondering if there is a real genuine problem, or I just have a messed up PC ...

 

Would love to have some feedback from people if that manufacturers box on the home page( http://www.keukenlust.be ) looks OK or not.

 

Thanks a lot !

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

I'm having strange display results in IE9 windows 7 on one PC here at the office, not on other PCs with similar configuration.

On the home page, the manufacturers list is moved just a little bit to the left outside the main content area, and when scrolling the foreground text color and background dark color act strange.

 

I have W3C HTML5 validated the page and nothing stands out as being wrongly coded. I'm just wondering if there is a real genuine problem, or I just have a messed up PC ...

 

Would love to have some feedback from people if that manufacturers box on the home page( http://www.keukenlust.be ) looks OK or not.

 

Thanks a lot !

 

Carine,

 

The list is definately shifted to the left in IE9 on my laptop.

 

Mark

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...