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:
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> PrCode </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> 'spoko-design-system/src/components/PrCode.vue'</span></span></code></pre>
Basic Usage:
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="vue"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">PrCode</span><span style="color:#E1E4E8"> :</span><span style="color:#B392F0">prcode</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"</span><span style="color:#E1E4E8">{</span></span>
<span class="line"><span style="color:#E1E4E8"> code: </span><span style="color:#9ECBFF">'2JP'</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#E1E4E8"> group: </span><span style="color:#9ECBFF">'STF'</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#E1E4E8"> description: </span><span style="color:#9ECBFF">'R-Line bumper'</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#E1E4E8"> variant_category: </span><span style="color:#9ECBFF">'R_LINE'</span></span>
<span class="line"><span style="color:#E1E4E8">}</span><span style="color:#9ECBFF">"</span><span style="color:#E1E4E8"> /></span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8"><PrCode :prcode="{</span></span>
<span class="line"><span style="color:#E1E4E8"> code: '1ZJ',</span></span>
<span class="line"><span style="color:#E1E4E8"> group: 'BAV',</span></span>
<span class="line"><span style="color:#E1E4E8"> description: 'Disk brakes in front (Geomet D); 256x22mm (vented)'</span></span>
<span class="line"><span style="color:#E1E4E8">}" /></span></span></code></pre>
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
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:
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> ProductCodes </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> 'spoko-design-system/src/components/ProductCodes.vue'</span></span></code></pre>
Usage:
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="vue"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">ProductCodes</span><span style="color:#E1E4E8"> :</span><span style="color:#B392F0">prcodes</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"</span><span style="color:#E1E4E8">[</span></span>
<span class="line"><span style="color:#E1E4E8"> { code: </span><span style="color:#9ECBFF">'2JP'</span><span style="color:#E1E4E8">, group: </span><span style="color:#9ECBFF">'STF'</span><span style="color:#E1E4E8">, description: </span><span style="color:#9ECBFF">'R-Line bumper'</span><span style="color:#E1E4E8">, variant_category: </span><span style="color:#9ECBFF">'R_LINE'</span><span style="color:#E1E4E8"> },</span></span>
<span class="line"><span style="color:#E1E4E8"> { code: </span><span style="color:#9ECBFF">'1ZJ'</span><span style="color:#E1E4E8">, group: </span><span style="color:#9ECBFF">'BAV'</span><span style="color:#E1E4E8">, description: </span><span style="color:#9ECBFF">'Disk brakes in front (Geomet D); 256x22mm (vented)'</span><span style="color:#E1E4E8"> },</span></span>
<span class="line"><span style="color:#E1E4E8"> { code: </span><span style="color:#9ECBFF">'2JD'</span><span style="color:#E1E4E8">, group: </span><span style="color:#9ECBFF">'STF'</span><span style="color:#E1E4E8">, description: </span><span style="color:#9ECBFF">'Sports bumpers (e.g. Polo 6R/6C GTI)'</span><span style="color:#E1E4E8">, variant_category: </span><span style="color:#9ECBFF">'GTI'</span><span style="color:#E1E4E8"> }</span></span>
<span class="line"><span style="color:#E1E4E8">]</span><span style="color:#9ECBFF">"</span><span style="color:#E1E4E8"> /></span></span></code></pre>
With API Data:
When using data from the API, pass the pr_codes array directly:
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="vue"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">ProductCodes</span></span>
<span class="line"><span style="color:#E1E4E8"> :</span><span style="color:#B392F0">prcodes</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"</span><span style="color:#E1E4E8">product.pr_codes</span><span style="color:#9ECBFF">"</span></span>
<span class="line"><span style="color:#E1E4E8"> :</span><span style="color:#B392F0">isPdp</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"</span><span style="color:#79B8FF">true</span><span style="color:#9ECBFF">"</span></span>
<span class="line"><span style="color:#E1E4E8">/></span></span></code></pre>
API Response Structure:
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="json"><code><span class="line"><span style="color:#E1E4E8">{</span></span>
<span class="line"><span style="color:#79B8FF"> "pr_codes"</span><span style="color:#E1E4E8">: [</span></span>
<span class="line"><span style="color:#E1E4E8"> {</span></span>
<span class="line"><span style="color:#79B8FF"> "id"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1522</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#79B8FF"> "code"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"1ZP"</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#79B8FF"> "group"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"BAV"</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#79B8FF"> "description"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"Disk brakes in front (Geomet D); 310x25mm (vented)"</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#79B8FF"> "variant_category"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"WRC"</span></span>
<span class="line"><span style="color:#E1E4E8"> },</span></span>
<span class="line"><span style="color:#E1E4E8"> {</span></span>
<span class="line"><span style="color:#79B8FF"> "id"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">2145</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#79B8FF"> "code"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"2JD"</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#79B8FF"> "group"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"STF"</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#79B8FF"> "description"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"Sports bumpers (e.g. Polo 6R/6C GTI)"</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#79B8FF"> "variant_category"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"GTI"</span></span>
<span class="line"><span style="color:#E1E4E8"> }</span></span>
<span class="line"><span style="color:#E1E4E8"> ]</span></span>
<span class="line"><span style="color:#E1E4E8">}</span></span></code></pre>
Props
PrCode
|
prcode* | PrCodeObject | — | PR code object — see shape below. |
isPdp | boolean | false | Product detail page styling. |
ProductCodes
|
prcodes* | PrCodeObject[] | [] | Array of PR code objects. |
isPdp | boolean | false | Product detail page styling. |
PrCodeObject shape
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#F97583">interface</span><span style="color:#B392F0"> PrCodeObject</span><span style="color:#E1E4E8"> {</span></span>
<span class="line"><span style="color:#FFAB70"> code</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// The 3-character PR code (required)</span></span>
<span class="line"><span style="color:#FFAB70"> group</span><span style="color:#F97583">?:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// PR code group (e.g. "BAV", "STF")</span></span>
<span class="line"><span style="color:#FFAB70"> description</span><span style="color:#F97583">?:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Tooltip description</span></span>
<span class="line"><span style="color:#FFAB70"> variant_category</span><span style="color:#F97583">?:</span><span style="color:#9ECBFF"> 'GTI'</span><span style="color:#F97583"> |</span><span style="color:#9ECBFF"> 'WRC'</span><span style="color:#F97583"> |</span><span style="color:#9ECBFF"> 'CROSS'</span><span style="color:#F97583"> |</span><span style="color:#9ECBFF"> 'BLUEGT'</span><span style="color:#F97583"> |</span><span style="color:#9ECBFF"> 'BLUEMOTION'</span><span style="color:#F97583"> |</span><span style="color:#9ECBFF"> 'R_LINE'</span><span style="color:#E1E4E8">;</span></span>
<span class="line"><span style="color:#E1E4E8">}</span></span></code></pre>
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