Creating two collection components with separate nodes combines the collections into the first node when productSet iframe=false.

[Ethan]

I created two different divs, #collection-1 and #collection-2. I created two collection components, the first one specifying #collection-1 as it's node and the 2nd specifying #collection-2.

When I load the page I am seeing the products from component collection-2 getting added to the products from #collection-1. #collection-2 has the built out html for the collection, including a pagination button, but contains no products.

I expect the second collection component, where node #collection-2 is specified, to contain the products from the other collection.

The goal is to have tabs containing separate collections that have a shared cart.

[Ethan]

After doing some more testing I see that this is only an issue if product-set iframe is set to false. If this is left at the default (true) then it goes into two separate nodes properly. I can't use the iframes so this does not fix my issue.

This is how I am setting it to false.

ui.createComponent('collection', { id: '141617135688', node: document.getElementById('collection-component-1580146962107'), options: { product: { iframe: false, }, modalProduct: { iframe: false, }, modal: { iframe: false, }, productSet: { iframe: false, }, }, });

[SpareShade]

I am in the same boat... did you find any workarounds?

[SpareShade]

Ok, so it seem that the bug is in the _proto.renderProducts method.

productConfig assigns the root node to the global document object, instead of the client provided node. So the product node should be

this.node.querySelector(".".concat(this.classes.productSet.products))

instead of

this.view.document.querySelector(".".concat(this.classes.productSet.products)

The config should look like:

var productConfig = Object.assign(
    {},
    this.globalConfig,
    {
        node: this.node.querySelector(
            ".".concat(this.classes.productSet.products)
        ),
        // the rest of config ....

and that fixes the messed up collections rendering...

[Ethan]

@SpareShade My workaround was to load the collection based on a query parameter and fake the tabs going to separate collections. An added benefit is load times are faster since it's processing less products/collections on render...

Thank you for the fix, that makes sense. I might switch to your method if I rework the code in that area.