Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Responsive osCommerce - Bootstrap


Recommended Posts

  • Replies 2.2k
  • Created
  • Last Reply

@@wHiTeHaT

 

I've been following along and testing each time....I think you nailed it this time...it seems to work exactly as you would expect. What are the plans for this...will it make it into the core or become a contribution that can be added to the BS version?

Link to comment
Share on other sites

Hi

 

The formatting of the comments on checkout_confirmation.php looks wrong.

 

I’ve added panel panel-default and removed the blockquote.

 

It looks much better IMHO

 

Regards

 

Ken

 

if (tep_not_null($order->info['comments'])) {
?>
<hr>
<div class="panel panel-default">
<div class="panel-heading">
<?php echo '<strong>' . HEADING_ORDER_COMMENTS . '</strong>' . tep_draw_button(TEXT_EDIT, 'glyphicon-edit', tep_href_link(FILENAME_CHECKOUT_PAYMENT, '', 'SSL'), NULL, NULL, 'pull-right btn-info btn-xs' ); ?>
</div>
<div class="panel-body">
<?php echo nl2br(tep_output_string_protected($order->info['comments'])) . tep_draw_hidden_field('comments', $order->info['comments']); ?>
</div>
</div>
<?php
}
?>

Link to comment
Share on other sites

@@burt

 

 

 

Could you look again please, i really think now all is 100% working as it should.

 

Looks and performs well on iPhone 5

 

The only thing I can see would make it a better mobile experience is to make the complete LI row clickable, could probably be done using a data-attributte or simple css rule displaying the a element as block. Not a big deal though.

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

@@wHiTeHaT

 

I tested it in XS mode and if I click on the chevron or within one of the bars it works very well and smoothly but if I click on the category name it seems very jumpy if that makes any sense...it seems like there are different functions at work.

Link to comment
Share on other sites

For plug ins/add ons not, however for some add ons it is required to change their included default design to the bootstrap design.

I assume for updates there will be a different section matching the BS version as soon as a update is required.But that is up to George.

 

thanks

 

i've been reading how Bootstrap is not really semantic. whats everyone's view on this?

 

Also what happened to everyone who was banging on before about not using Div tags for the layouts of product listings in a grid, yet now are very happy with using it now with this Bootstrap?

 

I remember before some on here expressly stating that the view shopping cart page should be /remain in a tabular format, as should the product listings.

 

I wonder how this strongly held view has suddenly changed?

Link to comment
Share on other sites

a product listing in a table will not dynamically retrofit onto a small screen, a div based layout is more flexible to accomplish such a thing just with css, a table would require javascript to modify the html/css on the fly for a small device.

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

a product listing in a table will not dynamically retrofit onto a small screen, a div based layout is more flexible to accomplish such a thing just with css, a table would require javascript to modify the html/css on the fly for a small device.

 

Well thats quite a big change from what everyone was saying only last year, people were adamant that the shopping cart must be in tables, whilst product listings should be in tables too, and kind of ridiculing me when I specifically stated how most modern shops use Divs for their product listings.

 

Sounds like everyones got a bit wet over this bootstrap stuff.

 

There is a problem with bootstrap in terms of semantics, and other frameworks in comparison like Foundation Zurb and a few others seem to be much less bloated.

 

Mind you, you should see the new Prestashop demo, has pretty much all the modern things expected of an ecommerce like built in checkbox attribute filters, guest checkout, and tons more.

 

Oscommerce has a long way to get yet to become fully modern. For starters, changing those god awful products in the demo!

and changing the boxes layout and adding more features as standard would be helpful.

 

The best and easiest checkout which should be replicated is probably Truffle Shuffles. Wipes the floor with a standard 5 page checkout.

Link to comment
Share on other sites

@@vampirehunter - fork the project, do what you want. Go and replicate the checkout you want. It's all there ready for you to copy and paste. Instead of BS posts about this and that and how it's not to your liking, instead try contributing to the project in a positive manner.

Link to comment
Share on other sites

Been following this topic and all looks great - a lot of excellent work.

 

However,

 

I already have 2.3.3.4 site that works & looks great with many many changes to the admin backend and the look of the shop itself. However, it is not a responsive site - is there a way to integrate some of the files from this system, so that if a customer is browsing from a PC he will be directed to my Original site, but if he is browsing from a phone he will be directed to the responsive site?

 

Obviously the database would be the same database as would be the admin.

 

Just asking............

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.

Link to comment
Share on other sites

directed to my Original site, but if he is browsing from a phone he will be directed to the responsive site?

 

