# Prology – Banner sản phẩm liên quan

Banner quảng cáo tự lấy sản phẩm liên quan từ Magento (có ảnh + còn hàng), nhúng vào bài blog WordPress.

> **Kiến trúc an toàn:** script nhúng (public) **KHÔNG** chứa tài khoản/token/REST Magento.
> Mọi thao tác Magento (login, search, lọc tồn kho) nằm ở **server riêng**. Client chỉ gọi endpoint server.

## Cấu trúc

```
prology-product-banner/
├── prology-product-banner.js   # Script nhúng vào blog (SERVER-ONLY, không lộ Magento)
├── demo.html                   # Trang blog mô phỏng để xem thử (cần server chạy)
├── console-test.js             # ⚠️ DEV-ONLY: dán tay vào Console để test, chứa creds — KHÔNG nhúng
└── server/                     # API Node.js — login Magento + lọc stock + cache + CORS
    ├── server.js
    ├── package.json
    └── .env.example
```

## 1) Chạy server (bắt buộc)

```bash
cd server
npm install
cp .env.example .env      # chỉnh MAGENTO_PASS, ALLOWED_ORIGIN...
npm start                 # http://localhost:8787
```

Test:
```
http://localhost:8787/api/related-products?q=Catalyst%209300,Catalyst%209200,Cisco&count=16&store=au
```

## 2) Nhúng vào blog

```html
<script>
  window.PROLOGY_BANNER = {
    endpoint: 'https://your-server/api/related-products' // domain server đã deploy
  };
</script>
<script src="prology-product-banner.js" defer></script>
```

Script chỉ gọi `endpoint?q=<keywords>&count=<n>&store=<au|us>` và render kết quả. Không có thông tin Magento nào trong file này.

## 3) Test nhanh khi chưa deploy server (DEV-ONLY)

`console-test.js` cho phép xem thử ngay trên prology.net **mà không cần server** — nhưng nó **chứa tài khoản admin** và gọi Magento trực tiếp.
- Chỉ dùng để **dán tay vào DevTools Console của chính bạn**. F12 → Console → dán → Enter.
- **TUYỆT ĐỐI KHÔNG** nhúng vào trang, không commit lên site, không để lộ cho khách.

## Tuỳ chỉnh (window.PROLOGY_BANNER)

| Option | Mặc định | Ý nghĩa |
|---|---|---|
| `endpoint` | **(bắt buộc)** | URL server của bạn |
| `count` | 16 | Số sản phẩm trong carousel (10-20) |
| `store` | `null` (auto) | `'au'` \| `'us'` \| `null` = tự phát hiện theo vị trí (geo) |
| `keywords` | tự tách từ `<h1>` | Mảng keyword tìm sản phẩm liên quan |
| `placement` | `after-first-table` | `start` \| `end` \| `after-first-table` |
| `mountSelector` | `.entry-content,...` | Vùng nội dung bài viết |

## Store theo vị trí client (AU → `au`, còn lại → `us`)
- **Client**: gọi `/cdn-cgi/trace` (Cloudflare, cùng origin — chỉ là **geo**, không phải thông tin Magento). `loc=AU` → `au`, khác → `us`. Fallback timezone/locale. Gửi kèm `?store=` cho server.
- **Server**: nhận `?store=`; nếu thiếu → đọc header `CF-IPCountry`; nếu vẫn không có → `DEFAULT_STORE`. Cấu hình `.env`: `STORES=au,us`, `DEFAULT_STORE=us`.

## Ghi chú bảo mật
- **Script public không lộ Magento**: không user/password, không admin token, không URL REST. Tất cả ở server.
- Server: đặt `ALLOWED_ORIGIN=https://prology.net`, để `.env` ngoài repo, nên đặt sau Cloudflare/HTTPS.
- Banner dùng Shadow DOM → CSS không đụng theme WordPress; tự khóa width đúng `.entry-content`.
- Link sản phẩm gắn `rel="nofollow noopener sponsored"`, mở tab mới.