8manos / wc-variations-radio-buttons

Let your customers choose product variations using radio buttons instead of dropdowns.
https://wordpress.org/plugins/wc-variations-radio-buttons/
GNU General Public License v2.0
62 stars 34 forks source link

Attribute/variation values handling #3

Closed Sphinxxxx closed 8 years ago

Sphinxxxx commented 8 years ago

In add-to-cart-variation.js (line 291), variations are enabled or disabled by comparing WooCommerce attribute values to what's stored in <input> elements' value="...". This means that sanitize_title() cannot be used when building <input> elements, because sanitize_title() changes a string to lowercase and removes special characters.

_This propsed change handles values the same way as WooCommerce's original dropdown (only simple html encoding with esc_attr()) - see wc_dropdown_variation_attribute_options() in \woocommerce\includes\wc-template-functions.php._

Example: Consider two "Color" variations: "Red & Green" and "Blue & Yellow".

Original WooCommerce dropdown:

<td class="value">
  <select id="color" class="" name="attribute_color" data-attribute_name="attribute_color">
    <option value="">Choose an option</option>
    <option value="Red &amp; Green">Red &amp; Green</option>
    <option value="Blue &amp; Yellow">Blue &amp; Yellow</option>
  </select>
  ...

Radio buttons (notice the wrongfully "slugified" values):

<td class="value">
  <div>
    <input type="radio" name="attribute_color" value="red-green" id="color_v_Red &amp; Green" ><label for="color_v_Red &amp; Green">Red & Green</label>
  </div>
  <div>
    <input type="radio" name="attribute_color" value="blue-yellow" id="color_v_Blue &amp; Yellow" ><label for="color_v_Blue &amp; Yellow">Blue & Yellow</label>
  </div>
  ...

Radio buttons w/suggested fix:

<td class="value">
  <div>
    <input type="radio" name="attribute_color" value="Red &amp; Green" id="color_v_Red &amp; Green" ><label for="color_v_Red &amp; Green">Red & Green</label>
  </div>
  <div>
    <input type="radio" name="attribute_color" value="Blue &amp; Yellow" id="color_v_Blue &amp; Yellow" ><label for="color_v_Blue &amp; Yellow">Blue & Yellow</label>
  </div>
  ...