Skip to content

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

Open
@spmiller2

Description

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;
}

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    enhancementThis is an enhancement or new featurefeedbackThis issue or PR is based on user feedback

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions