957cf79e45
Add a cart button in the header (right of language switcher) that displays the number of items in parentheses when cart is not empty. Button opens the cart drawer on click and count updates dynamically when items are added/removed. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
55 lines
3.9 KiB
PHP
55 lines
3.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="<?= $kirby->language()->code() ?>">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<title><?= $title ?? $page->title() ?> | Index.ngo</title>
|
|
<link rel="icon" type="image/png" href="<?= url('assets/favicon.png') ?>"/>
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="<?= url('assets/fonts/stylesheet.css') ?>?version-cache-prevent<?= rand(0, 1000)?>" />
|
|
<link rel="stylesheet" type="text/css" href="<?= url('assets/css/style.css') ?>" />
|
|
<link rel="stylesheet" type="text/css" href="<?= url('assets/css/cart-drawer.css') ?>" />
|
|
</head>
|
|
<body data-template="<?= $page->template() ?>">
|
|
<header id="site-header">
|
|
<div class="header-left"></div>
|
|
|
|
<div class="header-center">
|
|
<h1 class="site-title">
|
|
<a href="<?= $site->url() ?>" aria-label="<?= t('backToHome', 'Retour à l\'accueil') ?>">
|
|
<svg width="100%" height="100%" viewBox="0 0 162 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;">
|
|
<title>Index.ngo</title>
|
|
<g transform="matrix(1.04516,0,0,0.659091,57.4839,-6.59091)">
|
|
<rect x="-55" y="10" width="155" height="44" style="fill: none" />
|
|
<clipPath id="_clip1">
|
|
<rect x="-55" y="10" width="155" height="44" />
|
|
</clipPath>
|
|
<g clip-path="url(#_clip1)">
|
|
<g transform="matrix(0.95679,0,0,1.51724,-55,10)">
|
|
<path d="M162,29L148.198,29L141.174,20.767L134.15,29L91.184,29L91.184,0.004L120.653,0.004L120.653,7.351L102.637,7.351L102.637,10.867L120.137,10.867L120.137,18.13L102.637,18.13L102.637,21.606L120.926,21.606L120.926,28.951L134.273,14.414L120.807,0L134.56,0L141.388,7.767L147.76,0L161.201,0L148.236,13.79L161.996,28.997L162,29ZM68.58,29L54.224,29L54.224,0.004L68.637,0.004C74.672,0.004 78.31,0.004 82.046,2.045C86.259,4.379 88.674,8.889 88.674,14.417C88.674,19.406 86.862,23.405 83.427,25.975C79.463,29 75.345,29 68.58,29ZM49.819,29L38.775,29L31.499,19.815C29.746,17.735 28.088,15.545 27.307,14.495C27.387,15.813 27.524,17.238 27.524,20.499L27.524,29L15.965,29L15.965,0.004L27.009,0.004L33.798,8.349C36.223,11.121 37.709,12.993 38.393,13.881C38.347,12.615 38.26,9.911 38.26,6.84L38.26,0.004L49.819,0.004L49.819,29ZM11.559,29L0,29L0,0.004L11.559,0.004L11.559,29ZM65.784,21.818L67.904,21.818C70.918,21.818 73.067,21.818 74.728,20.531C76.074,19.491 76.845,17.308 76.845,14.541C76.845,11.526 76.084,9.541 74.525,8.476C72.895,7.411 71.461,7.224 67.578,7.224L65.784,7.224L65.784,21.818Z" style="fill-rule: nonzero" />
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</a>
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<ul id="toggle-lang">
|
|
<?php foreach($kirby->languages() as $language): ?>
|
|
<li<?= $kirby->language() == $language ? ' class="is-selected"' : '' ?>>
|
|
<a href="<?= $page->url($language->code()) ?>"><?= $language->code() === 'fr' ? 'Fr' : 'En' ?></a>
|
|
</li>
|
|
<?php endforeach ?>
|
|
</ul>
|
|
|
|
<button class="header-cart-btn" data-cart-open aria-label="<?= t('cart') ?>">
|
|
<?= t('cart') ?> <span class="header-cart-count" data-cart-count></span>
|
|
</button>
|
|
</div>
|
|
</header>
|