ldc-boutique-cnc/integration/partials/cart-panel.php
Olivier Legat d93553b396 Squashed commit of the following:
commit a962eca9b609623804bd8cfe57c246a61e77a382
Author: Olivier Legat <olivier.legat@ldc.fr>
Date:   Thu Mar 4 17:41:46 2021 +0100

    responsive

commit a44ff3bde60c2af1db3169115a90741b8e868037
Author: Olivier Legat <olivier.legat@ldc.fr>
Date:   Wed Mar 3 17:50:58 2021 +0100

    end tunnel

commit 4c40e47ae861909f76b92b0440d48b378ee621c2
Author: Olivier Legat <olivier.legat@ldc.fr>
Date:   Tue Mar 2 18:10:17 2021 +0100

    heure de collecte

commit e05d598006060880f79573108e0c66fccfcfc62c
Author: Olivier Legat <olivier.legat@ldc.fr>
Date:   Mon Mar 1 17:47:48 2021 +0100

    tunnel page 3

commit b85f96a655e868096aa42e9f99b2f67c49a041c3
Author: Olivier Legat <olivier.legat@ldc.fr>
Date:   Fri Feb 26 13:16:05 2021 +0100

    Tunnel d'achat start

commit cdf9a38e8f5d38ffcc1728415f0b58b22ff455df
Author: Olivier Legat <olivier.legat@ldc.fr>
Date:   Thu Feb 25 20:35:44 2021 +0100

    cart full

commit 9db34a8ab6881b1b88adebaa6426b6944608de47
Author: Olivier Legat <olivier.legat@ldc.fr>
Date:   Wed Feb 24 17:40:18 2021 +0100

    work in progress - cart panel

commit 0a698cb62eb26b52f3b48f5ac8a39b89c34617f4
Author: Olivier Legat <olivier.legat@ldc.fr>
Date:   Tue Feb 23 17:05:13 2021 +0100

    sassification des css

commit 5c277ae10d9ae8e0225a0f7d57d81146e43da146
Author: Olivier Legat <olivier.legat@ldc.fr>
Date:   Tue Feb 23 16:37:01 2021 +0100

    integration bato
2021-03-05 11:49:20 +01:00

