Jump to content
Can Memiş

Prestashop 1.7 Mobile Slider No Show

Recommended Posts

In PrestaShop 1.7 by default standard homeslider module is disabled for mobile devices.

you can enable it with simple option switch in shop back office

 

go to modules > modules & services > installed modules

search there for "image slider" and enable option "enable mobile"

 

screenshot for reference:
s2VoYGP.png

 

in addition to this, please go to: themes/classic/modules/ps_imageslider/views/tempaltes/hook/slider.tpl

 

and change:

<div id="carousel" data-ride="carousel" class="carousel slide hidden-sm-down" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">

to

<div id="carousel" data-ride="carousel" class="carousel slide" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">
  • Like 2

Share this post


Link to post
Share on other sites

Hello,

 

I try this solution in the last version of prestashop but is not working for me.

Any idea?

 

Thanks,

 

Rafael

Share this post


Link to post
Share on other sites

 

In PrestaShop 1.7 by default standard homeslider module is disabled for mobile devices.

you can enable it with simple option switch in shop back office

 

go to modules > modules & services > installed modules

search there for "image slider" and enable option "enable mobile"

 

screenshot for reference:

s2VoYGP.png

 

in addition to this, please go to: themes/classic/modules/ps_imageslider/views/tempaltes/hook/slider.tpl

 

and change:

<div id="carousel" data-ride="carousel" class="carousel slide hidden-sm-down" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">

to

<div id="carousel" data-ride="carousel" class="carousel slide" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">

Thanks!! It's work nice in Prestashop 1.7.1.0

 

The only problem is how it looks on mobile. It does not stay centered, and typography does not change either

Share this post


Link to post
Share on other sites

didnt work for me either

anyone worked this out ?

 

Guys, Vekia is correct and it works. If you cannot see any change make sure to clear the cache of your Prestashop first.

Share this post


Link to post
Share on other sites
Hello

I have a problem in the slider, mobile version, the text overflows

How to adjust the size automatically for the mobile version

 

Thanks

Share this post


Link to post
Share on other sites

I have same problem. Text overflows on mobile version and on ipad. Desktop version is fine. Any ideas?

Share this post


Link to post
Share on other sites

It's an unfixed issue as far as I've seen. You would need to amend the tpl code and a controller. Than, you change the css settings... which you need of course.

 

{if $is_mobile == 1}
<style>
.caption h2 { margin-top: -50px; margin-left: 3px; margin-right: 3px; }
.caption-description h2 { font-size:small;  margin-top: -40px; padding-top: 30px; margin-left: 3px; margin-right: 3px; }
/*.caption-description p { font-size:small; }*/
.caption-description p { display: none; }
</style>
{/if}

 

You would need somewhere an override. I did it for the homepage as such and go back after it's assigned to a variable to the standard indexController (core) .

class IndexController extends IndexControllerCore
{
    public function initContent()
    {
        parent::initContent();
    $is_mobile = preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
        $this->context->smarty->assign('is_mobile', $is_mobile);
        parent::initContent();
    }
}

 

My code is maybe not perfect but there's an idea how to resolve it until prestashop provides a fix.

 

 

Share this post


Link to post
Share on other sites

Hi another solution is to modify the imageslider.scss for this:

(Prestashop 1.7.5.2, Base theme prestarocket-dev-tools) 

.slider-caption{
  position: absolute;
  top:10%;
  margin-bottom: 0;
  color: #000;
  @media (min-width: 768px) {
    left: 90px;
    max-width: 400px;
  }
  @media (max-width: 767px) {
    left: 9px;
    max-width: 170px;
    .display-1{
      font-size: 0.9rem;
    }
    h4{
      font-size: 0.5rem;
    }
  }
}

 

Edited by Msaustral (see edit history)

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.   Restore formatting

  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.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More