Jump to content
burt

Responsive osCommerce - Bootstrap

Recommended Posts

@@bruyndoncx I'm also in learning mode :) I'm just doing what "feels" right....and that could very well be wrong, but my aim is to get something very close to correct which can then be corrected further as time goes on.

 

I backported the 2.4 category box infoBox which has no category counts, so the question you asked seems to have no answer...


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 updating the example site. I can now create an account there with iPhone

 

Using iPhone still can't make a purchase because

 

Continue button missing from checkout_shipping.php

Continue button missing from checkout_shipping_address.php

 

Regards

 

Ken

Share this post


Link to post
Share on other sites

Hi Ken - many thanks for your time in testing. I've not yet gotten into the checkout procedure pages, I've been leaving that until last as it;s going to be a nightmare :(


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

login.php also works now on my android phone. looking very good.

as ken mentioned create account also looking good. the only thing left on my check list is the whole checkout process.

Edited by Tsimi

Share this post


Link to post
Share on other sites

@@burt

 

The checkout is a pain to redo. The tables do not play nice for smaller devices and the table setup on checkout_confirmation is terrible.

 

I have mostly just worked with overhauling my checkout system to work with bootstrap. Please let me know if you have anything specific you would like a hand with.


Matt

Share this post


Link to post
Share on other sites

Pages still to clean up:

 

account_history_info

checkout_confirmation

checkout_shipping committed 03 March

checkout_payment

 

+ language files

+ included modules (eg the payment modules for checkout_payment)

 

+ header changes

+ footer changes

 

All other pages should be fairly close to being clean and bootstrapped.

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

Checkout Shipping Attached, could someone else test this on their install before I commit it - there's a lot of changes in this file...

 

Also CSS:

 

.stepwizard {
 margin-top: 20px;
}

.stepwizard-step p {
   margin-top: 10px;
}

.stepwizard-row {
   display: table-row;
}

.stepwizard {
   display: table;
   width: 100%;
   position: relative;
}

.stepwizard-step button[disabled] {
   opacity: 1 !important;
   filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
   top: 14px;
   bottom: 0;
   position: absolute;
   content: " ";
   width: 100%;
   height: 1px;
   background-color: #ccc;
   z-order: 0;

}

.stepwizard-step {
   display: table-cell;
   text-align: center;
   position: relative;
   width: 33%;
}

.btn-circle {
 width: 30px;
 height: 30px;
 text-align: center;
 padding: 6px 0;
 font-size: 12px;
 line-height: 1.428571429;
 border-radius: 15px;
}


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

 

I installed checkout_shipping.php on xampp test site

 

In the old file the $5.00 shipping charge is on the same line as Best Way

In the new file the $5.00 shipping charge is on the same line as Flat Rate

Maybe it should be put back onto the same line as Best Way

 

Add Comments About Your Order is repeated within the comments box. Does it need to be duplicated?

 

The stepwizard CSS works great and looks great. :thumbsup:

 

Regards

 

Ken

Edited by Ken44

Share this post


Link to post
Share on other sites

Hi Ken

 

Many thanks for testing, I really appreciate it. I always thought the price was in the wrong line on the old file - as the "Best Way" text is just " helper" text to not the actual module being chosen, if that makes sense...that's why I changed it...

 

Not sure on this one to be honest.

 

That stepwizard is nice it's from Jamro's Snip here: http://bootsnipp.com/snippets/featured/process-steps


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 Gary

 

I do agree with shipping charge on the same line as Flat Rate but then ‘Best Way’ looks strange on a line of its own.

Maybe it should all be combined onto one line

Flat Rate (Best Way) $5.00

Or maybe ‘Best Way’ should be removed altogether.

 

I notice that Colorbox V1.4.22 is used. There have been several updates and V1.5.1 was released today.

Also, the changes made to the iframe height (post 4 here) have not been added to Github

 

 

Regards

 

Ken

Share this post


Link to post
Share on other sites

Hi Ken

 

Yep, the "best way" text is defined in the language file of the relevant shipping module. I coded it in such a way that if the "bestway" text is removed, then the extra helper text is also removed from the display in the choosable list in the shipping page.

 

This way, what one could do is promote 1 shipping method over another, by removing all the "best way" rubbish and just having one that says "This is the fastest an most secure shipping method" or such words...

 

--

 

In post #4 that is a change in the input box of the product, it's not a code change...

 

--

 

Thanks for the heads up on the Colorbox update :)


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