Obviously the database would be the same database as would be the admin.

 

Just asking............

 

You could probably rip the mobile recognition out of the osc mobile build that has been around for a while now, and use that to redirect to your other folder, or just find another mobile detection script that is available, Ive seen lots of them in the past before responsive frameworks became popular.

 

But you already know you'll need to make any contribution changes to the bootstrap version as you did your main site, especially if its a mod that involves certain keys being present in the database.

 

Why not use a compare program and merge your current work into the bootstrap version? Theres nothing changed in the admin, so you'll be in good shape with your old one.

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

Addendum to post of @ - there are a couple of very tiny changes in the admin area, specifically to do with name/address/phone of the store.

 

@@Mort-lemur - you've put a lot of work into your shop, and as much again would need to go into ensuring the mobile users have the same experience, so the advice would be; why bother doing that just for mobile users - do it once, do it for all. Go bootstrap.

 

Of course you have to look at your stats to determine how many people visiting the site would benefit from changing the shop to responsive. Is that a tiny % ? Is that a larger % already ?? Bear in mind that usage of mobile/tablet will only increase over the coming months and years..so that while the work might not be worthwhile right now, it might be very worthwhile in 6 months or a year. Take a think about your target market ? Some shops might have a very low % of tech savvy users, others might have a very high %. I know what your target market is, but I cannot determine if those people are tech savvy - I suspect that most of them are...

Link to comment
Share on other sites

If you think that is a bug - fix it, commit it.

 

I don't think that is a bug...the correct options are only picked up from the URL string if (and only if) that product is already in the shopping_cart.

 

 

Link to comment
Share on other sites

I found these free BS themes and would like to know if they can be used without causing any problems to the osC function.

I t hink its similar to the ThemeRoller where you could change only the "basic" color layout.

 

I hope it is ok to post the link in here. (if not, my apologies and please remove the link)

 

http://bootswatch.com/

Link to comment
Share on other sites

@@burt there is a javascript TypeError on products that only have one image. It is caused because the colorbox script is looking for the image id attribute and it doesn't exist on products with only image.

 

Simple fix:

 

In includes/modules/header_tags/ht_product_colorbox.php

 

Change this (~approx line 49):

 

$oscTemplate->addBlock('<script>var ImgCount = $("#piGal").data("imgcount"); $(function() {$("#piGal").hide();$(\'#piGal\').photosetGrid({layout: ""+ ImgCount +"",width: \'250px\',highresLinks: true,rel: \'pigallery\',onComplete: function() {$(\'#piGal\').css({ \'visibility\': \'visible\'});$(\'#piGal a\').colorbox({maxHeight: \'90%\',maxWidth: \'90%\',rel: \'pigallery\'});$(\'#piGal img\').each(function() {var imgid = $(this).attr(\'id\').substring(9);if ( $(\'#piGalDiv_\' + imgid).length ) {$(this).parent().colorbox({ inline: true, href: "#piGalDiv_" + imgid });}});}});$("#piGal").show();});</script>', $this->group);

 

To this:

 

$oscTemplate->addBlock('<script>var ImgCount = $("#piGal").data("imgcount"); $(function() {$("#piGal").hide();$(\'#piGal\').photosetGrid({layout: ""+ ImgCount +"",width: \'250px\',highresLinks: true,rel: \'pigallery\',onComplete: function() {$(\'#piGal\').css({ \'visibility\': \'visible\'});$(\'#piGal a\').colorbox({maxHeight: \'90%\',maxWidth: \'90%\',rel: \'pigallery\'});$(\'#piGal img[id]\').each(function() {var imgid = $(this).attr(\'id\').substring(9);if ( $(\'#piGalDiv_\' + imgid).length ) {$(this).parent().colorbox({ inline: true, href: "#piGalDiv_" + imgid });}});}});$("#piGal").show();});</script>', $this->group);

Matt

Link to comment
Share on other sites

@@Tsimi

Should be fine and is the exact reason why the main bootstrap css files were left untouched during the whole of the 2334BS build. Be aware that custom.css and user.css (if you have anything in that one) will over-ride bootstrap css files. You may need to amend custom and user therefore to allow a bootswatch theme to work properly.

 

@ All

No questions about bootswatch themes and how to do this and that and the other in this thread please.

Link to comment
Share on other sites

@@Tsimi

 

Those should work, just be sure the bootstrap version used matches what you are using. There have been some incremental changes in bootstrap 3 that really alter certain elements

 

roger that. thanks for the heads up.

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