Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Responsive osCommerce - Bootstrap


Recommended Posts

Hooray!

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

  • Replies 2.2k
  • Created
  • Last Reply

@@BrockleyJohn

 

attachicon.gifchrome.jpg

 

That's chrome, it does the same in IE

I haven't checked in anything else.

 

how the heck did you get unequal widths??? mine don't do that *sigh* What versions and platform? Back to the emulators....

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

@@frankl could you slowly resize your window to 6ish inches wide and see what happens?

In my windows the boxes jump about all over the place :(

 

This:

 

post-3583-0-81938400-1490042204_thumb.png

 

No changes until breakpoint apart from the boxes becoming narrower.

osCommerce user since 2003! :thumbsup:

Link to comment
Share on other sites

Regarding equal height: Maybe I'm a little bit naive, but shouldn't have the space for images and products names have some predefined heights? You might have pictures of different height an also long product names which need a second line, well I couldn't help myself without doing the ultimate evil - changing core files - ad wrapped around a css class for  both of them.

I wanted for grid view: Equal height space for images, orientated to the bottom in that space, and centred within product holder.

Equal height for product names and centred along with the images..

For the images in product_listing.php wrapped them in:

<div class="center-block">

for which I ended up in my user.css with:

.grid-group-item .center-block {
  display: flex;
  height:310px;
  justify-content: center;
  align-items:flex-end;
  
}

where height could be some value maybe  defined per configuration of  SMALL_IMAGE_HEIGHT?

 

For the products name I added a class to h2 there like:

<h2 class="mumpel group inner list-group-item-heading">

which refers in my user.css to:

.grid-group-item .mumpel  {text-align:center;
display:block;height:45px;
}

Well it works at least with edge chrome and FF, I have no apples lying around here. But i confess I don't even know if I'm within the concept of responsive with that, so please kindly forgive me if that was worthless reading.

 

Best regards

Christoph

Link to comment
Share on other sites

oh poo - chrome 56 on Win7 - under 768px widths go to min like that instead of 100%

at least  I can try and work out why now

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

@@BrockleyJohn - might you be going down a rabbit-hole here?

 

Is the issue important enough to worry about, taking into account that the whole of Bootstrap will soon be changing to a flex based layout ?  At that point, Safari users will have to put up with broken sites here there and everywhere.

 

I am 100% happy with what we have (the flex css), it is so compact yet solves every problem thrown at it by browsers that are up to spec.

Link to comment
Share on other sites

@@BrockleyJohn - might you be going down a rabbit-hole here?

 

Is the issue important enough to worry about, taking into account that the whole of Bootstrap will soon be changing to a flex based layout ?  At that point, Safari users will have to put up with broken sites here there and everywhere.

 

I am 100% happy with what we have (the flex css), it is so compact yet solves every problem thrown at it by browsers that are up to spec.

 

@@burt you may well be right. I think some of my testing has been against cached styles despite attempting to reload them. I have identified the missing rule and changed the site path to avoid any further caching issues so there's a testable copy here now

http://bromleybr.co.uk/bsnit/

 

However, you might think the styles are getting bloated...

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

  • 3 weeks later...
  • 2 weeks later...

Hello,

 

Can anyone confirm this, please?

 

I'm using "Free Shipping For Orders Over" from ot_shiping in order totals modules for amount over 50 € offer free shipping.

 

In checkout_shipping.php I choose the shipping method and go to checkout_payment.php, if I go back the "$order-info['total]" to check if free shipping is ok, get the amount of $order-info['shipping_cost'] and offers free shipping.

 

adding this

    if ($order->info['shipping_cost'] > 0) {
      $order->info['total'] = $order->info['total'] - $order->info['shipping_cost'];
    }

before this

    if ( ($pass == true) && ($order->info['total'] >= MODULE_ORDER_TOTAL_SHIPPING_FREE_SHIPPING_OVER) ) {
      $free_shipping = true;

works correctly for me.

 

But I would like to know if it happens to someone else.

 

Of course I tried a clean installation

 

Thanks in advance :)

Link to comment
Share on other sites

Hello,

 

Can anyone confirm this, please?

 

I'm using "Free Shipping For Orders Over" from ot_shiping in order totals modules for amount over 50 € offer free shipping.

 

In checkout_shipping.php I choose the shipping method and go to checkout_payment.php, if I go back the "$order-info['total]" to check if free shipping is ok, get the amount of $order-info['shipping_cost'] and offers free shipping.

 

adding this

    if ($order->info['shipping_cost'] > 0) {
      $order->info['total'] = $order->info['total'] - $order->info['shipping_cost'];
    }

before this

    if ( ($pass == true) && ($order->info['total'] >= MODULE_ORDER_TOTAL_SHIPPING_FREE_SHIPPING_OVER) ) {
      $free_shipping = true;

works correctly for me.

 

But I would like to know if it happens to someone else.

 

Of course I tried a clean installation

 

Thanks in advance :)

 

Hi Gustavo,

 

I can see you could be fixing a free shipping case there, but without checking further in the code I can't see if you're breaking the case where shipping is charged.

 

You don't explain what issue you hit, but I infer from your code that the cost of shipping was included in the order total when calculating whether free shipping should be given. Is that what happened? That issue has a familiar sound to it, but I can't place it.

 

If it's an old issue, you'd think a store-owner would have picked up on it by now. Perhaps it's there in 234BS because it's carry-over code from the official non-responsive version, unchanged for the responsive front end and up till now NOP (not our problem).

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

@@PiLLaO

 

What are you trying to achieve?

I thought osC has already a Free Shipping Over $XX function.

 

Yes, the problem is with osc free shipping over (include in osc BS), that is on order totals modules.

 

If you select a shipping method and go back click again in checkout, the order total change to "order total + shipping cost" and the price of ship changes.

 

Sorry if I can't explain correctly

Link to comment
Share on other sites

Regarding equal height: Maybe I'm a little bit naive, but shouldn't have the space for images and products names have some predefined heights? You might have pictures of different height an also long product names which need a second line, well I couldn't help myself without doing the ultimate evil - changing core files - ad wrapped around a css class for  both of them.

I wanted for grid view: Equal height space for images, orientated to the bottom in that space,

Just a random thought on this... back in ye olden times, before CSS usage was widespread, people used tables to lay out their pages. Now, I'm not arguing that we should return to the days of table hell, with tables within tables within tables -- CSS is much better for layout purposes. However, tables are a legitimate way to lay out data in a grid, and cells in a row are automatically equal height. The downside is that I don't know how to change the number of cells in a row when the display width changes, so responsive design is difficult, if not impossible, with a table. Something would have to be done in Javascript to restructure the table, based on display width. Has anyone seen such a thing? I suppose you could send several different tables to the browser, and have one selected based on display width, but that seems rather inefficient. With adaptive design, that's easy (to generate a different table on the server, in the first place).

Link to comment
Share on other sites

@@MrPhil I think it's much better to hand it all off to a framework and live with whatever limitations it has.

 

Now if you're looking for input to a framework you're writing and giving out for free...

 

:D

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

Regarding equal height: Maybe I'm a little bit naive, but shouldn't have the space for images and products names have some predefined heights? You might have pictures of different height an also long product names which need a second line, well I couldn't help myself without doing the ultimate evil - changing core files - ad wrapped around a css class for  both of them.

I wanted for grid view: Equal height space for images, orientated to the bottom in that space, and centred within product holder.

Equal height for product names and centred along with the images..

For the images in product_listing.php wrapped them in:

<div class="center-block">

for which I ended up in my user.css with:

.grid-group-item .center-block {
  display: flex;
  height:310px;
  justify-content: center;
  align-items:flex-end;
  
}

where height could be some value maybe  defined per configuration of  SMALL_IMAGE_HEIGHT?

 

For the products name I added a class to h2 there like:

<h2 class="mumpel group inner list-group-item-heading">

which refers in my user.css to:

.grid-group-item .mumpel  {text-align:center;
display:block;height:45px;
}

Well it works at least with edge chrome and FF, I have no apples lying around here. But i confess I don't even know if I'm within the concept of responsive with that, so please kindly forgive me if that was worthless reading.

 

Best regards

Christoph

 

@@beerbee I'm sorry I missed your post at the time... was busy battling with safari!

 

There's nothing responsively wrong with your approach - and I understand why you'd want to do it as the core solution makes the boxes fit into equal height rows but it doesn't make the actual box-shaped outlines the same height as each other.

 

I think, perhaps, that you could have avoided the cardinal sin and not made any changes to the core code, though.

 

You can assign height to an anchor tag if you change its display so it's not inline, so you could probably write your center-block rule for the first anchor tag in an equal height class, something like

.equal-height > a:first-child {...}

Incidentally, I think your version only works on grid pages with grid/list choice enabled.

 

I don't think your second rule needs the extra class, you could select using a combination of the existing classes and the tag.

 

Overall, though, it's a good approach for your own store where you know the heights of the images and the font size.

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

Regarding equal height: Maybe I'm a little bit naive, but shouldn't have the space for images and products names have some predefined heights? You might have pictures of different height an also long product names which need a second line, well I couldn't help myself without doing the ultimate evil - changing core files - ad wrapped around a css class for  both of them.

 

Please see http://www.oscommerce.com/forums/topic/408314-equal-height-possible-new-approach/?p=1755668

Link to comment
Share on other sites

I think it's much better to hand it all off to a framework and live with whatever limitations it has.

Yes and no. There are advantages to using a common framework, but having to put up with severe limitations is not an advantage. I only mentioned tables because some people seem to think it a mortal sin to use <table> for any purpose, including display of tabular data! Tables are bad for doing general layout, but still excellent for display of information that naturally falls into a grid. The only downside is that (currently) there does not seem to be an easy way to adjust the number of columns per row on the fly, for responsive layout. If improvements to Bootstrap/Flex/whatever library can either do that, or set up an equal-height row without adding layers and layers of cruft (divs within divs within divs...), that would be a winner.

 

Does CSS already support something like

<div style="height: max-child-height;">

? I've seen lots of discussions about making a parent the height of its children, but they always seem to come with plenty of caveats and restrictions and warnings. Is it simple to do, yet?

 

Now if you're looking for input to a framework you're writing and giving out for free...

By strange coincidence, input and participants welcome... http://www.catskilltech.com/forum/practical-computing/building-an-application-framework/

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