74 lines
3.4 KiB
Markdown
74 lines
3.4 KiB
Markdown
# 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.
|