Remove text from selection in 'Cloud Slider', possible?

[-M-]

Hi guys,

 

I am using the new 'Cloud Slider' template for several of our products and services. I really love it, after some redesigning, however I have a small issue.

 

There isn't a problem when I am viewing it on a desktop or even iPad for that matter. The problem starts when I testdrive it on my mobile phone.

 

Not only do some options get hidden (I "fixed" this by hiding them completely and only show the visible/selected product). So this doesn't matter. I understand it's because the screensize / space is limited and therefor the items starting to overlap each other. So nevermind about this.

 

What does "annoy" me, is that my product names are too long.

 

I created two examples of what I mean:

 

First example:

Basic Package

Default Package

Big Package

Bigger Package

 

Second example:

Brandname HP1

Brandname HP2

Brandname HP3

Brandname HP4

Brandname HP5

 

Yeah, I fully understand the 'Cloud Slider' was developed to only be used for 3 products or services, but I am really loving it. And it isn't an issue on desktop / iPad view, but on mobile... Well... Let's just say it doesn't play nice.

 

Now I don't want to change my product names just because to make it "look" better on mobile devices. Therefor I was wondering, is there a way (in 'Cloud Slider') to remove text strings, so the product name will become shorter?

 

As for example 1; I want the string " Package" gone from it. So it will only show the first part.

As for example 2; I want the string "Brandname " gone from it. So it will only shows the HPx part.

 

Is this even possible?

If it is, it will probably be possible through JS. But I am not sure if the slider will still function as it should?

 

I did try a few things, to replace text strings, however as soon as you move the slider they always return.

 

Oh, almost forgot; it should only be applied to mobile devices. Like the @media css tag.

Don't know if this is even possible for JS or similar?

 

Thanks in advance.

Edited October 16, 2015 by MvdL1979
Added mobile device rule.

[brian!]

Is this even possible?

If it is, it will probably be possible through JS. But I am not sure if the slider will still function as it should?

I did try a few things, to replace text strings, however as soon as you move the slider they always return.

Oh, almost forgot; it should only be applied to mobile devices. Like the @media css tag.

Don't know if this is even possible for JS or similar?

perhaps a two-part approach - use a Smarty plugin that will detect mobile devices and then modify the templates to show x if using mobile, else the default name.

 

depending on what you want to do, x could be {$variable|replace:'Brandname ':''}

[-M-]

Thanks for the reply Brian.

 

Well I tried a few things, but cannot get the result needed.

I think finding a suitable Smarty plugin is more work than just adding a few lines of Javscript, right? Not sure though, because I am not a coder.

 

Anyways, I found the following piece of Javascript code:

 

// media query event handler
if (matchMedia) {
var mq = window.matchMedia("(min-width: 500px)");
mq.addListener(WidthChange);
WidthChange(mq);
}

// media query change
function WidthChange(mq) {

if (mq.matches) {
	// window width is at least 500px
}
else {
	// window width is less than 500px
}

}

 

I think the above code could work. It also changes on the fly, if I understood it correctly.

 

I tried applying that with using:

 

var sliderProductNames = [
   {foreach $products as $product}
       "{$product.name}",
   {/foreach}
];

 

and

 

var sliderProductNames = [
   {foreach $products as $product}
       "{$product.name|replace:'Brandname ':''}",
   {/foreach}
];

 

But I think I am applying/pasting it incorrectly, because I ended several times up with a blank page.

[brian!]

Thanks for the reply Brian.

 

Well I tried a few things, but cannot get the result needed.

I think finding a suitable Smarty plugin is more work than just adding a few lines of Javscript, right? Not sure though, because I am not a coder.

the Smarty plugin code in the thread looks like it would work to me.

 

http://stackoverflow.com/questions/9940149/how-to-redirect-to-a-mobile-template-in-smarty

[-M-]

Appreciate the answer, but tried several things, all result in a blank page.

 

I uploaded the "plugin" in "vendor/smarty/smarty/libs/plugins/"

 

And I called it with the example shown in your link:

 

{detectMobile}
{if $_is_mobile}
 something for a mobile device
{else}
 something for desktops
{/if}

 

Even running the code, shown as above (without modifications), result in a blank page...

 

Any ideas?

 

I checked the error_logs, but no errors there.

 

I think I am placing the plugin in the wrong directory or something, because if I remove the plugin, it also results in blank page. Will try a few things more.

 

