Add unique class to price field template

[JKingsnorth]

Motivation

Currently, classes are assigned to price fields based on the 'name' of the price field, eg:

However:

• this is clunky to reference in CSS
• when a price set is 'copied' - the price fields are copied along with it, and they keep the same 'name' as the original, eg:

... this can have the unintended consequence of customisations to one price field being cloned, and applying to the clone as well!

Solution

We don't want to change the current behaviour, as it might break peoples' templates and customisations.

However, let's add a new class to price fields, which includes the ID of the price field. This will make it easier to target them in CSS, and give them truly 'unique' names.

See the screenshots above, you can see the new classes 'crm-price-field-id-xxxx'

Technical Details

Minor template change to add a new css class in what seemed like a consistent format.

[civibot]

(Standard links)

• If this is your first pull-request for CiviCRM, please browse CONTRIBUTING.md for information about the development and testing processes.
• If you are reviewing this pull-request, you may wish to consult the test sites and the Review Standards (long template, short template).

[eileenmcnaughton]

@colemanw do we do this or try to add as 'data'

[seamuslee001]

I think this makes more sense to me especially if the goal is to do some css / theming changes but would appreciate @colemanw's thoughts as well

[JKingsnorth]

Thanks @eileenmcnaughton / @seamuslee001

The reason I went for this approach is that we have the crm-contribution-page-id-xxxx, crm-event-id-xxxx classes on the main containers for contribution and event pages (which is invaluable!). So I was trying to keep a consistent approach.

Also, I think it is useful to have these things easily accessible as classes for theming. eg: in drupal you have page-node-xxxx as a class.

To me, using the id in the class is a lot better than using the 'name' field - but I didn't want to remove the name-based CSS class and break everyone's stuff [=

[mattwire]

This will certainly help with custom theming

[JKingsnorth]

Thanks @mattwire !