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

Add formatting to price fields in Search - $ and , #199

Open
spmiller2 opened this issue Jan 26, 2021 · 0 comments
Open

Add formatting to price fields in Search - $ and , #199

spmiller2 opened this issue Jan 26, 2021 · 0 comments
Labels
enhancement This is an enhancement or new feature feedback This issue or PR is based on user feedback

Comments

@spmiller2
Copy link

Clients have requested we improve the price fields on the search form to include the $ and commas in the price format, so prices appear like

$1000
$10,000
$100,000
$1,000,000

This requires changes to both the CSS to show the characters as well as field type changes to correctly handle the data that is exchanged with the API when searched.

Specifically,

The search dollar input is currently type="number" - and browsers don't format that in any way by default.
We need to change that to type="text" input, add a change handler to format the number and remove those commas before we send them to the API.

For the CSS to add the $, that can be done manually now, but should be added to the plugin to be universal.

$ CSS code, for reference

#sr-search-maxprice input[type="number"], #sr-search-minprice input[type="number"] {
    background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='85px'><text x='2' y='13' fill='gray' font-size='12' font-family='arial'>$</text></svg>);
    padding-left: 20px;
    background-position: 5px center;
    background-repeat: no-repeat;
}
@spmiller2 spmiller2 added enhancement This is an enhancement or new feature feedback This issue or PR is based on user feedback labels Jan 26, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement This is an enhancement or new feature feedback This issue or PR is based on user feedback
Projects
None yet
Development

No branches or pull requests

1 participant