672 lines
70 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div id="basket-panel" class="basket-panel preload">
<div class="basket-panel__mask"></div>
<div id="basket-panel__drawer" class="basket-panel__drawer">
<!-- panier vide
<div class="basket-panel--empty">
<div class="basket-panel__header basket-panel__header--empty">
<button class="basket-panel__close">
<span>Fermer</span>
</button>
</div>
<div class="empty-basket">
<svg id="icon-basket-empty" viewBox="0 0 105 104" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon icon-basket-empty">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-97.000000, -158.000000)">
<g transform="translate(0.000000, 106.000000)">
<g transform="translate(24.000000, 24.000000)">
<g transform="translate(64.000000, 0.000000)">
<g transform="translate(9.000000, 28.000000)">
<ellipse fill="#D1D0CF" fill-rule="nonzero" opacity="0.55" cx="66.8073257" cy="99.9229657" rx="31.9939371" ry="3.8088"></ellipse>
<path d="M60.72498,75.7225057 C60.6153257,75.7225057 60.50484,75.7275286 60.3935143,75.7367343 C58.3419203,75.9150845 56.8088142,77.7000529 56.9421803,79.7550615 C57.0755464,81.8100701 58.8265029,83.381909 60.8839399,83.293591 C62.9413768,83.205273 64.5511943,81.4891687 64.5079668,79.4302908 C64.4647393,77.3714129 62.7843108,75.7243895 60.72498,75.7225057 Z" fill="#FEE2A2" fill-rule="nonzero"></path>
<path d="M67.4825143,78.9167 C67.1623695,75.2609992 63.9936654,72.5223307 60.3301407,72.7349996 C56.666616,72.9476685 53.8360896,76.0345943 53.9410992,79.7027838 C54.0461088,83.3709734 57.0485945,86.290917 60.7182857,86.2936571 C60.9149914,86.2936571 61.1142171,86.2852829 61.3142657,86.2677029 C65.0455789,85.9373988 67.8051492,82.6486842 67.4825143,78.9167 L67.4825143,78.9167 Z M60.72498,75.7225057 C62.7822657,75.7244759 64.4609671,77.3699124 64.5041075,79.4267467 C64.5472479,81.483581 62.9390159,83.1979583 60.8836221,83.2861886 C58.8282283,83.3744189 57.0789994,81.8041647 56.9457217,79.7511997 C56.812444,77.6982346 58.3439652,75.9149954 60.3935143,75.7367343 C60.5048571,75.7275286 60.6153257,75.7225057 60.72498,75.7225057 L60.72498,75.7225057 Z" id="Shape" fill="#095BA5" fill-rule="nonzero"></path>
<path d="M85.3670057,74.0174257 C85.2565114,74.0174257 85.1460171,74.0216171 85.03386,74.0316543 C82.9819563,74.2100227 81.4485421,75.9951432 81.5817019,78.0504759 C81.7148617,80.1058086 83.465797,81.6781444 85.5235628,81.5902577 C87.5813286,81.502371 89.1918241,79.7864694 89.1492531,77.7272676 C89.1066822,75.6680659 87.4266456,74.0201911 85.3670057,74.0174257 Z" fill="#FEE2A2" fill-rule="nonzero"></path>
<path d="M92.1237,77.21162 C91.8041941,73.5554324 88.6354676,70.8159573 84.9714933,71.0282865 C81.307519,71.2406158 78.4764495,74.3277824 78.5814201,77.9964024 C78.6863908,81.6650224 81.6893508,84.5852592 85.3594714,84.5877371 C85.5561771,84.5877371 85.7553943,84.5793714 85.9554514,84.5617914 C89.6862934,84.2312527 92.4456064,80.9432167 92.1237,77.21162 L92.1237,77.21162 Z M85.3670057,74.0174257 C87.4240987,74.0202982 89.1019847,75.6661962 89.1444478,77.7228528 C89.1869109,79.7795095 87.5783904,81.4932608 85.5231691,81.5810388 C83.4679477,81.6688168 81.7191636,80.0984551 81.5861133,78.0456674 C81.453063,75.9928797 82.9845031,74.2099122 85.03386,74.0316543 C85.146,74.0216171 85.2565114,74.0174257 85.3670057,74.0174257 L85.3670057,74.0174257 Z" id="Shape" fill="#095BA5" fill-rule="nonzero"></path>
<path d="M67.9645714,7.97827143 L68.5451057,1.70578571 C68.5973175,1.14173888 68.9464786,0.648392791 69.4610634,0.411586133 C69.9756482,0.174779475 70.577479,0.230488817 71.039852,0.55772899 C71.502225,0.884969162 71.7548947,1.4340246 71.7026829,1.99807143 L71.1221314,8.27054857 C71.0735147,8.83570804 70.7266747,9.33183778 70.2125852,9.5715893 C69.6984957,9.81134082 69.0954891,9.75818287 68.6312728,9.43218895 C68.1670565,9.10619503 67.9123637,8.55703727 67.9633714,7.99208857 L67.96464,7.97832286 L67.9645714,7.97827143 Z" fill="#FFCCBD" fill-rule="nonzero"></path>
<path d="M77.1094286,9.90088571 L80.0137371,4.31104571 C80.4184016,3.53584377 81.3742995,3.23463343 82.1502783,3.63780618 C82.9262571,4.04097894 83.2293053,4.99629581 82.8276257,5.77304857 L79.9233086,11.36288 C79.5193836,12.1395112 78.5624792,12.4418306 77.7856784,12.038232 C77.0088777,11.6346333 76.7061562,10.677856 77.1094286,9.90088571 Z" fill="#FFCCBD" fill-rule="nonzero"></path>
<path d="M60.72294,10.45958 C60.3205914,10.5816972 59.8862111,10.53898 59.5153582,10.3408257 C59.1445053,10.1426714 58.8675584,9.80531194 58.7454429,9.40296286 L58.7453743,9.40272286 L56.9163857,3.37478 C56.6650774,2.53782893 57.1383473,1.65532818 57.9745681,1.40160026 C58.8107888,1.14787235 59.6946547,1.618588 59.9508,2.45407143 L61.7797886,8.48202286 C62.034079,9.31986789 61.5610158,10.2052189 60.7231714,10.4595114 L60.72294,10.45958 Z" fill="#FFCCBD" fill-rule="nonzero"></path>
<path d="M54.5468057,13.72802 C54.2405639,14.0161422 53.8324087,14.1708093 53.4121299,14.1579963 C52.991851,14.1451832 52.5938758,13.9659396 52.3057543,13.6596971 L52.3055914,13.6595257 L47.9894743,9.07124 C47.3939486,8.43281183 47.4266116,7.4330694 48.0625396,6.83487461 C48.6984676,6.23667983 49.6983381,6.26515479 50.2991914,6.89857143 L54.6153086,11.4868571 C55.215283,12.1245712 55.18469,13.1279157 54.5469771,13.7278914 L54.5468057,13.72802 Z" fill="#FFCCBD" fill-rule="nonzero"></path>
<path d="M102.496466,20.7774714 C101.176696,19.3739105 99.2874161,18.6511315 97.3678371,18.81542 L36.4152771,23.8871429 C34.0360432,24.0735451 31.8918619,25.3934501 30.6538371,27.4337429 C30.6421114,27.4521543 30.6312343,27.4706 30.6203486,27.4889857 L29.7774429,25.4336 L26.0985857,17.40584 C24.8631842,14.3865739 22.4304508,12.0152173 19.3806086,10.8573543 C19.2355106,9.29582331 18.1587245,7.97791436 16.6574657,7.52442286 L5.43926571,4.14396286 C3.39963316,3.52911608 1.24775249,4.68413316 0.632905714,6.72376571 C0.018058937,8.76339827 1.17307602,10.9152789 3.21270857,11.5301257 L14.4309,14.91056 C15.895449,15.3549549 17.4839357,14.8842165 18.4698943,13.7136286 C20.6902631,14.6144705 22.4502183,16.377494 23.3471914,18.5994286 L27.0260486,26.6271886 L29.92812,33.7078229 C29.9808514,33.8647714 30.0386057,34.0207429 30.1013829,34.1757371 L31.3787314,37.3105057 C31.4133271,37.3949714 31.455343,37.4762036 31.5042857,37.5532486 L42.5433429,64.4833914 C43.6104623,67.1123374 46.1664564,68.8304612 49.0037229,68.8260286 C49.2088029,68.8260286 49.4163857,68.8168143 49.6248171,68.7984029 L93.0561771,64.9990143 C96.2940927,64.7252758 98.9133024,62.2505026 99.3700714,59.0333 L104.150486,26.01572 C104.43193,24.1083549 103.822202,22.177356 102.496466,20.7774714 Z M64.1744657,64.5144629 L54.8674886,25.36238 L80.1663857,23.2572371 L77.8059,63.3219629 L64.1744657,64.5144629 Z M49.3636371,65.81012 C47.6203783,65.9657102 45.979622,64.9656964 45.3189943,63.3449771 L32.7514886,32.6891429 C32.3456441,31.3885638 32.5522698,29.9740603 33.3131857,28.8439176 C34.0741015,27.7137748 35.3069939,26.9902482 36.6647143,26.8770629 L51.8443714,25.6139514 L61.1544943,64.7786429 L49.3636371,65.81012 Z M101.182286,25.5855114 L96.4010314,58.6030829 C96.1399459,60.4404711 94.6442385,61.8539057 92.7950314,62.0107314 L80.8268571,63.0577143 L83.1865114,23.0058971 L97.6189886,21.8049371 C98.6271159,21.7196868 99.6190517,22.0990713 100.312986,22.8353072 C101.006921,23.5715431 101.327014,24.584168 101.182329,25.5854943 L101.182286,25.5855114 Z" fill="#095BA5" fill-rule="nonzero"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<h2 class="title">Votre panier est vide...</h2>
<div class="cart-item__text">
Besoin d’idées pour commencer ?
</div>
<button class="btn btn_blue">Voir mes achats fréquents</button>
<div class="empty-basket__action">
<button class="btn btn_white">
<span class="">Commencer mes courses</span>
</button>
<button class="btn btn_white">
<span class="">voir les promotions</span>
</button>
</div>
</div>
</div>
-->
<!-- panier en avec produits -->
<div class="basket-panel__header">
<div class="basket-panel__title-wrapper">
<span class="title title_medium">
Aperçu panier
</span>
</div>
<button id="close-panel" class="basket-panel__close">
<span>Fermer</span>
</button>
</div>
<div class="message-box">
<div class="message-box__inner">
<div class="message-box__heading message-box__icon message-box__icon--low">
Vous n’êtes pas connecté
</div>
<div class="message-box__body">
Connectez-vous ou créez votre compte pour passer votre commande
</div>
<a href="#" target="" class="message-box__alert-title">
</a>
<div class="message-box__actions">
<div><a href="/mon-compte/login">
Me connecter
</a> <a href="/mon-compte/inscription">
Créer mon compte
</a></div>
</div>
</div>
</div>
<div class="no-slot-alert">
</div>
<div class="basket-panel__content basket-panel__content--smooth-scroll">
<section class="cart-tile cart-tile--open" drivetype="drive">
<div class="cart-tile__top"></div>
<div>
<div class="cart-tile__header">
<section class="cart-tile__inner-content cart-tile__inner-content-row">
<div class="cart-tile__informations"><svg aria-hidden="true" class="svg-icon svg-icon--l svg-icon--color-interactive-1">
<use xlink:href="#i41"></use>
</svg>
<div class="cart-tile__title">
<h2 class="ds-title cart-tile__title-delivery-mode ds-title--light ds-title--xs ds-title--secondary">
Vendu et préparé par
</h2>
<div class="cart-tile__title-seller">
<h2 class="ds-title ds-title--bold ds-title--s ds-title--secondary">
Carrefour Drive
</h2>
</div>
</div>
</div>
</section>
</div>
<div class="cart-tile__warning">
</div>
</div>
<div class="cart-tile__products">
<div id="basket-available-list" class="basket-summary-list" is-panel="true">
<div class="basket-products-list basket-products-list--without-padding">
<div class="basket-products-list__inner">
<div class="basket-products-list--first">
<div class="category-heading basket-products-list__category" id="boissons">
<div class="category-heading__header category-heading__header--collapsable">
<h2 class="category-heading__title title title_xs">
Boissons
</h2>
<div class="category-heading__left-content">
<div class="ds-badge category-heading__badge" data-testid="category-quantity-badge">
1
</div> <span class="ds-chevron category-heading__chevron ds-chevron--s"></span>
</div>
</div>
<div>
<ol>
<li class="basket-products-list__product-card basket-products-list__product-card--no-margin">
<article class="ds-product-card--largehorizontal ds-product-card" id="3560070820542">
<div class="ds-product-card--largehorizontal-icons">
<div title="Supprimer" class="product-card-delete"></div>
</div>
<div class="ds-product-card--largehorizontal-highlightlabel">
<div class="product-card-highlightlabel product-card-highlightlabel--fid">
<span class="ds-body-text ds-body-text--weight-bold ds-body-text--size-s ds-body-text--color-inherit">
Avantages fidélité
</span>
</div>
</div>
<div class="ds-product-card--largehorizontal-infos">
<div class="ds-product-card--largehorizontal-infos-main">
<div class="ds-product-card--largehorizontal-left">
<div class="ds-product-card--largehorizontal-image"><a href="/p/jus-d-orange-bio-pur-jus-sans-pulpe-carrefour-bio-3560070820542" title="Jus d'orange bio pur jus sans pulpe CARREFOUR BIO" target="_self" class="product-card-image"><img src="/media/200x200/Photosite/PGC/BOISSONS/3560070820542_PHOTOSITE_20180410_164911_0.jpg?placeholder=1" data-src="/media/200x200/Photosite/PGC/BOISSONS/3560070820542_PHOTOSITE_20180410_164911_0.jpg?placeholder=1" alt="Jus d'orange bio pur jus sans pulpe CARREFOUR BIO" importance="low" class="image image--hidden product-card-image__image image--loaded"></a>
</div>
<div class="ds-product-card--largehorizontal-badges">
<ul class="product-badges-list">
<li data-flag-id="flag.common.organic" class="product-badges-list__item"><a href="#flag.common.organic" data-testid="product-badge-link" class="product-badge__link product-badge--flag-common.organ product-badge--size-m">
<picture class="product-badge__icon"><img src="/images/badges/flag-common-organic.svg" alt="Produit Bio" importance="low" class="image product-badge__icon__img"></picture> <span class="product-badge__title">Produit Bio</span>
</a></li>
</ul>
<div class="ds-format ds-product-card__shimzone--small">
1L
</div>
</div>
</div>
<div>
<div class="ds-product-card__shimzone--large"><a href="/p/jus-d-orange-bio-pur-jus-sans-pulpe-carrefour-bio-3560070820542" title="Jus d'orange bio pur jus sans pulpe CARREFOUR BIO" target="_self" class="product-card-title product-card-title__reduced-line-clamp" render-context="[object Object]">
<h2 class="ds-title ds-title--medium ds-title--s">
Jus d'orange bio pur jus sans pulpe CARREFOUR BIO
</h2>
</a></div>
<div class="ds-product-card__shimzone--medium">
<div class="ds-body-text ds-product-card__packaging ds-body-text--size-s ds-body-text--color-standard-3">
la brique d'1L
</div>
</div>
<div class="ds-product-card__shimzone--small">
<div class="ds-body-text ds-product-card__perunitlabel ds-body-text--size-s ds-body-text--color-standard-3">
1.65 € / Litre
</div>
</div>
</div>
</div>
<div class="ds-product-card--largehorizontal-infos-sec">
<div class="ds-product-card--largehorizontal-promotion">
<div>
<div class="promotion-description promotion-description--loyalty">
<div class="promotion-description__labels">
<p title="20% d'économies" class="promotion-label"><span class="promotion-label__txt">20% d'économies</span></p>
</div> <svg focusable="false" class="promotion-description__icon-info">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info"></use>
</svg>
</div>
<section class="promotion-slide" style="display: none;">
<header class="promotion-slide__header promotion-slide__header--loyalty">
<p class="promotion-slide__header-txt"><svg focusable="false" class="promotion-slide__icon-promo">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-carrefour-loyalty-card-hightlighted"></use>
</svg>
<span class="promotion-slide__header-label">
Cagnottés sur la carte
</span>
<span class="promotion-slide__header-discount">0,01€</span>
</p>
</header>
<p class="promotion-slide__txt"><span><b>20% d'économies</b><br></span>
<span class="promotion-slide__end-date">Offre valable jusqu'au 09/03/2021</span>
</p>
</section>
</div>
</div>
<div class="ds-product-card--largehorizontal-pricing">
<div class="product-card-price">
<div class="product-card-price__price"><span class="ds-title product-card-price__price--final ds-title--m product-card-price__discount--fid">
1,65€
</span>
</div>
</div>
<div class="ds-product-card--largehorizontal-cta">
<div class="product-card-cta">
<div id="data-produit-acheter" class="add-to-cart">
<div class="pl-button-counter add-to-cart__counter"><button type="button" class="pl-button-counter__action"><svg aria-hidden="true" class="svg-icon svg-icon--s">
<use xlink:href="#i10"></use>
</svg></button>
<div class="pl-button-counter__value">
1
</div> <button type="button" class="pl-button-counter__action"><svg aria-hidden="true" class="svg-icon svg-icon--s">
<use xlink:href="#i09"></use>
</svg></button>
</div>
</div>
</div>
<div class="promotion-feedback promotion-feedback--no-text promotion-feedback--text-only"><span class="promotion-feedback__content">
</span></div>
</div>
</div>
</div>
</div>
</article>
</li>
</ol>
</div>
</div>
</div>
<div class="">
<div class="category-heading basket-products-list__category" id="bébé">
<div class="category-heading__header category-heading__header--collapsable">
<h2 class="category-heading__title title title_xs">
Bébé
</h2>
<div class="category-heading__left-content">
<div class="ds-badge category-heading__badge" data-testid="category-quantity-badge">
1
</div> <span class="ds-chevron category-heading__chevron ds-chevron--s"></span>
</div>
</div>
<div>
<ol>
<li class="basket-products-list__product-card basket-products-list__product-card--no-margin">
<article class="ds-product-card--largehorizontal ds-product-card" id="8001841529783">
<div class="ds-product-card--largehorizontal-icons">
<div title="Supprimer" class="product-card-delete"></div>
</div>
<div class="ds-product-card--largehorizontal-highlightlabel">
<div class="product-card-highlightlabel product-card-highlightlabel--fid">
<span class="ds-body-text ds-body-text--weight-bold ds-body-text--size-s ds-body-text--color-inherit">
Avantages fidélité
</span>
</div>
</div>
<div class="ds-product-card--largehorizontal-infos">
<div class="ds-product-card--largehorizontal-infos-main">
<div class="ds-product-card--largehorizontal-left">
<div class="ds-product-card--largehorizontal-image"><a href="/p/couches-culottes-taille-5-12-17kg-pampers-8001841529783" title="Couches culottes taille 5 : 12 - 17kg PAMPERS" target="_self" class="product-card-image"><img src="/media/200x200/Photosite/PGC/PARFUMERIE_HYGIENE/8001841529783_PHOTOSITE_20210202_170251_0.jpg?placeholder=1" data-src="/media/200x200/Photosite/PGC/PARFUMERIE_HYGIENE/8001841529783_PHOTOSITE_20210202_170251_0.jpg?placeholder=1" alt="Couches culottes taille 5 : 12 - 17kg PAMPERS" importance="low" class="image image--hidden product-card-image__image image--loaded"></a>
</div>
</div>
<div>
<div class="ds-product-card__shimzone--large"><a href="/p/couches-culottes-taille-5-12-17kg-pampers-8001841529783" title="Couches culottes taille 5 : 12 - 17kg PAMPERS" target="_self" class="product-card-title product-card-title__reduced-line-clamp" render-context="[object Object]">
<h2 class="ds-title ds-title--medium ds-title--s">
Couches culottes taille 5 : 12 - 17kg PAMPERS
</h2>
</a></div>
<div class="ds-product-card__shimzone--medium">
<div class="ds-body-text ds-product-card__packaging ds-body-text--size-s ds-body-text--color-standard-3">
le paquet de 88 couches
</div>
</div>
<div class="ds-product-card__shimzone--small">
<div class="ds-body-text ds-product-card__perunitlabel ds-body-text--size-s ds-body-text--color-standard-3">
0.36 € / Pièce
</div>
</div>
</div>
</div>
<div class="ds-product-card--largehorizontal-infos-sec">
<div class="ds-product-card--largehorizontal-promotion">
<div>
<div class="promotion-description promotion-description--loyalty">
<div class="promotion-description__labels">
<p title="70% d'économies" class="promotion-label"><span class="promotion-label__txt">70% d'économies</span></p>
</div> <svg focusable="false" class="promotion-description__icon-info">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info"></use>
</svg>
</div>
<section class="promotion-slide" style="display:none;">
<header class="promotion-slide__header promotion-slide__header--loyalty">
<p class="promotion-slide__header-txt"><svg focusable="false" class="promotion-slide__icon-promo">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-carrefour-loyalty-card-hightlighted"></use>
</svg>
<span class="promotion-slide__header-label">
Cagnottés sur la carte
</span>
<span class="promotion-slide__header-discount">0,01€</span>
</p>
</header>
<p class="promotion-slide__txt"><span><b>70% d'économies</b><br></span>
<span class="promotion-slide__end-date">Offre valable jusqu'au 02/03/2021</span>
</p>
</section>
</div>
</div>
<div class="ds-product-card--largehorizontal-pricing">
<div class="product-card-price">
<div class="product-card-price__price"><span class="ds-title product-card-price__price--final ds-title--m product-card-price__discount--fid">
31,50€
</span>
</div>
</div>
<div class="ds-product-card--largehorizontal-cta">
<div class="product-card-cta">
<div id="data-produit-acheter" class="add-to-cart">
<div class="pl-button-counter add-to-cart__counter"><button type="button" class="pl-button-counter__action"><svg aria-hidden="true" class="svg-icon svg-icon--s">
<use xlink:href="#i10"></use>
</svg></button>
<div class="pl-button-counter__value">
1
</div> <button type="button" class="pl-button-counter__action"><svg aria-hidden="true" class="svg-icon svg-icon--s">
<use xlink:href="#i09"></use>
</svg></button>
</div>
</div>
</div>
<div class="promotion-feedback promotion-feedback--no-text promotion-feedback--text-only"><span class="promotion-feedback__content">
</span></div>
</div>
</div>
</div>
</div>
</article>
</li>
</ol>
</div>
</div>
</div>
<div class="">
<div class="category-heading basket-products-list__category" id="entretien_et_nettoyage">
<div class="category-heading__header category-heading__header--collapsable">
<h2 class="category-heading__title title title_xs">
Entretien et Nettoyage
</h2>
<div class="category-heading__left-content">
<div class="ds-badge category-heading__badge" data-testid="category-quantity-badge">
1
</div> <span class="ds-chevron category-heading__chevron ds-chevron--s"></span>
</div>
</div>
<div>
<ol>
<li class="basket-products-list__product-card basket-products-list__product-card--no-margin">
<article class="ds-product-card--largehorizontal ds-product-card" id="8001841775326">
<div class="ds-product-card--largehorizontal-icons">
<div title="Supprimer" class="product-card-delete"></div>
</div>
<div class="ds-product-card--largehorizontal-highlightlabel">
<div class="product-card-highlightlabel product-card-highlightlabel--fid">
<span class="ds-body-text ds-body-text--weight-bold ds-body-text--size-s ds-body-text--color-inherit">
Avantages fidélité
</span>
</div>
</div>
<div class="ds-product-card--largehorizontal-infos">
<div class="ds-product-card--largehorizontal-infos-main">
<div class="ds-product-card--largehorizontal-left">
<div class="ds-product-card--largehorizontal-image"><a href="/p/lessive-en-capsule-alpine-all-in-1-ariel-8001841775326" title="Lessive en capsule alpine all in 1 ARIEL" target="_self" class="product-card-image"><img src="/media/200x200/Photosite/PGC/DROGUERIE/8001841775326_PHOTOSITE_20201222_190649_0.jpg?placeholder=1" data-src="/media/200x200/Photosite/PGC/DROGUERIE/8001841775326_PHOTOSITE_20201222_190649_0.jpg?placeholder=1" alt="Lessive en capsule alpine all in 1 ARIEL" importance="low" class="image image--hidden product-card-image__image image--loaded"></a>
</div>
</div>
<div>
<div class="ds-product-card__shimzone--large"><a href="/p/lessive-en-capsule-alpine-all-in-1-ariel-8001841775326" title="Lessive en capsule alpine all in 1 ARIEL" target="_self" class="product-card-title product-card-title__reduced-line-clamp" render-context="[object Object]">
<h2 class="ds-title ds-title--medium ds-title--s">
Lessive en capsule alpine all in 1 ARIEL
</h2>
</a></div>
<div class="ds-product-card__shimzone--medium">
<div class="ds-body-text ds-product-card__packaging ds-body-text--size-s ds-body-text--color-standard-3">
la boîte de 43 lavages
</div>
</div>
<div class="ds-product-card__shimzone--small">
<div class="ds-body-text ds-product-card__perunitlabel ds-body-text--size-s ds-body-text--color-standard-3">
13.39 € / Kilogramme
</div>
</div>
</div>
</div>
<div class="ds-product-card--largehorizontal-infos-sec">
<div class="ds-product-card--largehorizontal-promotion">
<div>
<div class="promotion-description promotion-description--loyalty">
<div class="promotion-description__labels">
<p title="70% d'économies" class="promotion-label"><span class="promotion-label__txt">70% d'économies</span></p>
</div> <svg focusable="false" class="promotion-description__icon-info">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info"></use>
</svg>
</div>
<section class="promotion-slide" style="display: none;">
<header class="promotion-slide__header promotion-slide__header--loyalty">
<p class="promotion-slide__header-txt"><svg focusable="false" class="promotion-slide__icon-promo">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-carrefour-loyalty-card-hightlighted"></use>
</svg>
<span class="promotion-slide__header-label">
Cagnottés sur la carte
</span>
<span class="promotion-slide__header-discount">0,01€</span>
</p>
</header>
<p class="promotion-slide__txt"><span><b>70% d'économies</b><br></span>
<span class="promotion-slide__end-date">Offre valable jusqu'au 09/03/2021</span>
</p>
</section>
</div>
</div>
<div class="ds-product-card--largehorizontal-pricing">
<div class="product-card-price">
<div class="product-card-price__price"><span class="ds-title product-card-price__price--final ds-title--m product-card-price__discount--fid">
14,50€
</span>
</div>
</div>
<div class="ds-product-card--largehorizontal-cta">
<div class="product-card-cta">
<div id="data-produit-acheter" class="add-to-cart">
<div class="pl-button-counter add-to-cart__counter"><button type="button" class="pl-button-counter__action"><svg aria-hidden="true" class="svg-icon svg-icon--s">
<use xlink:href="#i10"></use>
</svg></button>
<div class="pl-button-counter__value">
1
</div> <button type="button" class="pl-button-counter__action"><svg aria-hidden="true" class="svg-icon svg-icon--s">
<use xlink:href="#i09"></use>
</svg></button>
</div>
</div>
</div>
<div class="promotion-feedback promotion-feedback--no-text promotion-feedback--text-only"><span class="promotion-feedback__content">
</span></div>
</div>
</div>
</div>
</div>
</article>
</li>
</ol>
</div>
</div>
</div>
<div class="">
<div class="category-heading basket-products-list__category" id="frais">
<div class="category-heading__header category-heading__header--collapsable">
<h2 class="category-heading__title title title_xs">
Frais
</h2>
<div class="category-heading__left-content">
<div class="ds-badge category-heading__badge" data-testid="category-quantity-badge">
1
</div> <span class="ds-chevron category-heading__chevron ds-chevron--s"></span>
</div>
</div>
<div>
<ol>
<li class="basket-products-list__product-card basket-products-list__product-card--no-margin">
<article class="ds-product-card--largehorizontal ds-product-card" id="3245412846991">
<div class="ds-product-card--largehorizontal-icons">
<div title="Supprimer" class="product-card-delete"></div>
</div>
<div class="ds-product-card--largehorizontal-highlightlabel">
<div class="product-card-highlightlabel product-card-highlightlabel--fid">
<span class="ds-body-text ds-body-text--weight-bold ds-body-text--size-s ds-body-text--color-inherit">
Avantages fidélité
</span>
</div>
</div>
<div class="ds-product-card--largehorizontal-infos">
<div class="ds-product-card--largehorizontal-infos-main">
<div class="ds-product-card--largehorizontal-left">
<div class="ds-product-card--largehorizontal-image"><a href="/p/oeufs-bio-de-plein-air-carrefour-bio-3245412846991" title="Œufs Bio de Plein Air CARREFOUR BIO" target="_self" class="product-card-image"><img src="/media/200x200/Photosite/PGC/P.L.S./3245412846991_PHOTOSITE_20151024_084451_0.jpg?placeholder=1" data-src="/media/200x200/Photosite/PGC/P.L.S./3245412846991_PHOTOSITE_20151024_084451_0.jpg?placeholder=1" alt="Œufs Bio de Plein Air CARREFOUR BIO" importance="low" class="image image--hidden product-card-image__image image--loaded"></a>
</div>
<div class="ds-product-card--largehorizontal-badges">
<ul class="product-badges-list">
<li data-flag-id="flag.common.organic" class="product-badges-list__item"><a href="#flag.common.organic" data-testid="product-badge-link" class="product-badge__link product-badge--flag-common.organ product-badge--size-m">
<picture class="product-badge__icon"><img src="/images/badges/flag-common-organic.svg" alt="Produit Bio" importance="low" class="image product-badge__icon__img"></picture> <span class="product-badge__title">Produit Bio</span>
</a></li>
<li data-flag-id="flag.common.poulepleinair" class="product-badges-list__item"><a href="#flag.common.poulepleinair" data-testid="product-badge-link" class="product-badge__link product-badge--flag-common.poulepleina product-badge--size-m">
<picture class="product-badge__icon"><img src="/images/badges/flag-common-poulepleinair.svg" alt="Œufs plein air" importance="low" class="image product-badge__icon__img"></picture> <span class="product-badge__title">Œufs plein air</span>
</a></li>
</ul>
</div>
</div>
<div>
<div class="ds-product-card__shimzone--large"><a href="/p/oeufs-bio-de-plein-air-carrefour-bio-3245412846991" title="Œufs Bio de Plein Air CARREFOUR BIO" target="_self" class="product-card-title product-card-title__reduced-line-clamp" render-context="[object Object]">
<h2 class="ds-title ds-title--medium ds-title--s">
Œufs Bio de Plein Air CARREFOUR BIO
</h2>
</a></div>
<div class="ds-product-card__shimzone--medium">
<div class="ds-body-text ds-product-card__packaging ds-body-text--size-s ds-body-text--color-standard-3">
la boite de 10
</div>
</div>
<div class="ds-product-card__shimzone--small">
<div class="ds-body-text ds-product-card__perunitlabel ds-body-text--size-s ds-body-text--color-standard-3">
0.30 € / Pièce
</div>
</div>
</div>
</div>
<div class="ds-product-card--largehorizontal-infos-sec">
<div class="ds-product-card--largehorizontal-promotion">
<div>
<div class="promotion-description promotion-description--loyalty">
<div class="promotion-description__labels">
<p title="20% d'économies" class="promotion-label"><span class="promotion-label__txt">20% d'économies</span></p>
</div> <svg focusable="false" class="promotion-description__icon-info">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info"></use>
</svg>
</div>
<section class="promotion-slide" style="display: none;">
<header class="promotion-slide__header promotion-slide__header--loyalty">
<p class="promotion-slide__header-txt"><svg focusable="false" class="promotion-slide__icon-promo">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-carrefour-loyalty-card-hightlighted"></use>
</svg>
<span class="promotion-slide__header-label">
Cagnottés sur la carte
</span>
<span class="promotion-slide__header-discount">0,01€</span>
</p>
</header>
<p class="promotion-slide__txt"><span><b>20% d'économies</b><br></span>
<span class="promotion-slide__end-date">Offre valable jusqu'au 10/03/2021</span>
</p>
</section>
</div>
</div>
<div class="ds-product-card--largehorizontal-pricing">
<div class="product-card-price">
<div class="product-card-price__price"><span class="ds-title product-card-price__price--final ds-title--m product-card-price__discount--fid">
2,99€
</span>
</div>
</div>
<div class="ds-product-card--largehorizontal-cta">
<div class="product-card-cta">
<div id="data-produit-acheter" class="add-to-cart">
<div class="pl-button-counter add-to-cart__counter"><button type="button" class="pl-button-counter__action"><svg aria-hidden="true" class="svg-icon svg-icon--s">
<use xlink:href="#i10"></use>
</svg></button>
<div class="pl-button-counter__value">
1
</div> <button type="button" class="pl-button-counter__action"><svg aria-hidden="true" class="svg-icon svg-icon--s">
<use xlink:href="#i09"></use>
</svg></button>
</div>
</div>
</div>
<div class="promotion-feedback promotion-feedback--no-text promotion-feedback--text-only"><span class="promotion-feedback__content">
</span></div>
</div>
</div>
</div>
</div>
</article>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="products-brief">
<section class="products-brief__top-section">
</section>
<div class="">
<section class="products-brief__box">
<dl class="products-brief-data products-brief--items">
<dt>
<div class="ds-body-text ds-body-text--size-m">Total produits</div>
</dt>
<dd>
<div class="ds-body-text ds-body-text--weight-bold ds-body-text--size-m">
50,64 €
</div>
</dd>
</dl>
<div class="products-brief__slot">
<div class="checkout-clear-basket basket-panel__clear-basket">
<div id="data-clear-basket" class="checkout-clear-basket__actions"><button class="pl-button checkout-clear-basket__cta pl-button--tertiary pl-button--small">
<span class="pl-button__label"><svg aria-hidden="true" class="checkout-clear-basket__icon svg-icon svg-icon--m svg-icon--color-interactive-1">
<use xlink:href="#i13"></use>
</svg>
Vider le panier
</span>
</button></div>
<div id="empty-basket-modal" class="checkout-clear-basket__modal">
<div class="modal" style="display: none;">
<div class="modal__container">
<div class="modal__body">
<div class="checkout-clear-basket__modal__title">
Voulez-vous réellement vider votre panier ?
</div>
</div>
<div class="modal__action">
<div><button class="ds-button" id="checkout-empty-basket-confirm">
<span class="ds-button__label ds-button__label--hidden">
Oui, vider mon panier
</span>
</button> <button class="cta cta--tertiary cta--tertiary-light" id="checkout-empty-basket-cancel">
<span>Annuler</span>
</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="checkout-loyalty-info" loyalties-desactivated="true" style="display: none;">
<div class="checkout-loyalty-info__loyalty">
<section class="checkout-loyalty-info__top-section">
<h3 class="ds-title ds-title--bold ds-title--xs">
Avantages fidélité
</h3>
</section>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="cart-tile__bottom cart-tile__bottom--fixed">
<div class="cart-tile__price">
<h2 class="ds-title ds-title--bold ds-title--s ds-title--bright">
Total
</h2>
<h2 class="ds-title ds-title--bold ds-title--m ds-title--bright">
50,64€
</h2>
</div>
<button class="pl-button pl-button--primary pl-button--light">
<a href="tunnel-1.php">
<span class="pl-button__label">
Commander
</span>
</a>
</button>
</div>
</section>
</div>
</div><!-- fin basket-panel__drawer -->
</div>
<div class="svg-icons-sprites">
<svg id="sprite-defs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol viewBox="0 0 24 15" id="i41"><path d="M4.27 1.793a16.39 16.39 0 019.445-.375 9.561 9.561 0 014.637 3.517c1.066.375 4.924 1.885 5.32 4.05a4.671 4.671 0 01-.69 3.277.95.95 0 01-.682.376h-1.81a2.916 2.916 0 01-5.361 0H8.416a2.923 2.923 0 01-5.396 0h-.874a1.318 1.318 0 01-.901-.382C.733 11.778.487 10.91.487 9.688a10.066 10.066 0 012.63-7.096c.339-.35.652-.57 1.153-.799zm1.448 8.188a1.557 1.557 0 100 3.115 1.557 1.557 0 000-3.115zm12.088 0a1.557 1.557 0 100 3.115 1.557 1.557 0 000-3.115zm-4.473-7.218a15.024 15.024 0 00-8.94.478 8.817 8.817 0 00-2.54 6.474c-.014 1.257.287 1.55.341 1.591h.628a2.91 2.91 0 015.798 0h6.29a2.902 2.902 0 015.798 0h1.312c.297-.643.404-1.36.307-2.062-.205-1.113-2.827-2.459-4.624-3.053a.683.683 0 01-.362-.287 8.407 8.407 0 00-4.008-3.141z"></path></symbol>
<symbol viewBox="0 0 16 2" id="i10"><path d="M1.197 0C.536 0 0 .448 0 1s.536 1 1.197 1h13.606C15.464 2 16 1.552 16 1s-.536-1-1.197-1H1.197z"></path></symbol>
<symbol viewBox="0 0 16 16" id="i09"><path d="M8 .5c.518 0 .938.502.938 1.122l-.001 5.44h5.441c.578 0 1.055.366 1.115.836L15.5 8c0 .518-.502.938-1.122.938l-5.441-.001v5.441c0 .578-.365 1.055-.835 1.115L8 15.5c-.518 0-.938-.502-.938-1.122V8.937h-5.44c-.578 0-1.055-.365-1.115-.835L.5 8c0-.518.502-.938 1.122-.938h5.44v-5.44c0-.578.366-1.055.836-1.115z"></path></symbol>
<symbol viewBox="0 0 20 24" id="i13"><path d="M18.67 4a1 1 0 01.117 1.993L18.671 6H17.52l-.63 14.85c-.069 1.626-1.192 2.914-2.59 3.008l-.161.005H5.534c-1.418 0-2.591-1.227-2.74-2.827l-.013-.186L2.15 6H1a1 1 0 01-.117-1.993L1 4h17.67zm-3.03 2H4l.626 14.893c.025.588.366 1.038.682 1.1l.073.007h8.88c.31 0 .67-.409.742-.974l.011-.133L15.64 6zM7.71 8c.376-.013.766.293.79.708l.482 8.744a.751.751 0 01-.708.791l-.042.001a.75.75 0 01-.748-.708L7 8.791a.75.75 0 01.708-.79zm4.565 0a.75.75 0 01.708.791l-.483 8.745a.75.75 0 01-.748.708h-.042a.751.751 0 01-.708-.792l.483-8.744c.024-.415.405-.722.79-.708zm.688-8a1 1 0 110 2H6.709a1 1 0 110-2h6.253z"></path></symbol>
</defs>
</svg>
</div>