Jump to content
burt

Responsive osCommerce - Bootstrap

Recommended Posts

Some great (and very clever) work going on here.

 

Slightly off topic, and apologies for that. But if this is intended for another release then from a shop-owner point of view (for for the benefit of newcomers to OSC) it would be lovely to see the following features built in as standard:

  • Removal of outdated Get & Post functions relying on a callback each time to the functions file.
  • A revised / fresher look as mentioned previously
  • Incorporation as standard some essential mods (SEO / URLs etc) the ones that 99% of people have to download
  • Anything at all that can possibly be done to improve speed

Great work - will browse the new site on my tablet later and give any feedback I can find

Edited by Mort-lemur

Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Share this post


Link to post
Share on other sites

in mobile device view, my preference would be to want the category box before the "what's new" list.

 

I don't see the same, does anyone else ?

 

@@burt

 

i think with "whats new" steve means "new products for...", right?

 

i get the following with my android phone (sharp smb200sh)

 

1. osc logo

2. header tabs (cart contents, checkout, my account)

3. breadcrumb

4. welcome text (big and small)

5. image? (2.3.3.4 with BS3 "learn more button")

6. new products for february

7. categories box

8. manufacturers (dropdown select box)

9. quick find box

10. whats new? box

11. information box

12. shopping cart box

13. bestsellers box

14. specials box

15. reviews box

16. currencies

17. copyright text

18. osc banner big (which stretches out of the layout.)

 

i don't know how much info you want regarding things that need attention but here is what i see by quick browsing with my mobile phone.

when browsing (e.g. "dvd movies -> action) the buy now button in the grid view is a tiny bit out of place and overcrossing the 1px border.

when viewing in list mode the buy now button is too close to the bottom maybe a 5px padding/margin should put it a bit more up.

i will keep browsing a bit more with my mobile phone to see if there are other issues but so far i don't see many.

FINALLY a grid/list switch and a good looking one too! THANK YOU burt!

 

you really are pushing things with this one burt, i wonder why.....*sellv..cough*! it is always a pleasure to see you working especially if you are getting serious like in this topic....keep going sensei! whish i would be more skillfull like you, websource 5, toyicebear, matt and many others to help out with this project....really too bad....so meanwhile i'll just be the laboratory rat to test things out and give feedback.

 

what is this project gonna be? osC 2.3.3.5? osC 2.3.3.6? osC 2.4.1? or a complete new thing osC 4.0?

 

i wish you all good luck with this project and hope you guys succeed.

Edited by Tsimi

Share this post


Link to post
Share on other sites

[uPDATE]

 

mobile phone (vertical view)

========================

 

- login area is empty, no input fields to enter mail address and PSW

- at the create account page, no confirm/proceed/continue button

- contact us input fields are bigger then the phone view window

- contact us has no send or continue or back button, so message can't be send.

- on the reviews page if there is no review the add to cart button gets pushed down by the product image.

- the write review input field doesn't adjust to the screen width.

- at the checkout shipping page no continue or back button showing, can't proceed with the checkout.

- before, i mentioned that in grid view the buy now button is off but only in vertical mobile view.

 

[/uPDATE]

 

about the oversized input fields in contact us and reviews it could be my mistake too, not sure about it. when i tab my phone screen twice the window zooms a bit out and then it fits ok.

 

i'll keep looking......next mobile horizontal view....

Edited by Tsimi

Share this post


Link to post
Share on other sites

@@burt

 

i think with "whats new" steve means "new products for...", right?

 

 

my misspeak my error and thanks Tsimi for catching that.

 

I understand the section order of what's called so perhaps my preference is not "do able" in one way, but with a handheld device it's seems like you're forcing the customer to see the new products (which could be a turn off) before they finally find the categories box.

 

From the user experience on desktop, notebook and tablet point of view the pretty much the entire page is viewable without the viewer doing anything. In handheld media, the view is a vertical run wherein the user swipes and swipes to get where they want to be. User patience is my concern, after say several swipes of seeing new products again and again may lead to heading to a competitor's site.

 

I don't have a marketing study to back that up though. ;)

 

If using this responsive osC layout, I'd be tempted to hide or rework the new products listing somehow. Maybe nothing more than showing just a couple products.

 

But again, really so much the way to go here and thanks Gary. I checked GA last night, sometimes handheld device viewership on my sites approaches 40%.


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

When the images look big - as in @@Tsimi list #18. osc banner big (which stretches out of the layout.) its just a matter of adding the image-responsive class to the image, it then will stay in proportion to the size it is served at.

 

This will probably need done for any product listing areas, as well as the logo. Once that is done you can actually squeeze 2 products grids together on a mobile view and it looks quite nice.

 

In the previous BS2.X series it automatically made all images responsive, but there are places where it has drawbacks doing that, Ive seen smaller manufacturer logos, and the PayPal express button go way out of wack because of the responsiveness. At least with the class we have some sort of control.

 

In my fork I simply added an id to the div around the banner so that I could use jQuery to add the responsive class, otherwise it would mean hard coding the class into the banner functions, which would not always be ideal depending on the banner.

Edited by WebSource 5

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
function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '', $responsive = false)

 

