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)

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

<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.