121 lines
4.6 KiB
Markdown
121 lines
4.6 KiB
Markdown
|
# Big Bang (bigbang.hr) — Checkout & GTM DataLayer
|
||
|
|
|
||
|
|
Big Bang is a Croatian electronics retailer. The site is a **Nuxt.js (Vue 3 SSR) SPA** with jQuery UI for some widgets. GTM container `GTM-5F34ZXDL`, GA4 property `G-QEEZK92T3P`.
|
||
|
|
|
||
|
|
## URL patterns
|
||
|
|
|
||
|
|
- Homepage: `https://www.bigbang.hr`
|
||
|
|
- Product: `https://www.bigbang.hr/webshop/<slug>/<sku>`
|
||
|
|
- Cart: `https://www.bigbang.hr/webshop/kosarica/`
|
||
|
|
- Checkout: `https://www.bigbang.hr/webshop/kupac/` (all 3 steps live on this URL — SPA routing)
|
||
|
|
|
||
|
|
## Checkout flow (3 steps, same URL)
|
||
|
|
|
||
|
|
1. **Podaci kupca** (Customer data) — name, address, location, email, phone
|
||
|
|
2. **Način dostave** (Delivery method) — package, pickup, parcel locker
|
||
|
|
3. **Odabir plaćanja i završetak kupnje** (Payment selection) — card, KEKS Pay, bank transfer
|
||
|
|
|
||
|
|
## Framework quirks — form filling
|
||
|
|
|
||
|
|
Vue's reactive data model ignores programmatic `.value =` changes. Two approaches that work:
|
||
|
|
|
||
|
|
### Native input value setter (works for most fields)
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
function setVal(id, value) {
|
||
|
|
const el = document.getElementById(id);
|
||
|
|
const setter = Object.getOwnPropertyDescriptor(
|
||
|
|
window.HTMLInputElement.prototype, "value"
|
||
|
|
).set;
|
||
|
|
setter.call(el, value);
|
||
|
|
el.dispatchEvent(new Event("input", { bubbles: true }));
|
||
|
|
el.dispatchEvent(new Event("change", { bubbles: true }));
|
||
|
|
}
|
||
|
|
setVal("first_name", "Test");
|
||
|
|
setVal("last_name", "Korisnik");
|
||
|
|
setVal("address", "Testna ulica 1");
|
||
|
|
setVal("email", "[email protected]");
|
||
|
|
setVal("phone", "00385911234567");
|
||
|
|
```
|
||
|
|
|
||
|
|
### Location autocomplete (jQuery UI — needs CDP keyboard input)
|
||
|
|
|
||
|
|
The `#location` field uses jQuery UI Autocomplete (`ul.ui-autocomplete.locations-ui-autocomplete`). The native setter trick does NOT work here — it won't trigger the autocomplete dropdown or populate the dependent `#zipcode` and `#city` fields.
|
||
|
|
|
||
|
|
Instead, use real keyboard input via CDP:
|
||
|
|
|
||
|
|
```python
|
||
|
|
js("document.getElementById('location').focus()")
|
||
|
|
cdp("Input.insertText", text="10000")
|
||
|
|
# Wait for autocomplete dropdown to appear (~500ms)
|
||
|
|
# Select from dropdown: li.ui-menu-item inside ul.locations-ui-autocomplete
|
||
|
|
# Use getBoundingClientRect() on the first li, then click_at_xy()
|
||
|
|
# This auto-populates #zipcode and #city
|
||
|
|
```
|
||
|
|
|
||
|
|
### Stable form field IDs
|
||
|
|
|
||
|
|
`#first_name`, `#last_name`, `#address`, `#location`, `#zipcode`, `#city`, `#email`, `#phone`
|
||
|
|
|
||
|
|
### Continue buttons
|
||
|
|
|
||
|
|
The continue buttons are `button` elements. JS `.click()` works but coordinate clicks can miss due to sidebar layout shifts. Prefer:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
[...document.querySelectorAll("button")]
|
||
|
|
.find(b => b.textContent.includes("Nastavi"))
|
||
|
|
.click()
|
||
|
|
```
|
||
|
|
|
||
|
|
Step 1 button text: "Nastavi na odabir načina dostave"
|
||
|
|
Step 2 button text: "Nastavi na plaćanje"
|
||
|
|
Final button text: "Potvrdi i naruči"
|
||
|
|
|
||
|
|
## GTM dataLayer events
|
||
|
|
|
||
|
|
The dataLayer fires standard GA4 ecommerce events:
|
||
|
|
|
||
|
|
| Event | When it fires |
|
||
|
|
|---|---|
|
||
|
|
| `view_cart` | Cart page load |
|
||
|
|
| `begin_checkout` | Entering step 1 (customer data) |
|
||
|
|
| `add_payment_info` | Transitioning from step 2 to step 3 (on "Nastavi na plaćanje" click) |
|
||
|
|
|
||
|
|
**`add_payment_info` quirk:** The event fires when the payment step *loads*, before the user selects a payment method. The `payment_type` in the payload reflects the *default* pre-selected option (`"opca_uplatnica_hr"` = bank transfer), not the user's choice. The event also fires multiple times (observed 4x) — likely duplicate GTM triggers.
|
||
|
|
|
||
|
|
### DataLayer interceptor pattern
|
||
|
|
|
||
|
|
The SPA preserves JS state across checkout steps (client-side routing), so a push interceptor installed once survives all 3 steps:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
window.__dlEvents = [];
|
||
|
|
// Seed dataLayer first — GTM may not have loaded yet when the snippet runs,
|
||
|
|
// in which case window.dataLayer is undefined and .push.bind would throw.
|
||
|
|
// Seeding with [] is safe: GTM picks up an existing array on init.
|
||
|
|
window.dataLayer = window.dataLayer || [];
|
||
|
|
const origPush = window.dataLayer.push.bind(window.dataLayer);
|
||
|
|
window.dataLayer.push = function() {
|
||
|
|
for (let i = 0; i < arguments.length; i++) {
|
||
|
|
const entry = arguments[i];
|
||
|
|
if (entry && entry.event) {
|
||
|
|
window.__dlEvents.push({
|
||
|
|
event: entry.event,
|
||
|
|
ecommerce: entry.ecommerce
|
||
|
|
? JSON.stringify(entry.ecommerce).substring(0, 500)
|
||
|
|
: undefined,
|
||
|
|
timestamp: new Date().toISOString()
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return origPush.apply(window.dataLayer, arguments);
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
Read captured events: `js("JSON.stringify(window.__dlEvents)")`
|
||
|
|
|
||
|
|
## Payment methods (step 3)
|
||
|
|
|
||
|
|
- **Plaćanje karticama** — card payment
|
||
|
|
- **KEKS Pay** — mobile payment
|
||
|
|
- **Virmansko plaćanje** — bank transfer (default, pre-selected)
|
||
|
|
- **HT vrijednosni bon** — expandable voucher section
|