Jump to content

Archived

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

bruyndoncx

Moving forward, MS2 and beyond towards a responsive webshop

Recommended Posts

Chrome:

post-102418-0-44885800-1361040910_thumb.jpg

 

 

(p.s: sorry for the multiple posts but I couldn't attach all files to the first.)


~ Don't mistake my kindness for weakness ~

Share this post


Link to post
Share on other sites

Oops. Looks like you're not using the 960gs system. My bad.

 

Regards

Jim


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

Share this post


Link to post
Share on other sites

Current standing

IE9 Win7

OK 3 - 2 NOK (mine and pupstar)


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

Share this post


Link to post
Share on other sites

@@bruyndoncx

 

Hi Carine

 

I'm running win7, to me your site looks the same in IE9, FF18, and Chrome. The whole body area is slightly to the left and not exactly centered but I don't know if that's normal.

 

IE9:

post-102418-0-88270200-1361040747_thumb.jpg

I force a maximum width , I think if you have a real wide screen, the right margin will be bigger than the left margin. I don't think I centered the whole thing in that case, I need to doublecheck the little tweaks ...

Thanks for the detailed feedback !


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

Share this post


Link to post
Share on other sites

All fine here in IE9, chrome24 and FF12.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

That super bright green is very distracting from looking at the actual products. I usually like having a product to be the item that stands out the most on a page. You can create the free shipping to look for like an advertisement and it will stand out a little better with different size font and color than the rest of the text. Free shipping is good for conversions, so it is good to highlight it.

 

Matt D.


Atwoodz

osCommerce Experts

Share this post


Link to post
Share on other sites

That super bright green is very distracting from looking at the actual products. I usually like having a product to be the item that stands out the most on a page. You can create the free shipping to look for like an advertisement and it will stand out a little better with different size font and color than the rest of the text. Free shipping is good for conversions, so it is good to highlight it.

 

Matt D.

I agree, in the background I'm working on getting my column_left boxes refactored into box modules so that I have the flexibility for banners on certain pages without having to touch code ...

 

any chance you have some IE9 browsers around your office :D


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

Share this post


Link to post
Share on other sites

Still on the BETA (subsite)

The meta tag together with a zoom: 1; in the css for the left column (to really have transparent background on full height) , fixed my IE9 issue

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

The above line ensures IE9 follows the max-width rules (media queries) in the css, it did not without it.

As a result the logic that calculates how many products to retrieve to fit in a row should give much better results for IE too.

You can see this logic also in action if you list products, the number of products to show per page is a multiple of the number of products the system thinks will fit on your screen (screenwidth, not browser width though)

 

As for the long list of brands on the home page, I have a show/hide quick dial on the home page now in beta test which I rather like.


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

Share this post


Link to post
Share on other sites

Unfortunately IE doesn't always follow the rule in the meta tag, resulting in erratic performance. It helps to also set that in the header. I added this code to the root .htaccess:

 

# Force the latest IE version, in various cases when it may fall back to IE7 mode
# github.com/rails/rails/commit/123eb25#commitcomment-118920
# Use ChromeFrame if it's installed for a better experience for the poor IE folk
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
#
# Because X-UA-Compatible isn't sent to non-IE (to save header bytes), we need to inform proxies that content changes based on UA
#
Header append Vary User-Agent
# Cache control is set only if mod_headers is enabled, so that's unnecessary to declare

 

Regards

Jim


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

Share this post


Link to post
Share on other sites

Had a look at this in response to your reply on my dilema....

 

really like it and the only criticism i can really say is possibly making the drop down menus a little thinner, as getting off them without clicking links underneath etc is a bit fiddly. Im using iphone 4 btw, otherwise its excellent and hopefully i can achieve this standard with my responsive design.

 

Regards Shaun

Share this post


Link to post
Share on other sites

joining the 1% club

 

screenshot of ie9 attached


I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Share this post


Link to post
Share on other sites

joining the 1% club

 

screenshot of ie9 attached

Thank you ! Looks like I need to make the english menu a little shorter


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

Share this post


Link to post
Share on other sites

About responsive sliders and carousels:

 

Not sure if RoyalSlider would be better, but for now I settled on Flexslider and Elastislide (responsive and touchenabled, reasonably wide browser support according to the docs)

 

Added a slider on the home page, using Flexslider jquery script (basic slider) and included it as a frontpage module based on the banner_rotator code (autostarting)

http://flexslider.woothemes.com

 

Also using the featured products as Top Picks on the home page and fitted it in as a Elastislide carousel (manual scrolling)

http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

The elastislide carousel is also used at the bottom of the product pages to show other products in the same category.


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

Share this post


Link to post
Share on other sites

Please share your code for these new modules.

 

Regards

Jim


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

Share this post


Link to post
Share on other sites

you have a pb with 600x800 I think



Regards
-----------------------------------------
Loïc

Contact me by skype for business
Contact me @gyakutsuki for an answer on the forum

Tuto for 2.4 :
- How to Display a new page with app
- How to make Header Tags under app APP
- How to make a
boostrap modal with external element
 

 

Share this post


Link to post
Share on other sites

hi loic,

do you have a screenshot for me ?

 

Carine


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

Share this post


Link to post
Share on other sites

nice responsive checkout bar - not that I have it, but tagging here for inspiration


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

Share this post


Link to post
Share on other sites

Just my personsal opinion here but I think this helps with the alignment of the left column.  Not sure what the affect  would be on smaller viewports...

 

I see that with the breadcrumbs showing it might mess you up to use the margin-top bit.

#columnLeft {
    margin-top: 1.7%;
    padding-left: 1%;
}

