Exercise (6h)

Sử dụng React + redux để render ra giao diện product list tương tự như sau:
- Ảnh
- Tên
- Giá

Viết API get simple product của Magento 2, có xử lý phân trang
Sử dụng React call api của magento 2 , hiển thị ra màn hình danh sách sản phẩm
Xử lý phân trang trên giao diện

Hướng dẫn cách sửa .htaccess để có thể call api magento 2 khi khác domain:

Với apache 2:

Bật mode headers:

sudo a2enmod headers
sudo service apache2 restart

Thêm đoạn sau vào .htaccess của magento 2:

# Always set these headers.Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token, pos-session, storelogistic-session"
# Added a rewrite to respond with a 200 SUCCESS on every OPTIONS request.
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

Với nginx, sửa Nginx config ở

magento root folder/nginx.conf.sample

#
# Wide-open CORS config for nginx
#
location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT' always;
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,pos-session,storelogistic-session' always;
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     add_header 'Access-Control-Allow-Origin' '*' always;
     add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT' always;
     add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,pos-session,storelogistic-session' always;
     add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
}

Restart lại nginx

Dev Training Document

Exercise (6h)

Analytics

Related content