Tải Magento 2 Theme Porto v4.0 + Cách cài đặt FULL demo, Porto là một theme (giao diện) phổ biến trong cộng đồng Magento, được thiết kế và phát triển bởi công ty SmartWave trên nền tảng Bootstrap 4. Porto cung cấp nhiều tính năng và chức năng tối ưu hóa trang web thương mại điện tử để nâng cao trải nghiệm người dùng và tăng cường khả năng tương tác, đồng thời có giao diện trực quan, linh hoạt và dễ sử dụng để người dùng có thể tùy chỉnh và điều chỉnh theo ý muốn của mình.
Link demo: Porto | Ultimate Responsive Magento Theme
Tải Magento 2 Theme Porto v4.0 + Hướng dẫn cài đặt FULL demo
Trong bài viết này, ItsmeIT sẽ chia sẻ cách cài đặt Magento 2 Porto v4.0 FULL demo và sửa một số lỗi cài đặt cũng như sửa lỗi theme.
Bước 1: Chuẩn bị các công cụ và yêu cầu
Để có thể cài đặt theme Porto v4.0 thành công bạn cần thỏa mãn những điều kiện yêu cầu sau:
- Hệ điều hành, Ubuntu hoặc Debian, CentOS. RAM tối thiểu 2GB nhưng nên là 8GB trở lên.
- Phiên bản PHP 7.4 hoặc 8.1
- MySQL 8.0 hoặc MariaDB 10.4
- Composer phiên bản 1.x
- Elasticsearch 7.9
- Nginx hoặc Apache2
Bạn có thể dọc chi tiết yêu cầu (System requirements) ở đây.
Bước 2: Tải theme và giải nén
Bởi vì Magento 2 phức tạp, và đòi hỏi kiến thức lập trình, cho nên bạn cần chắc chắn thỏa mãn những điều kiện ở bước 1. Phải cài đặt chính xác từng phiên bản mới có thể cài đặt thành công Magento 2 Theme Porto v4.0.
Nếu bạn đã tải về FILE zip, hãy giải nén nó, bạn sẽ nhận được thư mục proto magento2 4.0. Trong thư mục “Theme Files” có chứa source code cho cả Magento 1 và Magento 2 các phiên bản 2.0.x cho đến 2.4.2 và bao gồm cả Magento EE. Trong bài hướng dẫn này ItsmeIT sẽ cài đặt phiên bản 2.4.2 nhé.
Bước 3: Lựa chọn và thiết lập đường dẫn, mã nguồn Magento 2
Hãy tìm thư mục “Quick Start Package->Magento 2.4.2”, đây là file FULL source + database để bạn có thể cài đặt theme Porto v4.0 cho Magento 2 FULL demo. Tất nhiên bạn cũng có thể cài đặt riêng lẻ tùy vào phiên bản Magento mà bạn muốn sử dụng chứ không nhất thiết phải là 2.4.2. Tuy nhiên ItsmeIT khuyên bạn nên cài đặt bản “Quick Start Package” để nó dễ dàng hơn. Dựa vào đó bạn cũng dễ dàng tùy biến và phát triển trang web của mình hoặc khách hàng.
Coppy file porto2_4.0.0 vào thư mục bạn sẽ đặt mã nguồn của Magento 2. Vì ItsmeIT sử dụng máy chủ Nginx cho nên mã nguồn sẽ được đặt trong thư mục /var/www/. Cụ thể là “/var/www/vhosts/dev.itsmeit.co/httpdocs”. Nó có ý nghĩa như sau:
- vhosts (viết tắt của Virtual Hosts) đặt tên thư mục cho nó chuyên nghiệp.
- dev.itsmeit.co là tên miền mình sẽ thiết lập để chạy web và cài đặt theme Porto v4.0 cho Magento 2.
- httpdocs là một thư mục (folder) chính trong cấu trúc thư mục của máy chủ web. Thư mục này chứa các tệp tin và thư mục cần thiết để hiển thị nội dung trên trang web.
Tất nhiên tên thư mục chứa source code Magento 2 Theme Porto v4.0 là tùy bạn đặt, không nhất thiết phải làm giống ItsmeIT nhé.
Nếu bạn cài đặt trên VPS thì có thể sử dụng Filezilla để upload souce và giải nén nó tương tự.
Bước 4: Tạo database và phân quyền thư mục + MySQL
1. Đăng nhập vào máy chủ MySQL bằng lệnh sudo mysql hoặc mysql -u (USER) -p:
sudo mysql
2. Chạy lệnh để tạo database, user và gán quyền:
CREATE DATABASE dev_itsmeit; CREATE USER 'itsmeit'@'localhost' IDENTIFIED BY "[email protected]#"; GRANT ALL PRIVILEGES ON dev_itsmeit.* TO "itsmeit"@"localhost"; GRANT ALL PRIVILEGES ON *.* TO "itsmeit"@"localhost" WITH GRANT OPTION; FLUSH PRIVILEGES; \q;
Nếu bạn sử dụng MariaDB thì chạy lệnh để gán quyền cho user như sau:
CREATE DATABASE dev_itsmeit; CREATE USER 'itsmeit'@'localhost' IDENTIFIED BY "[email protected]#"; GRANT ALL PRIVILEGES ON dev_itsmeit.* TO 'itsmeit'@'localhost' IDENTIFIED BY '[email protected]#'; FLUSH PRIVILEGES; \q
Sau khi đã có database bạn có thể import file database_porto2_4.0.0.sql.zip trong thư mục “Quick Start Package/Magento 2.4.2”. Trước tiên hãy giải nén file SQL này. File này cũng khá nhẹ 3.2Mb nên bạn có thể import trực tiếp nó trong phpMyadmin hoặc bằng lệnh trên terminal như sau:
- Mở terminal từ thư mục chứa file SQL đã giải nén và đăng nhập MYSQL. Trên VPS thì bạn cần sư dụng lệnh “cd” để di chuyển đến thư mục đó.
- Sử dụng lệnh: use database_name; và thực hiện import file theo đường dẫn
use database_name; source porto-v4.0.sql;
Trong lúc đợi quá trình import SQL hoàn thành thì bạn có thể chuyển sang bước 3 để tiếp tục cấu hình.
3. Cấu hình PHP và quyền thư mục
Magento 2 được bảo mật rất chặt chẽ vì vậy bạn cũng cần phải cấu hình php đúng cách. Hãy mở file www.conf theo đường dẫn /etc/php/7.4/fpm/pool.d. Sau đó sửa www-data thành user mà bạn sẽ sử dụng nó. Ví dụ user của mình là itsmeit mình sẽ đổi www-data thành itsmeit với 2 giá trị cấu hình sau:
user = www-data
group = www-data
listen.owner = www-data
listen.group = www-data
user = itsmeit
group = www-data
listen.owner = itsmeit
listen.group = www-data
Để hiểu rõ hơn, bạn có thể đọc thêm ở bài viết này nhé.
4. Phân quyền cho thư mục:
Ở bước 3 bạn đã cấu hình cho username (Linux) thì bạn sẽ cần thiết lập để nó có quyền đọc ghi, thực thi các files và thư mục chứa mã nguồn magento 2. (Thay đổi đường dẫn đến thư mục và user Linux của bạn)
sudo chown -R itsmeit:www-data /var/www/vhosts/dev.itsmeit.co/httpdocs
sudo find /var/www/vhosts/dev.itsmeit.co/httpdocs -type f -exec chmod 644 {} +
sudo find /var/www/vhosts/dev.itsmeit.co/httpdocs -type d -exec chmod 755 {} +Những câu lệnh trên sẽ thiết lập quyền (permission) cho tệp tin, thư mục và USER sẽ có quyền thực thi nó. Nó sẽ hữu ích khi bạn chạy các câu lệnh trong Magento 2 như: php bin/magento … Nếu bạn không cấu hình PHP ở bước 3 thì quyền và thư mục của bạn sẽ cần root hoặc www-data để xử lý và chắc chắn bạn sẽ liên tục nhận thông báo lỗi permission.
Bước 5. Cài đặt theme porto v4.0 và import FULL demo
Sau khi bạn đã hoàn thành tất cả các bước ở trên, bây giờ bạn có thể thực hiện cài đặt Magento 2 Theme Porto v4.0 bằng câu lệnh như sau: (Nhớ kiểm tra thay đổi URL và username của bạn)
bin/magento setup:install \ --base-url=http://dev.itsmeit.co/ \ --db-host=localhost \ --db-name=magento2 \ --db-user=magento2 \ [email protected]#$ \ --admin-firstname=admin \ --admin-lastname=admin \ [email protected] \ --admin-user=admin \ --admin-password=admin123 \ --language=en_US \ --currency=USD \ --timezone=Asia/Ho_Chi_Minh \ --use-rewrites=1 \ --search-engine=elasticsearch7 \ --elasticsearch-host=localhost \ --elasticsearch-port=9200 \ --elasticsearch-index-prefix=magento2 \ --elasticsearch-timeout=15
Khi hoàn thành bạn sẽ nhận được đường dẫn URL admin_xxx giống như ảnh chụp màn hình
Bước 6. Sửa lỗi URL sai khi import demo trong Magento 2
Có 2 cách để làm điều này, bạn có thể thêm cấu hình sau vào trong file env.php cuối cùng sau dấu phẩy “,” của biến “install”: (nhớ thay đổi URL)
'system' => [
'default' => [
'web' => [
'unsecure' => [
'base_url' => 'https://dev.itsmeit.co/',
'base_link_url' => 'https://dev.itsmeit.co/'
],
'secure' => [
'base_url' => 'https://dev.itsmeit.co/',
'base_link_url' => 'https://dev.itsmeit.co/',
'use_in_frontend' => '1',
'use_in_adminhtml' => '1'
]
]
]
]Sau đó chạy lệnh import config và setup từ thư mục chứa mã nguồn magento 2:
cd {magento_dir}
php bin/magento app:config:import
php bin/magento setup:upgradeHoặc mở phpMyadmin và chạy lệnh SQL sau đó tìm và sửa các giá trị:
SELECT * FROM `core_config_data` WHERE `path` LIKE '%web%'
- web/unsecure/base_url: URL trang web của bạn bao gồm cả http ví dụ (http://dev.itsmeit.co/)
- web/secure/base_url: URL trang web của bạn bao gồm cả http ví dụ (https://dev.itsmeit.co/)
- web/secure/use_in_frontend: giá trị “1” có https hoặc “0” không sử dụng https
- web/secure/use_in_adminhtml: giá trị “1” có https hoặc “0” không sử dụng https
cd {magento_dir}
php bin/magento cache:cleanHoàn tất các bước ở trên là bạn đã cài đặt thành công theme Porto v4.0 cho Magento 2.4.2 rồi đó, bạn có thể đăng nhập vào trang quản trị và bắt đầu tùy biến trang web. URL admin bạn đã nhận được ở bước 5, hoặc bạn cũng có thể thấy nó trong file env.php (‘frontName’ => ‘admin_xxxxx’)
Bước 7. Thêm cấu hình Nginx cho trang web Magento 2
Để cấu hình Nginx bạn sẽ cần tạo 1 file .conf nằm trong thư mục /etc/nginx/sites-available. Ở đây ItsmeIT sẽ tạo 1 file có tên: dev.itsmeit.co.conf và các cấu hình bên trong nó như sau:
sudo nano /etc/nginx/sites-available/dev.itsmeit.co.conf
upstream fastcgi_backend {
server unix:/run/php/php7.4-fpm.sock;
}
server {
listen 80;
server_name dev.itsmeit.co;
set $MAGE_ROOT /var/www/vhosts/dev.itsmeit.co/httpdocs;
include /var/www/vhosts/dev.itsmeit.co/httpdocs/nginx.conf.sample;
}Nếu trang web của bạn có sử dụng https thì các cấu hình trong dev.itsmeit.co.conf sẽ tương tự như sau:
# Redirect HTTP -> HTTPS
server {
listen 80;
listen [::]:80;
server_name dev.itsmeit.co www.dev.itsmeit.co;
return 301 https://itsmeit.co$request_uri;
}
upstream fastcgi_backend {
server unix:/run/php/php7.4-fpm.sock;
}
server {
listen 443 ssl http2;
listen [::]:443;
server_name dev.itsmeit.co www.dev.itsmeit.co;
ssl_certificate /etc/nginx/ssl/dev.itsmeit.co/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/nginx/ssl/dev.itsmeit.co/privkey.pem; # managed by Certbot
include /etc/nginx/conf.d/ssl_options.conf.inc;
# Path to document root
set $MAGE_ROOT /var/www/vhosts/dev.itsmeit.co/httpdocs;
include /var/www/vhosts/dev.itsmeit.co/httpdocs/nginx.conf.sample;
# Overrides logs defined in nginx.conf, allows per site logs.
access_log /var/log/nginx/dev.itsmeit.co.vhost.log;
error_log /var/log/nginx/dev.itsmeit.co.vhost.err;
}Nếu bạn cài đặt trên localhost bạn cũng có thể thiết lập domain ảo trỏ tới 127.0.0.1 bằng cách mở file /etc/hosts và thêm vào cấu hình:
sudo nano /etc/hosts
Và khởi động lại nginx để các thay đổi cấu hình có hiệu lực chi tiết tham khảo ở đây.
sudo service nginx restart
Bước 8. Đăng nhập Magento Admin và tùy biến trang web
Để tùy biến bạn có thể điều hướng đến: Stores->Configuration->PORTO 4.0.0
Để import demo bạn có thể điều hướng đến: PORTO 4.0.0->Porto – Settings Panel trong “Configuration”, lựa chọn phiên bản demo phù hợp và bấm ‘Import’.
Bước 9: Sửa một số lỗi liên quan đến theme Porto v4.0 | Magento 2.4.x
- Nếu có lỗi liên quan đến MSP_ReCaptcha thì bạn có thể chạy lệnh để cài đặt module bị thiếu: (tham khảo)
cd {magento_dir}
composer require msp/recaptcha
php bin/magento setup:upgrade- Nếu có lỗi ảnh biểu tượng ngôn ngữ (flags icon) trên đầu trang thì mở đường dẫn “pub/media/wysiwyg/smartwave/porto/flags” coppy file default.png và đổi tên thành “english.png”.
- Nếu có lỗi hiển thị minicart liên quan đến knockout js thì mở file app/design/frontend/Smartwave/porto/Magento_Checkout/web/template/minicart/content.html, sửa dòng 8-16 thành như sau:
<strong>
<span class="text" translate="'My Cart'"/>
<span
class="qty empty"
text="getCartParam('summary_count')"
data-bind="css: { empty: !!getCartParam('summary_count') == false },
attr: { title: $t('Items in Cart') }">
</span>
</strong>Trên đây là toàn bộ các bước hướng dẫn cài đặt FULL demo Magento 2 Theme Porto v4.0 trên Ubuntu hoặc Debian, nếu bạn gặp lỗi hoặc có câu hỏi hãy để lại bình luận bên dưới nhé.
Link download: proto-v4.0–magento2.4.x.zip
