<script type="text/html" class="modal__placeholder" id="test-modal-placeholder">
    <aside class="modal modal--slide" id="test-modal" aria-hidden="true" data-modal>
        <div class="modal__overlay" tabindex="-1" data-modal-close data-modal-overlay>
            <div class="modal__container--small" role="dialog" aria-modal="true" aria-labelledby="test-modal-title">
                <div class="modal__container-inner">
                    <header class="modal__header">
                        <h3 class="modal__title" id="test-modal-title">Scannergebnis</h3>
                        <div class="modal__close">
                            <button class="button-icon--icon-regular -icon-close" type="button" name="close" value="close" data-modal-close="">
                                <span class="visually-hidden">Close modal</span>
                            </button>
                        </div>
                    </header>
                    <main class="modal__content" id="test-modal-content">

                        <div class="result__tile">
                            <article class="tile" data-location="/some-location/">
                                <div class="tile__row">
                                    <div class="tile__column">
                                        <h3 class="tile__title">
                                            <a href="/some-location/" class="tile__link" title="Test Product">Test Product</a>
                                        </h3>
                                        <div class="tile__attributes">
                                            <div class="attributes--small">
                                                <ul class="attributes__list">
                                                    <li class="attributes__list-item">
                                                        <div class="attributes__name">Artikelnr.</div>
                                                        <div class="attributes__value " title="8547625">
                                                            8547625
                                                        </div>
                                                    </li>
                                                    <li class="attributes__list-item">
                                                        <div class="attributes__name">Kategorie</div>
                                                        <div class="attributes__value has-single-line-ellipsis" title="Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie">
                                                            <a class="attributes__attribute-link" href="#" title="Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie">Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie Testkategorie</a>
                                                        </div>
                                                    </li>
                                                    <li class="attributes__list-item">
                                                        <div class="attributes__name">Grösse</div>
                                                        <div class="attributes__value " title="XXL">
                                                            XXL
                                                        </div>
                                                    </li>
                                                    <li class="attributes__list-item">
                                                        <div class="attributes__name">fréquence d'horloge du processeur</div>
                                                        <div class="attributes__value " title="1,6 GHz">
                                                            1,6 GHz
                                                        </div>
                                                    </li>
                                                    <li class="attributes__list-item">
                                                        <div class="attributes__name">fréquence d'horloge du processeur</div>
                                                        <div class="attributes__value " title="fréquence d'horloge du processeur fréquence d'horloge du processeur fréquence d'horloge du processeur">
                                                            fréquence d'horloge du processeur fréquence d'horloge du processeur fréquence d'horloge du processeur
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="tile__price-actions-container">
                                            <div class="tile__price">

                                                <div class="price--regular">

                                                    <div class="price__row">
                                                        <div class="price__column--regular-price">
                                                            <div class="price-regular">
                                                                <div class="price-regular__current--wrap">
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-prefix">ab</div>
                                                                        <div class="price-regular__current-currency">CHF</div>
                                                                    </div>
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-value">9.90</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="tile__actions-container">

                                                <form class="wishlist-cart-actions">
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tile__column">
                                        <a href="/some-location/" class="tile__link">
                                            <div class="image ">
                                                <picture>
                                                    <img src="/example-assets/images/tile/product.png" class="image__img tile__image is-loading" alt="Test Product" srcset="/example-assets/images/tile/product.png 1x, /example-assets/images/tile/product@2x.png 2x" onload="this.classList.remove('is-loading')" />
                                                </picture>
                                            </div>

                                        </a>

                                        <div class="tile__logo">
                                            <div class="logos">
                                                <div class="image ">
                                                    <picture>
                                                        <img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--medium is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
                                                    </picture>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="tile__specials">
                                            <div class="specials">

                                                <div class="specials--medium-vertically  ">
                                                    <button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
                                                        <span class="visually-hidden">New</span>
                                                        <span class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </span>

                                                    </button>
                                                    <button type="button" class="specials__toggle" data-info-tooltip-content="Kauftipp" style="background-color: #44a0d9;">
                                                        <span class="visually-hidden">Kauftipp</span>
                                                        <span class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/specials/tip.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </span>

                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tile__stock">
                                            <div class="stock is-horizontal-small">
                                                <button type="button" class="stock__toggle--stock-plus">
                                                    +187
                                                </button>
                                                <div class="stock__toggle--stock-plus-content" data-info-tooltip-content-html="">
                                                    <div class="stock__toggle--stock-plus-title"><strong>42</strong> Stück beim Lieferanten bestellt.</div>
                                                    <div class="stock__toggle--stock-plus-table">
                                                        <div class="responsive-table -spacing-medium -not-responsive">
                                                            <div class="responsive-table__container--auto-scrollbar">
                                                                <table class="responsive-table__table" data-responsive-table-filter-context>
                                                                    <colgroup>
                                                                        <col style="">
                                                                        <col style="">
                                                                        <col style="">
                                                                    </colgroup>
                                                                    <thead>
                                                                        <tr class="responsive-table__tr">
                                                                            <th class="responsive-table__th">
                                                                                Datum
                                                                            </th>
                                                                            <th class="responsive-table__th is-right-aligned">
                                                                                Menge
                                                                            </th>
                                                                            <th class="responsive-table__th is-left-aligned">
                                                                                Bestätigt
                                                                            </th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        <tr class="responsive-table__tr">
                                                                            <td class="responsive-table__td">
                                                                                <div class="responsive-table__mobile-container">
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__mobile-column-title">Datum</div>
                                                                                    </div>
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__td-inner-container">
                                                                                            <div class="wysiwyg-content">
                                                                                                <p>12.01.2021</p>
                                                                                            </div>
                                                                                        </div>

                                                                                    </div>
                                                                                </div>
                                                                            </td>
                                                                            <td class="responsive-table__td is-right-aligned">
                                                                                <div class="responsive-table__mobile-container">
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__mobile-column-title">Menge</div>
                                                                                    </div>
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__td-inner-container">
                                                                                            <div class="wysiwyg-content">
                                                                                                <p><strong>10</strong></p>
                                                                                            </div>
                                                                                        </div>

                                                                                    </div>
                                                                                </div>
                                                                            </td>
                                                                            <td class="responsive-table__td is-left-aligned">
                                                                                <div class="responsive-table__mobile-container">
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__mobile-column-title">Bestätigt</div>
                                                                                    </div>
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__td-inner-container">
                                                                                            <div class="wysiwyg-content">
                                                                                                <p>Ja</p>
                                                                                            </div>
                                                                                        </div>

                                                                                    </div>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr class="responsive-table__tr">
                                                                            <td class="responsive-table__td">
                                                                                <div class="responsive-table__mobile-container">
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__mobile-column-title">Datum</div>
                                                                                    </div>
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__td-inner-container">
                                                                                            <div class="wysiwyg-content">
                                                                                                <p>17.06.2021</p>
                                                                                            </div>
                                                                                        </div>

                                                                                    </div>
                                                                                </div>
                                                                            </td>
                                                                            <td class="responsive-table__td is-right-aligned">
                                                                                <div class="responsive-table__mobile-container">
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__mobile-column-title">Menge</div>
                                                                                    </div>
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__td-inner-container">
                                                                                            <div class="wysiwyg-content">
                                                                                                <p><strong>20</strong></p>
                                                                                            </div>
                                                                                        </div>

                                                                                    </div>
                                                                                </div>
                                                                            </td>
                                                                            <td class="responsive-table__td is-left-aligned">
                                                                                <div class="responsive-table__mobile-container">
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__mobile-column-title">Bestätigt</div>
                                                                                    </div>
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__td-inner-container">
                                                                                            <div class="wysiwyg-content">
                                                                                                <p>Ja</p>
                                                                                            </div>
                                                                                        </div>

                                                                                    </div>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr class="responsive-table__tr">
                                                                            <td class="responsive-table__td">
                                                                                <div class="responsive-table__mobile-container">
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__mobile-column-title">Datum</div>
                                                                                    </div>
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__td-inner-container">
                                                                                            <div class="wysiwyg-content">
                                                                                                <p>02.05.2021</p>
                                                                                            </div>
                                                                                        </div>

                                                                                    </div>
                                                                                </div>
                                                                            </td>
                                                                            <td class="responsive-table__td is-right-aligned">
                                                                                <div class="responsive-table__mobile-container">
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__mobile-column-title">Menge</div>
                                                                                    </div>
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__td-inner-container">
                                                                                            <div class="wysiwyg-content">
                                                                                                <p><strong>5</strong></p>
                                                                                            </div>
                                                                                        </div>

                                                                                    </div>
                                                                                </div>
                                                                            </td>
                                                                            <td class="responsive-table__td is-left-aligned">
                                                                                <div class="responsive-table__mobile-container">
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__mobile-column-title">Bestätigt</div>
                                                                                    </div>
                                                                                    <div class="responsive-table__mobile-column">
                                                                                        <div class="responsive-table__td-inner-container">
                                                                                            <div class="wysiwyg-content">
                                                                                                <p>Nein</p>
                                                                                            </div>
                                                                                        </div>

                                                                                    </div>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
                                                                            <td class="responsive-table__td" colspan="3">
                                                                                <div class="wysiwyg-content">
                                                                                    <p class="responsive-table__no-match">Keine Ergebnisse gefunden</p>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
                                                    <span class="visually-hidden">Verfügbar ab Juli 2020</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>
                        <div class="scanner-buttons">
                            <button class="button--primary is-full-width" type="submit">In den Warenkorb legen</button>
                            <button class="button--tertiary-light is-full-width" type="submit">Ein weiteres Produkt scannen</button>
                        </div>
                    </main>
                </div>
            </div>
        </div>
    </aside>
