Debut theme - Product thumbnails as slider

Solved
Highlighted
Tourist
13 0 1

Works like a charm. Thank you so much.

0 Likes
Highlighted
New Member
1 0 0

I am also facing the same issue but I followed the instruction correctly. Can you please help me here ?


@kunecting wrote:

Hi @Tejas_Nadpara 

 

I've solved the issue. I was modifying another part of theme.js that didn't was correct.

 

Thanks!


 

0 Likes
Highlighted
New Member
2 0 1

Hello,

 

This isn't quite working for me either.. I believe i have followed this guide step by step but for some odd reason, The picture below is the outcome..

I have created a paste bin for the files below..

 

https://pastebin.com/xyq4xbDY - Theme.js

https://pastebin.com/5P7SxJ2X - product-template.liquid

https://pastebin.com/Vi65YCN7 - theme.scss.liquid

 

Scrolling Thumbnails.JPG

0 Likes
Highlighted
Tourist
13 0 1

@Robgob wrote:

Hello,

 

This isn't quite working for me either.. I believe i have followed this guide step by step but for some odd reason, The picture below is the outcome..

I have created a paste bin for the files below..

 

https://pastebin.com/xyq4xbDY - Theme.js

https://pastebin.com/5P7SxJ2X - product-template.liquid

https://pastebin.com/Vi65YCN7 - theme.scss.liquid

 

Scrolling Thumbnails.JPG



Hi Robgob,

problem is with your js.

there are two _initBreakpoints();

the easiest way to explain this is that you need to change the second one, so if you have a back-up of the previous version of your theme.js use that and then search for _initbreakpoints(); go to the second one and then use the code provided before to replace it. I'm going to upload mine here if you want to use it.

go to the first _initBreakpoints(); and use this code to replace what you have there (Note: I put the first and last line here so you know where it starts and stops so make sure not to duplicate those codes)

 

    this.$sortSelect.on('change', this._onSortChange.bind(this));
    this._initBreakpoints();
    this._initParams();
  }

  Filters.prototype = _.assignIn({}, Filters.prototype, {
    _initBreakpoints: function() {
      var self = this;

      enquire.register(settings.mediaQueryMediumUp, {
        match: function() {
          self._resizeSelect(self.$selects);
        }
      });
    },
    _initParams: function() {

Now go to the second _initBreakpoints(); and use this code (Note: the last two line here are to tell you when to stop so make sure you're not duplicating those):

    this._initBreakpoints();
    this._stringOverrides();
    this._initVariants();
    this._initImageSwitch();
    this._initAddToCart();
    this._setActiveThumbnail();
  }

  Product.prototype = _.assignIn({}, Product.prototype, {
    _stringOverrides: function() {
      theme.productStrings = theme.productStrings || {};
      $.extend(theme.strings, theme.productStrings);
    },

    _initBreakpoints: function() {
      var self = this;

      enquire.register(this.settings.mediaQuerySmall, {
        match: function() {
          // initialize thumbnail slider on mobile if more than three thumbnails
        /*  if ($(self.selectors.productThumbImages).length > 3) {
            self._initThumbnailSlider();
          }
		*/
          // destroy image zooming if enabled
          if (self.settings.zoomEnabled) {
            $(self.selectors.productImageWraps).each(function() {
              _destroyZoom(this);
            });
          }

          self.settings.bpSmall = true;
        },
        unmatch: function() {
          /*
          if (self.settings.sliderActive) {
            self._destroyThumbnailSlider();
          }
          */

          self.settings.bpSmall = false;
        }
      });

      enquire.register(this.settings.mediaQueryMediumUp, {
        match: function() {
          if (self.settings.zoomEnabled) {
            $(self.selectors.productImageWraps).each(function() {
              _enableZoom(this);
            });
          }
        }
      });
      this._initThumbnailSlider()
    },

    _initVariants: function() {
      var options = {

Hope this helps, let me know if you face any other problems

 

1 Like
Highlighted
Tourist
13 0 1

@androidme wrote:

I am also facing the same issue but I followed the instruction correctly. Can you please help me here ?


@kunecting wrote:

Hi @Tejas_Nadpara 

 

I've solved the issue. I was modifying another part of theme.js that didn't was correct.

 

Thanks!


 


Hi androidme,

Try the solution above, maybe it's the same issue you're facing.

problem is with your js.

Let me know if this fixes it.

0 Likes
Highlighted
New Member
2 0 1

@Ardi94 wrote:

 

Hi Robgob,

problem is with your js.

there are two _initBreakpoints();

the easiest way to explain this is that you need to change the second one, so if you have a back-up of the previous version of your theme.js use that and then search for _initbreakpoints(); go to the second one and then use the code provided before to replace it. I'm going to upload mine here if you want to use it.

go to the first _initBreakpoints(); and use this code to replace what you have there (Note: I put the first and last line here so you know where it starts and stops so make sure not to duplicate those codes)

 

Hope this helps, let me know if you face any other problems

 


Hello Ardi!

 

That worked perfectly! Thank you! :)

1 Like
Highlighted
New Member
8 0 0

@Tejas_Nadpara @Ardi94 

 

This works great, thank you! I'm wondering if it's possible to make the scrolling stop when you hit the last image instead of circling back around to the first image? And same when going backwards, to stop at the first image instead of going through to the last one?

0 Likes
Highlighted
New Member
1 0 0

Hi tejas i did everything u said, but nothing changes including this one. Niether is there any error.. Please advise..

 

0 Likes
Highlighted
Tourist
13 0 1

@robiv wrote:

Hi tejas i did everything u said, but nothing changes including this one. Niether is there any error.. Please advise..

 


Can you upload your codes here?

theme.js,  theme.css  and product_template

0 Likes
Highlighted
New Member
2 0 0

hi slider not working I am not sure what I have done wrong https://blackpearlcoating.co.uk/products/black-pearl-black

 

any help 

0 Likes