Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Range slider component #793

Closed
wants to merge 25 commits into from

Conversation

@mikejolley
Copy link
Member

commented Aug 1, 2019

This implements a cross-browser compatible range slider, which is a large part of #783 and could use feedback.

Rather than use a custom script or jQuery, this overlays 2 range sliders on top of one-another, styles them, and adds some special shims to support internet explorer/edge.

Screenshot 2019-08-01 at 11 28 34

You can test this by adding the Price Filter block (included) to a post.

Testing I've done:

  • Chrome
  • Firefox
  • Safari
  • Edge for Mac (webkit version)
  • IE11 on browserstack
  • Edge 18 on browserstack
  • IOS on browserstack
  • Android Chrome/Samsung Internet/Firefox touch devices on browserstack

I've also tested this with a screen-reader to confirm labels are read out, and it's possible to focus and use both sliders with a keyboard.

@mikejolley mikejolley requested a review from woocommerce/blocks Aug 1, 2019

@mikejolley mikejolley added this to In Progress PRs (for automation purposes) in Isotope via automation Aug 1, 2019

@mikejolley mikejolley self-assigned this Aug 5, 2019

Show resolved Hide resolved assets/js/frontend-components/price-slider/index.js Outdated
Show resolved Hide resolved assets/js/frontend-components/price-slider/index.js Outdated
Show resolved Hide resolved assets/js/frontend-components/price-slider/index.js
Show resolved Hide resolved assets/js/frontend-components/price-slider/index.js Outdated
Show resolved Hide resolved assets/js/frontend-components/price-slider/index.js Outdated
Show resolved Hide resolved assets/js/frontend-components/price-slider/index.js Outdated
Show resolved Hide resolved assets/js/frontend-components/price-slider/index.js
Show resolved Hide resolved assets/js/frontend-components/price-slider/index.js Outdated
Show resolved Hide resolved assets/js/frontend-components/price-slider/index.js Outdated
Show resolved Hide resolved src/BlockTypes/PriceFilter.php
@mikejolley

This comment has been minimized.

Copy link
Member Author

commented Aug 8, 2019

Dealt with feedback but I'm leaving this as a draft until we kick off the price slider development, in which case Ill switch the target away from master.

Show resolved Hide resolved assets/js/data/index.js Outdated
const formattedNumber = parseInt( value, 10 );
const currencySymbol = get( wcSettings, [ 'currency', 'symbol' ], '$' );
const priceFormat = get( wcSettings, [ 'currency', 'price_format' ], '%1$s%2$s' );
const formattedValue = sprintf( priceFormat, currencySymbol, formattedNumber );

This comment has been minimized.

Copy link
@nerrad

nerrad Aug 12, 2019

Contributor

What about currencies that have the symbol after the number and not before? With that in mind, I wonder if we should make a currency value object that we can pass around (and more easily type check for) as a prop? I built a currency vo for Event Espresso - we could do something similar?

This comment has been minimized.

Copy link
@mikejolley

mikejolley Aug 12, 2019

Author Member

Price format handles this :)

This comment has been minimized.

Copy link
@nerrad

nerrad Aug 12, 2019

Contributor

ahh, meaning it could be %2$s%1$s?

This comment has been minimized.

Copy link
@mikejolley

mikejolley Aug 13, 2019

Author Member

Yup thats it. It comes from the PHP side which already has this system in place.

@mikejolley mikejolley referenced this pull request Aug 13, 2019

Merged

Add global data helpers #848

@mikejolley

This comment has been minimized.

Copy link
Member Author

commented Aug 13, 2019

Merged into #853

@mikejolley mikejolley closed this Aug 13, 2019

Isotope automation moved this from In Progress PRs (for automation purposes) to 🤖 Done Sprint 22 (July 29 - August 12) Aug 13, 2019

@mikejolley mikejolley referenced this pull request Aug 13, 2019

Closed

Filter Products by Price: Slider component #783

8 of 8 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
2 participants
You can’t perform that action at this time.