Динамическая загрузка данных во всплывающем окне - PullRequest
Новая
       117

Динамическая загрузка данных во всплывающем окне

0 голосов
/ 21 июня 2020

Я пытаюсь создать приложение с laravel, и мне сложно понять

, как хранить сведения о продукте в атрибуте data- * кнопки быстрого просмотра / тега привязки.

Имеет модальное окно скелета для быстрого просмотра.

При нажатии кнопки «Быстрый просмотр» запускает функцию javascript для заполнения модального скелета данными о продукте, полученными из атрибутов данных.

Это домашняя страница 

<div class="row justify-content-center">
    @foreach($ProductData as $Product)
    <div class="col-6 col-md-4 col-lg-4 col-xl-3">
        <div class="product product-7 text-center">
            <figure class="product-media">
                <a href="product.html">
                    <img src="{{ asset('images/product/thumbnail/'.$Product->photo) }}" alt="{{$Product->photo}}" class="product-image">
                </a>

                <div class="product-action-vertical">
                    <a href="{{ asset('assets/molla/popup/quickView.html') }}" data-product-name="{{ asset('images/product/thumbnail/'.$Product->photo) }}" class="btn-product-icon btn-quickview" title="Quick view"><span>Quick view</span></a>
                </div><!-- End .product-action-vertical -->
            </figure><!-- End .product-media -->

            <div class="product-body">
                <h3 class="product-title"><a href="product.html">{{$Product->product_name}}</a></h3><!-- End .product-title -->
                <div class="product-price">
                    $ {{$Product->price}}
                </div><!-- End .product-price -->
            </div><!-- End .product-body -->
        </div><!-- End .product -->
    </div><!-- End .col-sm-6 col-lg-4 col-xl-3 -->
    @endforeach
</div>

и mypopup / quickView. html, где я хочу загружать данные динамически, ниже: 

<div class="container quickView-container">
    <div class="quickView-content">
        <div class="row">
            <div class="col-lg-7 col-md-6">
                <div class="row">
                    <div class="product-left">
                        <a href="#one" class="carousel-dot active">
                            <img src="assets/molla/assets/images/popup/quickView/1.jpg">
                        </a>
                        <a href="#two" class="carousel-dot">
                            <img src="assets/molla/assets/images/popup/quickView/2.jpg">
                        </a>
                        <a href="#three" class="carousel-dot">
                            <img src="assets/molla/assets/images/popup/quickView/3.jpg">
                        </a>
                        <a href="#four" class="carousel-dot">
                            <img src="assets/molla/assets/images/popup/quickView/4.jpg">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Всплывающее окно быстрого просмотра продукта / модальное окно Jquery код 

$('.btn-quickview').on('click', function (e) {
    var ajaxUrl = $(this).attr('href');
    if ( $.fn.magnificPopup ) {
        setTimeout(function () {
            $.magnificPopup.open({
                type: 'ajax',
                mainClass: "mfp-ajax-product",
                tLoading: '',
                preloader: false,
                removalDelay: 350,
                items: {
                  src: ajaxUrl
                },
                callbacks: {
                    ajaxContentAdded: function () {
                        owlCarousels($('.quickView-content'), {
                            onTranslate: function(e) {
                                var $this = $(e.target),
                                    currentIndex = ($this.data('owl.carousel').current() + e.item.count - Math.ceil(e.item.count / 2)) % e.item.count;
                                $('.quickView-content .carousel-dot').eq(currentIndex).addClass('active').siblings().removeClass('active');
                            }
                        });
                        quantityInputs();
                    },
                    open: function() {
                        $('body').css('overflow-x', 'visible');
                        $('.sticky-header.fixed').css('padding-right', '1.7rem');
                    },
                    close: function() {
                        $('body').css('overflow-x', 'hidden');
                        $('.sticky-header.fixed').css('padding-right', '0');
                    }
                },

                ajax: {
                    tError: '',
                }
            }, 0);
        }, 500);

        e.preventDefault();
    }
});
...