ProductTile
ProductTile - product link component which can be used for carousels, section with related products, recently added etc.
It requires a container with a specific width - it’s best to set it directly in the carousel’s <swiper-slide> tag.
<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">export</span><span style="color:#F97583"> const</span><span style="color:#79B8FF"> productObject</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
<span class="line"><span style="color:#E1E4E8"> name: </span><span style="color:#9ECBFF">'Combi-instrument MFA+'</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#E1E4E8"> url: </span><span style="color:#9ECBFF">'https://google.com'</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#E1E4E8"> number: </span><span style="color:#9ECBFF">'6R0920870F'</span><span style="color:#E1E4E8">,</span></span>
<span class="line"><span style="color:#E1E4E8"> photo: </span><span style="color:#9ECBFF">'https://placehold.co/400x300'</span></span>
<span class="line"><span style="color:#E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8"><</span><span style="color:#79B8FF">ProductTile</span><span style="color:#B392F0"> productObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{productObject} /></span></span></code></pre>
Props
|
productObject* | ProductObject | — | Object describing the product — see shape below. |
index | number | — | Index within a list. When `1`, the inner `Image` is marked as hero (eager-loaded, Pagefind indexed). |
ProductObject 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"> ProductObject</span><span style="color:#E1E4E8"> {</span></span>
<span class="line"><span style="color:#FFAB70"> name</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Display name (becomes link text)</span></span>
<span class="line"><span style="color:#FFAB70"> url</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Product detail page URL</span></span>
<span class="line"><span style="color:#FFAB70"> number</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// VW product number (rendered via ProductNumber)</span></span>
<span class="line"><span style="color:#FFAB70"> photo</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> string</span><span style="color:#F97583"> |</span><span style="color:#79B8FF"> null</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Image URL — pass null to render a placeholder</span></span>
<span class="line"><span style="color:#E1E4E8">}</span></span></code></pre>