3.4 KiB

Raw Permalink Blame History

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.

3.4 KiB Raw Permalink Blame History Unescape Escape