Joomla – Thiết kế web động dễ như chơi (Phần 45)

14/09/2013 00:00

Ở phần trước, chúng ta đã cài đặt và cấu hình thông tin một cửa hàng trực tuyến bằng component Virtuemart. Tiếp theo trong phần này, chúng ta sẽ cài đặt các module và plug in hỗ trợ để làm tăng các tính năng phong phú cho nó.

Trong bộ nguồn cài đặt Virtuemart trong phần trước, bạn sẽ nhìn thấy thư mục modules. Đó là nơi chứa toàn bộ các module giúp bạn tạo gian hàng với nhiều danh mục, hiển thị các sản phẩm bán chạy… Có khoảng mười hai module chính với nhiều công dụng khác nhau. Tùy thuộc vào nhu cầu, mà bạn có thể cài đặt các một vài hay toàn bộ các module đó. Trong phần này chúng ta sẽ cài đặt mẫu ba module là module product category dùng để hiển thị nhóm sản phẩm, module virtuemart card dùng để hiển thị trạng thái của giỏ hàng và cuối cùng là module virtuemart dùng để bổ trợ cho cửa hàng ảo virtuemart này.

Đầu tiên, bạn mở trình duyệt và truy cập vào địa chỉ: http://localhost/mobile/administrator. Sau đó, bạn đăng nhập bằng tên tài khoản (username) là admin, còn mục mật khẩu (password), bạn nhập vào mật khẩu mà bạn đã thiết lập trong quá trình cài đặt Joomla. Khi đã đăng nhập thành công, bạn vào menu Extensions, chọn Install/Uninstall. Ở mục Package File, bạn nhấn Browse và trỏ đường dẫn đến thư mục modules nằm trong Virtuemart. Bạn hãy tìm đến tập tin mang tên mod_product_categories_1.1.8.j15.zip, rồi nhấn nút Upload File & Install để tiến hành cài đặt.

Khi bạn nhận được thông báo Install Module Success nghĩa là quá trình cài đặt module này đã thành công. Cũng thực hiện tương tự, bạn hãy cài đặt thêm tập tin mod_virtuemart_cart_1.1.8.j15.zip và mod_virtuemart_1.1.8.j15.zip.

Bước kế tiếp, bạn vào menu Extensions, và chọn mục Module Manager. Để cấu hình lại module vừa cài đặt, mục chọn chúng ta cần sẽ là module product categories. Trong vùng Detail, ở mục Title, bạn có thể sửa lại tên của module thành một cái tên gợi nhớ nào đó, chẳng hạn như Danh mục sản phẩm. Đặc biệt là ở mục Enabled, bạn đừng quên chọn Yes để kích hoạt module này. Nếu không, dù có cài đặt và cấu hình hoàn chỉnh, module này cũng sẽ không hoạt động trên trang web cửa hàng trực tuyến của bạn.

Tương tự, bạn hãy đổi tên module VirtueMart Shopping Cart thành Giỏ hàng, hay cái tên nào đó tùy thích.

Bây giờ thì bạn truy cập vào trang Joomla Mobile, và sẽ thấy hai module mà chúng ta vừa cài đặt và cấu hình xuất hiện trong đó. Tuy nhiên, danh mục sản phẩm của chúng ta bây giờ vẫn trống, vì chúng ta vẫn chưa quyết định đưa sản phẩm nào vào gian hàng của mình.

Tạo nhóm danh mục sản phẩm

Để tạo nhóm danh mục sản phẩm hàng trưng bày lên cửa hàng trực tuyến Virtuemart, bạn hãy quay lại trang quản trị Joomla, rồi vào menu Components, chọn Virtuemart. Ở khung bên trái, bạn bung mục Products và chọn Add Category.

