Jump to content

Edit product slider on prestashop 1.7.6


jazz for soul
 Share

Recommended Posts

Hello !

I would like to change the appearance of the product slider in prestashop 1.7.6 ! Currently it looks like the base theme but I would like to customize it for something simpler, having the buttons directly on the main image, making the thumbnails disappear and with a cross to close the pop-up.


Thank you for your help !

 

 

1.png

2.png

Edited by prestacrashs (see edit history)

Share this post


Link to post
Share on other sites

It depends about what you is actually searching;

I am using library for slide next image, you can see it here.

If you will use this library, here is my code below (dont forget css styles,but this code is working below):

Also check swiper api parameters, you have a lot of features here (swiping delay, animations, zoom etc.)

 replace code in /templates/catalog/_patrials/product-cover-thumbnails.tpl

<div class="swiper-container " style="width:100%">
    <div class="swiper-wrapper">
      {foreach from=$product.images item=image}
      <div class="swiper-slide">
        <div class="swiper-zoom-container">
        <img
        src="{$image.bySize.large_default.url}"
        alt="{$image.legend}"
        style="width:100%;"
        title="{$image.legend}"
        itemprop="image">
      </div>
      </div>
      {/foreach}
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script>
  var swiper = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      dynamicBullets: true,
    },
    zoom: {
      maxRatio: 3,
    },
  });
</script>

P.S. if question is solved, don't forget to press grey heart

Edited by Amantha Bill (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

I'll see what Swiper gives!

I don't know where I should put the contents of the rar file in the Prestashop folders. In the theme would be suitable? And the file I want to modify is product-images-modal.tpl however but I don't know how.

Thank you !

Edited by prestacrashs (see edit history)

Share this post


Link to post
Share on other sites

  • 3 weeks later...

Can anyone help me ? The number of slides indicates 0/0 and the buttons do not work, which means that the images do not scroll as it should ... here is the code, thank you!

 



  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

  <script src="https://unpkg.com/swiper/js/swiper.js"></script>
  <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

  <div class="modal fade js-product-images-modal" id="product-modal">



    <div class="swiper-container " style="width:100%">
      <div class="swiper-wrapper">
        {foreach from=$product.images item=image}
        <div class="swiper-slide">
          <div class="swiper-zoom-container">
            <img src="{$image.bySize.large_default.url}" alt="{$image.legend}" style="width:100%;" title="{$image.legend}" itemprop="image">
          </div>
        </div>
        {/foreach}
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
      <!-- Add Arrows -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>

    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

    <script src="https://unpkg.com/swiper/js/swiper.js"></script>
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

    <script>
      var swiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });

    </script>




  </div><!-- /.modal -->

 

Share this post


Link to post
Share on other sites

Hello, do you have some error at frontend page?

Press F12 and inspect the errors and tell me if you have ones.

If you have 0/0 images it means PS not giving you images. Check previous steps described in this post.

P.S. In my previous message I posted you my working code

Also check this: $this

Edited by Amantha Bill (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

  • 2 weeks later...

Ah finally, the joy was short-lived and the code doesn't work too…
I already tried your code and I was wondering, are the different slides supposed to move on their own? Because if this is the case, your code does not work with me ... The F12 key does nothing at all with me, does it make sense to open the console? The messages are:
"- This page uses the non-standard property" zoom ". Consider using calc () in the values of the relevant properties or use "transform" with "transform-origin: 0 0".
- The cookie "hibext_instdsigdipv2" will soon be rejected because its attribute "sameSite" is set to "none" or an invalid value, and without attribute "secure". To learn more about the "sameSite" attribute, see https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite "

Thanks again for your help!

 

edit : I think the code only works after a while? It shows me 0/0 and then after a long time shows me 1/3.
How can I get PS to deliver images much faster?

Edited by jazz for soul (see edit history)

Share this post


Link to post
Share on other sites

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

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