MKP - Template sàn thương mại (Tailwind)

SKU: TL-MKP

$89.00

Chọn phiên bản

Support license

Danh mục: Template

Thẻ từ khóa: pro
Mô tả

🌐 Ngôn ngữ: 🇻🇳 Tiếng Việt (hiện tại) · 🇬🇧 English

MKP — Template sàn thương mại cho S-Cart (GP247 3.x)

Giới thiệu

MKP là giao diện storefront dạng sàn thương mại cho S-Cart 3.x — template trả phí, dùng theo license GP247 cấp cho tên miền của bạn. Template dựng sẵn những gì khách của một sàn cần thấy: nhiều gian hàng, người bán của từng sản phẩm, đánh giá, và luồng mua trên điện thoại gọn gàng. Tài liệu này dành cho chủ website S-Cart: MKP làm được gì, khác template mặc định thế nào, cách cài và cách tuỳ chỉnh.

Phiên bản 1.0 · yêu cầu gp247/core 3.0 và gp247/front; khuyến nghị có gp247/shop.

🔗 Xem demo: m-vendor.s-cart.org · Mua license và xem giới thiệu: gp247.net — Template Marketplace MKP

Template làm được gì

Khách tìm thấy hàng nhanh hơn. Ngay dưới banner, trang chủ đưa flash sale (khi có plugin), dải tin cậy và sản phẩm khuyến mãi lên trước, rồi tới lưới danh mục, gian hàng mới (khi có plugin) và sản phẩm mới. Trên điện thoại, trang danh sách hiện sản phẩm ngay màn đầu, bộ lọc được thu gọn.

Khách tin người bán hơn. Mỗi sản phẩm cho biết ai bán: tên gian hàng trên thẻ sản phẩm, khối Người bán ở trang chi tiết (logo, điểm đánh giá, nút xem gian hàng), sao đánh giá cạnh tên sản phẩm. Dải tin cậy ở trang chủ chỉ nói điều sàn thật sự có.

Mua trên điện thoại ít bước và ít nhầm. Thanh mua dính đáy ở trang sản phẩm, giỏ hàng chia theo gian hàng và nói rõ mỗi gian thanh toán riêng, thanh toán có tóm tắt đơn (gian nào, mấy sản phẩm, bao nhiêu tiền) ngay từ bước nhập địa chỉ.

Bạn đổi giao diện mà không mất tính năng. MKP chạy cùng các plugin như template mặc định, và khi gán cho cửa hàng thì tự đặt lại các khối trang chủ của plugin đang bật.

Chi tiết

Trang chủ và tìm hàng

  • Thanh trên cùng (hotline, ngôn ngữ, tiền tệ, lối vào Gian hàng và Bán hàng cùng chúng tôi), ô tìm kiếm kèm menu danh mục, Tài khoản / Yêu thích / Giỏ hàng có số đếm.
  • Trang chủ bằng layout block: slider lớn + 2 banner phải, dải tin cậy, sản phẩm khuyến mãi, lưới danh mục có danh mục con, sản phẩm mới, banner nhỏ, tin tức, thương hiệu (logo kèm tên), đăng ký nhận tin.
  • Lưới sản phẩm 5 cột trên màn rộng; trên điện thoại có dải danh mục con và bộ lọc thu gọn.

Trang sản phẩm và người bán

  • Khối Người bán: logo, tên, điểm đánh giá của gian hàng, nút Xem gian hàng; tên người bán chỉ nêu một lần.
  • Giá kèm nhãn -x% khi giảm giá; sản phẩm nhóm hiện danh sách sản phẩm con có ảnh, tên, giá.
  • Ô số lượng có nút −/+, thanh mua dính đáy trên điện thoại khi nút Thêm vào giỏ bị khuất.
  • Chia sẻ thật: Facebook, X, sao chép link, và nút chia sẻ của điện thoại khi trình duyệt hỗ trợ.
  • Mô tả dài được thu gọn với nút Xem thêm / Thu gọn.

Giỏ hàng và thanh toán

  • Giỏ hàng chia theo gian hàng, mỗi gian có tạm tính và nút thanh toán riêng; nút Xoá giỏ hàng chỉ đặt một lần (vì xoá hàng của mọi gian).
  • Giỏ trống có nút quay lại mua sắm.
  • Thanh toán nhiều bước; các bước trước xác nhận có tóm tắt đơn mở ra xem từng dòng.

