Sylius v1.7.4：如何覆盖产品页变体表单选项并改为单选按钮

嘿，我来帮你搞定这个问题！在Sylius 1.7.4里将产品选项的下拉框替换成单选按钮，核心是重写模板并调整对应的前端逻辑，具体步骤如下：

1. 重写产品选项的Twig模板 #

Sylius的产品详情页选项模块是通过Twig模板渲染的，我们需要在自己的项目中覆盖原模板：

• 首先，在你的项目目录下创建模板重写路径：templates/bundles/SyliusShopBundle/Product/Show/（如果目录不存在就手动创建）
• 找到Sylius核心包中的原模板文件SyliusShopBundle:Product/Show:_options.html.twig，将其内容复制到你刚创建的目录下的同名文件中
• 修改模板里的表单渲染代码，把下拉框替换为单选按钮：

原模板里的核心代码大概是这样的：

{% for option in product.options %}
    <div class="ui segment">
        <h4 class="ui header">{{ option.name }}</h4>
        {{ form_row(form.variants[option.code]) }}
    </div>
{% endfor %}

替换为单选按钮的渲染代码（适配Sylius默认的Semantic UI样式）：

{% for option in product.options %}
    <div class="ui segment">
        <h4 class="ui header">{{ option.name }}</h4>
        {% for choice in form.variants[option.code].vars.choices %}
            <div class="field">
                <div class="ui radio checkbox">
                    {{ form_widget(form.variants[option.code], {
                        'value': choice.value,
                        'label': choice.label,
                        'type': 'radio',
                        'attr': {'class': 'sylius-product-option-radio'}
                    }) }}
                </div>
            </div>
        {% endfor %}
        {{ form_errors(form.variants[option.code]) }}
    </div>
{% endfor %}

这段代码会循环每个产品选项的取值，渲染成带Semantic UI样式的单选按钮组。

2. 调整前端JS以支持单选按钮的变体切换 #

Sylius默认的变体切换逻辑是监听下拉框的change事件，改成单选按钮后需要更新JS逻辑：

• 在你的项目中创建JS重写路径：assets/js/bundles/sylius-shop/（不存在则创建）
• 复制Sylius核心包中的product-show.js文件到该路径下
• 修改事件监听代码，让它同时监听单选按钮的change事件：

原代码大概是：

$('.sylius-product-variants select').on('change', function() {
    // 变体切换的核心逻辑
});

替换为：

// 监听下拉框和单选按钮的变化事件
$('.sylius-product-variants select, .sylius-product-option-radio').on('change', function() {
    // 保留原有的变体切换逻辑即可
});

3. 清除缓存并编译前端资源 #

• 清除Symfony缓存（开发环境可省略--env=prod）：

php bin/console cache:clear --env=prod

• 重新编译前端资源（根据你的环境选择dev或prod）：

yarn encore dev

做完这些步骤后，刷新产品详情页，就能看到产品选项已经变成单选按钮啦！如果样式有不协调的地方，可以再调整CSS来适配你的店铺风格。

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