Case study · Nhôm kính · Website thật

Nhôm kính Xingfa

Đại lý cửa nhôm Xingfa nhập khẩu chính hãng tem đỏ Quảng Đông — cửa đi, cửa sổ, vách kính, mặt dựng. Website không dừng ở giới thiệu: nó để khách tự chọn cấu hình, tính giá theo m², gom vào giỏ báo giá và gửi yêu cầu đặt làm, đồng thời xem công trình thật và đọc kiến thức trước khi quyết định.

Xem website đang chạy xingfa.mauweb.dev
Loại dự án
Web đại lý + bán hàng
Ngành
Nhôm kính · cửa nhôm
Phạm vi
10 trang · 4 luồng chính
Nền tảng
Next.js 16 · React 19
xingfa.mauweb.dev
Trang chủ nhôm kính Xingfa

Trang chủ — phần hero được dựng như một “ô cửa nhôm” thật (khung graphite chia ô kính), nền sáng airy theo thẩm mỹ Nhật, dẫn thẳng tới cửa hàng và công trình. (Cuộn trong khung để xem toàn trang)

Một website bán hàng đúng nghĩa — không chỉ là brochure

Ngành nhôm kính ở Việt Nam thường chỉ để lại số hotline rồi chờ khách gọi. Website này đi xa hơn hẳn: khách tự cấu hình sản phẩm, tự tính chi phí, gom giỏ báo giá và xem bằng chứng công trình — nên khi liên hệ là đã sẵn sàng chốt.

01 — Cửa hàng bán theo m²

Trang cửa hàng chuẩn thương mại điện tử

Toàn bộ sản phẩm cửa nhôm được tổ chức như một cửa hàng thật: lưới sản phẩm, sidebar lọc theo danh mục và khoảng giá, sắp xếp và tìm kiếm. Mỗi mặt hàng hiển thị “giá từ … /m²” để khách nắm ngay tầm chi phí.

  • Bộ lọc danh mục (cửa đi, cửa sổ, vách kính, mặt dựng) + khoảng giá
  • Sắp xếp theo nổi bật / giá / đánh giá, có ô tìm kiếm
  • Giá niêm yết theo mét vuông, minh bạch ngay từ trang danh sách
Trang cửa hàng nhôm kính lọc theo danh mục, giá
02 — Tự tính giá tức thì

Chọn cấu hình, nhập kích thước → ra giá ngay

Đây là trái tim của website. Mỗi sản phẩm cho khách chọn hệ nhôm (55 / 65 / cách nhiệt), loại kính, màu nhôm rồi nhập kích thước rộng × cao. Giá theo m² được tính tức thì theo từng lựa chọn — khách tự ước tính chi phí mà không cần chờ gọi điện.

  • Bộ chọn biến thể: hệ nhôm · loại kính · màu, mỗi lựa chọn cộng phụ phí/m²
  • Nhập rộng × cao → tính diện tích → ra thành tiền theo thời gian thực
  • Album ảnh sản phẩm có phóng to, thông số và sản phẩm liên quan
Trang chi tiết sản phẩm: chọn biến thể và tính giá theo m²
03 — Giỏ báo giá & đặt làm

Gom nhiều hạng mục, gửi yêu cầu — nhận mã đơn

Khác giỏ hàng thường, đây là “giỏ báo giá”: khách thêm nhiều cửa với cấu hình và kích thước riêng, hệ thống cộng tạm tính theo m². Trang đặt làm tóm tắt toàn bộ đơn, gửi đi là sinh mã yêu cầu để đội kỹ thuật khảo sát và chốt giá cuối.

  • Giỏ trượt hiện ở mọi trang, mỗi biến thể là một dòng riêng
  • Tạm tính tự cộng theo diện tích từng hạng mục
  • Form đặt làm + sinh mã đơn, lưu lại để xử lý
Trang đặt làm với giỏ báo giá nhiều hạng mục
04 — Công trình thật

Chuyên mục dự án kể chuyện, tạo niềm tin