Điện thoại và khả năng tiếp cận

  • Thanh điều hướng dưới: Trang chủ, Danh mục, Gian hàng, Giỏ hàng, Tài khoản.
  • Màu chữ đạt chuẩn tương phản WCAG AA; nút và biểu tượng trên điện thoại tối thiểu 44px.
  • Hỗ trợ ngôn ngữ viết từ phải sang trái (RTL).

Tương thích

  • Chạy cùng các plugin như template mặc định: đánh giá sản phẩm (ProductRating), voucher (ShopDiscount), captcha (GoogleCaptcha), đăng nhập mạng xã hội (LoginSocial), flash sale (ProductFlashSale), tin tức (News), thanh toán / vận chuyển.
  • Nhiều người bán (MultiVendor) và nhiều cửa hàng (MultiStore): tên gian hàng trên thẻ sản phẩm, khối gian hàng mới, trang gian hàng của plugin hiển thị theo phong cách MKP.
  • Giỏ hàng, bộ lọc, thẻ sản phẩm và thanh toán chạy bằng Livewire của gp247/shop — thêm vào giỏ, đổi số lượng, lọc/sắp xếp không tải lại trang.
  • Không dùng jQuery / Bootstrap: CSS Tailwind biên dịch sẵn, tương tác bằng Alpine (có sẵn trong Livewire).
  • Chạy trên hosting chia sẻ thông thường: không cần Node, cron hay queue worker để dùng.

MKP khác template mặc định (GP247Front) thế nào

Tiêu chí MKP (template này) GP247Front (mặc định)
Giá Trả phí — license theo tên miền Miễn phí, đi kèm S-Cart
Phù hợp khi Website là sàn nhiều người bán hoặc nhiều cửa hàng Cửa hàng của một chủ
Người bán trên sản phẩm Khối Người bán, tên gian hàng trên thẻ Chỉ tên gian hàng (khi có MultiVendor)
Trang chủ Flash sale, dải tin cậy, khuyến mãi ngay dưới banner; khối gian hàng mới Bố cục cửa hàng chung
Lối vào sàn Gian hàng / Bán hàng cùng chúng tôi ở thanh trên, menu, chân trang, thanh dưới Theo menu bạn tự tạo
File giao diện Có đủ toàn bộ file trong app/GP247/Templates/MKP Nạp từ package, chỉ publish file muốn sửa
Cập nhật Cập nhật MKP thay thư mục template (xem mục Tuỳ chỉnh) Cập nhật cùng gp247/front, gp247/shop

Đổi qua lại giữa hai template bất cứ lúc nào ở màn quản lý cửa hàng; dữ liệu sản phẩm, đơn hàng, khách hàng không đổi.

Gán template cho cửa hàng

flowchart LR
    A[Cài MKP] --> B[Gán MKP cho cửa hàng]
    B --> C[Xoá block của template cũ<br/>kể cả block plugin]
    C --> D[MKP đặt block trang chủ,<br/>cột trái, banner mẫu]
    D --> E{Plugin nào đang bật?}
    E -->|ProductFlashSale| F[Đặt lại block flash sale]
    E -->|MultiVendor| G[Đặt lại block gian hàng mới]
    E -->|không có| H[Xong]
    F --> H
    G --> H

Gán lại MKP nhiều lần không sinh block trùng. Plugin cài sau khi đã gán MKP thì tự đặt block của nó như bình thường.

Khách mua hàng trên sàn

flowchart LR
    A[Khách thêm hàng<br/>của nhiều gian] --> B[Giỏ hàng chia<br/>theo gian hàng]
    B --> C[Bấm thanh toán<br/>của một gian]
    C --> D[Nhập địa chỉ<br/>+ tóm tắt đơn của gian đó]
    D --> E[Giao hàng / thanh toán<br/>nếu cửa hàng bật]
    E --> F[Xác nhận và đặt hàng]
    F --> G{Giỏ còn hàng<br/>của gian khác?}
    G -->|có| C
    G -->|không| H[Xong]

