Head to Head Custom Components Order

Head To Head has an option to change the default order of its components (tabs when using layout: inline option) by passing components property to SIR function. This option also controls which components are enabled.

components property supports two notations:

1. simplified notation: array of strings representing available components
2. full object notation: key-value mapping between sportId {number} and its corresponding components

#Simplified Notation

Example of simplified notation: components: ["headtohead", "form", "teamstats", "lastmatches"].

Manipulating this array enables you to:

1. re-order components by changing the order of strings in the array,
2. disable components by removing specific strings from the array.

#Example

Below is an example code with the removed form component and teamstats set as the first component (listed first in an array):

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>
            Head To Head Components Re-order
        </title>
        <style>
            body {
                display: flex;
                justify-content: center;
            }
            .sr-widgets {
                max-width: 620px;
                width: 100%;
            }

#Full Object Notation

Using full object notation, the value for each sport is basically a simplified notation mapped to a specific sport.

This notation enables per-sport components configuration for Head To Head when the match can be dynamically changed.

Each sport has its own set of available components. Here is a list of all possible values:

default: ["headtohead", "form", "teamstats", "lastmatches"],
1: ["gamePulse", "headtohead", "form", "teamstats", "teamstatsmatch", "lastmatches"], // soccer
2: ["headtohead", "form", "teamstats", "lastmatches"], // basket
3: ["headtohead", "form", "teamstats", "lastmatches"], // baseball
4: ["headtohead", "form", "teamstats", "lastmatches"], // ice hockey
5: ["headtohead", "form", "teamstats", "lastmatches"], // tennis
6: ["headtohead", "form", "teamstats", "lastmatches"], // handball
12: ["headtohead", "form", "lastmatches"], // rugby

#Example

Below is an example code setting:

• default components order (switched "teamstats" and "form") config,
• overriding config for soccer (adding "gamepulse" because it's not present in "default") and
• overriding config for basketball (setting "lastmatches" as the first component)

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content=