Cart rendering limit up to 10

Reflow
1

Hi Reflow Team,

I’m encountering a limitation with the cart functionality on my website. https://yukispread.com

“e.length > 10 && console.warn(“Reflow: Only the first 10 components on this page will be rendered, the rest will be ignored.”),”

This limitation seems to be preventing the cart badge from updating correctly while on the main page. As soon as I enter the cart page or any other page it displays correctly.

Is there a way to increase the rendering limit through configuration? I don’t want to use ‘Product List’ because ‘Product’ gives me more flexibility to configure.

Any guidance would be greatly appreciated!

Thank you in advance!

2

The problem with using multiple Product components is that each makes a separate request to the Reflow backend, slowing down your page loads. This is why we limit them to 10 per page. The recommended solution is to use a Product List which does a single request for displaying a large number of products.

What limitation are you running into with Product List that prompts you to use individual Products instead?

1 Like
3

Hi Martin,

Thank you for explaining things earlier — I really appreciate it! I ended up using the Product List without showing the Add to Cart buttons, which “kinda” resolved the issue.

But I wanted the Add to Cart buttons to lead straight into the cart page instead of opening the drop-in view cart panel. I know this behavior is something the Product component allows, but it seems to be missing for the Product List.

As a seller, it would be a lot easier for customers to be able to add various products to the cart without being redirected to the View cart. The current setup unintentionally interrupts the shopping flow, which could negatively affect conversions.

Is there a way to achieve this behaviour with the Product List, or is it currently not possible? If there’s a workaround or setting I’m missing, I’d love to know!

Thank you for your help!

4

Thank you for the feedback! We can make a change to how the add to cart button works in Product List, so that if the product doesn’t have variants or customizations, it will be added directly to the cart without showing the sidebar. Do you think this would work for you?

2 Likes
5

I love the look of your website, and the spreads sound amazing (I might have to order a jar of the gingerbread)

A snippet of JS that might be handy for you:

document.addEventListener('DOMContentLoaded', function() {
    const vouchers = document.querySelectorAll('.voucher');

    vouchers.forEach(voucher => {
        voucher.addEventListener('click', function() {
            try {
                // Get the data-voucher-code value
                const voucherCode = this.getAttribute('data-voucher-code');
                
                if (!voucherCode) {
                    throw new Error('No voucher code found');
                }

                // Create temporary textarea
                const textarea = document.createElement('textarea');
                textarea.value = voucherCode;
                document.body.appendChild(textarea);

                // Select textarea content and copy
                textarea.select();
                try {
                    const successful = document.execCommand('copy');
                    if (successful) {
                        console.log('Copied to clipboard');
                        // Optional: Show success message to user
                        alert(`Voucher code ${voucherCode} copied to clipboard!`);
                    } else {
                        console.error('Failed to copy text: unable to access clipboard');
                    }
                } catch (err) {
                    console.error('Failed to copy text: ' + err);
                }

                // Remove temporary textarea
                document.body.removeChild(textarea);
            } catch (error) {
                console.error('Error copying voucher code:', error);
            }
        });
    });
});

just give each voucher img a class of voucher and data-voucher-code = YUKIPROMOCODE

and when the user clicks, it copies to their clipboard

1 Like
6

We added a new option to product list, called data-reflow-addtocart-preview. When set to “selective” it shows the product sidebar only when the product requires the user to choose options or variants. In all other cases the product is added to the cart directly.

Since this was just added, the option doesn’t exist in Bootstrap Studio. You will need to add it to Product List in the attributes panel like this:

image

2 Likes
7

Thanks a lot guys for the amazing support, and I apologise for taking so long to reply back. I was totally unaware of the replies.
I already implemented the attribute and the js snippet that @richards proposed, and it works like a charmer!

Glad that you like our website, and by all means, help yourself to some tasty flavours.You will not regret it! :wink: