Jump to content
burt

Responsive osCommerce - Bootstrap

Recommended Posts

@@newburns

the 2.3(bs) will be maintained in line with the 2.3(normal) series.

That should answer the question.


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 Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

https://github.com/gburton/osCommerce-234-bootstrap/milestones

 

You can click on each Milestone to see individual tasks.  

 

When these Milestones are complete, I am going to declare 2.3.4(responsive) "gold", and there will then be no further changes (other than bug fixes). 

 

I have the micro data installed.  If you want to see how the page source shows or anything such just let me know.


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

Thanks @@Dan Cole - appreciated :)

Thanks @@altoid - appreciated :)  Looks good as the content is set to 6 (half), which gives the side columns 3 (quarter) each.

 

Thanks for testing guys, I'll commit this to 234bs and 2.4 :thumbsup:

Small typo Boostrap Container   boo bah :P

INSERT INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Bootstrap Container', 'BOOTSTRAP_CONTAINER', 'container-fluid', 'What type of container should the page content be shown in? See http://getbootstrap.com/css/#overview-container', '17', '1', 'tep_cfg_select_option(array(\'container-fluid\', \'container\'), ', now());
INSERT INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Bootstrap Content', 'BOOTSTRAP_CONTENT', '8', 'What width should the page content default to? (8 = two thirds width, 6 = half width, 4 = one third width) Note that the Side Column(s) will adjust automatically.', '17', '2', 'tep_cfg_select_option(array(\'8\', \'6\', \'4\'), ', now());

plus just thought I would mention if anyone is upgrading and gets #1062 - Duplicate entry '16' for key 'PRIMARY' ERROR 

The number 16 needs to be changed to next available number (my case 17) in x 3 places in the sql statement .

 

Of course I am working on a modified shop just thought I would mention.

Regards

Joli


To improve is to change; to be perfect is to change often.

 

Share this post


Link to post
Share on other sites

Did notice a problem on iphone using resizer software I set the tables as well to 100%

 

http://www.osc-design.com/images/screenshot.png

 

Here you see the text/table going over the image

 

I am using a non standard ckeditor with background image table and fontawesome

 

Still playing about with it I think the answer is in the product_info.php gettiing maybe the tables to drop below the image in small format can do that but does not look  tidy so still a work in progress.

 

Now not exactly the same problem as I am using non standard stuff at the minute .but similar

 

There is a lot written about table-responsive etc on the web still trawling through it

 

Regards

Joli

 

 


To improve is to change; to be perfect is to change often.

 

Share this post


Link to post
Share on other sites

Did notice a problem on iphone using resizer software I set the tables as well to 100%

This resizing software is not ideal...

 

Here you see the text/table going over the image

Does the same happen on a site that is "standard" osc(bs)


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 Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

This resizing software is not ideal...

 

 

Does the same happen on a site that is "standard" osc(bs)

No  this is using a plugin for ckeditor which basically allows a background image to be set in a table in this case the product description fine except in small view and yes you are right with the resizer does not always show a true picture.

 

What I intend to test is giving the product desc and color box fields in product_info.php a definite width something like .col-xs-?? .col-md-??  and maybe a class so I can control better in stylesheet.

 

Going to ask for testers on a new thread as not directly bootstrap but the use of the icons does enhance and compliment bootstrap

 

What I have is here new thread started as not directly bootstrap.

 

http://forums.oscommerce.com/topic/399478-for-bootstrap-turbo-charged-ckeditor/

 

Anybody wanting to test my turbo charged ckeditor  can download  it includes

fontawesome / glyphicons (display front side ok bug in admin display ) / advanced images and table backgound images

 

regards

Joli

Edited by joli1811

To improve is to change; to be perfect is to change often.

 

Share this post


Link to post
Share on other sites

Hi all,

 

bootstraped works very well for half year on my site. There were some experiencies.

 

1. The shopping cart refresh and delete button very non-informative so a lot of customers call us that "can not refresh or delete" items.

My solution was very simple when display "Update" and "Delete" text on buttons and no complains after. I thought that its connected to old desktop users.

 

2. The products/catalog images cards are displaying messy due to height of card boxes (half solution with image size standardisation)

 

3. Some customers liked our bootstraped site.

 

4. Need more mobile payments methods, but very hard to get technology from payment services in Hungary.

 

 

I cant review about mobile penetration because its growing continously. Its over 20% on my site and was 15% six month ago.

Edited by Gergely

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Share this post


Link to post
Share on other sites

Microdata Product Review Page

 

Thanks to 4 great guys who sponsored this write.

 

Please review the changes at https://github.com/gburton/osCommerce-234-bootstrap/commit/7fe7b9cc143d819f3965bb66595eecda25afebcb

Anyone who can take the time to test, would be excellent.  Any feedback will be greatly appreciated.  

 

Microdata testing tool is at http://www.google.com/webmasters/tools/richsnippets


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 Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Microdata Product Review Page

 

Thanks to 4 great guys who sponsored this write.

 

Please review the changes at https://github.com/gburton/osCommerce-234-bootstrap/commit/7fe7b9cc143d819f3965bb66595eecda25afebcb

Anyone who can take the time to test, would be excellent.  Any feedback will be greatly appreciated.  

 

Microdata testing tool is at http://www.google.com/webmasters/tools/richsnippets

@@burt

 

I have made the changes and this is the outcome


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

Microdata Product Review Page

 

Thanks to 4 great guys who sponsored this write.

 

Please review the changes at https://github.com/gburton/osCommerce-234-bootstrap/commit/7fe7b9cc143d819f3965bb66595eecda25afebcb

Anyone who can take the time to test, would be excellent.  Any feedback will be greatly appreciated.  

 

Microdata testing tool is at http://www.google.com/webmasters/tools/richsnippets

@@burt

 

I have made the changes and this is the outcome


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

@@PupStar many thanks, screenshot looks good.  Does the bottom of the testing tool screen give any errors or warnings ?


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 Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

@@PupStar many thanks, screenshot looks good.  Does the bottom of the testing tool screen give any errors or warnings ?

@@burt

 

sorry yes there was an error


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

Not sure what you've done there as you are testing a product ... 

 

Only changes here are reviews ...


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 Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Not sure what you've done there as you are testing a product ... 

 

Only changes here are reviews ...

@@burt

 

I cut and pasted the html from the product_info page with the product reviews module installed.


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

Nothing to do with the latest code changes - cut and paste from product_reviews.php?products_id=x

 

However, your incorrect testing has thrown up an anomaly which I am working on.  Cheers!


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 Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Love it when a bug creeps in under the nose of the developer and is caught like this, nice one @@PupStar

More commits to solve this, coming soon.


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 Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Love it when a bug creeps in under the nose of the developer and is caught like this, nice one @@PupStar

More commits to solve this, coming soon.

@@burt

 

also I presume the rich snippets would need adding to the review.php page???

 

If so I did have a bash lol but with errors

<?php
    $reviews_query = tep_db_query($reviews_split->sql_query);
    while ($reviews = tep_db_fetch_array($reviews_query)) {
      echo '<blockquote class="col-sm-6" itemscope itemtype="http://data-vocabulary.org/Review">';
      echo '  <p itemprop="description"><span class="pull-left">' . tep_image(DIR_WS_IMAGES . tep_output_string_protected($reviews['products_image']), tep_output_string_protected($reviews['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</span>' . tep_output_string_protected($reviews['reviews_text']) . ' ... </p><div class="clearfix"></div>';
      $reviews_name = tep_output_string_protected($reviews['customers_name']);
      echo '  <footer>' . sprintf(REVIEWS_TEXT_RATED, tep_draw_stars($reviews['reviews_rating']), $reviews_name, $reviews_name) . ' <a href="' . tep_href_link(FILENAME_PRODUCT_REVIEWS, 'products_id=' . (int)$reviews['products_id']) . '"><span class="pull-right label label-info">' . REVIEWS_TEXT_READ_MORE . '</span></a></footer>';
      echo '</blockquote>';
    }
    ?>

 

Error: The name of reviewed item is not supplied by "item" field.

Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

No need to microdata the overall review.php page in my opinion.

You want the search engines to hit on the individual products review page.

 

For the error on the product_info page, this commit:

https://github.com/gburton/osCommerce-234-bootstrap/commit/2b53ae6cf3e59f4b36cc1c95a6bcabe8ec68a7f9

should cure it.


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 Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

No need to microdata the overall review.php page in my opinion.

You want the search engines to hit on the individual products review page.

 

For the error on the product_info page, this commit:

https://github.com/gburton/osCommerce-234-bootstrap/commit/2b53ae6cf3e59f4b36cc1c95a6bcabe8ec68a7f9

should cure it.

@@burt

 

yes that did solve it

 

What a Legend :blush:


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

Great stuff thanks for the testing and inadvertent testing :D

 

How about the product_reviews.php?products_id=x page ?  Is that one looking OK via the testing tool now too.

For me all looks well in my testing.


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 Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Great stuff thanks for the testing and inadvertent testing :D

 

How about the product_reviews.php?products_id=x page ?  Is that one looking OK via the testing tool now too.

For me all looks well in my testing.

@@burt

 

I seem to be getting this error

 

do you want a screenshot?

 

 

Error: Itemtype not recognized.
Edited by PupStar

Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

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 Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

@@burt

 

Yeah I had better let someone else have a go lol

 

Cheers mate


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

A couple of problems showing up.

 

http://www.google.com/webmasters/tools/richsnippets?q=https%3A%2F%2Fwww.printzone.net.nz%2Fproduct_reviews_x.php%3Fproducts_id%3D5755

http://www.google.com/webmasters/tools/richsnippets?q=https%3A%2F%2Fwww.printzone.net.nz%2Fproduct_reviews_x.php%3Fproducts_id%3D4800

 

No stars in SERP snippet

Error: Either "count" or "votes" field needs to be present. (single review)
Error: Either "count" or "votes" field needs to be present.
Error: No rich snippet will be generated for this data, because it appears to include multiple reviews of an item, but no aggregate review information. More information about aggregate reviews. (multiple reviews)
Error: In order to generate a preview with rich snippets, at least 2 of the following fields are needed: rating, reviewer, or review date. See the reviews help page for more information
 
Change line 66 from
echo '<div class="col-sm-8 text-center alert alert-success" itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating"><meta itemprop="average" content="' . (int)round($average['average']) . '" /><meta itemprop="best" content="5" />' . sprintf(REVIEWS_TEXT_AVERAGE, tep_output_string_protected($average['count']), tep_draw_stars(tep_output_string_protected(round($average['average'])), true)) . '</div>';

to

echo '<div class="col-sm-8 text-center alert alert-success" itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating"><meta itemprop="average" content="' . (int)round($average['average']) . '" /><meta itemprop="best" content="5" /><meta itemprop="count" content="' . tep_output_string_protected($average['count']) .'" />' . sprintf(REVIEWS_TEXT_AVERAGE, tep_output_string_protected($average['count']), tep_draw_stars(tep_output_string_protected(round($average['average'])), true)) . '</div>';

 (added <meta itemprop="count" content="' . tep_output_string_protected($average['count']) .'" />)

 

and all is good

 

http://www.google.com/webmasters/tools/richsnippets?q=https%3A%2F%2Fwww.printzone.net.nz%2Fgenuine-hp-no-932-black-ink-cartridge-cn057aa-pr-5755.html

http://www.google.com/webmasters/tools/richsnippets?q=https%3A%2F%2Fwww.printzone.net.nz%2Fgenuine-samsung-clt-p407c-toner-cartridge-value-pack-pr-4800.html


Let's make things easier for new osCommerce users http://forums.oscommerce.com/topic/402638-discussion-about-hard-coded-database-tables/?p=1718900  Getting there with osCommerce 2.4! :thumbsup:

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×