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:

🚀

Load Widgets 1.0 on your website

Open Recipe

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"

Bash

    <div data-widgetId="top-scorers"></div>

• Bind the widget with initial options. The all available options can be seen below

Bash

    <div data-widgetId="top-scorers" data-options='{...}'></div>

• The optional "data-options" attribute:

Bash

    {
        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