//update

 

Well tried a few things more (enable PHP, MySQL and Hooks debugging) and it gave me a 'Parse error':

 

Parse error: syntax error, unexpected ';'

 

So I removed the ';' from the code example.

 

And as it shows, it's working now apparently.

 

Thanks Brian.

Edited October 20, 2015 by MvdL1979
Updated information.

[brian!]

ok, for me it works - but I think the code needed a very minor modification to make it work with WHMCS.

 

so, the plugin inside the plugins directory, called 'detectMobile.php' should contain the following modified code..

 

<?php
function smarty_function_detectMobile($params, $template) {
   $template->assign('is_mobile',
       preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$_SERVER['HTTP_USER_AGENT'])||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($_SERVER['HTTP_USER_AGENT'],0,4))
   );
}

and then if you use the supplied Smarty code...

 

{detectMobile}{if $is_mobile}something for a mobile device{else}something for desktops{/if}

that works for me - tested on both desktop and mobile.

 

btw - i've changed the smarty variable name to $is_mobile - the original name will work fine with WHMCS, I just changed it to avoid any future issues should WHMCS prevent smarty variables starting with underscores.

[-M-]

(stupid forum, had to enter a captcha and everything I typed was gone}

 

Anyways; sorry for wasting your time Brian.

 

I removed the ';' in:

<?php
function smarty_function_detectMobile($params, $template) {
   $template->smarty->assignGlobal('_is_mobile', 
       preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))
   );
}

 

It was located after: substr($useragent,0,4))

Doing so it wouldn't give me a blank page.

 

I changed the .tpl part to:

 

var sliderProductNames = [
   {foreach $products as $product}

{detectMobile}
{if $_is_mobile}
       "{$product.name|replace:'Brandname :''}",
{else}
       "{$product.name}",
{/if}
   {/foreach}
];

 

I tested this with my mobile phone and Chrome Canary (developer function). And it works.

Is this correct, or should I use your version?

 

(again sorry wasting your time, but when I was editing my post, you weren't online yet)

 

Regards

 

//edit

 

After reading what you have typed, I used your code.

Sounds safer. TY.

Edited October 20, 2015 by MvdL1979

[brian!]

(stupid forum, had to enter a captcha and everything I typed was gone}

it might be an idea to get the Lazarus plugin for your browser (if it's available) - that should prevent you from losing your post if something occurs before you can submit!

 

Anyways; sorry for wasting your time Brian.

no worries, it wasn't wasted if I learned something - and I now know this plugin works!

 

Is this correct, or should I use your version?

I can't see any issue with the .tpl code, that part looks fine to me... with regards to the plugin, for me your code doesn't work - it shows desktop on both desktop & mobile.

 

if it helps, the changes I made were to remove the semi-colon; modified the assign part to work with Smarty 3 and replace $useragent with $_SERVER['HTTP_USER_AGENT'] - i'm not aware if $useragent exists with WHMCS, so my code works around that.

 

if it were me, i'd go with my code... aah ok, I see that you already have - wise choice!

 

(again sorry wasting your time, but when I was editing my post, you weren't online yet)

i'm invisible - so while you may not be able to see me, assume that I am here!

[-M-]

Well normally, I most of the time just copy the text before clicking submit. Never heard of the Lazarus plugin, but will take a look.

 

Yeah, the plugin really works well, once configured and used correctly.

I already applied it on several other pages. Makes the text on the slider look better on mobile devices.

 

I am now using your plugin code and my .tpl code. So far it works perfectly. )

 

I only removed the 'semi-colon' because it messed up my page (blank) for some reason, after that it worked. However I am using your version anyways, because of what you mentioned.

 

You weren't invisible all the time previously. That's why.

 

But anyways; thanks for helping out (again), Brian.

 

My WHMCS / templates are really modified a lot. I copied several of them and renamed them to it's products. I got way too many templates now, but so long it works. And probably update proof this way.

[brian!]

And probably update proof this way.

probably the opposite... when the next WHMCS updates comes along (I guess they'll be at least one more this year), you'll need to either read the release notes to see what template changes they've made (and then tweak your templates to match), or do a file comparison for each template to spot any changes...

 

... or just leave it until something fails !

[-M-]

The tweaks and mods I did are mostly cosmetic. But yeah, I do use Beyond Compare to check what is changed.

I did the same for 6.1.0 and 6.1.1. There were only a few changes.