Question

我正在使用电子商务系统，它允许您为每种产品提供多种变体 - （例如：大型，中型，小型T恤）。但是，我们收到了添加T恤并忽略变化的客户的投诉。结果，许多大人物都穿着小T恤（默认）。为了解决这个问题，我想强制用户选择一个单选按钮（而不是下拉选择列表），然后才能使用添加到购物车按钮。这是显示选择下拉列表的当前php;

<?php while (have_variation_groups()) : the_variation_group(); ?>
  <?php /** variation HTML and loop */?>
  <select class='select_variation' name="variation[<?php echo variation_id(); ?>]" id="<?php echo variation_group_form_id(); ?>">
  <?php while (have_variations()) : the_variation(); ?>
     <option value="<?php echo the_variation_id(); ?>"><?php echo the_variation_name(); ?></option>
   <?php endwhile; ?>
</select> 
<?php endwhile; ?>
<?php echo add_to_cart_button(the_product_id()); ?>

哪种吐出这种HTML ......

<select class='select_variation' name="variation[1]" id="variation_select_22_1">
<option value="1">Small</option>
<option value="2">Big</option>
</select> 
<input type='submit' id='product_22_submit_button' class='buy_button' name='Buy'  value="Add To Cart" />

您如何建议我将下拉菜单转换为单选按钮，并确保添加到购物车按钮不可点击，直到他们选择了变体？感谢

Answer 1

为什么不添加值为0的默认选项和文本“请选择尺寸”？

Answer 2

我不是PHP开发人员，如果我屠杀语言，请提前抱歉...

这可以为您提供单选按钮列表：

<?php while (have_variation_groups()) : the_variation_group(); ?>
  <?php /** variation HTML and loop */?>
  <ul class='select_variation' name="variation[<?php echo variation_id(); ?>]" id="<?php echo variation_group_form_id(); ?>">
  <?php while (have_variations()) : the_variation(); ?>
     <li><input type="radio" name="variation[<?php echo variation_id(); ?>]" value="<?php echo the_variation_id(); ?>"/><?php echo the_variation_name(); ?></li>
   <?php endwhile; ?>
</ul>
<?php endwhile; ?>
<?php echo add_to_cart_button(the_product_id()); ?>

希望能给你这样的东西：

<ul class='select_variation' name="variation[1]" id="variation_select_22_1">
<li><input type="radio" name="variation[1]" value="1" />Small</li>
<li><input type="radio" name="variation[1]" value="2" />Big</li>
</ul> 
<input type='submit' id='product_22_submit_button' class='buy_button' name='Buy'  value="Add To Cart" />

然后，当单击其中一个选项时，您可以使用一些jQuery启用按钮：

$(function()
{
    $('.buy_button').attr('disabled', 'true');

    $('ul li input').click(function()
    {
        $('.buy_button').removeAttr('disabled');
    });
});

您可能还会考虑在现有的下拉列表中添加一个虚拟的“请选择”项，并将其设置为默认值。

将下拉选择输入转换为需要选择一个的单选按钮

2 个答案: