Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Responsive osCommerce - Bootstrap


Recommended Posts

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 looks consistent with the other changes made,

I personally was thinking it would be better if you would have one function that returns this complete html block, a bit like it is done in this wordpress shortcodes implementation.

https://github.com/filipstefansson/bootstrap-3-shortcodes/blob/master/bootstrap-shortcodes.php

Note, i'm not advocating wp shortcodes, but just the way you have different functions that generate more of the surrounding html so you don't have to change as many files if you were for instance to decide you don't like the required glyphon.

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

Link to comment
Share on other sites

  • Replies 2.2k
  • Created
  • Last Reply

BTW, I might be talking complete non-sense here, I'm a bootstrap newbee , reading up on BS3 right now ...

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

Link to comment
Share on other sites

I think the bootstrap 3 mobile first approach for responsiveness is really good, but i wasn't expecting these kind of trivial changes in for instance shipping.php

If these icons where defined as constants, it would be easier to keep on using jquery ui buttons in a BS3 responsive framework.

the only change in this section was from the jquery ui icon triangle-1-e to the BS glyphicon

 

 <div class="buttonSet">
   <span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'glyphicon-chevron-right', tep_href_link(FILENAME_DEFAULT)); ?></span>
 </div>

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

Link to comment
Share on other sites

Here's the rework of the account_edit.php page, not committed. Up it to your bootstrap test site to see how it looks...

 

Also a couple of text changes (english.php, also remove the FORM_REQUIRED_INFORMATION from the middle of the file, and change as below):

 

// message for required inputs
define('FORM_REQUIRED_INFORMATION', '<span class="glyphicon glyphicon-asterisk form-control-feedback required"></span> Required information');
define('FORM_REQUIRED_INPUT', '<span class="glyphicon glyphicon-asterisk form-control-feedback required"></span>');

 

And in custom.css

 

.required {
 color: #B33A3A;
}

 

 

Link to comment
Share on other sites

@@bruyndoncx - cast your mind back to when you made your own site responsive - how much effort did it take - I think a lot of time and sweat. This project is no different..

 

I could just have implement Bootstrap and say "that's it", but I also want to clean up some of the legacy code in the 2.3 series...some code that goes all the way back to 2000 !!, and I also want to introduce some HTML5 ready elements of code (such as the required form inputs in the example account_edit page and so on.

Link to comment
Share on other sites

@@bruyndoncx - cast your mind back to when you made your own site responsive - how much effort did it take - I think a lot of time and sweat. This project is no different..

 

I could just have implement Bootstrap and say "that's it", but I also want to clean up some of the legacy code in the 2.3 series...some code that goes all the way back to 2000 !!, and I also want to introduce some HTML5 ready elements of code (such as the required form inputs in the example account_edit page and so on.

I applaude your effort, I know it takes a lot of time adding and removing classes, restructuring divs, page header and stuff.

Sadly enough most of my big rewrites have been kicked off while recovering in the hospital. I have been lucky this past year, haven't had much time for major code changes :D

 

I noticed activeebiz has an oscommerce 2334 bootstrap version online with the categories implemented as a bootstrap menu.

I'm not sure if this code has been shared or not. Would be silly having to re-invent the weel ...

 

Pondering if I were to move towards the BS standard, I would need a megamenu and I found this one online

http://geedmo.github.io/yamm3/

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

Link to comment
Share on other sites

@@burt

 

Noticed a couple quick things this morning.

 

shopping_cart.php: The buttons seem to have a duplicate .btn class so they are

class="btn btn btn-info"

 

Also, I would recommend wrapping the tables in a

<div class="table-responsive"></div>

container to handle overflow issues on smaller devices.

Matt

Link to comment
Share on other sites

@@mattjt83 - thanks for the heads up on the buttons. Fixed those.

 

Adding that responsive class brings in problems in the table in the shopping cart - I'm going to leave it off for the time being until I can get to the bottom of it. Could you install on localhost and add the code, and you'll see what I mean on a small viewport.

Link to comment
Share on other sites

@@burt

 

Do you mean the horizontal scrolling on small screen sizes? That is what it is supposed to do as far as I know.

 

I think I prefer just the table scrolling rather than the whole page being too wide. You could hide the image in these circumstances or maybe stack it?

Matt

Link to comment
Share on other sites

@@burt

 

There is still a lot of overflow even with the image gone. I'll mess with it a bit and see what I come up with. Look at how I did it on the cart of my personal site if you'd like.

 

I like that create account page. Looks nice. Did you not use the bs checkbox markup intentionally for style reasons or?

Matt

Link to comment
Share on other sites

@@burt

 

in shopping_cart.php with your hidden image in place...

 

find:

echo '  <td valign="top">' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'style="width: 50px;"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . tep_draw_button(NULL, 'glyphicon-refresh', NULL, NULL, NULL, 'btn-info') . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-remove', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger') . '</td>';

 

replace with:

echo '  <td valign="top">' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'style="width: 50px;"') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . '<br class="visible-xs" /> ' . tep_draw_button(NULL, 'glyphicon-refresh', NULL, NULL, NULL, 'btn-info') . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-remove', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger') . '</td>';

Matt

Link to comment
Share on other sites

Hiding it on small viewports could be the way to go. I'll think on it.

 

http://www.template.me.uk/2334bs3/shopping_cart.php

add something to cart and reduce the viewport.

 

When reducing window size the "checkout" button disappears on the shopping cart page.

 

The same happens to the "continue" button on the create account page.

Link to comment
Share on other sites

@@toyicebear

 

I can't seem to replicate that issue with the buttons disappearing. What browser are you using?

 

...nevermind. It happens on the dev site but on my local copy it's not doing that. Maybe Gary is busy?

 

it was on the dev. site.. IE and Firefox

Link to comment
Share on other sites

mobile phone (vertical view)

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

- login page is blank (shows up at over 890px width and over)

- at the create account page, no confirm/proceed/continue button (button shows up at over 890px width and over)

- at the checkout shipping page no continue or back button showing, can't proceed with the checkout. (button shows up at 890px width and over)

 

as you said before you want to concentrate on the "normal page size" first and then the mobile size right?

 

the input fields look very good, love the asterix (*) inside the input field!

IMO input fields should always have rounded corners and be flat not inset. the old square design reminds me of windows 98.

Link to comment
Share on other sites

Hi Burt

 

Please can you update the example site at template.me. it is the only way I can test with my Iphone. But I still can’t login.

 

There appears to be a few more duplicate .btn class

 

\includes\modules\new_products.php lines 33 and 34

\includes\modules\product_listing.php line 38 (x2)

\advanced_search.php line 129

\includes\modules\boxes\bm_search.php line 42

 

Regards

 

Ken

Link to comment
Share on other sites

Hi Ken

 

Will update the test site when I get time ;)

 

Those duplicate btn classes are correct - they aren't dupes (all those are "buttons" that look like buttons but are not passed throught the tep_draw_button function. Only time the dupes are a problem is if the button is made using tep_draw_button and has a parameter that includes just "btn" (if it has eg btn-primary, that's OK). These "fake" buttons are subject to change prior to "gold" release.

 

But thank you very much for testing and posting. Please do continue to do so..

Link to comment
Share on other sites

@@burt

I'm still in learning mode, so please forgive my ignorance ...

 

nav-list vs list-group

 

I saw nav-list being used on categories and manufacturers boxes. I wonder if for categories with counts the list-group with the badge wouldn't be more appropriate

Nav sounds more semantically correct to me, but the list-group badge implementation looks really neat.

 

What is the pro-con for one vs the other ?

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

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