Jump to content

How to turn bxslider off on mobile homepage ?


sailing123

Recommended Posts

The solution is going to involve having CubeCart make a decision on how to deal with the HomePage document. This before CubeCart sends the finished page to the browser so as to not include the <ul class="bxslider"> block of code. By removing this block of code, the <img> tags will not be present and so the total time to finally display the page will be lessened.

On the other hand, if you just want to hide it on a mobile skin, we can create a simple CSS rule:
.bxslider { display:none;}

To hide it on a responsive screen:
The html in the document would be: <ul class="show-for-medium-up bxslider">

Getting back to not including it, we need a version of CubeCart that includes the ability to parse Smarty tags. In admin, Documents, click the edit icon for any document. On the General tab, check for the presence of the "Parse Smarty Tags" checkbox.

Link to comment
Share on other sites

So, the one scenario that is proving difficult to solve is when a responsive skin is being shown on a mobile device. CubeCart might not know this is happening because the browser takes care of everything.

So, we need to know if the browser can be told (somehow) to not load images if a CSS rule says "hide_for_small" (might be inside a media query).

Or we can ask CubeCart if it detected the device is mobile.

Link to comment
Share on other sites

Ok, so with a short Hook Snippet, we can override CC6's insistence that, if using a responsive skin, all aspects pertaining to "mobile" be ignored.

Thus, if on a mobile device, the entire "bxslider" code block is discarded from the document.

Complete instructions shortly.

Link to comment
Share on other sites

The scenario is that there is some part of a document where the HTML for that part must not be present when the document is being displayed on a mobile device.

The version of CubeCart must support parsing Smarty tags in the document (apparently, all versions of CC6).

The mobile device must send a User Agent (UA) string that CubeCart will recognize as being a mobile device.

When editing the Content of a document (the HomePage's BXSlider,  for example), use the following:

{if !GUI::getInstance()->mobile}
<ul class="bxslider">
	<li><img src="skins/foundation/images/examples/slide1.jpg" title="Message Foo" /></li>
	<li><img src="skins/foundation/images/examples/slide2.jpg" title="Message Bar" /></li>
	<li><img src="skins/foundation/images/examples/slide3.jpg" title="Message Baz" /></li>
</ul>
{/if}

Be sure to have "Parse Smarty Tags" setting enabled.

Then, create a snippet. In admin, Manage Hooks, Code Snippets tab, click Add Snippet.

In the form that appears, fill in fields as follows:

Enabled: Checked
Unique ID: [email protected]+
Execution Order: 1
Description: Forces CubeCart to detect if a mobile device
Trigger: class.gui.css
Version: 1.0
Author: https://forums.cubecart.com/topic/54744-how-to-turn-bxslider-off-on-mobile-homepage
PHP Code:
<?php
$current_disable_mobile_skin_setting = $GLOBALS['config']->get('config', 'disable_mobile_skin');
$GLOBALS['config']->set('config', 'disable_mobile_skin', false);
$this->_detectMobile();
$GLOBALS['config']->set('config', 'disable_mobile_skin', $current_disable_mobile_skin_setting);

The reason we use the "class.gui.css" hook is because CubeCart processes this hook early - before processing the action of getting a document ready for display. It also has to be a hook in the GUI class because that is where the private code is located that determines if the UA string is mobile.

Let me know if I left anything out.

Link to comment
Share on other sites

Works a treat bsmither, thanks a lot. You would not believe how much difference this little trick made to my mobile speed test via Google, moved from 70 to 82 ! Still some work to be done but I am super pleased with that result !

Thanks again.

S.

Link to comment
Share on other sites

Looking all good from my point of view but I am not an expert. 

I hope bsmither will see where the issue lies.

By the way, I noticed that your slider images were not resizing with the screen size. I had the same problem until I removed the height of the images in the homepage document although now not really an issue as the slider is off on mobile screens. 

Link to comment
Share on other sites

Using your phone, it may be virtually impossible to determine what the User Agent string may be.

However, examining the access logs maintained by the web server hosting your site will show it. (Visit your hosting account's control panel and look for Logs.)

It could be that the UA string of your phone fails to match the pattern used by CubeCart to detect a mobile device.

On the other hand, I am able to customize my browser to use a user-supplied UA string that I know CubeCart would see. That is how I tested this project.

Visiting your site with same setting on my browser, indeed, the page contents do not change.

I also see some strange-looking cookies. Would these indicate some sort of server-level caching?

After making the edits to the source code of the HomePage document, did you clear CubeCart's cache? (I assume you know this by now, but I still have to ask.)

 

Link to comment
Share on other sites

2 hours ago, sailing123 said:

Looking all good from my point of view but I am not an expert. 

I hope bsmither will see where the issue lies.

By the way, I noticed that your slider images were not resizing with the screen size. I had the same problem until I removed the height of the images in the homepage document although now not really an issue as the slider is off on mobile screens. 

if I erase the height it breaks the slide

yes I always erase the cache

 

Link to comment
Share on other sites

I wonder if CubeCart is overwriting the Content (as shown in a post above) with a translation.

I note that the French version of the HomePage document has seven images on the BXSlider, the English-US version has six images, and the English-UK version has three images.

When in admin, Documents, do the flags in the Language and Translations columns make sense?

Link to comment
Share on other sites

We need to look deeper.

In the CubeCart file /classes/gui.class.php:

Near line 152, find:

	$css = array();
	foreach ($GLOBALS['hooks']->load('class.gui.css') as $hook) include $hook;
	$GLOBALS['smarty']->assign('CSS', $css);

Just BEFORE those statements, add:

$GLOBALS['debug']->debugMessage("Before, the GUI::mobile variable is ".(($this->mobile)?"True":"False"));

And then just after those statements, add:

$GLOBALS['debug']->debugMessage("After, the GUI::mobile variable is ".(($this->mobile)?"True":"False"));

In admin, Store Settings, Advanced tab, "Enable Debugging" set to Enabled, and enter your IP address in the next field (www.whatismyip.com).

When you next ask for the storefront page, there will be a long grey 'debug' section at the bottom of the page. Near the bottom of the debug section will be any Debug Messages.

Are there any and what do they say?

Link to comment
Share on other sites

Interesting.

That suggests that the snippet is not getting executed, or the statement in the snippet:
$this->_detectMobile();
is failing, or some other code is interfering with the  GUI::mobile variable.

Bring the snippet code up for editing.

Change to:

<?php
$current_disable_mobile_skin_setting = $GLOBALS['config']->get('config', 'disable_mobile_skin');
$GLOBALS['config']->set('config', 'disable_mobile_skin', false);
$GLOBALS['debug']->debugMessage("Before _detectMobile(), the GUI::mobile variable is ".(($this->mobile)?"True":"False"));
$this->_detectMobile();
$GLOBALS['debug']->debugMessage("After _detectMobile(), the GUI::mobile variable is ".(($this->mobile)?"True":"False"));
$GLOBALS['config']->set('config', 'disable_mobile_skin', $current_disable_mobile_skin_setting);

This new code narrows where the likely problem might be found.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...