115 lines
4.0 KiB
PHP
115 lines
4.0 KiB
PHP
@extends('layout.master')
|
|
|
|
@section('body-class', 'page-product')
|
|
|
|
@section('content')
|
|
|
|
<div class="container">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="row mb-5">
|
|
<div class="col-12 col-md-6">
|
|
<div class="product-image d-flex">
|
|
<div class="left">
|
|
@for ($i = 0; $i < 5; $i++)
|
|
<div class=""><img src="http://fpoimg.com/100x100?bg_color=f3f3f3" class="img-fluid"></div>
|
|
@endfor
|
|
</div>
|
|
<div class="right"><img src="{{ $product->image }}" class="img-fluid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ps-lg-5 col-xl-5 col-lg-6 order-lg-2">
|
|
<div class="peoduct-info">
|
|
<h1>{{ $product->description->name }}</h1>
|
|
<div class="rating-wrap d-flex">
|
|
<div class="rating">
|
|
@for ($i = 0; $i < 5; $i++)
|
|
<i class="iconfont"></i>
|
|
@endfor
|
|
</div>
|
|
<span class="text-muted">132 reviews</span>
|
|
</div>
|
|
<div class="price-wrap d-flex align-items-end">
|
|
<div class="new-price">{{ $product->master_sku->price }}</div>
|
|
<div class="old-price text-muted text-decoration-line-through">{{ $product->master_sku->origin_price }}</div>
|
|
</div>
|
|
<div class="attribute-wrap">
|
|
<table class="table table-striped table-borderless">
|
|
<tbody>
|
|
<tr>
|
|
<td>型号</td>
|
|
<td>{{ $product->master_sku->model }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Sku</td>
|
|
<td>{{ $product->master_sku->sku }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="quantity-btns d-flex">
|
|
@include('shared.quantity', ['quantity' => '1'])
|
|
{{-- <div class="quantity-wrap">
|
|
<input class="form-control quantity-input" type="number" value="1">
|
|
</div> --}}
|
|
<button class="btn btn-outline-secondary ms-3 add-cart"><i class="bi bi-cart-fill me-1"></i>加入购物车</button>
|
|
<button class="btn btn-dark ms-3"><i class="bi bi-bag-fill me-1"></i>立即购买</button>
|
|
</div>
|
|
<div class="add-wishlist">
|
|
<button class="btn btn-link ps-0"><i class="bi bi-suit-heart-fill me-1"></i>加入收藏夹</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-description">
|
|
<div class="nav nav-tabs nav-overflow justify-content-start justify-content-md-center border-bottom">
|
|
<a class="nav-link active" data-bs-toggle="tab" href="#product-description">
|
|
Description
|
|
</a>
|
|
<a class="nav-link" data-bs-toggle="tab" href="#description-1">
|
|
Size & Fit
|
|
</a>
|
|
<a class="nav-link" data-bs-toggle="tab" href="#description-2">
|
|
Shipping & Return
|
|
</a>
|
|
</div>
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade show active" id="product-description" role="tabpanel" aria-labelledby="pills-home-tab">111</div>
|
|
<div class="tab-pane fade" id="description-1" role="tabpanel" aria-labelledby="pills-profile-tab">222</div>
|
|
<div class="tab-pane fade" id="description-2" role="tabpanel" aria-labelledby="pills-contact-tab">333</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$('.add-cart').on('click', function(event) {
|
|
$.ajax({
|
|
url: '/carts',
|
|
type: 'POST',
|
|
data: {
|
|
sku_id: '{{ $product->master_sku->id }}',
|
|
quantity: $('input[name="quantity"]').val()
|
|
},
|
|
})
|
|
.done(function(e) {
|
|
console.log(e);
|
|
})
|
|
.fail(function(e) {
|
|
console.log("error");
|
|
})
|
|
.always(function() {
|
|
console.log("complete");
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|
|
|