PR-Code

PR Code are Production Codes for all of the installed equipment in the vehicle and is used by manufacturers including VW, Audi, Seat, Skoda, Porsche, Lamborghini etc. PR Codes contain 3 characters comprising of letters and numbers.

PR codes are located on vehicle´s build sticker that is located on first pages of cars warranty booklet or there should be one in a trunk as well usually under the carpet or in spare tire area.

They are important when purchasing spare parts as they provide information about the manufacturer, make, model, year of manufacture, and other vehicle details.

Single PR-Code

Display a single PR code with tooltip showing description from API.

import:

import PrCode from 'spoko-design-system/src/components/PrCode.vue'

Basic Usage:

2JP1ZJ

<PrCode :prcode="{
  code: '2JP',
  group: 'STF',
  description: 'R-Line bumper',
  variant_category: 'R_LINE'
}" />

<PrCode :prcode="{
  code: '1ZJ',
  group: 'BAV',
  description: 'Disk brakes in front (Geomet D); 256x22mm (vented)'
}" />

Special Edition Variants (Colored):

PR codes for special editions are automatically color-coded based on their variant_category:

GTI (Red)2JD

WRC (Blue)E5M

CROSS (Orange)2JK

BlueGT2JE

Bluemotion2JZ

<!-- GTI - Red -->
<PrCode :prcode="{ code: '2JD', group: 'STF', description: 'Sports bumpers (e.g. Polo 6R/6C GTI)', variant_category: 'GTI' }" />

<!-- WRC - Blue -->
<PrCode :prcode="{ code: 'E5M', group: 'AAU', description: 'Polo WRC', variant_category: 'WRC' }" />

<!-- CROSS - Orange -->
<PrCode :prcode="{ code: '2JK', group: 'STF', description: 'Sports bumpers (e.g. Polo 6R/6C Cross)', variant_category: 'CROSS' }" />

<!-- BlueGT -->
<PrCode :prcode="{ code: '2JE', group: 'STF', description: 'Partially painted bumpers (e.g. Polo 6R/6C BlueGT)', variant_category: 'BLUEGT' }" />

<!-- Bluemotion -->
<PrCode :prcode="{ code: '2JZ', group: 'STF', description: 'Standard bumpers (e.g. Polo 6R Bluemotion)', variant_category: 'BLUEMOTION' }" />

Variant Categories:

The following variant categories are supported with automatic color coding:

Category	Color	Description	Example Codes
`GTI`	Red	GTI Performance variants	2JD, 1ZD, 1KV, 0NH, 1ZR
`WRC`	Blue	WRC/R Street variants	E5M, 1KD, 1ZP, 2JQ, TA2
`CROSS`	Orange	Cross/Offroad variants	2JK
`BLUEGT`	Accent Dark	BlueGT variants	2JE
`BLUEMOTION`	Accent Light	Bluemotion eco variants	2JZ, 7L6
`R_LINE`	Gray	R-Line styling	2JP

PR-Codes List

Display multiple PR codes from an array of objects (from API response).

import:

import ProductCodes from 'spoko-design-system/src/components/ProductCodes.vue'

Usage:

2JP1ZJ2JD

<ProductCodes :prcodes="[
  { code: '2JP', group: 'STF', description: 'R-Line bumper', variant_category: 'R_LINE' },
  { code: '1ZJ', group: 'BAV', description: 'Disk brakes in front (Geomet D); 256x22mm (vented)' },
  { code: '2JD', group: 'STF', description: 'Sports bumpers (e.g. Polo 6R/6C GTI)', variant_category: 'GTI' }
]" />

With API Data:

When using data from the API, pass the pr_codes array directly:

<ProductCodes
  :prcodes="product.pr_codes"
  :isPdp="true"
/>

API Response Structure:

{
  "pr_codes": [
    {
      "id": 1522,
      "code": "1ZP",
      "group": "BAV",
      "description": "Disk brakes in front (Geomet D); 310x25mm (vented)",
      "variant_category": "WRC"
    },
    {
      "id": 2145,
      "code": "2JD",
      "group": "STF",
      "description": "Sports bumpers (e.g. Polo 6R/6C GTI)",
      "variant_category": "GTI"
    }
  ]
}

Props

PrCode

Prop	Type	Default	Description
`prcode`*	`PrCodeObject`	`—`	PR code object — see shape below.
`isPdp`	`boolean`	`false`	Product detail page styling.

ProductCodes

Prop	Type	Default	Description
`prcodes`*	`PrCodeObject[]`	`[]`	Array of PR code objects.
`isPdp`	`boolean`	`false`	Product detail page styling.

PrCodeObject shape

interface PrCodeObject {
  code: string;              // The 3-character PR code (required)
  group?: string;            // PR code group (e.g. "BAV", "STF")
  description?: string;      // Tooltip description
  variant_category?: 'GTI' | 'WRC' | 'CROSS' | 'BLUEGT' | 'BLUEMOTION' | 'R_LINE';
}

Features

✅ Dynamic Tooltips: Shows description from API on hover
✅ Semantic Colors: Automatic color coding for special editions (GTI, WRC, etc.)
✅ Dark Mode: Supports dark mode with appropriate color adjustments
✅ Accessible: Uses semantic HTML and proper ARIA attributes
✅ Search Friendly: Includes data-pagefind-filter for search indexing
✅ Combination Support: Handles combined PR codes like “1AT+1ZR”
✅ Individual Colors: Each code in a combination gets its own color based on variant category
✅ Defensive: Gracefully handles invalid or malformed data

Notes

Tooltip setup required: Import 'spoko-design-system/scripts/tooltips' once in your layout (see Tooltips documentation)
Hover over any PR code to see its full description
Colors are based on semantic variant categories, not hardcoded per code
Combined codes are displayed as CODE+CODE with each code colored independently
The component uses a static mapping for variant categories to ensure consistent coloring
The tooltip design matches the ProductEngine component style
All 14,000+ PR codes in the database have English descriptions