Thema's

Een thema bepaalt de sfeer van de rouwkaart: kleuren, beelden en typografie. Je haalt ze op, toont ze in je eigen vormgeving en stuurt het gekozen id mee bij het aanmaken van een kaart. Of je laat de keuze aan de familie.

Het Theme-model

Name
id
Type
ID!
Description
Het globale id, bijvoorbeeld gid://rouwkaart/Theme/15367310377305. Dit stuur je terug als themeId.
Name
legacyResourceId
Type
String!
Description
Het kale nummer zoals het in onze administratie zichtbaar is. Handig om naar te verwijzen in een gesprek met ons; gebruik voor de API het globale id.
Name
title
Type
String!
Description
De naam van het thema, bijvoorbeeld "Bloemen".
Name
handle
Type
String!
Description
De naam in kleine letters met streepjes. Bruikbaar als sleutel in je eigen opslag.
Name
description
Type
String!
Description
Eén of twee zinnen die de sfeer beschrijven. Geschikt om onder de titel te zetten.
Name
images
Type
[Image!]!
Description
De beelden bij dit thema: url en altText. De eerste is doorgaans het icoon, daarna volgen voorbeelden van de kaart.
Name
videos
Type
[Video!]!
Description
Eventuele video's, met url. Vaak leeg.
Name
demoUrl
Type
URL
Description
Een ingerichte voorbeeldkaart in dit thema, of null. Zet die naast de keuze, dan ziet iemand waar hij ja tegen zegt.

images en videos zijn gewone lijsten en geen connectie. Ze kosten dus één punt, ongeacht hoeveel beelden erin zitten.

QUERYthemes

Alle thema's

Een Relay-connectie. Zie Paginering voor bladeren; in de praktijk passen alle thema's op één pagina.

Argumenten

Name
first
Type
Int
Description
Aantal regels, tussen 1 en 250. Standaard 50.
Name
after
Type
String
Description
De endCursor van de vorige pagina.
Name
last / before
Type
Int / String
Description
Voor achteruit bladeren.

Verzoek

QUERY

themes

query Themes($first: Int!) {
  themes(first: $first) {
    edges {
      cursor
      node {
        id
        title
        handle
        description
        demoUrl
        images {
          url
          altText
        }
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

Antwoord

{
  "data": {
    "themes": {
      "edges": [
        {
          "cursor": "eyJsYXN0X2lkIjoxNTM2NzMxMDM3NzMwNX0=",
          "node": {
            "id": "gid://rouwkaart/Theme/15367310377305",
            "title": "Bloemen",
            "handle": "bloemen",
            "description": "Getekende bloemen in aquarel.",
            "demoUrl": "https://memoriam.rouwkaart-online.nl/memoriam/elena-van-vliet-1938-03-14",
            "images": [
              {
                "url": "https://cdn.shopify.com/s/files/1/bloemen-icon.png",
                "altText": "Thema Bloemen voor de online rouwkaart"
              },
              {
                "url": "https://cdn.shopify.com/s/files/1/bloemen-cover.png",
                "altText": "Online rouwkaart in het bloementhema"
              }
            ]
          }
        }
      ],
      "pageInfo": {
        "hasNextPage": true,
        "endCursor": "eyJsYXN0X2lkIjoxNTM2NzMxMDM3NzMwNX0="
      }
    }
  }
}

QUERYtheme

Eén thema

Op zijn globale id. Het kale nummer wordt ook geaccepteerd, zodat je niet hoeft te vertalen als je dat ergens hebt opgeslagen.

Bestaat het thema niet, dan krijg je null, geen fout.

Argumenten

Name
id
Type
ID!
Description
gid://rouwkaart/Theme/15367310377305 of 15367310377305.

Verzoek

QUERY

theme

query Theme($id: ID!) {
  theme(id: $id) {
    id
    title
    description
    demoUrl
  }
}

Antwoord

{
  "data": {
    "theme": {
      "id": "gid://rouwkaart/Theme/15367310377305",
      "title": "Bloemen",
      "description": "Getekende bloemen in aquarel.",
      "demoUrl": "https://memoriam.rouwkaart-online.nl/memoriam/elena-van-vliet-1938-03-14"
    }
  }
}

Het thema van een kaart

Vanaf een kaart kun je direct doorlopen naar het thema. Dat is het enige stuk echte graaf in dit schema, en meteen waar GraphQL hier iets oplevert: laat je theme weg, dan doen wij ook geen verzoek aan onze productcatalogus.

Is er nog geen thema gekozen, dan is theme null, en opent de customiser met een wizard waarin de familie zelf kiest.

Verzoek

QUERY

card.theme

query CardTheme($id: ID!) {
  card(id: $id) {
    status
    theme {
      title
      handle
      images {
        url
      }
    }
  }
}

Antwoord

{
  "data": {
    "card": {
      "status": "DRAFT",
      "theme": {
        "title": "Bloemen",
        "handle": "bloemen",
        "images": [
          { "url": "https://cdn.shopify.com/s/files/1/bloemen-icon.png" }
        ]
      }
    }
  }
}

Thema's tonen in je eigen dossier

Een paar dingen die in de praktijk goed werken:

Toon images[0] als vierkante afbeelding en title eronder. Meer is niet nodig om een keuze te maken.
Zet demoUrl erbij als "Bekijk voorbeeld", openend in een nieuwe tab.
Cache de lijst gerust een uur. Thema's veranderen zelden, en het scheelt je punten.
Bied ook "laat de familie kiezen" aan. Dan laat je themeId weg bij het aanmaken en opent de customiser met een wizard.