snurky components for Magento 2

Cart Popup 

<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.