سلام بخش مشاهده سریع رو میشه ی راهنمایی بفرمایین چجوری حلش کرد ؟؟
سلام بخش مشاهده سریع رو میشه ی راهنمایی بفرمایین چجوری حلش کرد ؟؟
سلام و عرض ادب، من با جی کوئری هندلش کردم.
بخش html:
<div class="row isotope-grid">
@foreach($products as $product)
<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item category{{ $product->category_id }}">
<div class="block2">
<div class="block2-pic hov-img0">
<img src="/{{ $product->demo_url }}" alt="IMG-PRODUCT">
<a href="#"
class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1"
data-id="{{ $product->id }}"
data-demo-url="{{ $product->demo_url }}"
data-title="{{ $product->title }}"
data-description="{{ $product->description }}"
data-price="{{ $product->price }}"
>
مشاهده سریع
a>
div>
<div class="block2-txt flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l ">
<a href="{{ route('home.products.show',$product->id) }}"
class="mtext-106 cl4 hov-cl1 trans-04 js-name-b2 p-b-6"
target="_blank">
{{ $product->title }}
a>
<span class="stext-105 cl3">
{{ $product->price }} هزار تومان
span>
div>
div>
div>
div>
@endforeach
div>
بخش modal:
<div class="wrap-modal1 js-modal1 p-t-60 p-b-20">
<div class="overlay-modal1 js-hide-modal1">div>
<div class="container">
<div class="bg0 p-t-60 p-b-30 p-lr-15-lg how-pos3-parent">
<button class="how-pos3 hov3 trans-04 js-hide-modal1">
<img src="/images/icons/icon-close.png" alt="CLOSE">
button>
<div class="row">
<div class="col-md-6 col-lg-7 p-b-30">
<div class="p-l-25 p-r-30 p-lr-0-lg">
<div class="wrap-slick3 flex-sb flex-w">
<div class="wrap-slick3-dots">div>
<div class="wrap-slick3-arrows flex-sb-m flex-w">div>
<div class="slick3 gallery-lb">
<div class="item-slick3 modal-small-image" data-thumb="#">
<div class="wrap-pic-w pos-relative">
<img src="#" alt="IMG-PRODUCT" class="modal-demo-url">
<a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04 modal-image-expand"
href="#" class="modal-demo-url">
<i class="fa fa-expand">i>
a>
div>
div>
div>
div>
div>
div>
<div class="col-md-6 col-lg-5 p-b-30">
<div class="p-l-50 p-t-5 p-lr-0-lg">
<h4 class="mtext-105 cl2 js-name-detail p-b-14" id="modal-title">h4>
<span class="mtext-106 cl2" id="modal-price">span>
<p class="stext-102 cl3 p-t-23" id="modal-description">p>
<div class="p-t-33">
<div class="flex-w flex-r-m p-b-10">
<div class="flex-w flex-m respon6-next">
<a
class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail"
href="#" id="modal-add-to-basket">
افزودن به سبد خرید
a>
div>
div>
div>
div>
div>
div>
div>
div>
div>
بخش اسکریپت جی کوئری:
<script type="text/javascript">
/*==================================================================
[ Show modal1 ]*/
$(document).ready(function () {
$('.js-show-modal1').on('click', function (e) {
e.preventDefault();
// get product data from selected product
let productId = $(this).data('id');
let productTitle = $(this).data('title');
let productDescription = $(this).data('description');
let productPrice = $(this).data('price');
let productDemoUrl = $(this).data('demo-url');
// set gotten data to modal
$('#modal-title').html(productTitle);
$('#modal-price').html(productPrice + ' تومان');
$('#modal-description').html(productDescription);
$('.modal-demo-url').attr("src", productDemoUrl);
$('.modal-side-image').attr("src", productDemoUrl);
$('.modal-image-expand').attr("href", productDemoUrl);
if(!productPrice){
$('#modal-add-to-basket').attr("href", "user/products/source-url/download/" + productId);
$('#modal-add-to-basket').html("دانلود فایل اصلی");
}else{
$('#modal-add-to-basket').attr("href", "{{ route('home.products.all') }}/" + productId + "/addToBasket");
$('#modal-add-to-basket').html("افزودن به سبد خرید");
}
// show modal
$('.js-modal1').addClass('show-modal1');
});
$('.js-hide-modal1').on('click', function () {
$('.js-modal1').removeClass('show-modal1');
});
});
script>
جی کوئری مشکل ندارع!