How to convert this list of options from radio buttons to a dropdown menu? Below is code pulled from the single-product.php template.
<div class="wcsatt-options-wrapper" <?php echo count( $options ) === 1 ? 'style="display:none;"' : '' ?>><?php
if ( $prompt ) {
echo $prompt;
} else {
?><h3><?php
_e( 'Choose a subscription plan:', WCS_ATT::TEXT_DOMAIN );
?></h3><?php
}
?><ul class="wcsatt-options-product"><?php
foreach ( $options as $option_id => $option ) {
?><li class="<?php echo $option_id !== '0' ? 'subscription-option' : 'one-time-option'; ?>">
<label>
<input type="radio" name="convert_to_sub_<?php echo $product->id; ?>" data-custom_data="<?php echo esc_attr( json_encode( $option[ 'data' ] ) ); ?>" value="<?php echo $option_id; ?>" <?php checked( $option[ 'selected' ], true, true ); ?> />
<?php echo $option[ 'description' ]; ?>
</label>
</li><?php
}
?></ul>
I got this to work! However, I'm pretty sure that I'm not supposed to use the checked parameter with a dropdown menu... Any suggestions for improvement?
<ul class="wcsatt-options-product">
<select name="convert_to_sub_<?php echo $product->id; ?>" data-custom_data="<?php echo esc_attr( json_encode( $option[ 'data' ] ) ); ?>">
<?php
foreach ( $options as $option_id => $option ) {
?><li class="<?php echo $option_id !== '0' ? 'subscription-option' : 'one-time-option'; ?>">
<label>
<option value="<?php echo $option_id; ?>" <?php checked( $option[ 'selected' ], true, true ); ?>> <?php echo $option[ 'description' ]; ?> </option>
</label>
</li><?php
}
?>
</select>
</ul>
I don't know what system you are using or how the validation or anything works, but something like this would get you close if not there:
<ul class="wcsatt-options-product">
<select name="convert_to_sub_<?php echo $product->id; ?>">
<?php
foreach ( $options as $option_id => $option ) {
?><li class="<?php echo $option_id !== '0' ? 'subscription-option' : 'one-time-option'; ?>">
<option value="<?php echo $option_id; ?>" data-custom_data="<?php echo esc_attr( json_encode( $option[ 'data' ] ) ); ?>" <?php echo($option[ 'selected' ] ? ' selected="selected" : '' ?>><?php echo $option[ 'description' ]; ?></option>
</li><?php
}
?></select></ul>
Essentially you are just converting the input elements to <option>
's and wrapping it all in <select>
tags.