
Flows
1. Render in modal on click
- Click on element with
data-mxqv-click. - JS reads
mode,data_action,element,id,title. - For
native/bootstrapthe modal opens immediately (loading state), then POST is sent toconnector.php(action=render, includingmodal_library). - For
fancyboxPOST runs first, then Fancybox opens with the returned HTML. - On success HTML is inserted into the chosen mode container:
native→#mxqv-modal-body .qv-modal__content-area;bootstrap→#mxqv-bootstrap-modal-body .qv-modal__content-area;fancybox→ current Fancybox slide.
- After insert,
mxqv:loadedis dispatched.
2. Render on mouseover
- Hover over element with
data-mxqv-mouseover. - Timer starts using
mouseoverDelayfromwindow.mxqvConfig. - If cursor is still there when timer ends, the same
renderrequest runs. - If cursor leaves earlier, timer is cancelled.
3. selector mode (no built-in modal)
- Trigger has
data-mxqv-mode="selector"anddata-mxqv-output. - JS inserts loading indicator into the target container.
- After response, replaces container content with
htmlor error message.
4. Prev/next navigation in list
- Trigger is inside container with
data-mxqv-parent data-mxqv-loop="true". - JS builds list of triggers inside that container.
- Buttons
[data-mxqv-nav="prev|next"]change current index. - At list boundaries buttons are hidden.
5. Add to cart from quick view
- Render uses MiniShop3 form (
data-ms3-form,ms3_action=cart/add). - After HTML is inserted,
ms3.productCardUI.reinit()is called (if available). - Add to cart works without page reload.
6. ms3Variants inside quick view
- Processor for
msProductaddshas_variants,variants_htmlandvariants_json(when ms3Variants is installed). - In chunk,
variants_jsonis put indata-mxqv-variants-jsonvia:htmlent. - JS finds
.qv-product[data-mxqv-variants]and only handles flagtrue|1|yes|on. - JS listens for
clickon[data-variant-id]andchangeonselect/inputin.qv-product__variants. - On variant change it updates price, old price and image.
7. Error flow
- On validation error connector returns
{success:false, message, html:''}. - In
modalmode the message is shown in modal content. - In
selectormode the message is inserted into the target container.
