PageBuilder Items Per Page shows slightly more than it should

[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.

[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).

[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]

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 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]

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>

[lesliekirk]

lesliekirk I updated that part because of the initial topic of this thread.

In the JavaScript file there is a function called renderProducts()

In that function the HTML is being returned and there is a data attribute on the <mmx-hero-slider> element called data-peek

By default it is set to .7 but if you change it to 0 then no preview of the next product will show.

Here is a link to the code that I am referencing in Shadows 10.06.00 (which is the same in 10.07.00):
https://github.com/mivaecommerce/sha...rousel.js#L146

Nick how do I change the default value? I'm not seeing any reference to the default value of .7.

[Nick]

lesliekirk Correct, any modifications to the default JavaScript or CSS for a MMX Flex component will require you to download the component, update and upload the new version, as seen in this step by step tutorial: https://github.com/mivaecommerce/fle...-components.md.

We require this so that we can make updates to the default MMX Flex Components without the fear of overwriting any customizations done.

[lesliekirk]

lesliekirk I updated that part because of the initial topic of this thread.

In the JavaScript file there is a function called renderProducts()

In that function the HTML is being returned and there is a data attribute on the <mmx-hero-slider> element called data-peek

By default it is set to .7 but if you change it to 0 then no preview of the next product will show.

Here is a link to the code that I am referencing in Shadows 10.06.00 (which is the same in 10.07.00):
https://github.com/mivaecommerce/sha...rousel.js#L146

Thanks again Nick. So if I wanted to fix this issue with the default PageBuilder Carousel, I would have to create a new Flex Component?

[Nick]

lesliekirk I updated that part because of the initial topic of this thread.

In the JavaScript file there is a function called renderProducts()

In that function the HTML is being returned and there is a data attribute on the <mmx-hero-slider> element called data-peek

By default it is set to .7 but if you change it to 0 then no preview of the next product will show.

Here is a link to the code that I am referencing in Shadows 10.06.00 (which is the same in 10.07.00):
https://github.com/mivaecommerce/sha...rousel.js#L146

[lesliekirk]

lesliekirk I responded to your ticket but wanted to update you and let you know that I have created a custom product carousel and added it to the store. You can find it attached to this post.

The custom flex component is a copy of the product carousel with the following additions:

1. The swatches are displaying if the product has them.
2. The sizes are displaying if the product has an attribute with the code of size
3. The custom field pflag has been added as class to the div that is wrapping the name of the product

All the new functionality can be found in the JS resource called mmx-custom-product-carousel that is added to the store when the component is added. Any new features can be added to the JavaScript in the same way that I added the features above.

Note the file attached is a compressed file containing the tar.bz2 file that needs to be uploaded to Miva.

Thank you Nick! I've been able to make a couple of small tweaks (baby steps). I noticed that when the carousel is full screen, the is no partial product displaying (at least on the mockup page). I will try it on the Page Template it was meant for and see what happens.

[Nick]

lesliekirk I responded to your ticket but wanted to update you and let you know that I have created a custom product carousel and added it to the store. You can find it attached to this post.

The custom flex component is a copy of the product carousel with the following additions:

1. The swatches are displaying if the product has them.
2. The sizes are displaying if the product has an attribute with the code of size
3. The custom field pflag has been added as class to the div that is wrapping the name of the product

All the new functionality can be found in the JS resource called mmx-custom-product-carousel that is added to the store when the component is added. Any new features can be added to the JavaScript in the same way that I added the features above.

Note the file attached is a compressed file containing the tar.bz2 file that needs to be uploaded to Miva.

[Nick]

My attempt to edit a flex component has failed miserably. I've reached out for help on it a couple of times but still haven't even made it past just repackaging an unedited package. I'm really hoping for some step-by-step instructions that are good as the ones for the GA4 integration - those are probably some of the best I have seen.

The documentation found here, https://github.com/mivaecommerce/fle...-components.md, is a step by step guide on duplicating a native MMX component. There are even instructions on how to implement using the MMT command line feature.

Here is an example Flex Component that is a very basic FAQ that can be updated by the store owner: https://github.com/mivaecommerce/fle...amples/ex-faqs

Here is another example Flex Component that is a comparison table that can be updated by the store owner: https://github.com/mivaecommerce/fle...mparison-table

I did receive your email and will get back to you as soon as I can.

[lesliekirk]

Hi Leslie - I just did some testing and it looks like that is how it was designed. When you have 2 or 3 products per page in order to fill he space, the 3rd or 4th product is half shown. Once you hit 4 or more products then it removes the half shown product.

Can you show 4 products or more in the carousel?

FYI - I updated to show 4 products and the fractional product did not go away. I even tried 5 products. Still displays a fractional product.

[lesliekirk]

lesliekirk I can update the default product carousel for you to include product custom fields and send you a copy of the component. Can you give me some more detail on what you are trying to add and where?

In the meantime here is some documentation on how to duplicate a native flex component: https://github.com/mivaecommerce/fle...-components.md

Hi Nick, please see my previous comments on editing flex components. I have tried more than once and it's all failed miserably. I did just sent an email with more details to developer support but it's to be able to use the Colossus Product Lists instead. I'll send you a link to what the store owner is wanting.