PageBuilder Items Per Page shows slightly more than it should

[lesliekirk]

I've got the PageBuilder Product Carousel set to show 15 products from the category with Items Per Page set to 3 and Items Per Scroll Full Page at a Time (I also tried One Item at a Time). The Carousel shows 3 images and about 1/4th of a 4th image. This is definitely not what is the desired results. It doesn't seem to matter what I set the Image Fit to.

Also, it does not matter what number I set for the Items Per Page - there is always a portion of the next-up product displaying. How do I fix this?

[Brennan]

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?

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

Hi Brennan - I'll try that but it turns out that PageBuilder Carousel is not robust enough for the store owners needs. It needs to be able to also include the Product Custom Fields for each product. Since the Colossus ReadyTheme has a carousel ability I'm trying to use it on the CTGY page (but am not having the success I need to).

[Brennan]

You can add custom field data to the carousel but it does require some customization to the flex component itself. I'll see if Nick can post an example here.

[Nick]

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

[lesliekirk]

You can add custom field data to the carousel but it does require some customization to the flex component itself. I'll see if Nick can post an example here.

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.

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

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

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

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

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

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