PageBuilder Items Per Page shows slightly more than it should

[lesliekirk]

I'm having a couple of mini-ah ha moments in my quest to rid the mmx-product-carousel of that "peek". I was finally able to create a tar of a copy of the mmx-product-carousel and I thought I was solving the problem within the rename product-carousel javascript file. Within the mmx-product-carousel is the mmx-hero-slider <facepalm> I'm guessing I need to make a copy of it too? </facepalm>

[Nick]

lesliekirk To adjust the peek value in the product carousel without altering any other flex components all you need to do is add a hardcoded value in the mmx-product-carousel.js here: https://github.com/mivaecommerce/sha...rousel.js#L199

Currently it is using the value that is given in the hero slider component but you can simply add a hard coded value. This will remove the peek:

data-peek="0"

[lesliekirk]

lesliekirk To adjust the peek value in the product carousel without altering any other flex components all you need to do is add a hardcoded value in the mmx-product-carousel.js here: https://github.com/mivaecommerce/sha...rousel.js#L199

Currently it is using the value that is given in the hero slider component but you can simply add a hard coded value. This will remove the peek:

data-peek="0"

I tried that - not sure why it didn't work. I think it might be because the "peek" is actually in the hero slider

<mmx-hero-slider data-per-page="1,3,5" data-per-move="auto" data-peek="75" data-gap="16" data-size="auto" data-autoplay="false" data-delay="5" data-pause-on-hover="true" data-arrow-style="button" data-nav-position="none" data-sync-heights=".type-product-name" data-wrap="false">

[Nick]

lesliekirk Not sure what you did wrong but here is a link to my development store: https://mivalearn.mivamerchantdev.co...7af8bf89a14aae

The top component is the default component and the bottom component is a custom component in which I followed the Duplicate Component instructions then updated line 199 to have a value of 0.

I attached a zip version of the component, you will need to unzip the file then compress into a tar.bz2 compressed file.

[lesliekirk]

Thanks Nick I will compare what you have with what I have. Yes, I did edit line 199 and changed it to 0. I must have missed something else. I will post what I find (which might help in fine-tuning the instructions).

[lesliekirk]

Following up, I think I see where my issue might be. The instructions were not clear to me regarding the editing of the

let props = MMX.assign(MMX_ProductCarousel.carouselProps, MMX_HeroSlider.props)

that makes sense

Then I goofed up changing this in the init.mvt

<mvt:item name="head" param="css:mmx-hero-slider" />

since there is no CSS file with the Component - that makes sense but shouldn't me changing it have blown the layout apart?

The first time I had attempted changing the<mmx-product-carousel> </mmx-product-carousel> in the instance.mvt - it blew my layout totally apart (maybe it was the previously mentioned tweak)


BUT!!!

after using Nick example I was able to fix my own and IT WORKS!!! (Featured Products):

https://www.celebrate365.com/?Branch...2eea93beddd5cc

I don't want to get too cocky, I have a whole list of tweaks I want to make to these components. I think I will try fixing how the Hero Slider rotates next. I don't like how it "jumps" back to the first slide. I find that so annoying. When I get better at this I want to make a half video half text Components. Again, I don't like the current one. Controlling the size of the video just doesn't "work for me".

I'm happy dancin'

Again, thanks Nick.