<div id="confirmOverlay" class="am-center" style="">
    <div id="confirmBox" class="amcart-confirm-block" style="">
        <span title="Sluiten" class="cross">×</span>
        <div id="messageBox" class="amcart-message-box">
            <a href="https://www.adoreslaapcomfort.nl/mahoton-hoeslaken-teddy" title="Mahoton Hoeslaken Teddy" class="added-item">
                Mahoton Hoeslaken Teddy
            </a>
            <p class="text">is toegevoegd aan je winkelwagen</p>
            <div class="am-photo-container">
                <a href="https://www.adoreslaapcomfort.nl/mahoton-hoeslaken-teddy" title="Mahoton Hoeslaken Teddy" tabindex="-1" class="product-item-photo">
                    <div class="amcart-image-success product-image-container-18782">
                        <img class="amcart-image" src="https://www.adoreslaapcomfort.nl/media/catalog/product/cache/56767f25f67ab0002c744dd0d86181c5/3/5/3513d685dc004d53d5582c81d9c523e9972ee462aa2215346b3d601dd24fca19.jpeg" alt="Mahoton Hoeslaken Teddy">
                    </div>
                </a>
                <div id="am-qty" class="amcart-qty-wrap" data-amcart="qty-wrap">
                    <label for="am-input" class="amcart-label">Aantal</label>
                    <span class="amcart-control -minus" data-amcart="qty-minus"></span>
                    <span class="amcart-control -plus" data-amcart="qty-plus"></span>
                    <span class="amcart-refresh" title="Bijwerken" data-amcart="qty-refresh"></span>
                    <input class="amcart-input" id="am-input" maxlength="12" title="Qty" size="7" type="number" min="1" value="1" name="item_qty" data-amcart="qty-input">
                    <input type="hidden" name="form_key" id="form-key" value="WkBQH5bUt2NtC2cG" data-amcart="qty-form-key">
                    <input type="hidden" name="item_id" id="quote_id" value="58059" data-amcart="qty-quote-id">
                </div>
            </div>
            <p id="amcart-count" class="text">Er zijn
                <a href="https://www.adoreslaapcomfort.nl/checkout/cart/" id="am-a-count" data-amcart="amcart-count" title="Winkelwagen">6 artikelen</a> in je winkelwagen.
            </p>
            <p class="amcart-subtotal text">Winkelwagen Subtotal:
                <span class="am_price" data-amcart="amcart-price">
                    <span class="price">€&nbsp;295,00</span>
                </span>
            </p>
        </div>
        <div id="confirmButtons" class="amcart-confirm-buttons">
            <button class="button am-btn-left" title="Ga verder">Ga verder</button>
            <button class="button am-btn-right" title="Winkelwagen">Winkelwagen</button>
            <a class="checkout" title="Ga naar afrekenen" data-role="proceed-to-checkout" href="https://www.adoreslaapcomfort.nl/checkout/">
                Ga naar afrekenen
            </a>
        </div>
        <div class="am-related-box">
            <script>
                require([
                    'jquery',
                    'Amasty_Cart/js/owl.carousel.min',
                    'domReady!'
                ], function($) {
                    $(document).ready(function() {
                        var itemsPerView = $(window).width() <= 768 ? 1 : 2;
                        $(".products-grid.am-slider").owlCarousel({
                            items: itemsPerView,
                            nav: true,
                            navText: ['<p class="am-slider arrow -left"></p>', '<p class="am-slider arrow -right"></p>']
                        });
                    });
                });
            </script>
        </div>
    </div>