Ở mục Category Name, bạn hãy đặt tên cho nhóm sản phẩm mà bạn muốn trưng bày, ví dụ như nhóm Mobile dành cho các thiết bị động. Tiếp theo, ở mục Parent, bạn chọn Default-Top Level vì đây sẽ là nhóm thư mục trên cùng. Sau đó bạn nhấn nút Save để lưu lại các cấu hình vừa thực hiện xong.

Tiếp theo chúng ta sẽ tạo các nhóm con là các dòng điện thoại hay sản phẩm di động cầm tay của các hãng NOKIA, SAMSUNG, APPLE… nằm trong nhóm sản phẩm Mobile mà chúng ta vừa tạo ở trên. Cách thực hiện là bạn nhấn vào biểu tượng New để tạo mới một nhóm. Rồi bạn cũng đặt tên cho nhóm sản phẩm giống như nhóm ban đầu, ví dụ NOKIA. Nhưng vì đây là một nhóm con, nên ở mục Parent, bạn chọn nhóm cha của nó là Mobile.

Tương tự, bạn tạo thêm nhóm SAMSUNG, APPLE. Để trang web chúng ta thêm phong phú, bạn có thể mở thêm nhóm bán LAPTOP ngang hàng với nhóm Mobile và cũng có các nhóm con là tên các hãng máy tính xách tay nổi tiếng.

Lúc này quay trở lại trang Joomla Mobile, bạn sẽ nhìn thấy đầy đủ các nhóm danh mục sản phẩm và nhóm con của chúng mà bạn vừa tạo ra.

Tạo sản phẩm

Tiếp theo nữa là một bước không thể thiếu trong quá trình xây dựng cửa hàng trực tuyến Virtuemart, đó chính là tạo ra các sản phẩm trong gian hàng trưng bày. Quay lại trang quản trị Joomla, ở khung bên trái cũng trong mục Products, bạn hãy chọn chức năng Add Product.

Ở mục SKU, bạn có thể nhập vào mã sản phẩm để bạn có thể dễ dàng quản lý về sau. Ở mục Name, bạn nhập vào tên sản phẩm, ví dụ NOKIA E7. Ở mục Categories, bạn có thể chọn nhóm chuyên mục cho sản phẩm của mình. Do một sản phẩm, chẳng hạn như dụng cụ sạc điện, có thể nằm vào nhiều nhóm, nên nếu cần, bạn hãy nhấn giữ phím CTRL, rồi chọn nhiều nhóm chuyên mục khác nhua trong danh sách.

Kế tiếp bạn hãy nhìn sang khung Product Price. Đây là nơi mà bạn có thể nhập vào giá cho sản phẩm và đơn vị tiền tệ để tính giá sản phẩm đó.

Và một phần không thể thiếu để thu hút khách mua hàng, chính là mục Product Description. Đó là nơi mà bạn dùng để miêu tả đầy đủ các thông tin về sản phẩm mà bạn muốn bán. Lưu ý rằng dù tốn nhiều công sức cho việc này, nhưng thông tin càng chi tiết, thì người dùng càng bị thu hút vào sản phẩm, và càng tin tưởng vào cửa hàng của bạn.

Một hình ảnh thể hiện sản phẩm cũng là yếu tố không thể thiếu. Bây giờ chúng ta sẽ chèn hình ảnh cho sản phẩm bằng cách chuyển qua thẻ Product Image. Ở mục Full Image, bạn nhấn nút Browse và trỏ đường dẫn đến hình ảnh của sản phẩm. Cuối cùng bạn nhấn nút Save để lưu lại các thông số cấu hình bên trên.

Trong trang Joomla Mobile lúc này sẽ xuất hiện sản phẩm mà chúng ta vừa đưa lên cửa hàng trực tuyến của mình.

Khi mua hàng, khách hàng sẽ nhập vào số lượng sản phẩm cần mua, sau đó nhấn nút Add to Cart để đưa chúng vào giỏ hàng.

Ở khung Giỏ hàng bên trái, bạn sẽ thấy số lượng sản phẩm và đơn vị tiền được hiển thị, theo đúng những mặt hàng mà khách đã chọn.

