Jump to content
Sign in to follow this  
sailing123

How to turn bxslider off on mobile homepage ?

Recommended Posts

Posted (edited)

Hi

I do not want bxslider live on the mobile homepage as to improve the website speed. I have searched around but I do not see how to achieve it. Surely I need to make some adjustments in CSS.

Thanks for your help.

S.

Edited by sailing123

Share this post


Link to post
Share on other sites

I respond to this post because I am also interested in this and I do not know how to follow a post without answering.

Share this post


Link to post
Share on other sites
7 minutes ago, fabriceunko said:

I do not know how to follow a post without answering.

Click on the "Follow" button top right of the page just above the green "Reply to this topic" button

  • Thanks 1

Share this post


Link to post
Share on other sites

Please remind us what skin(s) you are using?

The solution could be different depending if you are using a responsive skin or a pair of non-responsive skins (a normal and a separate mobile skin).

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


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

Share this post


Link to post
Share on other sites

Unfortunately, the Github issue #1226 has not yet been implemented (as of CC622), so CubeCart will not run code to determine if a mobile device is being used when a responsive skin is in play.

Share this post


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

Share this post


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

  • Like 1

Share this post


Link to post
Share on other sites

Hello, I'm going to test today but can you tell me where is Parse Smarty Tags I've already seen it but I can not find it anymore ..

Share this post


Link to post
Share on other sites

In admin, Documents, click the Edit icon for any document. On the General tab, there will be a checkbox for "Parse Smarty Tags". It applies to this this document.

Share this post


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

Share this post


Link to post
Share on other sites

so i was super happy because i see sailing123 that it works .. but in my case nothing works i always have the same thing on mob phone or on my pc.

Share this post


Link to post
Share on other sites

Fabrice,

1. Did you turn on Smarty tags once you are in the documents / homepage ?

2. Is your code snippet looking like thisforces-cubecart-to-detect-m.thumb.jpg.a1022830a1df7a2d42a5955585380e1d.jpg:

 

Share this post


Link to post
Share on other sites

that's what I did

1552652465-screenshot-2019-03-15-panneau

then

 

1552652473-screenshot-2019-03-15-panneau

then

1552652486-screenshot-2019-03-15-panneau

I am under cubecart 6.2.4

and when I go to my site with my phone nothing has changed

Share this post


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

Share this post


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

 

Share this post


Link to post
Share on other sites
Posted (edited)
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

 

Edited by fabriceunko

Share this post


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

Share this post


Link to post
Share on other sites
Posted (edited)

I did not make the change on all languages but only on French. I will try to do it everywhere

 

I edit in all languages and erase the cache. no difference.

Edited by fabriceunko

Share this post


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

Share this post


Link to post
Share on other sites

Debug Messages:
[0] Before, the GUI::mobile variable is False
[1] After, the GUI::mobile variable is False

Share this post


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

Share this post


Link to post
Share on other sites

Well done .. it works perfectly now. I thank you very much and I am happy thanks to you and your availability!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...