Streaming live at 10am (PST)

E-Commerce - Turn Selection into Radio

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:
Screen Shot 2020-04-16 at 3.48.09 PM
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();
2 Likes

Hey @moofawsaw
Did you find any solution?
Cheers

Hi Philippe,

No solution. I was forced to drop this feature for now.

I don’t know the solution (unfortunately), but I like the idea. Hopefully, you will find the way out.

Would also love a way to do this

I have a feeling that webflow has blocked the possibility of this being achievable with transferring input of attributes from the custom select field into cart, i tried to create a custom variant list, which was a success but i was going through the same issue, my selected option was only transferring the default size to cart. I got in contact with the webflow team and they said that there is basically nothing they can do and they dont help with custom codes.