Matt

Share this post


Link to post
Share on other sites

do you mean, you feel it is misaligned ?

 

it is intentional, the padding left is on the next div

 

section from my less file

 

#columnLeft {
    .column(@left_cols);
    margin: 0em;
    padding-left: 0;
    div {
        padding: @gutter-width/2*1px @gutter-width/2*1px;
    }
}

 

complete original files used to generate the first version of my responsive.css are in stylesheets/less named responsive.less and grid.less

I don't know what/how much I changed since  :blush:


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

Share this post


Link to post
Share on other sites

It was just what looked a little more appealing to my eye.  Not a big deal at all and probably not worth recoding any css for :)


Matt

Share this post


Link to post
Share on other sites

Currently working on moving the site to UTF-8.

 

For the database using the database_tables.php script provided in the admin from osC234. (needed to add back thicks to line 136 surrounding the field as I used a reserved word in the fieldname)

 

Since I won't be using versions lower than PHP 5.3, I might as well move as much as I can to UTF-8 (and have common source for email and webpages), so I'm converting the server files to utf-8 (no bom) format.

I tried using my ssh and iconv scripts on unix, but my bash/sh skills are very rusty to almost none existent.

I found a workaround to save files in directories recursively as utf-8(no bom) using my trusted notepad++ and some python script.

https://pw999.wordpress.com/2013/08/19/mass-convert-a-project-to-utf-8-using-notepad/

 

Just needed to get python (3.x ) installed (accepted defaults), and adding python plugin to notepad. A reboot and a restart, and done.

 

First gotcha which took some time to find why.

I explicitly set the http header to UTF-8 as the first output in application top, but still kept getting results on the product page in ISO-8859-1 , caused by an ajax call that returned results in ISO-8859-1.

 

Secondly, I removed USU5 by FWR( not being supported, and me being unable to fix the url rewrite code for UTF-8), I decided to move back to chemo's/jack_mcs supported seo class.

Much easier to read and extend. So I added a bit to support the manufacturers name in the product url and enforce a language directory in the url.

 

Background reading material I found most usefull

http://docslide.us/documents/unicode-utf-8-with-php-53-mysql-55-and-html5-cheat-sheet.html

http://htmlpurifier.org/docs/enduser-utf8.html

http://www.phpwact.org/php/i18n/utf-8


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

Share this post


Link to post
Share on other sites

TIP - if moving to UTF-8, first get rid of USU5, and make sure everything is working fine again.

 

allowing non-ascii characters in urls causes some different issues and makes troubleshooting harder

 

Review code for use of HTML_entities as it defaults back to ISO-8859-1 on some PHP 5.x versions

 

relevant php info about HTML_entities in different php versions

http://fi2.php.net/manual/en/function.htmlentities.php

<quote> An optional argument defining the encoding used when converting characters.

If omitted, the default value of the encoding varies depending on the PHP version in use. In PHP 5.6 and later, the default_charset configuration option is used as the default value. PHP 5.4 and 5.5 will use UTF-8 as the default. Earlier versions of PHP use ISO-8859-1.

Although this argument is technically optional, you are highly encouraged to specify the correct value for your code if you are using PHP 5.5 or earlier, or if your default_charset configuration option may be set incorrectly for the given input.

</quote>

 

My breadcrumb trail function had this, mixed in.


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

Share this post


Link to post
Share on other sites

managed to get the virtual language directories defined in htaccess combined with ultimate seo urls working.

Wonder why there is no siri app yet for rewrite rules :D


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

Share this post


Link to post
Share on other sites

×