Tải Magento 2 Theme Porto v4.0.5 + Cách cài đặt FULL demo

Tải Magento 2 Theme Porto v4.0.5 + 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.5 + 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 4.0.5 FULL demo và sửa một số lỗi cài đặt cũng như sửa lỗi theme.

Theme WordPress Porto - Responsive [Porto VC Addon]

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.5 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.5.

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

huong dan cai dat full demo magento 2 theme porto itsmeit 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.5 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 4.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.5 là tùy bạn đặt, không nhất thiết phải làm giống ItsmeIT nhé.

Thư mục chứa mã nguồn cài đặt Magento 2 theme Porto v4.0 (ảnh minh họa) — Thư mục chứa mã nguồn cài đặt Magento 2 theme Porto v4.0.5 (ảnh minh họa)

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 "Password123@#";
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 "Password123@#";
GRANT ALL PRIVILEGES ON dev_itsmeit.* TO 'itsmeit'@'localhost' IDENTIFIED BY 'Password123@#';
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.5 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 4.0.5 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 \
--db-password=magento2@#$ \
--admin-firstname=admin \
--admin-lastname=admin \
--admin-email=itsmeit.biz@gmail.com \
--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

huong dan cai dat full demo magento 2 theme porto itsmeit 3

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:upgrade

Hoặ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:clean

Hoàn tất các bước ở trên là bạn đã cài đặt thành công theme Porto v4.0.5 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 cho Website (ảnh minh họa)

Để 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

127.0.0.1 dev.itsmeit.co

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.5

Trang quản trị admin Magento 2 Theme Porto v4.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”.

Magento 2 Theme Porto v4.0 + Hướng dẫn cài đặt FULL demo — Magento 2 Theme Porto 4.0.5 + Hướng dẫn cài đặt FULL demo (ảnh minh họa)

huong dan cai dat full demo magento 2 theme porto itsmeit 6

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.5 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é.