Hiển thị sản phẩm đặc biệt ra trang chủ

Với một số sản phẩm đặc biệt, bạn sẽ muốn nó xuất hiện ngoài trang chủ. Để làm việc đó, bạn cần vào menu Extensions, chọn mục Install/Uninstall, rồi tiến hành cài đặt thêm module mang tên mod_virtuemart_featureprod_1.1.8.j15.zip

Sau khi cài xong, bạn vào menu Extensions, chọn chức năng Module Manager. Bạn nhấn vào biểu tượng New và chọn VirtueMart Featured Products.

Ở khung Details bên trái, mục Title, bạn có thể nhập vào tên cho module là Sản phẩm nổi bật. Mục Show Title, bạn chọn Yes, còn kế tiếp là mục Enabled bạn nhớ chọn Yes để kích hoạt module này. Mục Position dùng để xác định vị trí cho module, và tùy thuộc vào mỗi loại template mà trang web của bạn sẽ có cách đánh số vị trí khác nhau.

Tiếp theo bạn hãy nhìn sang khung Paremeters bên phải. Mục Number of displayed products cho phép hiển thị số lượng sản phẩm, bạn có thể dựa vào tính năng này để tạo ra Top 5 hoặc Top 10 sản phẩm bán chạy nhất. Mục Show Product Price, nếu bạn chọn Yes sẽ hiển thị giá của sản phẩm. Mục Show Add-to-Cart Link cho phép người dùng thêm sản phẩm vào giỏ hàng. Cuối cùng là mục Display Style, chương trình cung cấp ba dạng hiển thị Vertical (theo cột), Horizental (theo hàng), Table (theo dạng bảng). Sau khi đã cấu hình xong, bạn nhấn nút Save để lưu lại.

Để các sản phẩm có thể hiển thị ngoài trang chủ thì bạn phải tinh chỉnh tính năng On Special trên sản phẩm. Bạn vào menu Component, chọn Virtuemart. Tiếp theo bạn bung mục Products và chọn List Products.

Bạn mở sản phẩm muốn xuất hiện ngoài trang chủ, sau đó chuyển qua thẻ Product, tìm đến mục On special và đánh dấu chọn vào ô đó.

Bạn thực hiện tương tự cho các sản phẩm khác. Quay lại trang Joomla Mobile, bạn sẽ nhìn thấy các sản phẩm được hiển thị ở ngoài trang chủ.

Nhúng chức năng tìm kiếm sản phẩm

Hiện nay trang web mua bán trực tuyến của bạn về cơ bản đã được hoàn thiện. Song để giúp ích cho người dùng thuận tiện trong việc tìm kiếm các sản phẩm có trên cửa hàng này, chúng ta sẽ cài đặt thêm module virtuemart search để nhúng thêm chức năng tìm kiếm sản phẩm.

Trong trang quản trị Joomla, bạn hãy tiến hành cài đặt tập tin mod_virtuemart_search_1.1.8.j15.zip. Sau khi cài đặt xong, bạn vào menu Extensions, chọn Module Manager. Bạn hãy tìm đến module mang tên Virtuemart Search và nhấn chọn vào nó. Ở mục Title, bạn có thể đặt lại tên cho module, chẳng hạn như Tìm Kiếm. Mục Enabled, bạn chọn Yes để kích hoạt module này nhé. Sau đó bạn nhấn nút Save để lưu lại.

Từ giờ thì mỗi khi cần tìm một sản phẩm nào đó trong cửa hàng trực tuyến, người dùng có thể dùng chức năng Search. Sau khi nhập vào tên sản phẩm và nhấn nút Search thì họ sẽ tìm thấy món hàng mong muốn, nếu nó có trên cửa hàng trực tuyến này.

NHÓM MỤC ĐỒNG

Ý kiến bạn đọc (0)
Tên   Email

Lên đầu trang