I like that option, saves a few characters when setting up the image.


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

Navigation on top, and responsive is one of the big issues.

 

I missed your posts, sorry Carine.

 

Most definitely agree that once we have the overall Bootstrap in place, we can then finetune it on a page by page basis to make it the best we can.


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

That works very well. I do think that reversing it to be true by default would be the best. In my past findings there are a lot less images that should not use responsive class than there are that need it


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

I can see the point you are trying to make. But I feel that taking the 2.3 in this direction is the correct thing to do;

 

you can get with it and help out, or not. Either way, we will end up with 2.3 having Bootstrap.

 

At the end of March I hope to unveil a fully working Bootstrapped 2.3, on which any good designer will have no problems creating a good theme.


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 Quick question - and dont bite my head off.........

 

But does this mean that any non-coder shop owner will need to employ the services of a "Good Designer" to create a theme for them or be forced to use the stock look?

 

Just asking..... Runs to hide....


Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Share this post


Link to post
Share on other sites

There is not that much difference in modifying the looks of oscommerce as it is today and alternative carts with template systems.

 

A template system does not really make it easier for a "any non-coder shop owner" to change his/hers shop design themselves.

 

The type of templating system used by most cms/shopping cart software is simply that the visual/design part has been separated from the core code. ie. you still have to edit html code and php tags or shortcodes to actually change the design.

 

The advantages lays more in that updating the core code while maintaining the design gets easier as-well as that you can buy "drop-in" templates.

Edited by toyicebear

Share this post


Link to post
Share on other sites

More bits and pieces added. For anyone who wants to install this themselves to test it out, all you need to do is grab the full .zip file; https://github.com/gburton/osCommerce-2334-bootstrap/archive/master.zip

 

And install it as if it was a normal new osCommerce installation. If you can do this and test it out, and provide feedback that would be very helpful and will help to meet our target "go live" date.


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 Burt

 

Thanks for this, it’s looking good. I’ve done quite a bit of testing and it seems to be working very well.

 

One thing I don’t understand with Grid View

On the index page the New Products Module displays 3 columns of products on my PC and 1 column of products on my Iphone. This works great.

However In Grid view Manufacturers, Specials and What’s New the three columns of products do not seem responsive. They display the 3 columns of products on my PC

But on the Iphone I see the same three columns squashed up.

 

 

And a couple of very minor issues I found.

Pixel_black.gif and pixel_trans are missing from tep_draw_separator function (same in osC 2.3.3.4)

 

In \includes\modules\header_tags\ht_product_colorbox.php the Datepicker text has not been altered to Colorbox.

 

tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Colorbox Script', 'MODULE_HEADER_TAGS_PRODUCT_COLORBOX_STATUS', 'True', 'Do you want to enable the Datepicker module?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");

 

Hope this helps a little

 

Ken

Edited by Ken44

Share this post


Link to post
Share on other sites

Many thanks @@Ken44 - this is the exact sort of feedback I need :)

 

In \includes\modules\header_tags\ht_product_colorbox.php the Datepicker text has not been altered to Colorbox.

 

https://github.com/gburton/osCommerce-2334-bootstrap/commit/c8cb2e2ffbf37e224b5bc1f0756b93a377403899


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

And a couple of very minor issues I found.

Pixel_black.gif and pixel_trans are missing from tep_draw_separator function (same in osC 2.3.3.4)

 

This function will be deprecated in the shop side by the time I'm finished with it, so far as I can see it's only used in a few places anyway..

 

Which pages do you see it in ?


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

One thing I don’t understand with Grid View

On the index page the New Products Module displays 3 columns of products on my PC and 1 column of products on my Iphone. This works great.

However In Grid view Manufacturers, Specials and What’s New the three columns of products do not seem responsive. They display the 3 columns of products on my PC

But on the Iphone I see the same three columns squashed up.

 

https://github.com/gburton/osCommerce-2334-bootstrap/commit/0de7173082e767529e3ec5e8b81cc6b2d791f2b5

 

