通过Twig覆盖JS插件选项时响应式设置类型转换问题

问题场景 #

通过Twig模板覆盖JS插件配置时，startTabIndex和startModel参数能正常生效，但清空responsive下的子配置项（设为空对象）后，配置合并出现类型转换：原本的空对象被转为数组，导致插件的getSettings函数无法正常工作。给responsive子配置设置具体值时则运行正常。

原JS插件配置：

static options = {
    configurator: {
        startTabIndex: 0,
        startModel: null,
        responsive: {
            xs: {
                startTabIndex: 1,
                startModel: 1
            },
            sm: {
                startTabIndex: 1,
                startModel: 1
            },
            md: {
                startTabIndex: 1,
                startModel: 1
            },
            lg: {},
            xl: {},
            xxl: {},
        },
    }
}

无效的Twig覆盖代码：

{% set configuratorOptions = {
    configurator: {
        startTabIndex: 1,
        startModel: 10,
        responsive: {
            xs: {},
            sm: {},
            md: {},
            lg: {},
            xl: {},
            xxl: {},
        },
    }
} %}

data-product-configurator-options="{{ configuratorOptions|json_encode }}"

合并后的异常配置：

{
    "configurator": {
        "startTabIndex": 1,
        "startModel": 10,
        "responsive": {
            "0": [],
            "576": [],
            "768": [],
            "992": [],
            "1200": [],
            "undefined": []
        }
    }
}

原因分析 #

Twig中使用{}定义的空配置项在PHP中会被解析为空数组，而PHP的json_encode函数默认会将空数组序列化为JSON数组（[]），而非JSON对象（{}）。JS插件的配置合并逻辑期望responsive的子项是对象类型，当接收到数组时，会错误地将断点名称（如xs/sm）映射为对应的像素值索引，导致类型转换异常。

解决方案 #

在Twig的json_encode过滤器中添加JSON_FORCE_OBJECT参数，强制将所有数组序列化为JSON对象，即使是空数组也会转为{}：

{% set configuratorOptions = {
    configurator: {
        startTabIndex: 1,
        startModel: 10,
        responsive: {
            xs: {},
            sm: {},
            md: {},
            lg: {},
            xl: {},
            xxl: {},
        },
    }
} %}

data-product-configurator-options="{{ configuratorOptions|json_encode(constant('JSON_FORCE_OBJECT')) }}"

验证效果 #

添加参数后，responsive下的空配置项会被正确序列化为JSON对象：

{
    "configurator": {
        "startTabIndex": 1,
        "startModel": 10,
        "responsive": {
            "xs": {},
            "sm": {},
            "md": {},
            "lg": {},
            "xl": {},
            "xxl": {}
        }
    }
}

此时JS插件的合并逻辑能正确识别对象类型，getSettings函数可正常工作。

内容的提问来源于stack exchange，提问作者Talentix