Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Responsive osCommerce - Bootstrap


Recommended Posts

  • Replies 2.2k
  • Created
  • Last Reply

This commit https://github.com/gburton/osCommerce-234-bootstrap/commit/c8ab11711e2e5ec1e3f6ce7a1f2ea51b467c0d34 (which is in the grid_list branch) simplifies the grid/list function.

 

Would appreciate if a few people could test this change please, feel free to make any comment.

 

All good. 3 columns grid sits just right in normal view. Perfect in mobile view.

 

Maybe better to default to grid view. First access of products listings in list view looks terrible on mobile as the options wrap to the left.

 

I know users can switch. Just a thought.

 

:santa:

My Add-ons
Advanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download Support
Ajax Product Listing for osC 2.3.4 (bootstrap) Download Support
Category New Products Carousel for osC 2.3.4 (bootstrap) Download Support
Category Popular Products Carousel for osC 2.3.4 (bootstrap) Download Support
Customer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download Support
Front Page New Products Carousel for osC 2.3.4 (bootstrap) Download Support

Index Nested - Product Listing for osC 2.3.4 (bootstrapDownload Support
Match Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download Support
Modular Category Page for osC 2.3.4 (bootstrap)
Download Support

NEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download Support
NEW Equal Height Module for osC 2.3.4 (bootstrapDownload Support
Products Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download Support
Twitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap)
Download Support

Upcoming Products Modules for osC 2.3.4 (bootstrap) Download Support

 
Assisted Add-ons
Scroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support
 
Bootstrap Add-ons created by other members
osCommerce Bootstrap Addons and Code

Link to comment
Share on other sites

@@auzStar - grid should be default...do you have this online so that I can check on mobile? Thanks

 

Sorry @@burt. No I don't. Just using browser developer tools. Hope to be online soon.

I was clearing the cache to double check and it seemed to always default to list view.

 

I'll check again.

 

cheers

My Add-ons
Advanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download Support
Ajax Product Listing for osC 2.3.4 (bootstrap) Download Support
Category New Products Carousel for osC 2.3.4 (bootstrap) Download Support
Category Popular Products Carousel for osC 2.3.4 (bootstrap) Download Support
Customer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download Support
Front Page New Products Carousel for osC 2.3.4 (bootstrap) Download Support

Index Nested - Product Listing for osC 2.3.4 (bootstrapDownload Support
Match Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download Support
Modular Category Page for osC 2.3.4 (bootstrap)
Download Support

NEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download Support
NEW Equal Height Module for osC 2.3.4 (bootstrapDownload Support
Products Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download Support
Twitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap)
Download Support

Upcoming Products Modules for osC 2.3.4 (bootstrap) Download Support

 
Assisted Add-ons
Scroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support
 
Bootstrap Add-ons created by other members
osCommerce Bootstrap Addons and Code

Link to comment
Share on other sites

@@burt

 

checked in IE and Chrome clearing cache and cookies. checked the file changes to make sure that was correct.

definitely defaults to list view.

 

cheers

My Add-ons
Advanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download Support
Ajax Product Listing for osC 2.3.4 (bootstrap) Download Support
Category New Products Carousel for osC 2.3.4 (bootstrap) Download Support
Category Popular Products Carousel for osC 2.3.4 (bootstrap) Download Support
Customer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download Support
Front Page New Products Carousel for osC 2.3.4 (bootstrap) Download Support

Index Nested - Product Listing for osC 2.3.4 (bootstrapDownload Support
Match Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download Support
Modular Category Page for osC 2.3.4 (bootstrap)
Download Support

NEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download Support
NEW Equal Height Module for osC 2.3.4 (bootstrapDownload Support
Products Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download Support
Twitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap)
Download Support

Upcoming Products Modules for osC 2.3.4 (bootstrap) Download Support

 
Assisted Add-ons
Scroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support
 
Bootstrap Add-ons created by other members
osCommerce Bootstrap Addons and Code

Link to comment
Share on other sites

In /includes/modules/header_tags/ht_grid_list_view.php could you change the second $oscTemplate->addBlock

 

to:

 

$oscTemplate->addBlock('<script>$(function() {var cc = $.cookie(\'list_grid\');if (cc == \'list\') {$(\'#products .item\').removeClass(\'grid-group-item\').addClass(\'list-group-item\');}else {$(\'#products .item\').removeClass(\'list-group-item\').addClass(\'grid-group-item\');}$(document).ready(function() {$(\'#list\').click(function(event){event.preventDefault();$(\'#products .item\').addClass(\'list-group-item\').removeClass(\'grid-group-item\');$.cookie(\'list_grid\', \'list\');});$(\'#grid\').click(function(event){event.preventDefault();$(\'#products .item\').removeClass(\'list-group-item\').addClass(\'grid-group-item\');$.cookie(\'list_grid\', \'grid\');});});});</script>' . "\n", $this->group);
Test and report back ?
Link to comment
Share on other sites

@@burt

 

just bear with me. it's working in chrome but IE's refusing to co-operate, as usual.

My Add-ons
Advanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download Support
Ajax Product Listing for osC 2.3.4 (bootstrap) Download Support
Category New Products Carousel for osC 2.3.4 (bootstrap) Download Support
Category Popular Products Carousel for osC 2.3.4 (bootstrap) Download Support
Customer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download Support
Front Page New Products Carousel for osC 2.3.4 (bootstrap) Download Support

Index Nested - Product Listing for osC 2.3.4 (bootstrapDownload Support
Match Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download Support
Modular Category Page for osC 2.3.4 (bootstrap)
Download Support

NEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download Support
NEW Equal Height Module for osC 2.3.4 (bootstrapDownload Support
Products Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download Support
Twitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap)
Download Support

Upcoming Products Modules for osC 2.3.4 (bootstrap) Download Support

 
Assisted Add-ons
Scroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support
 
Bootstrap Add-ons created by other members
osCommerce Bootstrap Addons and Code

Link to comment
Share on other sites

@@burt

 

@#$#% IE. :angry:

 

OK now. Had to close all my windows and try again. Defaulting to grid view now. 

My Add-ons
Advanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download Support
Ajax Product Listing for osC 2.3.4 (bootstrap) Download Support
Category New Products Carousel for osC 2.3.4 (bootstrap) Download Support
Category Popular Products Carousel for osC 2.3.4 (bootstrap) Download Support
Customer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download Support
Front Page New Products Carousel for osC 2.3.4 (bootstrap) Download Support

Index Nested - Product Listing for osC 2.3.4 (bootstrapDownload Support
Match Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download Support
Modular Category Page for osC 2.3.4 (bootstrap)
Download Support

NEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download Support
NEW Equal Height Module for osC 2.3.4 (bootstrapDownload Support
Products Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download Support
Twitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap)
Download Support

Upcoming Products Modules for osC 2.3.4 (bootstrap) Download Support

 
Assisted Add-ons
Scroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support
 
Bootstrap Add-ons created by other members
osCommerce Bootstrap Addons and Code

Link to comment
Share on other sites

mobile views if it helps

 

cheers

post-290729-0-04109400-1417693772_thumb.jpg

post-290729-0-98704000-1417693787_thumb.jpg

My Add-ons
Advanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download Support
Ajax Product Listing for osC 2.3.4 (bootstrap) Download Support
Category New Products Carousel for osC 2.3.4 (bootstrap) Download Support
Category Popular Products Carousel for osC 2.3.4 (bootstrap) Download Support
Customer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download Support
Front Page New Products Carousel for osC 2.3.4 (bootstrap) Download Support

Index Nested - Product Listing for osC 2.3.4 (bootstrapDownload Support
Match Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download Support
Modular Category Page for osC 2.3.4 (bootstrap)
Download Support

NEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download Support
NEW Equal Height Module for osC 2.3.4 (bootstrapDownload Support
Products Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download Support
Twitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap)
Download Support

Upcoming Products Modules for osC 2.3.4 (bootstrap) Download Support

 
Assisted Add-ons
Scroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support
 
Bootstrap Add-ons created by other members
osCommerce Bootstrap Addons and Code

Link to comment
Share on other sites

Hello will be reintroduced the banner as foooter content module?

I'm not sure the best way to do this as some people might want the banner in the header, some in the footer, some in a page. Any thoughts on it ?

Link to comment
Share on other sites

I'm not sure the best way to do this as some people might want the banner in the header, some in the footer, some in a page. Any thoughts on it ?

Yeah understand that can be a little tricky. Maybe give the possibility to move header, boxes and footer content modules to Top, Bottom, column left or right position?

 

p.s. this remembers me phpnuke era....  :D

Link to comment
Share on other sites

@@burt

 

I'll be testing out new changes soon, then provide feedback. 

 

I do agree the product listings need a tune up and strip down, it was nice at the time, but looking back, just too much extra that can already be achieved using bootstrap default classes.

 

I have some markup that can help with a shopowners preferance on default view as well, but will first test with new setup.

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
Share on other sites

Great project! Thanks, for all your hard work.

I checked out the demo, and the results are screaming fast.

I am downloading, and will start implementing a working version, soon; and, will provide as much feedback as possible.

 

Do you want bugs and feature requests posted, here?

 

Cheers,

Rob

Link to comment
Share on other sites

Hello @@burt,
 
i'm trying to improve the create account form:
 
Problem: Some labels are too long and overlap with the input fields in xs:
- State/Province

- Password Confirmation

This may happen in other languages for other labels too

 

1. Suggestion:

Hide the labels for xs and use 12 col width for input fields. We are showing placeholders so the labels are maybe not necessary in xs.

Example:

    <div class="form-group has-feedback">
      <span class="hidden-xs"><label for="inputFirstName" class="control-label col-xs-3"><?php echo ENTRY_FIRST_NAME; ?></label></span>
      <div class="col-xs-12 col-sm-9">
        <?php
        echo tep_draw_input_field('firstname', NULL, 'required aria-required="true" id="inputFirstName" placeholder="' . ENTRY_FIRST_NAME . '"');
        echo FORM_REQUIRED_INPUT;
        if (tep_not_null(ENTRY_FIRST_NAME_TEXT)) echo '<span class="help-block">' . ENTRY_FIRST_NAME_TEXT . '</span>';
        ?>
      </div>
    </div>

2. Suggestion:

Stack label and input field for xs:

Example:

    <div class="form-group has-feedback">
      <label for="inputFirstName" class="control-label col-xs-12 col-sm-3"><?php echo ENTRY_FIRST_NAME; ?></label>
      <div class="col-xs-12 col-sm-9">
        <?php
        echo tep_draw_input_field('firstname', NULL, 'required aria-required="true" id="inputFirstName" placeholder="' . ENTRY_FIRST_NAME . '"');
        echo FORM_REQUIRED_INPUT;
        if (tep_not_null(ENTRY_FIRST_NAME_TEXT)) echo '<span class="help-block">' . ENTRY_FIRST_NAME_TEXT . '</span>';
        ?>
      </div>
    </div>

If you like one of these 2 solutions, I would apply them to all files with input fields and commit the changes in GitHub.

 

Another suggestion: use touchscreen-friendly select buttons instead of standard radio for the gender selection

 

best regards

Rainer

Link to comment
Share on other sites

Go ahead - I can then take it and test it :thumbsup:

Which one or both?

Link to comment
Share on other sites

Link to comment
Share on other sites

  • burt locked this topic
  • burt unlocked and locked this topic

Archived

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

×
×
  • Create New...