Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Change Content Module Sort Order on Viewport


Recommended Posts

Hey all, I'm looking for a tip - I had built product info content modules (previous to their inclusion in EDGE) and everything has been great.

However, I'm looking for to optimize a little further and I'm stuck. Currently I  have 3 modules with the following sort order:

[description-500] [price-501] [image-502]

And would like to re-order these based on the SM viewport to:

[price-501] [description-500] [image-502]

I was initially thinking I would be able to use the bootstrap columns to re-order (push and pull), however the module sort order would seem to override this?

Any clue - maybe a header tag script? Or will I have to break into admin/modules.php?

 

 

Link to comment
Share on other sites

Unfortunately offsetting columns are not controlled from 'configuration' (neiter every posible value in all "Extra small devices Phones", "Small devices Tablets", "Medium devices Desktops", "Large devices Desktops" or set if you can disable this in one or more views).

For cover this you will need to add 'by hand" some classes into the html part of the module.

May be this link can help you:

https://getbootstrap.com/docs/3.3/css/#grid-offsetting

 

Link to comment
Share on other sites

On 5/6/2018 at 5:48 AM, Antonio Garcia said:

Unfortunately offsetting columns are not controlled from 'configuration' (neiter every posible value in all "Extra small devices Phones", "Small devices Tablets", "Medium devices Desktops", "Large devices Desktops" or set if you can disable this in one or more views).

For cover this you will need to add 'by hand" some classes into the html part of the module.

May be this link can help you:

https://getbootstrap.com/docs/3.3/css/#grid-offsetting

 

Thank you Antonio. The description on column ordering is ridiculously undocumented on the bootstrap site. The total documentation is:

****Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.***

I have figured it out however - the issue has nothing to do with the sort order config built in OsC - although the sort order config allows you to give a starting point.

The missing part bootstrap should "re"-emphasize is: you cannot re-order columns on smaller screen - you MUST re-order for larger screens (yes I know... bootstrap is "mobile first"... and therefore should have realized my error... a quick google search however I quickly realized I'm, by far, not the only person who missed this critical part).

So, use the config sort order to order your columns on smaller screens - THEN use the push/pull features to re-order your columns for larger screens.

So - on xs screens:

[500] with col-sm-4 col-sm-push-8

[501] with col-sm-8 col-sm-pull-4

BUT on screens sm and larger would become

[501] with col-sm-8 col-sm-pull-4 [500] with col-sm-4 col-sm-push-8

Exactly what I'm looking for!

Link to comment
Share on other sites

As a secondary solution - which actually works a little better (if you are using any column wrap built into bootstrap) is to re-order via javascript.

So, I extended the main div class for the descriptions and price templates... and then add to the price template:

<div class="col-sm-<?php echo $content_width; ?> description">
<div class="col-sm-<?php echo $content_width; ?> price">
<script>
var wasMobile = true;
$(document).ready(function moveColumn() {
    if ($(window).innerWidth() < 767 && wasMobile) {
        $('.description').detach().insertAfter('.price');
        wasMobile = true;
    } 
})
$(window).on('resize', moveColumn);
moveColumn();
</script>

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...