# Fitment PDP modal trigger (Shopify)

If you see a **white modal on page load that then disappears** and the **Check Fitment button does nothing**, the cause is usually in the theme: the iframe is loaded or the modal is shown on load, and/or `openFitmentModal` is not defined or the button lacks the right attributes.

---

## 1. Fix `otto-iframe.liquid` (modal + iframe)

The snippet that provides the fitment modal **must**:

- **NOT** set the iframe `src` on page load (leave it empty or `about:blank` until the user clicks).
- **NOT** show the modal on load (overlay should be `display:none` until `openFitmentModal` is called).
- **DO** define `window.openFitmentModal = function(productId) { ... }` so the trigger script can open the modal and set the iframe URL only on click.

**Reference implementation:** Copy or adapt `fitment/theme-snippets/otto-iframe.liquid` into your theme’s `snippets/` folder.

In that snippet:

1. Modal overlay: `style="display:none; ..."` so it is hidden on load.
2. Iframe: no `src` in the HTML (or `src=""`). Set `iframe.src` only inside `openFitmentModal(productId)`.
3. `openFitmentModal(productId)` should: set `iframe.src = baseUrl + '/fitment.php?embed=1&product_id=' + productId`, then show the overlay (e.g. `overlay.style.display = 'flex'`).

Include the snippet once (e.g. in `theme.liquid` before `</body>`):

```liquid
{% render 'otto-iframe', fitment_base_url: 'https://your-domain.com/fitment' %}
```

Replace `https://your-domain.com/fitment` with the base URL where `fitment.php` is served (no trailing slash).

**Remove from your current otto-iframe.liquid (if present):**

- Any iframe `src="{{ ... fitment.php ... }}"` in the raw HTML.
- Any JS that runs on load and sets the iframe `src` or shows the modal.
- Any `DOMContentLoaded` or `window.load` handler that opens the modal or loads fitment.

---

## 2. Button markup (PDP template)

The "Check Fitment" button that **opens** the modal must have:

- `data-fitment-trigger`
- `data-product-id` (e.g. `{{ product.id }}`)

**Example (Liquid):**

```html
<button type="button" data-fitment-trigger data-product-id="{{ product.id }}">
  Check Fitment
</button>
```

Do **not** use `onclick` or bind to this button in `DOMContentLoaded` (Shopify rehydration will break).

---

## 3. Trigger script

Include **once** (e.g. in theme.liquid or a PDP section), **after** the snippet that defines `openFitmentModal`:

```html
<script src="{{ 'fitment-pdp-trigger.js' | asset_url }}" defer></script>
```

Or paste the contents of `fitment/assets/fitment-pdp-trigger.js` into a theme asset. That script:

- Listens for clicks on `document` and uses `e.target.closest('[data-fitment-trigger]')`.
- Reads `data-product-id` and calls `window.openFitmentModal(productId)`.
- Does not load the iframe or show the modal on page load.

---

## Checklist

| Item | Check |
|------|--------|
| otto-iframe.liquid: iframe has no `src` (or empty) in HTML | ✓ |
| otto-iframe.liquid: overlay is `display:none` on load | ✓ |
| otto-iframe.liquid: `window.openFitmentModal(productId)` is defined | ✓ |
| otto-iframe.liquid: iframe `src` is set only inside `openFitmentModal` | ✓ |
| PDP button has `data-fitment-trigger` and `data-product-id="{{ product.id }}"` | ✓ |
| fitment-pdp-trigger.js is loaded (after the snippet that defines openFitmentModal) | ✓ |
| No JS opens the modal or sets iframe src on DOMContentLoaded/load | ✓ |