MAGENTO 2：系统配置多日期选择

不二不三发表回复 阅读(9603)

今天，我们将学习如何在Magento 2的系统配置中添加日期。这些日期可用于排除或包含。数据将在Magento 2中保存为序列化数据，并且可以通过将序列化数据转换回数组来作为数组检索。

它将类似于下图，您可以使用Magento 2的“系统配置”部分添加多个日期。

请查看我们的分步实施以实现此目标：

步骤1 –添加具有以下内容的\ etc \ adminhtml \ system.xml 

<?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="Scommerce" translate="label comment" sortOrder="100">
            <label>Scommerce Configuration</label>
        </tab>
         
        <section id="order_section" translate="label comment" sortOrder="100" showInDefault="1" showInStore="1" showInWebsite="1">
            <label>Order Settings</label>
            <tab>Scommerce</tab>
            <resource>Scommerce::config</resource>
            <group id="order_settings" translate="label comment" sortOrder="10" showInDefault="1" showInStore="1" showInWebsite="1">
                 <field id="excludedates" translate="label" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Exclude Dates from Shipping Date Calculation</label>
                    <comment>These dates will be excluded from shipping date calculation</comment>
                    <backend_model>Scommerce\Custom\Model\Config\Backend\DatePickerList</backend_model>
                    <frontend_model>Scommerce\Custom\Block\Adminhtml\Form\Field\DatePickerList</frontend_model>
                </field>
            </group>
        </section>
 
    </system>
</config>

请注意，需要创建两个自定义类才能实现此功能。第一类是前端模型类，用于在admin中的系统配置中显示网格。另一个类是后端模型类，用于使用正确的日期格式将数据保存在数据库中。现在，让我们在接下来的两个步骤中创建前端和后端模型类。

第2步–创建前端类Scommerce \ Custom \ Block \ Adminhtml \ Form \ Field \ DatePickerList 

<?php
/**
 * Date Picker List Block
 *
 * @category   Scommerce
 * @package    Scommerce_Custom
 * @author     Sagar Nayyar
 *
 */
 
namespace Scommerce\Custom\Block\Adminhtml\Form\Field;
 
class DatePickerList extends \Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray
{
    /**
     * Initialise form fields
     *
     * @return void
     */
    protected function _prepareToRender()
    {
        $this->addColumn('date', ['label' => __('Date'), 'class' => 'js-date-excluded-datepicker']);
        $this->addColumn('content', ['label' => __('Content')]);
        $this->_addAfter = false;
        $this->_addButtonLabel = __('Add Date');
        parent::_prepareToRender();
    }
 
    /**
     * Prepare existing row data object
     * Convert backend date format "2018-01-12" to front format "12/01/2018"
     *
     * @param \Magento\Framework\DataObject $row
     * @return void
     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
     */
    protected function _prepareArrayRow(\Magento\Framework\DataObject $row)
    {
        $key = 'date';
        if (!isset($row[$key])) return;
        $rowId = $row['_id'];
        try {
            $sourceDate = \DateTime::createFromFormat('Y-m-d', $row[$key]);
            $renderedDate = $sourceDate->format('d/m/Y');
            $row[$key] = $renderedDate;
            $columnValues = $row['column_values'];
            $columnValues[$this->_getCellInputElementId($rowId, $key)] = $renderedDate;
            $row['column_values'] = $columnValues;
        } catch (\Exception $e) {
            // Just skipping error values
        }
    }
 
    /**
     * Get the grid and scripts contents
     *
     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
     * @return string
     */
    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $html = parent::_getElementHtml($element);
 
        $script = <<<JS
            <script type="text/javascript">
                // Bind click to "Add" buttons and bind datepicker to added date fields
                require(["jquery", "jquery/ui"], function (jq) {
                    jq(function(){
                        function bindDatePicker() {
                            setTimeout(function() {
                                jq(".js-date-excluded-datepicker").datepicker( { dateFormat: "dd/mm/yy" } );
                            }, 50);
                        }
                        bindDatePicker();
                        jq("button.action-add").on("click", function(e) {
                            bindDatePicker();
                        });
                    });
                });
            </script>
JS;
        $html .= $script;
        return $html;
    }
 
}