</div>
<div id="confirmOverlay" class="am-center" style="">
    <div id="confirmBox" class="amcart-confirm-block" style="">
        <span title="Sluiten" class="cross">×</span>
        <div id="messageBox" class="amcart-message-box">
            <a href="https://www.adoreslaapcomfort.nl/mahoton-hoeslaken-teddy" title="Mahoton Hoeslaken Teddy" class="added-item">
                Mahoton Hoeslaken Teddy
           </a>
            <p class="text">is toegevoegd aan je winkelwagen</p>
            <div class="am-photo-container">
                <a href="https://www.adoreslaapcomfort.nl/mahoton-hoeslaken-teddy" title="Mahoton Hoeslaken Teddy" tabindex="-1" class="product-item-photo">
                    <div class="amcart-image-success product-image-container-18782">
                        <img class="amcart-image" src="https://www.adoreslaapcomfort.nl/media/catalog/product/cache/56767f25f67ab0002c744dd0d86181c5/3/5/3513d685dc004d53d5582c81d9c523e9972ee462aa2215346b3d601dd24fca19.jpeg" alt="Mahoton Hoeslaken Teddy">
                    </div>
                </a>
                <div id="am-qty" class="amcart-qty-wrap" data-amcart="qty-wrap">
                    <label for="am-input" class="amcart-label">Aantal</label>
                    <span class="amcart-control -minus" data-amcart="qty-minus"></span>
                    <span class="amcart-control -plus" data-amcart="qty-plus"></span>
                    <span class="amcart-refresh" title="Bijwerken" data-amcart="qty-refresh"></span>
                    <input class="amcart-input" id="am-input" maxlength="12" title="Qty" size="7" type="number" min="1" value="1" name="item_qty" data-amcart="qty-input">
                    <input type="hidden" name="form_key" id="form-key" value="WkBQH5bUt2NtC2cG" data-amcart="qty-form-key">
                    <input type="hidden" name="item_id" id="quote_id" value="58059" data-amcart="qty-quote-id">
                </div>
            </div>
            <p id="amcart-count" class="text">Er zijn
                <a href="https://www.adoreslaapcomfort.nl/checkout/cart/" id="am-a-count" data-amcart="amcart-count" title="Winkelwagen">6 artikelen</a>  in je winkelwagen.
            </p>
            <p class="amcart-subtotal text">Winkelwagen Subtotal:
                <span class="am_price" data-amcart="amcart-price">
                    <span class="price">€&nbsp;295,00</span>
                </span>
            </p>
        </div>
        <div id="confirmButtons" class="amcart-confirm-buttons">
            <button class="button am-btn-left" title="Ga verder">Ga verder</button>
               <button class="button am-btn-right" title="Winkelwagen">Winkelwagen</button>
            <a class="checkout" title="Ga naar afrekenen" data-role="proceed-to-checkout" href="https://www.adoreslaapcomfort.nl/checkout/">
                Ga naar afrekenen
            </a>
        </div>
        <div class="am-related-box">
            <script>
                require([
                    'jquery',
                    'Amasty_Cart/js/owl.carousel.min',
                    'domReady!'
                ], function ($) {
                    $(document).ready(function(){
                        var itemsPerView = $(window).width() <= 768 ? 1 : 2;
                        $(".products-grid.am-slider").owlCarousel({
                            items: itemsPerView,
                            nav: true,
                            navText : ['<p class="am-slider arrow -left"></p>','<p class="am-slider arrow -right"></p>']
                        });
                    });
                });
            </script>
        </div>
    </div>
</div>
/* No context defined for this component. */
  • Content:
    // sass-lint:disable no-ids
    #confirmOverlay {
        &.am-center {
            position: fixed;
            width: 100%;
            height: 100vh;
            z-index: 51;
            background: rgba(0, 0, 0, 0.7);
    
            .amcart-confirm-block {
                background-color: #fff;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                @include mq($min-screen: $screen-l) {
                    max-width: 50%;
                    left: 25%;
                    bottom: 10%;
                    position: absolute;
                    border-radius: 8px;
                    box-shadow: 0 0 35px rgba(0,0,0,0.35);
    
    
                }
                .cross {
                    display: flex;
                    justify-content: flex-end;
                    padding: 8px;
                    cursor: pointer;
                    font-size: 24px;
                }
                .amcart-message-box {
                    padding: 0 16px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .added-item {
                        font-size: 24px;
                    }
                    @include mq($min-screen: $screen-l) {
                        display: block;
                    }
                }
                .amcart-qty-wrap {
                    display: none;
                }
                .amcart-confirm-buttons {
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;
                    gap: 10px;
                    padding: 16px;
                    @include mq($screen-m) {
                        flex-direction: row;
                        gap: 0;
                    }
                    .button {
                        &.am-btn {
                            &-right {
                                order: 3;
                            }
                            &-left {
                                order: 1;
                            }
                        }
                    }
                    a.checkout {
                        order: 2;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        display: inline-flex;
                        text-align: center;
                        min-height: 48px;
                        min-width: 48px;
                        padding: 0 32px;
                        background-color: $theme-tertiary;
                        border: none;
                        border-radius: 3px;
                        outline: none;
                        font-family: "Work Sans", sans-serif;
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 1;
                        color: $bg-color-base;
                        cursor: pointer;
                        text-transform: uppercase;
                        text-decoration: none;
                        transform: perspective(1px) translateZ(0);
                        -webkit-transition: all 0.5s ease-in-out;
                        transition: all 0.5s ease-in-out;
                    }
                }
            }
        }
    }
    // sass-lint:enable no-ids
    
  • URL: /components/raw/cart-popup/_cart-popup.scss
  • Filesystem Path: build/components/Organisms/cart-popup/_cart-popup.scss
  • Size: 3.1 KB

There are no notes for this item.