
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            @foreach ($shop_products as $product)
                @php($cartItem = Yard::instance('shopping')->getCartItemByProduct($product->id, false, true))
                @php($qty = isset($cartItem->qty) ? "x".$cartItem->qty : 0)
                @php($rowId = isset($cartItem->rowId) ? $cartItem->rowId : '')

                <div class="swiper-slide">
                    <div class="text-center">
                        @if ($product->images)
                            @if ($image = $product->images->first())
                                <img src="{{ route('product_image', [$image->slug]) }}" class="mb-2 img-fluid" alt="">
                            @endif
                        @endif
                        <h4 class="product-title px-4">
                            {{ $product->name }}
                        </h4>
                        <div class="mb-2 product-description px-2">
                            {{ $product->getShortCopy(true, 110) }}
                        </div>
                        <div class="more_details">
                            <a href="" class="" data-modal="modal-lg" data-toggle="modal"
                                data-target="#modals-load-content" data-id="{{ $product->id }}"
                                data-route="{{ route('web_promotion_modal_load') }}"
                                data-action="web-show-product" data-view="with-price">
                                <i class="fa fa-search"></i> Mehr Details</a>
                        </div>
                        <div class="product-item-price mt-2 mt-2">
                            {{ $product->getFormattedPrice() }}  &euro;*
                            <br><span class="small text-muted">{{ $product->getBasePriceFormattedFull() }} &euro;</span>

                        </div>
                        <div class="mt-2 pb-3">
                            <button type="button" class="btn btn-primary btn-add-product-shop" data-product_id="{{ $product->id }}" data-row-id="{{ $cartItem->rowId }}">
                                In den Warenkorb  &nbsp; <i class="ion ion-md-basket navbar-icon align-middle"></i>
                                <span class="badge-dot badge badge-cart indicator" id="badge_cart_indicator_{{ $product->id }}">{{ $qty }}</span>
                            </button>
                            <div class="p-1 swiper-pagination-distance"></div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
    </div>
    <script>
        $(document).ready(function() {
            var swiper = new Swiper(".mySwiper", {
                slidesPerView: 1,
                spaceBetween: 10,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                breakpoints: {
                    576: {
                        slidesPerView: 1,
                        spaceBetween: 10,
                    },
                    768: {
                        slidesPerView: 2,
                        spaceBetween: 20,
                    },
                    992: {
                        slidesPerView: 3,
                        spaceBetween: 20,
                    },
                    1200: {
                        slidesPerView: 3,
                        spaceBetween: 20,
                    },
                },
                on: {
                    afterInit: function () {
                      console.log('swiper initialized' + $('.swiper-pagination').outerHeight());
                      $('.swiper-pagination-distance').outerHeight($('.swiper-pagination').outerHeight());
                    },
                  },
                
            });
        });
    </script>