Phần quan trọng nhất với khách nhôm kính. Mỗi công trình có trang riêng kể trọn bài toán → giải pháp → kết quả, kèm thanh thông số quy mô, gallery ảnh phóng to, sản phẩm đã dùng (bấm sang xem giá) và cảm nhận chủ đầu tư. Lọc được theo loại: biệt thự, nhà phố, căn hộ, thương mại.

  • Thông số quy mô, hệ nhôm, thời gian thi công rõ ràng
  • Bài toán → giải pháp → kết quả + trích dẫn chủ đầu tư
  • Liên kết sang đúng sản phẩm đã dùng để khách tự nhân bản
Trang chi tiết công trình: bài toán, giải pháp, kết quả
05 — Nội dung & SEO

Chuyên mục tin tức nuôi thứ hạng tìm kiếm

Website có hẳn một blog kiến thức: phân biệt hàng chính hãng, chọn hệ 55 hay 65, cửa cách nhiệt, báo giá, bảo dưỡng… Bài viết thật theo ngành, có chuyên mục, bài liên quan và dữ liệu có cấu trúc — vừa hữu ích cho khách vừa giúp Google đánh giá cao.

  • Bài viết phân loại theo chuyên mục, có bài nổi bật & liên quan
  • Mỗi trang gắn schema (sản phẩm, bài viết, doanh nghiệp)
  • Meta tiếng Việt chuẩn, sitemap, ảnh tối ưu — nền tảng SEO tốt
Trang tin tức / blog kiến thức nhôm kính
06 — Website đầy đủ

Đủ trang để khách tin và doanh nghiệp chuyên nghiệp

Không thiếu trang nền tảng của một doanh nghiệp thật: Giới thiệu kể câu chuyện thương hiệu, Liên hệ có bản đồ chỉ đường và form báo giá, cùng đầy đủ trang chính sách (bảo hành, bảo mật, đổi trả, vận chuyển, thanh toán, điều khoản). Đây là phần tạo độ tin cậy mà nhiều web nhôm kính bỏ quên.

  • Trang Giới thiệu: câu chuyện, năng lực, cam kết
  • Trang Liên hệ: thẻ hotline/Zalo/email, giờ làm việc, bản đồ nhúng
  • 6 trang chính sách đầy đủ, liên kết gọn trong chân trang
Trang liên hệ với bản đồ và thẻ liên hệ
Chốt đơn dễ

Mọi nẻo đường đều dẫn tới liên hệ

Nút gọi và Zalo nổi cố định ở mọi trang, form “nhận báo giá trong 30 phút”, giỏ báo giá và bản đồ chỉ đường — khách muốn chốt lúc nào cũng có lối ngay trong tầm tay.

Hotline gọi tư vấn ngay Zalo nút nổi mọi trang Giỏ báo giá tự tính theo m² Bản đồ chỉ đường tới VP
Responsive

Mượt trên điện thoại

Khách xem cửa và tính giá nhiều từ điện thoại — bố cục dồn gọn, bộ chọn cấu hình và nút gọi/Zalo luôn trong tầm ngón tay.

Trang chủ trên điện thoại
Trang chủ
Cửa hàng trên điện thoại
Cửa hàng
Tính giá sản phẩm trên điện thoại
Tính giá sản phẩm
Công nghệ

Nền tảng & công nghệ

Next.js 16 · App RouterRender tĩnh, tải rất nhanh
React 19 · TypeScriptMã chắc chắn, dễ bảo trì
Tailwind CSS v4Giao diện cao cấp, đồng bộ
Tính giá theo m²Giỏ báo giá tự dựng
Chuyển động tinh tếHiệu ứng cuộn mượt
SEO · SchemaSản phẩm · bài viết · doanh nghiệp
Hạ tầng đám mâyCDN toàn cầu · SSL
ResponsiveTối ưu cho điện thoại
Bản đồ · Zalo · HotlineLiên hệ nổi mọi trang

Bạn muốn một website bán hàng như thế này?

Web22 nhận thiết kế website cho đại lý, cửa hàng, dịch vụ — tự tính giá, chốt đơn nhanh, nội dung chuẩn SEO. Mọi ngành hàng.