I have some custom code that turns the Webflow Select Field set into a Radio which can be used for things like color-pickers for your Order Item Options.
Example:
The UI works but it doesn’t transfer the attributes required to add the selected radio option to the Cart. There are a number of data-attributes and values that the code doesn’t transfer to the input, or then to the cart.
Does anyone know if it is possible to have our converted radio’s function with the cart the same way a selected option does?
Here are some of the attributes on the native Select Field. If we parsed these values onto our radio input’s would we be able to add the option information to our cart like the select field?
<div role="group"
data-wf-sku-bindings="---"
data-commerce-product-sku-values="---"
data-node-type="commerce-add-to-cart-option-list"
data-commerce-product-id="---"
class="option-list">
//First Select Field
<div role="group" class="item">
<select id="---"
data-node-type="commerce-add-to-cart-option-select"
data-commerce-option-set-id="---"
class="select-field w-select" required="">
<option selected="" value="">Select Size</option>
<option value="---">22X3</option>
<option value="---">11x14</option>
</select>
</div>
//Second Select Field
<div role="group" class="item radioize">
*The Select Field we moved with our code*
</div>
</div>
The Code (when you have multiple options, this code only effects the option set you want to turn into radios. In this case we cant the last option set):
$(".list .item:last-child").addClass("radioize");
$(".radioize option").slice(1).each(function(i, e) {
var $newLabel = $(`<label for="${e.innerText}"></label>`);
var $newOption = $(`<input type="radio" name="new" value="${e.value}">`);
if (!i) $newOption.prop('checked', true);
$newLabel.append($newOption);
$('#r').append($newLabel);
});
$(".radioize").find("select").remove();