Datablock är en blocktyp som används när vi vill styra något specialblock på siten utan att behöva lägga in saker direkt i koden. De fungerar genom att man väljer vilken typ av datablock det ska vara, och sen lägger in så kalla JSON-data som inställningar. Vilka dessa inställningar är beror på vilken typ av datablock, här har vi samlat exempel och kommentarer på hur de konfigureras.

De här blocken används oftast för (nästan) alla gåvoformulär på siten, men även för gala-takeover och arvsgeneratorn. Blocken läggs in på flex-sidor som vilket annat block som helst.

Kort om JSON

JSON är ett data-format som är gjort för att vara läsbart av datorer. Det är uppbyggt av nycklar/egenskaper, och värden. Ett värde kan vara en siffra, en text, ett objekt, eller en array.

• Alla JSON omringas alltid av två måsvingar {}.
• Alla nycklar/egenskaper måste ha citattecken runt sig "nyckel"
• Nycklar/egenskaper och värden separeras av ett kolon :
• En nyckel/egenskap+värde-kombo separeras fårn nästa med ett kommatecken ,
• Värden som är siffror har inte citattecken runt sig, ex. 5
  • Här är det dock lite klurigt iom att vi ibland anger siffror som text av tekniska skäl. Exempelvis pris anges som text, följ exemplen så ska det bli rätt.
• Värden som är text har citattecken runt sig, ex. "här är en text".
• Värden som är booleaner, dvs sant eller falskt anges utan citattecken runt sig och är antingen true eller false. ex. true
• Värden som är arrayer, dvs. listor av värden, omringas av hakparanteser []
  • Värden i en array, lista av värden, separeras med komma, ec. [1, "hej", "värde"]
• Värden som är objekt, dvs en samling av andra värden, omringas av måsvingar {}
  • Inuti ett objekt följer samma regler som för hela JSON-objektet, alltså nycklar/egenskaper och värden, på samma sätt som ovan
• Mellanslag och ny rad spelar ingen roll mer än för läsbarhet för oss människor.

{
  "nyckel/egenskap": "textvärde",
  "nyckel/egenskap2": 5,
  "nyckel/egenskap3": true,
  "nyckel/egenskap4": [
    "lista", "av", "värden"
  ],
  "nyckel/egenskap5": {
    "objekt-med-egna-nycklar": "värde",
    "annan-nyckel": "värde 2"
  }
}

Formulär: Generiskt gåvobevis

Uppdaterat: 2020-06-12
Information om olika varianter tillagd, men inte släppt till produktion ännu.

Styr formuläret för det generiska gåvobeviset (i skrivande stund bara Mors dag). Alla egenskaper märkta med * är obligatoriska.

• productId*: Produkt i Middleware
• campaignActivityId: Kampanj-ID i Zobra
• gtmDetails: Objekt med data för Google Analytics, skriver över defaultvärden i koden
  
  • brand: Alltid "Cancerfonden"
  • category: Kategori i GA
  • name: Namn i GA
  • variant: Variant i GA
• prices*: Array med alternativ för belopp
• defaultPrice*: Förvalt prisalternativ
• originPath*: URLen för formulärsidan
• redirectPath*: URLen för tacksidan
• availableCustomerContactTypes*: Array med tillgängliga kontaktfält
  • "automatic": personnummer
  • "manual": manuell ifyllnad
  • "company": företag
• defaultCustomerContactType*: Förvalt kontaktsätt
• availablePaymentMethods*: Array av objekt med betalsätt (ordningen styr ordningen på flikar i formuläret)
  
  • id*: MW:s id för betalsättet
  • name*: Namnet på betalsättet
  • slug*: Kortversionen av betalsättet
• defaultPaymentMethod*: Objekt med förvalt betalsätt, samma objekt som arrayen ovan
• taxReductionInfoLink: Ankarlänk till eventuellt block på samma sida som förklarar skattereduktion, utelämnas det länkas inte texten "För skatteavdrag på din gåva är personnummer obligatoriskt"
• helpText: Text för bottenytan i sidokolumnen
• emailCopy: Hjälptext under epostfältet
• receiverEmailCopy: Hjälptext under mottagarens epostfält
• certificateInfo*: Objekt med info om gåvobeviset
  • illustration*: Länk till bild på Cloudinary som visas som illustrationen på gåvobeviset (bilder ska vara kvadratiska och läggas i mappen "gift-certificate-images")
  • variants*: Array av objekt med information om alla rubriker
    
    • heading*: Rubriken som visas i dropdown, gåvobeviset, och mina sidor när man gett en gåva
    • slug*: Url-version av rubriken, används för att länka direkt till en gåva, bör skrivas i bara små bokstäver och utan mellanslag (som en url)
    • gtmVariant*: Vad rubriken ska heta i Google analytics under "variant" i Enhanced Ecommerce.
    • hidden: Boolean (true/false) som anger om rubriken ska vara dold i listan, och alltså inte gå att välja. Kan användas om man temporärt vill avaktivera en viss variant, men inte vill ta bort den ur datablocket helt.
  • description*: Text under logotypen på gåvobeviset

Exempel:

{
  "productId": 34,
  "campaignActivityId": 2549,
  "gtmDetails": {
    "brand": "Cancerfonden",
    "category": "Test, woop",
    "name": "namnet på produkten",
    "variant": "en variant"
  },
  "prices": [
    "350",
    "500",
    "1000"
  ],
  "defaultPrice": "500",
  "originPath": "/1838-test-mors-dag-gavobevis",
  "redirectPath": "/stod-oss/kop-ett-gavobevis/tack",
  "availableCustomerContactTypes": [
    "automatic",
    "manual"
  ],
  "defaultCustomerContactType": "automatic",
  "availablePaymentMethods": [
    {
      "id": 8,
      "name": "Swish",
      "slug": "swish"
    },
    {
      "id": 2,
      "name": "Betalkort",
      "slug": "betalkort"
    },
    {
      "id": 1,
      "name": "Internetbank",
      "slug": "internetbank"
    },
    {
      "id": 5,
      "name": "Inbetalningskort",
      "slug": "inbetalningskort"
    }
  ],
  "defaultPaymentMethod": {
    "id": 8,
    "name": "Swish",
    "slug": "swish"
  },
  "taxReductionInfoLink": "#skatteavdrag",
  "helpText": "Du får ett fint gåvobevis att ge bort i present. Skriv ut eller skicka via e-post.",
  "emailCopy": "Kvitto och gåvobeviset skickas till din e-post.",
  "receiverEmailCopy": "Vi skickar gåvobeviset direkt till mottagarens e-post.",
  "certificateInfo": {
    "illustration": "https://res.cloudinary.com/cancerfonden/image/upload/v1589794138/gift-certificate-images/gift_flowers.svg",
    "variants": [
      {
      	"heading": "Grattis på mors dag!",
        "slug": "mors-dag",
        "gtmVariant": "Mors dag"
      },
      {
      	"heading": "Inaktuellt gåvobevis!",
        "slug": "inaktuellt",
        "gtmVariant": "Inaktuellt",
        "hidden": true
      },
      {
      	"heading": "Gåvobevis!",
        "slug": "standard",
        "gtmVariant": "Standard",
        "hidden": false
      }
    ],
    "description": "Du har fått en livsviktig present – en gåva till Cancerfonden. Pengarna går till Sveriges främsta cancerforskning och målet är att färre ska drabbas och fler överleva. Tillsammans besegrar vi cancer."
  }
}