SOFA SHOP Sticky header, z-index 9999 — the modal must cover it.

Norah Velvet Single-Seater Sofa

£849.00

SKU 100996 · In stock

The two widget buttons should appear directly under Add to cart, in the widget's own styling — not pink, not Comic Sans.

Test scenarios

1 · Auto-detected target (running above)

Initialised from the script tag's data-* attributes with no data-target-selector. Open both modals: the 3D one should load the GLB lazily, and the AR one should show a QR code on desktop or a Place in Your Room button on a phone.

2 · Explicit selector, second product

A different product id, inserted with targetSelector: '#explicit-slot' and insertPosition: 'append'. Proves the widget is not hardcoded to one product and that two instances coexist.

3 · Missing model

A product id that is in no manifest and has no glbUrl. Expected: no buttons injected, one warning in the console, page otherwise untouched.

4 · Invalid target selector

targetSelector: '.does-not-exist' and then a selector that isn't valid CSS at all. Expected: nothing injected, nothing thrown, Add to cart still works.

5 · Per-site theme

The same product initialised with site: 'atozfurniture.ae'. On the real domain this happens automatically from the hostname; here the key is forced, because localhost matches nothing. The buttons should come out navy with 4px corners instead of the neutral default, and the QR link should gain &site=atozfurniture.ae so the AR page lands branded too.

6 · Cleanup

destroyAll() removes every injected button and drops every listener. Check the console for leaks afterwards.

console output appears here