Khi học đến bài tạo system.xml trong Magento 2 tôi có đề cập đến source model trong Magento 2 nhưng chưa phân tích sâu vào vấn đề này. Nên trong bài viết này tôi sẽ hướng dẫn các bạn tạo source model trong Magento 2.
Các bạn có thể xem lại bài về tạo system.xml tại đây để hiểu rõ hơn.
Source model thường được dùng để tạo các options cho các input có type là select, multi select…và được sử dụng ở nhiều nơi chứ không riêng ở system.xml (configuration).
Tạo system.xml
ViMagento/HelloWorld/etc/adminhtml/system.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd"> <system> <tab id="vimagento" translate="label" sortOrder="10"> <label>ViMagento</label> </tab> <section id="setting" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1"> <class>vimagento-setting</class> <label>Setting</label> <tab>vimagento</tab> <resource>ViMagento_HelloWorld::Configuration</resource> <group id="post" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Source Model Example</label> <field id="color" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Color</label> <source_model>ViMagento\HelloWorld\Model\Config\Source\Color</source_model> </field> <field id="language" translate="label" type="multiselect" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Language</label> <source_model>ViMagento\HelloWorld\Model\Config\Source\Language</source_model> </field> </group> </section> </system> </config> |
Ở trong file system.xml trên tôi đã tạo 2 input có type là select và multi select và khai báo hai source model tương ứng.
Tạo source model trong Magento 2
Các bạn sẽ tạo các file tương ứng với khai báo trong system.xml
ViMagento/HelloWorld/Model/Config/Source/Color.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?php namespace ViMagento\HelloWorld\Model\Config\Source; class Color implements \Magento\Framework\Option\ArrayInterface { public function toOptionArray() { return [ [ 'value' => null, 'label' => __('--Please Select--') ], [ 'value' => 'yellow', 'label' => __('Yellow') ], [ 'value' => 'red', 'label' => __('Red') ], [ 'value' => 'gold', 'label' => __('Gold') ], ]; } } |
ViMagento/HelloWorld/Model/Config/Source/Language.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?php namespace ViMagento\HelloWorld\Model\Config\Source; class Language implements \Magento\Framework\Option\ArrayInterface { public function toOptionArray() { return [ [ 'value' => null, 'label' => __('--Please Select--') ], [ 'value' => 'vi', 'label' => __('Việt Nam') ], [ 'value' => 'en', 'label' => __('Anh') ], [ 'value' => 'tq', 'label' => __('Trung Quốc') ], [ 'value' => 'my', 'label' => __('Mỹ') ], ]; } } |
Một source model sẽ implements class ArrayInterface và chúng ta sẽ tạo các options cho các input dạng select bên trong hàm toOptionArray. Chúng ta sẽ return về một mảng các items tương ứng với các value và label của thẻ <option></option>. Thật đơn giản phải không nào, và đây là đầu ra ở trình duyệt trong Stores > Configuration.
Source model có thể dùng ở đâu?
Source model ngoài việc được sử dụng trong system.xml thì nó có thể được dùng ở một số nơi như:
- Product attribute trong backend
- Customer attribute trong backend
- Dropdown filter trong admin grids
- Các form sử dụng ở frontend và backend (ví dụ như dropdown country ở trang checkout)
Kết luận
Trong bài viết này tôi đã hướng dẫn cho các bạn về source model. Chúng có thể được sử dụng ở nhiều nơi nhằm mục đích tạo ra các option nhưng về cách sử dụng thì tương tự nhau, nên ở những nơi khác bạn cũng có thể dựa vào cấu trúc bên trên để làm. Cảm ơn bạn đã đọc bài.