Top scorers widget
Description
The Top scorers widget lists the players with the most goals from a specific tournament and a specific season. The widget also allows highlighting specific players.
Moreover, by entering numbers in the Selections fields, journalists can display ranges of top scorers. For example, you can display the top 3 players and those from positions 7 to 9. To see how this looks in Blocky, refer to the screenshot above.
Note that if you donβt enter specific numbers in the Selections field, the CMS will show scorers arranged from 1 to 10.
Bind the widget to HTML DOM
Make sure that you have the loader already set up on your website.
If not, follow our guide:
You can bind the widget to the HTML DOM by two ways:
- Bind the widget without initial options. The required attribute here is "data-widgetId"
<div data-widgetId="top-scorers"></div>
- Bind the widget with initial options. The all available options can be seen below
<div data-widgetId="top-scorers" data-options='{...}'></div>
- The optional "data-options" attribute:
{
int seasonId: 1, // Unique identifier of the resource.
string lang -> // The language which the widget with work with. Currently the widget works with the following
// languages: "bg", "ro", "en".
// The language property is also passed to the API with "Accept-Language" header
string apiURL -> // The URL of the API for football information
string apiKey -> // The key for the authorization header which will be base64 encoded
int[] highlightPlayers -> // Array of player ids. When this option is added all the players which ids have been added
// to the array will be highlighted in the table.
string[] displayStatistics -> // Controls what statistical data and the order in which to be displayed,
//if this option is not passed, only the default statistics will be displayed -> ["goals", "played"]
List of options: ["goals", "played", "minutes", "yellowCards", "redCards", "penalties", "scoredFirst", "assists"]
obj[] selections: [{"offset":0, "limit", 1}, {"offset":10, "limit", 2}] ->
// This option controls what parts of the top scorers response array to display
// IMPORTANT: topScorers variable that is used for the example is just a sample array.
// The actual top scorers response array is a bit more complex.
Example:
Sample Model: topScorers = ["Thomas", "Eric", "Fjord", "Thor", "Odin", "Loki"]
Semple Model: selections = [{"offset":0, "limit", 1}, {"offset":3, "limit", 2}]
Output: ["Thomas", "Thor", "Odin"]
obj filter: {team: <id>}: This option filters the players by the specified team id
boolean displayOriginalRank: true, // Shows the original rank if it is true, if it is false it shows a sequence number (index)
string[] hideOnMobile: Controls which columns to be hidden on mobile. If empty, the default statistics will be displayed -> ["goals", "played"].
The list of available columns is the following:
["matches_played", "goals", "played", "minutes", "assists", "penalties", "redCards", "yellowCards", "scoredFirst"]
displayTeamShortNamesOnDesktop: (true/false) -> // This option replaces the team name with its short name on all resolutions, if "displayTeamCustomNamesOnDesktop" is not added
displayTeamShortNamesOnMobile: (true/false) -> // This option replaces the team name with its short name on mobile resolutions, if "displayTeamCustomNamesOnMobile" is not added
displayTeamCustomNamesOnDesktop: (true/false) -> // This option replaces the team name with its custom name on all resolutions
displayTeamCustomNamesOnMobile: (true/false) -> // This option replaces the team name with its custom name on mobile resolutions
}
Top scorers widget in the CMS
Currently, the Sportal365 CMS offers a variety of football widgets to enable creators to add sports-specific statistics and context to their articles, videos, or galleries.
Video example
Updated almost 2 years ago