Brainfarts Gebruik Foys widget

Gebruik Foys widget

FOYS Competition Widget: mogelijkheden en voorbeeldcode

Met de FOYS Competition Widget kun je programma’s, uitslagen,
standen, verenigingen, teams en openbare teaminformatie op een
WordPress-pagina tonen.

De voorbeelden hieronder gebruiken de federatie-ID van de
Nederlandse Basketball Bond en enkele voorbeeld-ID’s van
Red Stars.

Inhoud

1. Basisbestanden laden

De stylesheet en het JavaScriptbestand hoeven maar één keer per
WordPress-pagina geladen te worden. 

<link
  rel="stylesheet"
  href="https://competition-widget.foys.tech/competition-widget.css">

<script
  type="module"
  src="https://competition-widget.foys.tech/competition-widget.js">
</script>

Advies: plaats de stylesheet boven de widgets en het
script onder de laatste widget op de pagina.

2. Beschikbare attributen

Attribuut Voorbeeld Functie
federation-id 52cfa65e-… Bepaalt bij welke sportbond de gegevens horen.
club-id 485ADAD8-… Filtert de widget op één vereniging.
team-id c0d3a43c-… Filtert op één team. Gebruik hiervoor de team-GUID.
team-club-id 485ADAD8-… Geeft aan bij welke club een team hoort als geen
normaal club-id wordt gebruikt.
page results Bepaalt welk onderdeel wordt geopend.
language nl-NL Stelt de taal van de widget in.
size normal Gebruik normal of small.
no-routing no-routing Zorgt dat de widget geen eigen routering in de
WordPress-URL gebruikt.

3. Verenigingen zoeken

Zoeken naar een club, bijvoorbeeld GOBA

Deze widget toont de verenigingszoeker op federatieniveau.
Vanuit de zoekresultaten kan een vereniging worden geopend. 

<link
  rel="stylesheet"
  href="https://competition-widget.foys.tech/competition-widget.css">

<div class="competition-widget">
  <competition-widget
    federation-id="52cfa65e-9782-4a81-ab35-e2f981fcb7a9"
    page="clubs"
    language="nl-NL"
    no-routing
    size="normal">
  </competition-widget>
</div>

<script
  type="module"
  src="https://competition-widget.foys.tech/competition-widget.js">
</script>

4. Algemeen competitieprogramma

Programma van de volledige federatie

Zonder club-ID of team-ID toont de widget wedstrijden op
federatieniveau. 

<competition-widget
  federation-id="52cfa65e-9782-4a81-ab35-e2f981fcb7a9"
  page="program"
  language="nl-NL"
  no-routing
  size="normal">
</competition-widget>

5. Algemene competitie-uitslagen

Uitslagen van de volledige federatie

<competition-widget
  federation-id="52cfa65e-9782-4a81-ab35-e2f981fcb7a9"
  page="results"
  language="nl-NL"
  no-routing
  size="normal">
</competition-widget>

6. Programma van een vereniging

Voorbeeld: Red Stars

Het club-ID in dit voorbeeld is:

485ADAD8-2A89-4A01-A150-BB6E73CB8D3D
 

<competition-widget
  federation-id="52cfa65e-9782-4a81-ab35-e2f981fcb7a9"
  club-id="485ADAD8-2A89-4A01-A150-BB6E73CB8D3D"
  page="program"
  language="nl-NL"
  no-routing
  size="normal">
</competition-widget>

7. Uitslagen van een vereniging

Voorbeeld: Red Stars

<competition-widget
  federation-id="52cfa65e-9782-4a81-ab35-e2f981fcb7a9"
  club-id="485ADAD8-2A89-4A01-A150-BB6E73CB8D3D"
  page="results"
  language="nl-NL"
  no-routing
  size="normal">
</competition-widget>

8. Teams van een vereniging

Teamoverzicht van een club

Vanuit dit overzicht kan de team-GUID worden vastgesteld.
De team-GUID is nodig voor programma, uitslagen en standen van
een specifiek team. 

<competition-widget
  federation-id="52cfa65e-9782-4a81-ab35-e2f981fcb7a9"
  club-id="485ADAD8-2A89-4A01-A150-BB6E73CB8D3D"
  page="teams"
  language="nl-NL"
  no-routing
  size="normal">
</competition-widget>

9. Programma van één team

Voorbeeld: Red Stars M22-1

De team-GUID van Red Stars M22-1 is:

c0d3a43c-26e0-419e-b60c-bc3fdad6bea1
 

<competition-widget
  federation-id="52cfa65e-9782-4a81-ab35-e2f981fcb7a9"
  club-id="485ADAD8-2A89-4A01-A150-BB6E73CB8D3D"
  team-id="c0d3a43c-26e0-419e-b60c-bc3fdad6bea1"
  page="program"
  language="nl-NL"
  no-routing
  size="normal">
