Mục lục
Một trong các trường hợp thú vị mà CO-WELL Asia đã từng gặp là khách hàng đang sử dụng Magento 2, với Catalog vô cùng phong phú và đa dạng.
“Chúng tôi đang sử dụng một hệ thống Cloud để lưu trữ hình ảnh. Có cách nào để lấy hình ảnh từ Cloud này thay vì Magento không?”
Giải pháp đưa ra
Với nhu cầu hiện nay của các trang web nói chung và thương mại điện tử nói riêng, vấn đề về hiệu năng và việc giảm tải lưu trữ ở đây là thiết yếu, với giải pháp sử dụng ảnh từ một hệ thống khác giúp giải quyết được vấn đề này một cách hiệu quả, chúng tôi đã đưa ra hướng giải quyết với những giải pháp làm tối ưu cho hệ thống, các bước được thực hiện dựa trên dự án chúng tôi đã làm, hướng dẫn mọi người có thể tham khảo bên dưới.
Kiểm tra thông tin phù hợp với mỗi api
Đầu tiên khi bắt đầu lấy ảnh từ một hệ thống khác về, chúng ta cần phải có thông tin API của hệ thống ấy bao gồm các endpoint cũng như là các tham số đầu vào.
Sau khi có đầy đủ thông tin cũng như là giải đáp được các câu hỏi trong file Q&A chúng ta bắt đầu bước tiếp theo là nhập các thông tin liên quan đến API.
Các thông tin này có thể là từ phía bên Magento hoặc cũng có thể là từ những response mà từ những API khác.
Sau khi đã có đủ thông tin thì chúng ta bắt đầu kiểm tra thông qua các công cụ, ở đây thì mình có dùng Postman.
Chúng ta nhập đầy đủ thông tin đã chuẩn bị sẵn, ở đây có thể sẽ xảy ra 1 trong 2 trường hợp:
- Nếu may mắn thì sau khi gửi yêu cầu sẽ có response trả về như mong muốn 🙂
- Trường hợp không may như bước 1 thì response trả về có thể gặp các vấn đề như: lỗi do server, lỗi tham số truyền vào, thiếu tham số yêu cầu,…
Trong trường hợp này kiểm tra lại thông tin tham số ở phía bên Magento xem đã đúng chưa, nếu đã chắc chắn đúng thì phần còn lại chắc do bên hệ thống thứ 3, lúc này chúng ta sẽ ghi lại vào file Q&A và gửi cho bên hệ thống thứ 3 trả lời.
Một số API sử dụng trong dự án mình đã làm khi sử dụng qua một hệ thống khác như:
Get token
API này thì chắc mọi người gặp thường xuyên, mục đích thường là kiểm tra thông tin nhận dạng người dùng nhập có chính xác hay không hoặc họ có quyền truy cập API cụ thể đó không.
Các tham số thường là:
| Thông tin tham số | Chi tiết | Bắt buộc |
| username | Là id người dùng để xác thực API | Có |
| password | Là mật khẩu người dùng để xác thực API | Có |
Kết quả trả về:
| Thông tin tham số | Chi tiết |
| token_id | Là response trả về là 1 chuỗi ký tự mã hoá dùng để sử dụng trong các API khác để xác thực quyền người dùng |
Lấy thông tin ảnh của sản phẩm
API này thường không thể thiếu nếu sử dụng để lấy ảnh thông tin của danh sách sản phẩm hoặc cũng có thể là một sản phẩm đơn, mục đích trả về thông tin danh sách ảnh của sản phẩm dạng chuỗi, Json cho chúng ta dễ chỉnh sửa.
Tham số thường là:
| Thông tin tham số | Chi tiết | Bắt buộc |
| token_id | Kiểm tra thông tin nhận dạng, xác thực quyền người dùng | Có |
| sku | Có thể lấy chỉ đích thông tin ảnh sản phẩm theo Sku (trong trường hợp không điền thì lấy danh sách ảnh của tất cả các sản phẩm) | Không |
Một vài thông tin tham số khác tuỳ theo hệ thống cung cấp
Kết quả trả về:
| Thông tin tham số | Chi tiết |
| total | Là tổng số lượng sản phẩm chứa thông tin ảnh được trả về |
| limit | Là giới hạn sản phẩm trả về trong 1 lần gửi yêu cầu |
| url_image | Là đường dẫn ảnh, link chứa url của ảnh |
| sku | Là mã của sản phẩm |
Chuyển đổi thông tin trả về từ Api
Bước tiếp theo, khi đã có thông tin response từ bên hệ thống thứ 3 hầu như dữ liệu trả về là chuỗi dạng Json, lúc này để xử lý bước tiếp theo thì chúng ta cần chuyển đổi thông tin sao cho dữ liệu phù hợp để có thể lưu vào cơ sở dữ liệu hoặc xử lý ở bước tiếp theo tuỳ theo mỗi dự án hoặc cách xử lý của mỗi người.
Lưu lại thông tin dữ liệu
Tuỳ theo từng dự án thì mình sẽ lưu theo cách khác nhau, ở đây thì mình có tạo một product attribute để lưu lại thông tin ảnh lấy về cho tiện xử lý cho phần hiển thị ảnh.
Hiển thị hình ảnh ngoài frontend
Sau khi lưu thông tin dữ liệu thành công ở bước trước, lúc này là thời điểm mình hiển thị hình ảnh ra ngoài frontend, bước này khá quan trọng vì phải cần chỉnh sửa nhiều liên quan tới core của Magento.
Đầu tiên tạo 1 file etc/di.xml với mục đích là nơi khai báo plugin. Trong file này mình dùng aroundCreate để override lại function Create. Trong function này mình có chỉnh sửa lại phần cập nhật dữ liệu bao gồm:
| Function Plugin | Thông tin tham số thay đổi | Chi tiết |
| aroundCreate | image_url | Thay đổi giá trị đường dẫn ảnh từ default Magento thành đường dẫn ảnh lấy từ Cloud |
| width | Chiều rộng của hình ảnh | |
| height | Chiều cao của hình ảnh | |
| is_placeholder | Có phải là ảnh placeorder không |
Tiếp theo, mình có override thêm một function liên quan đến phần xử lý hình ảnh sản phẩm là Gallery, ở đây mình sẽ chỉnh sửa lại phần truy xuất hình ảnh sản phẩm ở định dạng Json, plugin aroundGetGalleryImagesJson, mục đích của chức năng này là hiển thị danh sách hình ảnh sản phẩm gallery bao gồm:
Tên Class Override: Magento\Catalog\Block\Product\View\Gallery
| Function Plugin | Thông tin tham số thay đổi | Chi tiết |
| aroundGetGalleryImagesJson | thumb | Thay thế đường dẫn thumb từ default Magento thành đường dẫn lấy từ Cloud |
| img | Thay thế đường dẫn img từ default Magento thành đường dẫn lấy từ Cloud | |
| full | Thay thế đường dẫn full từ default Magento thành đường dẫn lấy từ Cloud |
Mục đích của phương pháp này là lấy thư viện phương tiện đầy đủ cho sản phẩm hiện tại.
Tên class Override: Magento\Swatches\Helper\Data
| Function Plugin | Thông tin tham số thay đổi | Chi tiết |
| aroundGetProductMediaGallery |
large
|
Thay đổi url hình ảnh từ Cloud theo kích thước lớn |
|
medium
|
Thay đổi url hình ảnh từ Cloud theo kích thước trung bình | |
|
small
|
Thay đổi url hình ảnh từ Cloud theo kích thước nhỏ | |
| aroundGetProductMediaGallery |
$result[‘base_mouseover_image’]
|
Thay đổi url hình ảnh gallery cho sản phẩm hiện tại |
Mục đích của phương pháp này là sửa đổi đường dẫn ảnh sau khi lấy dữ liệu item theo quote item.
Tên class override: Magento\Checkout\CustomerData\ItemInterface
| Function Plugin | Thông tin tham số thay đổi | Chi tiết |
|
afterGetItemData
|
src
|
Thay đổi src hình ảnh theo src lấy từ Cloud |
|
width
|
Thay đổi chiều rộng của hình ảnh | |
|
height
|
Thay đổi chiều cao của hình ảnh |
Mục đích của phương pháp này là thay đổi đường dẫn ảnh sau khi lấy thông tin sản phẩm theo id.
Tên class override: Magento\Catalog\Api\ProductRepositoryInterface
| Function Plugin | Thông tin tham số thay đổi | Chi tiết |
|
afterGetById
|
image
|
Cập nhật lại đường dẫn ảnh |
|
thumbnail
|
Cập nhật lại đường dẫn ảnh thumbnail | |
|
small_image
|
Cập nhật lại đường dẫn ảnh small_image |
Tên class override: Magento\Quote\Model\Quote
| Function Plugin | Thông tin tham số thay đổi | Chi tiết |
|
afterGetItemByProduct
|
image | Thay đổi cập nhật src hình ảnh theo src lấy từ Cloud |
| thumbnail | Thay đổi cập nhật url hình ảnh từ Cloud theo kích thước trung bình | |
| small_image | Thay đổi cập nhật url hình ảnh từ Cloud theo kích thước nhỏ | |
|
afterGetAllVisibleItems
|
image | Thay đổi cập nhật src hình ảnh theo src lấy từ Cloud |
| thumbnail | Thay đổi cập nhật url hình ảnh từ Cloud theo kích thước trung bình | |
| small_image | Thay đổi cập nhật url hình ảnh từ Cloud theo kích thước nhỏ |
Các bạn có thể tham khảo một số hình ảnh override ở bên dưới:
Liên hệ ngay với chúng tôi để khám phá điều mà các Dịch vụ Giải Pháp TMĐT và Dịch vụ Phát triển có thể mang lại cho sự phát triển doanh nghiệp của bạn.
