Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

How good is stock OsCommerce?


JcMagpie

Recommended Posts

^^

Bootstrap 4 addresses many of these "issues". It has a default font size of 16px.

Another thing that can be done is to lossless compress images, there are plenty of free online tools available for that. I like using this one:

https://kraken.io/

If the image set of the oscommerce package were losslessly compressed that would make a difference to the above scores.

Link to comment
Share on other sites

  • Replies 65
  • Created
  • Last Reply

Well its a quick fix in bootstrap 3 just add the following to user.css, all font errors gone and site more readable on mobile. Just tick them off one by one.:smile:

Oh by the way this is for stock so if you have modified your site or used a template change color /font style to match your current site.

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

 

If you don’t want change all the text ( but you should) then set each section using this. It covers most of the text.

.description {
    font-size: 16px;
}

.dropdown-menu {
    font-size: 16px;
}   

.form-control {
    font-size: 16px;
}
.btn {
    font-size: 16px;
}    

.footer {
    font-size: 16px;
}

 

Link to comment
Share on other sites

you can add it like this:

body {
    font-size: 16px;
    line-height: 1.5
}

.list-group-item-text { line-height: inherit }
.thumbnail { line-height: inherit }

you only need to put the css that you want to change. And the line height of 1.5 that i have is how it is in V4. This will further increase the SEO score.

There may be other classes that are affected, but i think not many.

@JcMagpie

After you change the body tag to 16px, many other classes inherit, so no need to explicitly change input, button etc.

Link to comment
Share on other sites

body {
    font-size: 16px;
    line-height: 1.5
}

.dropdown-menu { font-size: 16px }
.dropdown-menu > li > a { line-height: 1.5 }
.list-group-item-text { line-height: inherit }
.thumbnail { line-height: inherit }

 

Link to comment
Share on other sites

9 hours ago, Hotclutch said:

This will further increase the SEO score.

Well that worked, just fixing the fonts and line made a big difference

with 14px stock frozen

image.png.b2bc695d69fc36d9107234f4c404cffa.png

 

changing to, font-size: 16px; line-height: 1.5 we get, if only all improvments were that simple :biggrin:.

image.thumb.png.620526e17b8d426425ea9a5ba88f9252.png

 

Link to comment
Share on other sites

So had a look at the bug in bootstrap in stock Frozen.

image.png.32057c5675b36fe1913978e9d2d3aae3.png

No fix for this in bootstrap 3! I changed to up to cdn 3.6.7 but it still had bug.

image.thumb.png.1016ea082ffe6eb50abc96d18a333658.png

I tested 4.1.1 cdn and this fixs bug but brakes stock frozen layout.

So looks like we have to put up with this until bootstrap issue a fix. Unless someone has a fix?

 

Link to comment
Share on other sites

So how do we improve this,

image.png.d86e7cdc43124965d10cfe2096e686c8.png

Now this is built into Frozen but is not automatic. It would be better to have this as the Products Title for SEO: which is auto set. The Product description should default to the meta description unless changed.

So lets see what effect it has when we use it. Will use generic descriptions from wiki.

First just doing categories. No noticeable improvement still giving same error.

Product data, Again made not change! So ok lets add manufacturers meta data. Still no change?

Ok lets do this the old way. Lets add it to template_top.php

So added this copied from old 2.2 site.

<META NAME="DESCRIPTION" CONTENT="Just Fast Food bringing you great taste in all fast foods">

<META NAME="KEYWORDS" CONTENT="burger, Tawa, chicken, Tawa chicken, Pizza, restaurant, fast food, hounslow, london, united kingdom, franchise, order, take away, food, fast food, burger, MacDonald, KFC, chicken cottage, halal, curry, curries, google, fast">

<META NAME="DISTRIBUTION" CONTENT="Global">

<META NAME="RATING" CONTENT="General">

<META NAME="LANGUAGE" CONTENT="EN">
<META NAME="AUTHOR" content="Just Fast Food">
<META NAME="PUBLISHER" content="Just Fast Food">
<META NAME="COPYRIGHT" content="Just Fast Food">
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<META NAME="REVISIT-AFTER" CONTENT="1 DAY">

:biggrin: Well that did the trick! Look at the SEO score now!!!

image.png.61ebb45cde939263eb03cbf832491207.png

Do I need it all? Probably not, must have added it to 2.2 for a reason, but don't ask was done over 15 years ago.

 

 

Link to comment
Share on other sites

Ok so now to try and fix these one by one.

image.png.16d9b203c5e600de5bdf464a68376a9d.png

The last one is strange it fixed it self on page refresh but then re occurs!

image.png.5baf6532ed73156302fc2b2ea44d6d85.png

image.png.a6e0b2694570a9c1d171971a32324f62.png

Out side my comfort zone so will have to find time to look into it further. Any feedback welcome.

 

Link to comment
Share on other sites

You're gonna get some flak for adding meta keywords tag :laugh:

meta robots index you never need to explicitly add, because the default behaviour of robots is to index, follow.

I am surprised the audit tool fails on the omission of a meta description tag. Google does not worry with it, Bing still highlights it as a SEO factor. In any case, there are a few good addons that add meta description if the siteowner wants them.

 

Link to comment
Share on other sites

