在larave中动态加载quickView/弹出内容

Question

我正在尝试用laravel创建一个应用程序，并且我在理解如何根据从产品图标点击的按钮将内容动态加载到部门方面有一些困难。

这是分类页面

<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" title="{{$Product->product_name}}">
<figure class="product-media">
<span class="product-label label-new">New</span>
<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="#" class="btn-product-icon btn-wishlist btn-expandable"><span>add to wishlist</span></a>
<a href="{{ asset('assets/molla/popup/quickView.html') }}" class="btn-product-icon btn-quickview" title="Quick view"><span>Quick view</span></a>
<a href="#" class="btn-product-icon btn-compare" title="Compare"><span>Compare</span></a>
</div><!-- End .product-action-vertical -->

<div class="product-action">
<a href="#" class="btn-product btn-cart"><span>add to cart</span></a>
</div><!-- End .product-action -->
</figure><!-- End .product-media -->

<div class="product-body">
<div class="product-cat">
<a href="#">Women</a>
</div><!-- End .product-cat -->
<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 class="ratings-container">
<div class="ratings">
<div class="ratings-val" style="width: 20%;"></div><!-- End .ratings-val -->
</div><!-- End .ratings -->
<span class="ratings-text">(2)</span>
</div><!-- End .rating-container -->

<div class="product-nav product-nav-thumbs">
<a href="#" class="active">
<img src="{{ asset('assets/molla/assets/images/products/product-4-thumb.jpg') }}" alt="product desc">
</a>
<a href="#">
<img src="{{ asset('assets/molla/assets/images/products/product-4-2-thumb.jpg') }}" alt="product desc">
</a>

<a href="#">
<img src="{{ asset('assets/molla/assets/images/products/product-4-3-thumb.jpg') }}" alt="product desc">
</a>
</div><!-- End .product-nav -->
</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>

Answer 1

有两种方法可以动态加载模式/弹出

1. 将产品详细信息存储在快速视图按钮/锚标签的数据-*属性中。有一个骨架快速查看模式。在单击“快速视图”时，当用户单击“快速视图”按钮并使用响应数据attributes.
2. Making

填充框架模型时，触发一个javascript函数来使用从data AJAX调用中获取的产品数据填充框架模式

按照方法#1，可以保存对服务器的多个网络调用，因为所有与产品相关的数据(需要在Quick中显示)都存储在数据属性中

更新的

方法1的示例

<a class="btn btn-primary btnQuickView" data-product-name="Product Name" data-product-img="http://shop.com/product/image.jpg" data-product-price="200.00">Quick View</a>

模码

<!-- Quick View Modal -->
<div id="quickViewModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Title</h4>
      </div>
      <div class="modal-body">
        <h1 id="modal-product-name"></h1>
        <img id="modal-product-image" src="">
        <p id="modal-product-price"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Load jQuery library -->
<script type="text/javascript">
    $(function(){
        $('body').on('click','.btnQuickView', function(e){
            e.preventDefault();
            var data = $(this).data();
            $('#quickViewModal #modal-product-name').html(data.productName);
            $('#quickViewModal #modal-product-name').attr('src', data.productImage);
            $('#quickViewModal #modal-product-name').html(data.productPrice);

            $('#quickViewModal').modal();
        });
    });
</script>