관리-도구
편집 파일: productdetail.blade.php
@extends('layouts.appss') @section('content') <!-- .tf-breadcrumb --> <div class="tf-breadcrumb"> <div class="container"> <div class="tf-breadcrumb-wrap"> <div class="tf-breadcrumb-list"> <a href="/" class="text text-caption-1">Homepage</a> <i class="icon icon-right"></i> <a href="#" class="text text-caption-1">Product</a> <i class="icon icon-right"></i> <span class="text_secondary2 text-caption-1">Product Details</span> </div> </div> </div> </div><!-- /.tf-breadcrumb --> <!-- Section product --> <section class="flat-spacing"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="tf-product-media-wrap sticky-top"> <div class="thumbs-slider"> <div dir="ltr" class="swiper tf-product-media-thumbs other-image-zoom" data-direction="vertical"> <div class="swiper-wrapper stagger-wrap"> @foreach($productdetail->images as $image) <div class="swiper-slide stagger-item"> <div class="item"> <img class="lazyload" src="{{ asset('storage/' . $image->image_url) }}" alt="{{ $productdetail->title }}"> </div> </div> @endforeach </div> </div> <div dir="ltr" class="swiper tf-product-media-main" id="gallery-swiper-started"> <div class="swiper-wrapper"> @foreach($productdetail->images as $image) <div class="swiper-slide"> <a href="{{ asset('storage/' . $image->image_url) }}" target="_blank" class="item" data-pswp-width="600" data-pswp-height="600"> <img src="{{ asset('storage/' . $image->image_url) }}" alt="{{ $productdetail->title }}"> </a> </div> @endforeach </div> </div> </div> </div> <script> document.addEventListener("DOMContentLoaded", function() { const verticalSliderEl = document.querySelector('.tf-product-media-thumbs'); const mainSliderEl = document.querySelector('.tf-product-media-main'); // Thumbs slider (vertical) const verticalSwiper = new Swiper(verticalSliderEl, { direction: 'vertical', slidesPerView: 4, spaceBetween: 10, watchSlidesProgress: true, watchSlidesVisibility: true, }); // Main slider const mainSwiper = new Swiper(mainSliderEl, { spaceBetween: 10, thumbs: { swiper: verticalSwiper } }); }); </script> </div> <div class="col-md-6"> <div class="sticky-top"> <div class="tf-product-info-wrap position-relative"> <div class="tf-zoom-main"></div> <div class="tf-product-info-list other-image-zoom"> <div class="tf-product-info-heading"> <div class="tf-product-info-name"> <h3 class="name">{{ $productdetail->title }}</h3> <div class="sub"> <div class="tf-product-info-rate"> <div class="list-star-default"> <i class="icon icon-star"></i> <i class="icon icon-star"></i> <i class="icon icon-star"></i> <i class="icon icon-star"></i> <i class="icon icon-star"></i> </div> </div> <div class="tf-product-info-sold"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16.7076 9.80077L7.95759 19.1758C7.86487 19.2747 7.74247 19.3408 7.60888 19.3641C7.47528 19.3874 7.33773 19.3666 7.21699 19.3049C7.09625 19.2432 6.99886 19.1438 6.93953 19.0219C6.88019 18.8999 6.86213 18.762 6.88806 18.6289L8.03338 12.9L3.53103 11.2094C3.43434 11.1732 3.34811 11.1136 3.28005 11.036C3.21199 10.9584 3.16422 10.8651 3.14101 10.7645C3.11779 10.6639 3.11986 10.5591 3.14702 10.4595C3.17418 10.3599 3.22559 10.2686 3.29666 10.1937L12.0467 0.818744C12.1394 0.719788 12.2618 0.653675 12.3954 0.630383C12.529 0.60709 12.6665 0.627882 12.7873 0.68962C12.908 0.751359 13.0054 0.850694 13.0647 0.972636C13.1241 1.09458 13.1421 1.23251 13.1162 1.36562L11.9677 7.10077L16.4701 8.78906C16.5661 8.82547 16.6516 8.88496 16.7191 8.96228C16.7867 9.0396 16.8341 9.13236 16.8573 9.23237C16.8805 9.33237 16.8786 9.43655 16.852 9.53569C16.8253 9.63482 16.7747 9.72587 16.7045 9.80077H16.7076Z" fill="#DC9056" /> </svg> <div class="text text-caption-1">{{ $productdetail->category->category }} <div> </div> </div> </div> <div class="tf-product-info-desc"> <div class="tf-product-info-price"> <!-- <h5 class="price-on-sale">₹79.99</h5> <div class="compare-at-price">₹98.99</div> --> </div> <p style="color: black;">{!! $productdetail->short_description !!}</p> </div> </div> <!-- <form action="{{ route('cart.add', $productdetail->id) }}" method="POST" id="add-to-cart-form"> @csrf <div class="tf-product-info-choose-option gap-19"> <div class="tf-product-info-quantity"> <div class="title mb_12">Quantity:</div> <div class="wg-quantity"> <span class="btn-quantity btn-decrease">-</span> <input class="quantity-product" type="text" name="quantity" value="1"> <span class="btn-quantity btn-increase">+</span> </div> </div> <button type="submit" class="tf-btn btn-onsurface flex-grow-1"> Add to Cart </button> </div> </form> --> </div> </div> </div> </div> <p> {!! $productdetail->long_description !!} </p> </div> </div> </section> <!-- /Section product --> @if(session('success')) <div class="alert alert-success" id="cart-alert" style="position: fixed; top: 20px; right: 20px; z-index: 9999; padding: 15px 20px; background: #28a745; color: white; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);"> {{ session('success') }} </div> <script> setTimeout(() => { document.getElementById('cart-alert').style.display = 'none'; }, 3000); </script> @endif <section class=""> <div class="container"> <div class="row"> <div class="col-12"> <div class="widget-tabs style-1"> <ul class="widget-menu-tab"> <!-- <li class="item-title "> <span class="inner">Description</span> </li> --> <li class="item-title active"> <span class="inner">Customer Reviews</span> </li> </ul> <div class="widget-content-tab"> <!-- <div class="widget-content-inner active"> <div class="tab-description"> <div class="right"> <p class="text-body-default mb_24"> {!! $productdetail->long_description !!} </p> </div> </div> </div> --> <div class="widget-content-inner active"> <div class="tab-reviews write-cancel-review-wrap"> <div class="tab-reviews-heading"> <div> <div class="tf-btn btn-white has-border radius-4 btn-comment-review btn-cancel-review"> Cancel Review</div> @if(Auth::check()) <div class="tf-btn btn-white has-border radius-4 btn-comment-review btn-write-review"> Write a review </div> @else <a href="{{ route('login') }}" class="tf-btn btn-white has-border radius-4"> Write a review </a> @endif </div> </div> <div class="reply-comment style-1 cancel-review-wrap"> <div class="reply-comment-wrap"> @forelse($productdetail->reviews as $rev) <div class="reply-comment-item"> <div class="user"> <div class="image"> <img src="{{ asset('images/gallery/profileicon.jpg') }}" alt=""> </div> <div> <h6> <a href="#" class="link">{{ $rev->name }}</a> </h6> <div class="list-star-default"> @for($i=1; $i<=5; $i++) <i class="icon icon-star {{ $i <= $rev->rating ? '' : 'text-muted' }}"></i> @endfor </div> </div> </div> <p class="text-secondary">{{ $rev->review }}</p> </div> @empty <p class="text-secondary">No reviews yet.</p> @endforelse </div> </div> <form class="form-write-review write-review-wrap" method="POST" action="{{ route('review.store') }}"> @csrf <input type="hidden" name="product_id" value="{{ $productdetail->id }}"> <div class="heading"> <h4>Write a review:</h4> <div class="list-rating-check"> <input type="radio" id="star5" name="rating" value="5"> <label for="star5"></label> <input type="radio" id="star4" name="rating" value="4"> <label for="star4"></label> <input type="radio" id="star3" name="rating" value="3"> <label for="star3"></label> <input type="radio" id="star2" name="rating" value="2"> <label for="star2"></label> <input type="radio" id="star1" name="rating" value="1"> <label for="star1"></label> </div> </div> <div class="mb_32"> <div class="mb_8">Review</div> <fieldset class="d-flex mb_20"> <textarea rows="4" name="review" placeholder="Write your comment here" required></textarea> </fieldset> <fieldset class=""> <input type="text" placeholder="Your Name" name="name" required> </fieldset> </div> <div class="button-submit"> <button class="tf-btn btn-onsurface radius-4" type="submit">Submit Review</button> </div> </form> </div> </div> </div> </div> </div> </div> </div> </section> @endsection