在上面的代码中，我们创建了三个函数_prepareToRender，_prepareArrayRow和_getElementHtml。

_prepareToRender函数是主要功能，它允许您使用addColumn函数在网格中添加多个字段，还允许您使用_addButtonLabel按钮添加自定义标签按钮。

_prepareArrayRow函数允许您在我们将后端日期格式“ YYYY-MM-DD”转换为前端格式“ DD / MM / YYYY”的情况下操作数据

_getElementHtml函数允许您添加jquery datepicker以使用bindDatePicker函数将其与我们的日期字段绑定。

步骤3 –创建后端类Scommerce \ Custom \ Model \ Config \ Backend \ DatePickerList 

<?php
/**
 * Date Picker List Model
 *
 * @category   Scommerce
 * @package    Scommerce_Custom
 * @author     Sagar Nayyar
 *
 */
namespace Scommerce\Custom\Model\Config\Backend;
 
class DatePickerList extends \Magento\Config\Model\Config\Backend\Serialized\ArraySerialized
{
    /**
     * On save convert front value format like "12/01/2018" to backend format "2018-01-12"
     *
     * @return $this
     */
    public function beforeSave()
    {
        $value = [];
        $values = $this->getValue();
        foreach ((array)$values as $key => $data) {
            if ($key == '__empty') continue;
            if (!isset($data['date'])) continue;
            try {
                $date = \DateTime::createFromFormat('d/m/Y', $data['date']);
                $value[$key] = [
                    'date' => $date->format('Y-m-d'),
                    'content' => $data['content'],
                ];
            } catch (\Exception $e) {
                // Just skipping error values
            }
        }
        $this->setValue($value);
        return parent::beforeSave();
    }
}

在上面的代码中，我们将日期格式从前端（DD / MM / YYYY）更改为后端（YYYY-MM-DD）。使用_prepareArrayRow函数完全颠倒了我们在前端类模型中所做的工作。

步骤4 –现在我们将日期数据保存在config_data表中，让我们检索这些日期以用于我们的业务逻辑。
让我们创建Scommerce \ Custom \ Helper \ Data类 

<?php
 
/**
 * Admin Configuration settings can be retrieved from this class
 *
 * @category   Scommerce
 * @package    Scommerce_Custom
 * @author     Sagar Nayyar
 *
 */
 
namespace Scommerce\Custom\Helper;
 
use \Magento\Framework\App\Helper\AbstractHelper;
 
class Data extends AbstractHelper {
     
    /**
     * Admin configuration paths
     *
     */
     
    const XML_PATH_EXCLUDE_DATES            = 'order_section/order_settings/excludedates';
 
    /**
     * @var \Magento\Framework\Serialize\Serializer\Json
     */
    protected $_serializer;
 
    /**
     * @param \Magento\Framework\App\Helper\Context $context
     * @param \Magento\Framework\Serialize\Serializer\Json $serializer
     */
    public function __construct(
        \Magento\Framework\App\Helper\Context $context,
        \Magento\Framework\Serialize\Serializer\Json $serializer
    ) {
        $this->_serializer = $serializer;
        parent::__construct($context);
    }
     
    /**
     * Returns excluded dates (dates which will be disabled on the date grid on checkout)
     * Returns raw value as string (serialized array)
     *
     * @return string
     */
    private function getRawExcludeDates($storeId=null)
    {
        $excludeDates = $this->scopeConfig
            ->getValue(
                self::XML_PATH_EXCLUDE_DATES,
                \Magento\Store\Model\ScopeInterface::SCOPE_STORE,
                $storeId
            );
        return $excludeDates;
    }
 
    /**
     * Returns excluded dates
     * @return array
     */
    public function getExcludeDates()
    {
        $raw = $this->getRawExcludeDates();
        if (empty($raw)) return [];
        if (! $values = $this->_serializer->unserialize($raw)) return [];
        $dates = array();
        foreach ($values as $value) {
            if (!isset($value['date'])) continue;
            array_push($dates,$value['date']);
        }
        return $dates;
    }
}

在上面的代码中，调用getExcludeDates函数时，日期将作为数组。

就是这样，希望本文能以某种方式对您有所帮助。请留下您的评论，让我们知道您的想法？谢谢。

相关文章

0 0 投票数
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论