May well be changed as it will need a lot of testing on a number of devices once we have the Bootstrap totally in place.


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 Burt

 

tep_draw_separator is only used in checkout_confirmation.php and info_shopping_cart.php on the shop side but it is used many times in admin

 

Regards

 

Ken

Share this post


Link to post
Share on other sites
But does this mean that any non-coder shop owner will need to employ the services of a "Good Designer" to create a theme for them or be forced to use the stock look?

 

2.3.3.4 => some people pay a designer to make a one off design, some buy a template, some use the stock look, some stumble thru and make a few changes here and there.

2.3.3.4(bs) => no different.

 

tep_draw_separator is only used in checkout_confirmation.php and info_shopping_cart.php on the shop side but it is used many times in admin

 

Sure, that's where I see it, only a couple of places. The admin side will be something to look at in the future, for now I'm concerned solely with the shop side. So, that function will be deprecated (maybe by tonight lol).

Edited by burt

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

$prod_list_contents .= '<div class="item col-xs-4 col-lg-4">';

Yes that is the problem. I’ve tried many different values but cannot find suitable values.

$prod_list_contents .= '<div class="item col-xs-6 col-lg-4">';

This allows the grid to drop from three columns to two columns but will not go to one column.

 

Regards

 

Ken

Share this post


Link to post
Share on other sites

Another 10 commits done today - slowly but surely working towards the end result.

 

Shoutout to all interested parties: more testing needed please, best way is to grab the zip and upload yourself or run on localhost.

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

Are there any database differences between 2.3.3.4 BS and 2.3.3 ?

Could I just run it against my existing 2.3.3 store and see what happens ?


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

Are there any database differences between 2.3.3.4 BS and 2.3.3 ?

Could I just run it against my existing 2.3.3 store and see what happens ?

 

None at all - other than 3 new Header Tag modules that would need to be installed.

2 are required (datepicker and colorbox), 1 is optional (grid/list view, if not installed only grid view shows).

 

Reason for these to be HT modules is so that the scripts are called only on the pages needed rather than site-wide.

Edited by burt

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

I downloaded the zip - do you keep the test site current with github ?

 

I had a look at the difference with stock 2.3.3 and was amazed by the number of litte changes throughout the pages.

I was hoping more of the changes would have been in the different functions used, not in the actual pages code.

Makes me wonder if it would be better to have an extra layer of abstraction so that the decision to output form controls, infoboxes etc is made in the html_output file, and not in the surrounding divs in the main content pages.

Since I already have a responsive site, for me, although i try to keep close to the oscommerce standard on v2.3, I think this will be a lot of effort for little gain.


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

@@burt

I downloaded the zip - do you keep the test site current with github ?

 

Mostly. If I have time I update the site to match the latest github.

 

I had a look at the difference with stock 2.3.3 and was amazed by the number of litte changes throughout the pages.

I was hoping more of the changes would have been in the different functions used, not in the actual pages code.

 

Could you show an example of something and the example function done in a page that would be better in a function ?

 

Since I already have a responsive site, for me, although i try to keep close to the oscommerce standard on v2.3, I think this will be a lot of effort for little gain.

 

And if you did not already have a responsive site? The answer would be the same or no ?

 

What we're building here is a blueprint for the way forward...without input like Tsimi and Ken, the community gets what they get and has zero input on the end product. So, I ask everyone to take some time out and test the changes, make comments and then developers can work on some ideas...

 

I'll update the test site this morning to match the latest Git.

Edited by burt

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

Considering doing something like this:

 

<tr>
       <td class="fieldKey"><?php echo ENTRY_LAST_NAME; ?></td>
       <td class="fieldValue"><?php echo tep_draw_input_field('lastname', $account['customers_lastname']) . ' ' . (tep_not_null(ENTRY_LAST_NAME_TEXT) ? '<span class="inputRequirement">' . ENTRY_LAST_NAME_TEXT . '</span>': ''); ?></td>
     </tr>

 

to

 

<div class="form-group has-feedback">
 <label for="inputName" class="control-label col-xs-2"><?php echo ENTRY_LAST_NAME; ?></label>
 <div class="col-xs-10">
   <?php echo tep_draw_input_field('lastname', $account['customers_lastname'], 'required id="inputName" placeholder="' . ENTRY_LAST_NAME . '"'); ?>
   <span class="glyphicon glyphicon-asterisk form-control-feedback required"></span>
 </div>
</div>

 

Thoughts ? This changes the look as shown in the attached images.


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.

×