Yêu cầu

  • S-Cart 3.x với gp247/core 3.0 và gp247/front.
  • gp247/shop để có giỏ hàng, sản phẩm, thanh toán (không có vẫn chạy phần trang và tin tức).
  • Chạy trên hosting chia sẻ thông thường.

License

  • Sau khi mua, GP247 cấp cho bạn license của MKP gắn với tên miền của website (tên miền trong APP_URL của .env).
  • License này khác với API License miễn phí dùng để kết nối thư viện GP247 (gp247:ext-register-license): API License chỉ mở kết nối, còn license MKP mới cho phép tải và cập nhật template.
  • Tải bản mới (cập nhật) cần license còn hiệu lực cho tên miền đó; nếu license hết hạn hoặc không khớp tên miền, trình cài dừng lại và báo lý do.
  • Giấy phép, cập nhật và hỗ trợ đi qua kênh trả phí của GP247 đã giao template cho bạn.

Cài đặt

  1. Admin → Extensions → Templates: tải lên file zip bạn nhận được khi mua, hoặc cài từ thư viện GP247 bằng license của bạn, rồi bấm Install.
  2. Gán template cho cửa hàng ở màn quản lý cửa hàng. MKP tự tạo layout block và banner mẫu (tên có hậu tố (MKP)).

Cài bằng tay: chép thư mục MKP vào app/GP247/Templates/ và app/GP247/Templates/MKP/public/ sang public/GP247/Templates/MKP/, rồi làm bước 1–2.

Bản MKP cũ dùng Bootstrap (cho GP247 1.x) không nâng cấp tại chỗ lên bản này — hãy gỡ bản cũ và cài mới.

Cài bằng dòng lệnh (CLI, gp247 3.x)

Mở Terminal tại thư mục gốc website rồi chạy:

# 1) Chỉ làm 1 lần cho mỗi website: đăng ký API License (miễn phí) để kết nối thư viện GP247
php artisan gp247:ext-register-license