In post #4 that is a change in the input box of the product, it's not a code change..

 

True, but it is in osCommerce-2334-bootstrap / install / oscommerce.sql. That is where it should be changed else the video will not work for anyone installing from Github.

 

checkout_payment.php and checkout_confirmation.php look good but there is a problem with includes\modules\boxes\bm_order_history.php. The glyphicons overlap when stacked vertically in Default and Large Display modes.

 

Regards

 

Ken

Share this post


Link to post
Share on other sites

True, but it is in osCommerce-2334-bootstrap / install / oscommerce.sql. That is where it should be changed else the video will not work for anyone installing from Github.

 

Good point :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

there is a problem with includes\modules\boxes\bm_order_history.php. The glyphicons overlap when stacked vertically in Default and Large Display modes.

 

Yes, I'm not overly happy with that box in general, I'll take another look at 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

Hi

 

I found a useful site

 

http://browsersize.com/

 

Handy for testing.

 

 

At Default 980px and up the grid boxes alignment gets messed up when one products name falls onto two lines (eg There's Something About Mary on the index page)

I added

/* Increase Height of Grid Box */
.thumbnail .caption{min-height:110px;}

to user.css.

 

It appears to work but I’m sure there will be a better way.

 

Regards

 

Ken

Share this post


Link to post
Share on other sites

Ive been working on the product listing layout, havent committed to git yet, but looking for some input from folks.

 

So far its set up much like Burt's demo, but the html wrapping it all has been redone for responsive design. (With less code too)

 

So far seems to work flawlessly at any size. But there be a couple of issues to deal with:

 

1) These may need to go into product listing options of configuration, or a header_tag module:

  • Default layout: grid or list
  • Allow customer to switch the layout: true or false
  • How many grids across desktop/tablet view : select from 1 to 4 <-- 3 in default osC 3 column layout, 3 is a bit crammed but if left or right column is removed, then up to 4 can look good.
  • How many grids across in mobile device view: select from 1 to (4?) <-- 4 is possible, but anything over 2 is not really practical
  • show average review rating: true or false

 

2) These options seem to have been took out of the demo: (temporarily I assume?)

 

Display Product Manufacturer Name

Display Product Model

Display Product Quantity

Display Product Weight

Display Buy Now column

  • Obviously we want to show the name and price - though by default the configuration allows it to be turned off, but Maybe I should code in that and all the above options so people have the control they are familiar with. However there will no longer be a sort option, if its on; its on; the CSS would control placement

 

3) Microformats

  • This would be considered an item-list and type is product. Great way to show every bit of detail in the markup.


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

Here's my rework of checkout_confirmation, thoughts on this appreciated prior to committing it, please.


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

Looks very good. Easy flow, not to long. Where do the comments left go?

 

Do the boxes stack in responsive mode?

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

Attached, that table could probably do with cleaning up if someone wants to take it on....please.

 

and

 

.order_confirmation td {
line-height: 2;
}

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

Pagination changes added

Checkout Shipping Updated

Checkout Payment Updated

Checkout Confirmation Updated

 

 

Just leaves;

 

Account History Info

 

Header File

Footer File

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

All pages now done and committed - all of which are subject to adjustment as when people testing find issues.

 

I want to now explore a more modern design which will include an overhaul of the header and footer areas. Who wants to come up with a design ?


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

Attached, that table could probably do with cleaning up if someone wants to take it on....please.

 

Cleaned up the table and pushed to git, shouldnt need the

order_confirmation css anymore


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 took a copy of the Master, and placed it inline with changes to the product listings.

 

http://wsfive.com/bs-master/products_new.php

 

Please report how it works out in different views, right now is set to use 2 product per row in grid view, this can easily be changed to show up to 4, and responsive view can also be seperately set up to show up to 4.

 

This is only set up on the pages that use the product_listing module, not for the new products module.


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

×