Jump to content
burt

Bootstrap 3 in 2.3.4 - Responsive from the Get Go

Recommended Posts

@@Tsimi I'm upgrading from 2.3.3.3 to 2.3.3.4. Bootstrap is more flexible. I will create a new topic next time. Thanks for letting me know that.

 

@@burt I apologize for getting offtopic.

Edited by discxpress

Share this post


Link to post
Share on other sites

@@discxpress

 

here is another link. scroll down until the part where the btn-yellow thing is explained. (Extend the Class, Don’t Override It) That should give you a good idea how things could work.

 

Link

Edited by Tsimi

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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


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

@@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

Share this post


Link to post
Share on other sites

I'll check again.

No need - you are correct. I think I found the problem, dumb mistake at my end. Just testing the revised code...


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

 

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

Share this post


Link to post
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 ?

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

 

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Looks good to me :)


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

Hi. what is the correct way to make a menu if i wanted to have links to specific categories in a navbar?

 

should i do each link to each category individually using the oscommerce codex?

 

I would like to have the top level category links in a navbar.

 

thanks

Share this post


Link to post
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 ?


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

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

Edited by acidvertigo

Share this post


Link to post
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!

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Feel free to post bugs here if they are bugs with our implementation of Bootstrap.

 

Feature requests: no thanks.


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

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

Share this post


Link to post
Share on other sites

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


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

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

Which one or both?

Share this post


Link to post
Share on other sites

Both, do them in separate commits though please, so it is easier for me to test them separately and together.

 

Thanks for the effort for the #community :thumbsup:


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

Share this post


Link to post
Share on other sites

Is placeholder text for sure available in all small devices ?


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
Guest
This topic is now closed to further replies.

×