</script>
<div class="modal__demo-toggle" data-modal-id="test-modal">
    <a href="#" class="button-scanner">
        <span class="visually-hidden">Barcode Scanner</span>
    </a>
</div>
{% include '@SharedComponents/modules/shared/components/modal/modal.twig' %}
{
  "id": "test-modal",
  "title": "Scannergebnis",
  "footer": null,
  "closeLabel": "Close modal",
  "headingLevel": "3",
  "demo": true,
  "size": "small",
  "content": {
    "path": "modules/scanner/templates/result/result",
    "data": {
      "include": "...result--default"
    }
  },
  "buttonScanner": {
    "include": "...button-scanner--default"
  }
}
  • Content:
    import ModalDemo, {selector as sel} from 'cando-cx-components-library/components/modules/shared/components/modal/modal-demo';
    
    export default ModalDemo;
    export const selector = sel;
  • URL: /components/raw/modal/modal-demo.js
  • Filesystem Path: src/components/modules/shared/components/modal/modal-demo.js
  • Size: 181 Bytes
  • Content:
    import ModalMediator, {name as title} from 'cando-cx-components-library/components/modules/shared/components/modal/modal-mediator';
    
    export default ModalMediator;
    export const name = title;
  • URL: /components/raw/modal/modal-mediator.js
  • Filesystem Path: src/components/modules/shared/components/modal/modal-mediator.js
  • Size: 189 Bytes
  • Content:
    import './modal.scss';
  • URL: /components/raw/modal/modal.js
  • Filesystem Path: src/components/modules/shared/components/modal/modal.js
  • Size: 22 Bytes
  • Content:
    @import "~shared/base";
    @import "~cando-cx-components-library/components/modules/shared/components/modal/modal";
  • URL: /components/raw/modal/modal.scss
  • Filesystem Path: src/components/modules/shared/components/modal/modal.scss
  • Size: 112 Bytes

No notes defined.