# 2) Tải MKP từ thư viện và cài bằng license bạn nhận được khi mua
php artisan gp247:ext-install --type=template --key=MKP --paid --license=<license-của-bạn>
  • <license-của-bạn> là license MKP GP247 cấp cho tên miền của bạn sau khi mua — khác với API License miễn phí ở bước 1.
  • Trước bước 1, kiểm tra APP_URL trong .env là domain thật của website (không để http://localhost), vì cả hai license đều gắn với domain này.
  • Bản trả phí cài từng key một: không gộp MKP với key khác trong cùng một lệnh --paid.
  • Nếu thư mục app/GP247/Templates/MKP đã có sẵn (giải nén từ file zip đã mua), lệnh cài tại chỗ, không tải lại và không cần --paid.
  • Lên bản mới: php artisan gp247:ext-update --type=template --key=MKP (cần license còn hiệu lực — xem mục License).
  • Thêm --json để nhận kết quả dạng máy đọc được (dùng cho script/CI).
  • Sau khi cài, vẫn cần gán template cho cửa hàng.

Tuỳ chỉnh

Muốn đổi Sửa ở đâu
Màu, font, bo góc resources/assets/tailwind.config.js (giữ màu dùng cho chữ đạt tương phản ≥ 4.5:1)
Chữ riêng của MKP (dải tin cậy, người bán, giỏ hàng…) Lang/vi/lang.php, Lang/en/lang.php
Kiểu nút, thẻ, ô nhập… resources/assets/css/app.css
Tương tác (slider, thanh mua, chia sẻ…) resources/assets/js/app.js
Bố cục một màn / một block file .blade.php tương ứng

Cập nhật MKP sẽ ghi đè các file của template. Trước khi cập nhật, hãy sao lưu thư mục app/GP247/Templates/MKP và ghi lại những file đã sửa để áp lại sau khi cập nhật.

Sau khi sửa CSS/JS hoặc thêm class Tailwind mới trong Blade, build lại (chạy ở thư mục gốc website, cần Node):

npx tailwindcss@3 -c app/GP247/Templates/MKP/resources/assets/tailwind.config.js -i app/GP247/Templates/MKP/resources/assets/css/app.css -o app/GP247/Templates/MKP/public/css/app.css --minify
cp app/GP247/Templates/MKP/resources/assets/js/app.js app/GP247/Templates/MKP/public/js/app.js

rồi chép public/css và public/js sang public/GP247/Templates/MKP/.

Class Tailwind chưa từng xuất hiện ở đâu khi build sẽ không có tác dụng cho đến khi build lại.

Layout block MKP tạo khi gán cho cửa hàng

Block Vị trí Trang
banner_image top trang chủ
service_strip top trang chủ (dải tin cậy — chỉ hiện ý có thật: nhiều người bán, đánh giá từ người mua, thanh toán theo gian hàng, hotline)
shop_product_promotion top trang chủ
category_top top trang chủ
shop_product_home top trang chủ
banner_mini top trang chủ
top_news bottom trang chủ (khi bật plugin News)
brand_footer bottom mọi trang, trừ giỏ hàng và thanh toán
email_subscribe bottom trang chủ
category_left, brand_left, product_special_left left danh sách / tìm kiếm sản phẩm (trang chi tiết dùng hết bề ngang)
shop_product_last_view left danh sách / tìm kiếm sản phẩm
product_flash_sale top trang chủ (khi plugin ProductFlashSale đang bật)
vendor_new top trang chủ (khi plugin MultiVendor đang bật)

Block category_store_left (danh mục của gian hàng) không được đặt sẵn vì trang gian hàng đã có dải danh mục riêng; có thể gán tay ở Admin → Layout blocks nếu muốn.

Loại banner dùng: banner-left (slider), banner-right, banner-mini, banner-special.

Tài liệu

Tài liệu Nội dung
Hướng dẫn cài đặt tiện ích Cài plugin/template từ admin, file zip hoặc dòng lệnh
Demo m-vendor.s-cart.org — mở trang chủ, trang sản phẩm, gian hàng, giỏ hàng và thanh toán như một khách thật
Mua license, giới thiệu gp247.net — Template Marketplace MKP
Bản tiếng Anh của README này README.md

Hỏi & Đáp (Q&A)

Câu 1: Website của tôi chỉ có một chủ, dùng MKP được không?

→ Được. Các phần dành cho sàn (khối Người bán, lối vào Gian hàng, block gian hàng mới) chỉ hiện khi có plugin MultiVendor hoặc MultiStore; không có thì MKP là một storefront bình thường.

Câu 2: Đổi từ template mặc định sang MKP có mất dữ liệu không?

→ Không. Sản phẩm, đơn hàng, khách hàng, banner giữ nguyên. Chỉ layout block của template cũ được thay bằng block của MKP.

Câu 3: Tôi đã đặt lại vị trí các block, gán lại MKP có bị ghi đè không?

→ Không. MKP chỉ thêm block còn thiếu, không tạo trùng và không sửa block đang có.

Câu 4: Thêm class Tailwind trong file Blade mà giao diện không đổi?

→ CSS của MKP được biên dịch sẵn. Class mới chỉ có tác dụng sau khi build lại (xem mục Tuỳ chỉnh).

Câu 5: License MKP và API License khác nhau thế nào?

→ API License (miễn phí, gp247:ext-register-license) chỉ để website kết nối thư viện GP247. License MKP là bản quyền bạn mua, gắn với tên miền, dùng khi cài bằng --paid --license=… và khi cập nhật.

Câu 6: Cập nhật báo lỗi license?

→ Kiểm tra APP_URL đúng tên miền đã mua license, và license còn hiệu lực. Liên hệ kênh trả phí của GP247 đã giao template nếu cần gia hạn hoặc đổi tên miền.

Câu 7: Muốn đổi câu chữ trên giao diện?

→ Chữ chung của cửa hàng sửa ở màn quản lý ngôn ngữ trong admin; chữ riêng của MKP nằm trong Lang/<ngôn ngữ>/lang.php của template.

Đánh giá sản phẩm

0 / 5
0 đánh giá
5 0
4 0
3 0
2 0
1 0

Vui lòng đăng nhập để viết đánh giá.

Đăng nhập

Chưa có đánh giá nào. Hãy là người đầu tiên đánh giá sản phẩm này.

Sản phẩm đề xuất