Never mind I’m getting use to it here :biggrin:, just trying to muddle through it as best I can.

I don't mind like you did before feel free to add a corrected version of what should be used.:thumbsup:

 

Link to comment
Share on other sites

13 hours ago, JcMagpie said:

Well its a quick fix in bootstrap 3 just add the following to user.css, all font errors gone and site more readable on mobile. Just tick them off one by one.:smile:

Oh by the way this is for stock so if you have modified your site or used a template change color /font style to match your current site.

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

 

If you don’t want change all the text ( but you should) then set each section using this. It covers most of the text.

.description {
    font-size: 16px;
}

.dropdown-menu {
    font-size: 16px;
}   

.form-control {
    font-size: 16px;
}
.btn {
    font-size: 16px;
}    

.footer {
    font-size: 16px;
}

Consolidating your changes and mine we can put in user.css

body {
    font-size: 16px;
    line-height: 1.5
}

.dropdown-menu { font-size: 16px }
.form-control { font-size: 16px; line-height: 1.5 }
.btn { font-size: 16px; line-height: 1.5 }
.dropdown-menu > li > a { line-height: 1.5 }
.list-group-item-text { line-height: inherit }
.thumbnail { line-height: inherit }

.description and .footer, I don't think they are bootstrap, or maybe they are custom.css, so i have not added in those.

Link to comment
Share on other sites

Ok looking at the second issue short_name (from bottom)

image.png.843e1cd9981921eab395c72803c8dbef.png

Simply by adding a manifest.json file and adding

<link rel="manifest" href="manifest.json" />

To <head> in template_top.php got rid of that and improved our best practice rating.

I just used a stock template for the file.

{

"name": "Just Fast Food",

"short_name": "JFF",

"description": "Just Fast Food bringing you great taste in all fast foods",

"start_url": "https://www.justfastfood.com",

"background_color": "#000000",

"theme_color": "#0f4a73",

"icons": [{

"src": "icon-256.png",

"sizes": "256x256",

"type": "image/png"

}]

}

image.png.09230edd6422a940a7e4b017e349b0af.png

 

Link to comment
Share on other sites

Ok looking at second issue rel=”noopener”

image.png.b64389e5509d935102c174bd75775ecf.png

This is caused by /public_html/includes/languages/english/modules/content/footer_suffix/cm_footer_extra_copyright.php

by this part of code.

Powered by <a href="http://www.oscommerce.com" target="_blank">osCommerce</a>

As this is no longer a requirement of OsC it can simply be removed. Or if you want to fix it _blank needs to be fixed. See below

https://developers.google.com/web/tools/lighthouse/audits/noopener

Fixed code is,

Powered by <a href="http://www.oscommerce.com" target="_blank" rel="noopener">osCommerce</a>

That now gives us,

image.png.7db69293b205348fc317afaa82a1ce19.png

Ok so slowly getting better. So onto the next one :smile:

 

Link to comment
Share on other sites

9 minutes ago, Hotclutch said:

In your template top, replace 


<html <?php echo HTML_PARAMS; ?>>

with hardcoded:


<html dir="ltr" lang="en">

 

But what if I change language in shop? once hard coded will this not cause problems or is that not relavent?

 

Link to comment
Share on other sites

Ok I think were done with Best Practice as the 3 left are all related and out side my control for now.

image.png.88d1ee9984e6c2304c33e3348d7213eb.png

 

Going to take a brake as footy on tonight and need to get ready for that ( Go England!!!!):biggrin:

Will have a look at others tomorow, thanks for your help Ashley :thumbsup:

 

Link to comment
Share on other sites

.btn { font-size: 16px; line-height: 1.5 }

Changing the btn class to 16px causes some alignment issue on the cm_header_search, so i recommend leaving this out, or maybe something else needs to change along with it.

 

Link to comment
Share on other sites

Yeah found that :biggrin: Gary will know why and how to fix, but for now I fixed it with user.css by adding

/* surch bar fix */

.form-control {
    width: 100%;
    height: 38px;
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}

 

Link to comment
Share on other sites

1 hour ago, burt said:

Great thread @JcMagpie.  Keep on going with this thread, as I am following your efforts with conclusion of putting into next round of changes in CE.

Yeah thanks, plan to carry on tomorow just slowly working down the list. Had to stop to get BQ ready for footy.:biggrin:

 

Link to comment
Share on other sites

Ok let take a look at acceptability.

image.png.280d6694f2e54aba68495c78beb5f77e.png

Starting with Color Contrast,

image.thumb.png.9a0e24c56fd426a939fd751e13c73ff5.png

The issue here is poor contrast on button to text and background to text on cats box. All the “a” are cats.

Use this tool to check

https://dequeuniversity.com/rules/axe/2.2/color-contrast?application=lighthouse

Used this in user.css to fix

 

.btn-success {
color: #fff;
background-color: #2B642B;
border-color: #00b3db;
}

a {
color: #285C8B;
text-decoration: none;
}

 

Now we have, but this is an issue on many buttons as default contrast is poor. This is an issue with Bootstrap. This is for people with poor sight. So pick your colors carefully.

image.png.0d31a1597b9c965b8be88bf773281a2f.png

 

 

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...