Jump to content
greasemonkey

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?

 

 

Share this post


Link to post
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

 


Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

No pierdas el tiempo. Si quieres usar la versión más estable de osCommerce (la realizada por la comunidad, que además es 'responsive', la 2.3.4.1BS Edge) pincha aquí y aquí para descargarte el idioma Español.

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites
1 hour ago, greasemonkey said:

Exactly what I'm looking for!

great!


Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

No pierdas el tiempo. Si quieres usar la versión más estable de osCommerce (la realizada por la comunidad, que además es 'responsive', la 2.3.4.1BS Edge) pincha aquí y aquí para descargarte el idioma Español.

Share this post


Link to post
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>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×