search

wp-e-commerce / WP-e-Commerce

WP eCommerce - The most popular independent eCommerce platform for WordPress
https://wpecommerce.org
GNU General Public License v2.0
216 stars 216 forks source link

UX bug fix for tax checkbox UX display issue - option now hidden unles… #2359

Closed mcsmithers closed 4 years ago

mcsmithers commented 6 years ago

CSS correction in admin.css for toggling child options on and off.

sboisvert commented 6 years ago

Hi Christina! Thanks for the bug fix! Would it be possible to add more information in your pull request description? For example, what does this fix? What was the behviour before and after the fix?

mcsmithers commented 6 years ago

No problem!

Bug: The when the user click on "Apply tax when Billing Region is the Same as Tax Rate" or "Apply tax when Shipping Region is the same as Tax Rate" then click on the sub-options below "Apply Tax when Billing and Shipping Region is the same as Tax Rate", it keep the sub-options while also selecting the formerly mentioned two options which doesn't make sense. A screenshot illustrates this below.

Screenshots of Bug: image

WP E-Commerce Version: 4.0.0

Fix: There is a div that contains the sub-options below "Apply Tax when Billing and Shipping Region is the same as Tax Rate" which can be hidden when the sibling options get clicked on instead of this one. CSS can do this by making the sub-options hidden then when clicked on, it will show those options.

The fix is in wpsc-admin/admin.css within the variation stylings since it seems like a good fit there. The #billing_shipping_preference container is the id of what we want to toggle on and off, so once we put that into our CSS state, we only see the sub-options when it is relevant.

*Store Setting Styling
*/
#billing_shipping_preference_container {
    display: none;
}

:checked ~ #billing_shipping_preference_container {
    display: block;
   }

After Fix: The sub-options are hidden by default and only toggle on when the correct option is selected. If the user clicks on one of the sub-options then clicks on one of the part sibling options, the box is gone with the sub-options.

Tests: Please note that upon testing on some screens, the radio options display side-by-side which might be corrected with a break. This might be corrected with a break between the options perhaps or a margin in the CSS specified to 1 px or whatever may fit the case best.

sboisvert commented 6 years ago

Hi @mcsmithers that's a great explanation! Thanks!

JustinSainton commented 6 years ago

@mcsmithers Wonderful, thank you for this. We'll review and merge soon!