Miva - Remove Peek of Next Product for MMX Carousels

miva-remove-peek-of-next-product-for-mmx-carousels.md

Miva - Remove Peek of Next Product for MMX Carousels

Method #1 (Preferred) Set Web Component Attribute On-Load

This method is preferred because preserving the original source of the mmx-product-carousel.js will maintain future automatic update eligibility during Miva Software patches of flex components.

To use this method, add the following to some globally executed JavaScript file. For example, in Shadows that would be something like: ui/js/theme.js > themeFunctionality.global()

// Remove peek for just product carousel
document.querySelectorAll('mmx-product-carousel').forEach(carousel => {
	carousel.setAttribute('data-peek', 0);
});

// Or remove peek for all carousel components
document.querySelectorAll('mmx-product-carousel, mmx-category-carousel, mmx-hero-slider').forEach(carousel => {
	carousel.setAttribute('data-peek', 0);
});

---

!!! WARNING: The Following methods break upgrade eligibility !!!

The following methods should be avoided because modifying the source of flex components will break the automatic upgrade eligibility of the flex component and should be avoided wherever possible.

I would only use these if you've already heavily modified the flex component source and you're ok with manually applying future updates to flex components

---

Method #2 (Avoidable) Remove peek of just the Product Carousel`

To use this method, you would just add a line specifying the new default value of the mmx-product-carousel.js > class MMX_ProductCarousel.props():

class MMX_ProductCarousel extends MMX_Element {

	static get props() {
		let props = MMX.assign(MMX_ProductCarousel.carouselProps, MMX_HeroSlider.props);
+		props['peek'].default = '0';
		props['per-page'].default = '1,3,5';
		props['arrow-style'].default = 'button';
		props['nav-position'].default = 'none';
		props['sync-heights'].default = '.type-product-name';
		props['wrap'].default = false;
		props['autoplay'].default = false;
		return props;
	}
  
	// the rest of class MMX_ProductCarousel is omitted....
  
}

Method #3 (Avoidable) Remove the peek for all carousels

Use this method if you want to remove the peek on all carousels (ex Hero Sliders, Category Carousels, and Product Carousels).

You could change the default from 75 to 0 by modifying the mmx-hero-slider.js > MMX_HeroSlider.props().peek.default

class MMX_HeroSlider extends MMX_Element {
	
	// ...

	static get props() {
		return {
			// ...
			peek: {
				isNumeric: true,
				allowAny: true,
+				default: 0
-				default: 75
			},
			// ...
		};
	}

	// ...

}