</competition-widget>

10. Uitslagen van één team

Voorbeeld: Red Stars M22-1

<competition-widget
  federation-id="52cfa65e-9782-4a81-ab35-e2f981fcb7a9"
  club-id="485ADAD8-2A89-4A01-A150-BB6E73CB8D3D"
  team-id="c0d3a43c-26e0-419e-b60c-bc3fdad6bea1"
  page="results"
  language="nl-NL"
  no-routing
  size="normal">
</competition-widget>

11. Stand van één team

Stand en poule-informatie

Als een team aan meerdere poules deelneemt, kan de widget een
poulekeuze tonen. 

<competition-widget
  federation-id="52cfa65e-9782-4a81-ab35-e2f981fcb7a9"
  club-id="485ADAD8-2A89-4A01-A150-BB6E73CB8D3D"
  team-id="c0d3a43c-26e0-419e-b60c-bc3fdad6bea1"
  page="standings"
  language="nl-NL"
  no-routing
  size="normal">
</competition-widget>

12. Openbare teamleden

Spelers en staf van een team

De widget kan openbare teamleden tonen als FOYS deze informatie
voor het betreffende team beschikbaar stelt. 

<competition-widget
  federation-id="52cfa65e-9782-4a81-ab35-e2f981fcb7a9"
  club-id="485ADAD8-2A89-4A01-A150-BB6E73CB8D3D"
  team-id="c0d3a43c-26e0-419e-b60c-bc3fdad6bea1"
  page="team-members"
  language="nl-NL"
  no-routing
  size="normal">
</competition-widget>

13. Team gebruiken met team-club-id

Alternatieve teamconfiguratie

Wanneer je geen normaal
club-id gebruikt, kun je
de clubrelatie via
team-club-id meegeven. 

<competition-widget
  federation-id="52cfa65e-9782-4a81-ab35-e2f981fcb7a9"
  team-id="c0d3a43c-26e0-419e-b60c-bc3fdad6bea1"
  team-club-id="485ADAD8-2A89-4A01-A150-BB6E73CB8D3D"
  page="results"
  language="nl-NL"
  no-routing
  size="normal">
</competition-widget>

Gebruik bij voorkeur óf
club-id óf
team-club-id.

14. Compact formaat

Kleine widget

Gebruik size=”small” voor
een compactere weergave. 

<competition-widget
  federation-id="52cfa65e-9782-4a81-ab35-e2f981fcb7a9"
  club-id="485ADAD8-2A89-4A01-A150-BB6E73CB8D3D"
  page="program"
  language="nl-NL"
  no-routing
  size="small">
</competition-widget>

15. Overzicht van page-waarden

Page-waarde Gebruik Benodigde context
clubs Verenigingen zoeken en openen Federatie-ID
program Wedstrijdprogramma Federatie, club of team
results Wedstrijduitslagen Federatie, club of team
teams Teams van een vereniging Club-ID
standings Stand van een team of poule Team-GUID
team-members Openbare spelers en staf Team-GUID

16. Bekende voorbeeld-ID’s

Onderdeel Waarde
Nederlandse Basketball Bond federation-ID
52cfa65e-9782-4a81-ab35-e2f981fcb7a9
Red Stars club-ID
485ADAD8-2A89-4A01-A150-BB6E73CB8D3D
Red Stars M22-1 team-GUID
c0d3a43c-26e0-419e-b60c-bc3fdad6bea1
Red Stars M22-1 intern team-ID 50121

17. Beperkingen

Geen individuele resultaten via player-id

De publieke Competition Widget ondersteunt geen
player-id als filter voor
programma of uitslagen.

Als je een onbekend attribuut zoals
player-id toevoegt, wordt
het attribuut genegeerd. De widget kan dan algemene uitslagen
tonen.

Wat wel mogelijk is

  • Alle verenigingen binnen de federatie tonen.
  • Programma en uitslagen van een vereniging tonen.
  • Teams van een vereniging tonen.
  • Programma en uitslagen van één team tonen.
  • De stand van een team of poule tonen.
  • Openbare teamleden tonen.

18. Complete werkende voorbeeldwidget

Onderstaande code kan direct in een afzonderlijk WordPress-blok
“Aangepaste HTML” worden geplaatst. 

<link
  rel="stylesheet"
  href="https://competition-widget.foys.tech/competition-widget.css">

<div class="competition-widget">
  <competition-widget
    federation-id="52cfa65e-9782-4a81-ab35-e2f981fcb7a9"
    club-id="485ADAD8-2A89-4A01-A150-BB6E73CB8D3D"
    team-id="c0d3a43c-26e0-419e-b60c-bc3fdad6bea1"
    page="results"
    language="nl-NL"
    no-routing
    size="normal">
  </competition-widget>
</div>

<script
  type="module"
  src="https://competition-widget.foys.tech/competition-widget.js">
</script>