Use condition of responsive template screen size affect cart response

Using one of the Picaflora Azul templates (responsive sheffield blue) and would like to be able to "monitor" when the width is of a size that would be considered served on a mobile device or "shrunk". I am assuming that there is some form of a variable that reaches a trigger point (either X pixels or something equals true). Could someone please help me identify what to look for to identify that the screen size meets the request?

Thank you in advance!

mc12345678:

Using one of the Picaflora Azul templates (responsive sheffield blue) and would like to be able to "monitor" when the width is of a size that would be considered served on a mobile device or "shrunk". I am assuming that there is some form of a variable that reaches a trigger point (either X pixels or something equals true). Could someone please help me identify what to look for to identify that the screen size meets the request?

Thank you in advance!

Pretty sure the sheffield blue template responsive code uses media queries to alter the display based on min and max widths set in responsive.css

Tracking which devices your users are visiting your site on will be easier if you upgrade the responsive code to 2.0 which uses mobile detect.

rbarbour:

Pretty sure the sheffield blue template responsive code uses media queries to alter the display based on min and max widths set in responsive.css

Tracking which devices your users are visiting your site on will be easier if you upgrade the responsive code to 2.0 which uses mobile detect.

Well, the goal is this: if the page is loaded and the screenhas been formatted to notshow the side boxes/the menu showing is the mobile version, etc. I would like to be able to direct the php code to act one way versus the "standard" direction.

Is that something your above suggestion would be able to handle?

mc12345678:

Well, the goal is this: if the page is loaded and the screenhas been formatted to notshow the side boxes/the menu showing is the mobile version, etc.

This simply applies a css class to the side box that uses display:none placed at the appropriate media query to not show the side-boxes

mc12345678:

I would like to be able to direct the php code to act one way versus the "standard" direction.

Is that something your above suggestion would be able to handle?

I am not clear as to what you want to accomplish.

rbarbour:

This simply applies a css class to the side box that uses display:none placed at the appropriate media query to not show the side-boxes

I am not clear as to what you want to accomplish.

Well, recently helped someone develop a method to apply checkboxes when looking at a list of items so that they could check a number of items (possibly on a tablet like device), then select add to cart for all checked items, which would add one instance of the minimum quantity for each of the items. Thought is, it would be nice to on the fly be able to determine that the screen was so "small" that it would change to a checkbox on say refresh. Or upon load to pick up on that tid bit and make it a checkbox...

Was kind of hoping that something about responsive templates may be "readable" to adjust code action instead of just visualization.

mc12345678:

Well, recently helped someone develop a method to apply checkboxes when looking at a list of items so that they could check a number of items (possibly on a tablet like device), then select add to cart for all checked items, which would add one instance of the minimum quantity for each of the items. Thought is, it would be nice to on the fly be able to determine that the screen was so "small" that it would change to a checkbox on say refresh. Or upon load to pick up on that tid bit and make it a checkbox...

Was kind of hoping that something about responsive templates may be "readable" to adjust code action instead of just visualization.

Take a look at 2.0, you can insert the mobile detect code on modules/product_listing.php to call the correct php code based on device.

just an example

if( $detect->isMobile() && !$detect->isTablet() ){

// add code for phones

$lc_button = 'BIG BUTTON';

}else if( $detect->isTablet() ){

// add code for tablets

$lc_button = 'CHECKBOXES';

} else {

// use default

$lc_button = '<a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing->fields['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT, 'class="listingBuyNowButton"') . '</a>';

}

rbarbour:

Take a look at 2.0, you can insert the mobile detect code on modules/product_listing.php to call the correct php code based on device.

just an example

if( $detect->isMobile() && !$detect->isTablet() ){

// add code for phones

$lc_button = 'BIG BUTTON';

}else if( $detect->isTablet() ){

// add code for tablets

$lc_button = 'CHECKBOXES';

} else {

// use default

$lc_button = '<a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing->fields['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT, 'class="listingBuyNowButton"') . '</a>';

}

Well, rock on, looking at the description (and that's all I have looked at regarding 2.0) it seems that this will allow exactly what I was considering... Now, the thing is for me to get CSS smart so that I can try to incorporate it into the existing template (or wait for an upgrade? :) ) but either way, sounds like there will be a lot more templates to contend with in order to meet what looks like possibly 6 different configurations (maybe it's 5, because I don't know if there is anything needed for a desktop to rotate 90 degrees, as it seems like the size/resize of the window will likely address that.) Thinking of tablet 2 templates portrait and landscape, mobile device same, and then either one or two for desktop/laptop...

Now, on that note, I asked a mobile user to visit our site and provide some feedback, one of the things of consideration was, is it not possible to zoom out and return to the "full site"? I thought initially that they could zoom out and it would do that, but looked like it was not possible. Does 2.0 introduce this possibility? Or does one need to consider adding more items to the menu list so that content of "sideboxes" can be seen? (Some of them contain content of interest; however, thinking are more for reference than requirement.)

mc12345678:

Well, rock on, looking at the description (and that's all I have looked at regarding 2.0) it seems that this will allow exactly what I was considering... Now, the thing is for me to get CSS smart so that I can try to incorporate it into the existing template (or wait for an upgrade? :) ) but either way, sounds like there will be a lot more templates to contend with in order to meet what looks like possibly 6 different configurations (maybe it's 5, because I don't know if there is anything needed for a desktop to rotate 90 degrees, as it seems like the size/resize of the window will likely address that.) Thinking of tablet 2 templates portrait and landscape, mobile device same, and then either one or two for desktop/laptop...

Using the mobile detect example provided earlier will allow you to display "use" different actions based on device. Using CSS media queries "portrait or landscape" to alter display is very easy (examples provided in 2.0).

mc12345678:

Now, on that note, I asked a mobile user to visit our site and provide some feedback, one of the things of consideration was, is it not possible to zoom out and return to the "full site"? I thought initially that they could zoom out and it would do that, but looked like it was not possible. Does 2.0 introduce this possibility? Or does one need to consider adding more items to the menu list so that content of "sideboxes" can be seen? (Some of them contain content of interest; however, thinking are more for reference than requirement.)

At this time 2.0 does not offer that function, however adding a simple php "switch" for mobile or tablet users by using the ACTIVATE Responsive Template admin configuration will allow one to display desktop version on mobile and tablet versions.

I have this added and commented for the next release along with a few other suggestions and requests.