mini-cart component added
This commit is contained in:
shubhammehrotra.symfony@webkul.com
parent
a750509948
commit
8b2c955dd3
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"/js/velocity.js": "/js/velocity.js?id=9535513b6ba4df921d8b",
|
||||
"/js/velocity.js": "/js/velocity.js?id=f020eef94ee576cd6b41",
|
||||
"/css/velocity-admin.css": "/css/velocity-admin.css?id=612d35e452446366eef7",
|
||||
"/css/velocity.css": "/css/velocity.css?id=0c3bbabfcb61f4640459"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div
|
||||
id="cart-modal-content"
|
||||
class="modal-content sensitive-modal cart-modal-content hide">
|
||||
|
||||
<!--Body-->
|
||||
<div class="mini-cart-container">
|
||||
<div class="row small-card-container" :key="index" v-for="(item, index) in cartItems">
|
||||
<div class="col-3 product-image-container mr15">
|
||||
<a :href="removeUrl">
|
||||
<span class="rango-close"></span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="unset"
|
||||
:href="`${$root.baseUrl}/${item.url_key}`">
|
||||
|
||||
<div
|
||||
class="product-image"
|
||||
:style="`background-image: url(${item.images.medium_image_url});`">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-9 no-padding card-body align-vertical-top">
|
||||
<div class="no-padding">
|
||||
<div class="fs16 text-nowrap fw6" v-html="item.name"></div>
|
||||
|
||||
<div class="fs18 card-current-price fw6">
|
||||
<div class="display-inbl">
|
||||
<label class="fw5">{{ __('checkout.qty') }}</label>
|
||||
<input type="text" disabled :value="item.quantity" class="ml5" />
|
||||
</div>
|
||||
<span class="card-total-price fw6">
|
||||
{{ item.base_total }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Footer-->
|
||||
<div class="modal-footer">
|
||||
<h2 class="col-6 text-left fw6">
|
||||
{{ subtotalText }}
|
||||
</h2>
|
||||
|
||||
<h2 class="col-6 text-right fw6 no-padding">{{ cartInformation.base_sub_total }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<a class="col text-left fs16 link-color remove-decoration" :href="checkoutUrl">{{ cartText }}</a>
|
||||
|
||||
<div class="col text-right no-padding">
|
||||
<a :href="viewCart">
|
||||
<button
|
||||
type="button"
|
||||
class="theme-btn fs16 fw6">
|
||||
{{ checkoutText }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'items',
|
||||
'cartText',
|
||||
'viewCart',
|
||||
'removeUrl',
|
||||
'checkoutUrl',
|
||||
'cartDetails',
|
||||
'checkoutText',
|
||||
'subtotalText',
|
||||
],
|
||||
data: function () {
|
||||
return {
|
||||
cartItems: JSON.parse(this.items),
|
||||
cartInformation: JSON.parse(this.cartDetails),
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -31,6 +31,7 @@ window.Carousel = VueCarousel;
|
|||
|
||||
// UI components
|
||||
Vue.component("vue-slider", require("vue-slider-component"));
|
||||
Vue.component('mini-cart', require('./UI/components/mini-cart'));
|
||||
Vue.component('modal-component', require('./UI/components/modal'));
|
||||
Vue.component("add-to-cart", require("./UI/components/add-to-cart"));
|
||||
Vue.component('star-ratings', require('./UI/components/star-rating'));
|
||||
|
|
|
|||
|
|
@ -9,12 +9,27 @@
|
|||
@php
|
||||
Cart::collectTotals();
|
||||
$items = $cart->items;
|
||||
|
||||
$cartItems = $items->toArray();
|
||||
|
||||
$cartDetails = [];
|
||||
$cartDetails['base_sub_total'] = core()->currency($cart->base_sub_total);
|
||||
@endphp
|
||||
|
||||
<div class="dropdown">
|
||||
<cart-btn item-count="{{ $cart->items->count() }}"></cart-btn>
|
||||
|
||||
<div class="modal-content sensitive-modal cart-modal-content hide" id="cart-modal-content">
|
||||
@foreach ($items as $index => $item)
|
||||
@php
|
||||
$images = $item->product->getTypeInstance()->getBaseImage($item);
|
||||
|
||||
$cartItems[$index]['images'] = $images;
|
||||
$cartItems[$index]['url_key'] = $item->product->url_key;
|
||||
$cartItems[$index]['base_total'] = core()->currency($item->base_total);
|
||||
@endphp
|
||||
@endforeach
|
||||
|
||||
{{-- <div class="modal-content sensitive-modal cart-modal-content hide" id="cart-modal-content">
|
||||
<!--Body-->
|
||||
<div class="mini-cart-container">
|
||||
@foreach ($items as $item)
|
||||
|
|
@ -97,7 +112,18 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
<mini-cart
|
||||
items="{{ json_encode($cartItems) }}"
|
||||
cart-details="{{ json_encode($cartDetails) }}"
|
||||
view-cart="{{ route('shop.checkout.cart.index') }}"
|
||||
cart-text="{{ __('shop::app.minicart.view-cart') }}"
|
||||
checkout-text="{{ __('shop::app.minicart.checkout') }}"
|
||||
checkout-url="{{ route('shop.checkout.onepage.index') }}"
|
||||
subtotal-text="{{ __('shop::app.checkout.cart.cart-subtotal') }}"
|
||||
remove-url="{{ route('shop.checkout.cart.remove', ['id' => $item->id]) }}">
|
||||
</mini-cart>
|
||||
</div>
|
||||
@else
|
||||
<div class="dropdown disable-active">
|
||||
|
|
|
|||
|
|
@ -172,23 +172,16 @@
|
|||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script type='text/javascript' src='https://unpkg.com/spritespin@x.x.x/release/spritespin.js'></script>
|
||||
<script type='text/javascript' src='https://unpkg.com/spritespin@4.1.0/release/spritespin.js'></script>
|
||||
|
||||
<script type="text/x-template" id="product-view-template">
|
||||
<form method="POST" id="product-form" action="{{ route('cart.add', $product->product_id) }}" @click="onSubmit($event)">
|
||||
<input type="hidden" name="is_buy_now" v-model="is_buy_now">
|
||||
|
||||
{{-- <button type="button" class="theme-btn" @click="open360View" style="position: absolute;">360 view</button> --}}
|
||||
|
||||
<slot v-if="slot"></slot>
|
||||
|
||||
<div v-else>
|
||||
@foreach ($productImages as $image)
|
||||
<img src="{{ $image }}" />
|
||||
@endforeach
|
||||
|
||||
<div class="spritespin"></div>
|
||||
<input class="spritespin-slider" type="range">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
|
@ -243,11 +236,9 @@
|
|||
|
||||
e.preventDefault();
|
||||
|
||||
var this_this = this;
|
||||
|
||||
this.$validator.validateAll().then(function (result) {
|
||||
this.$validator.validateAll().then(result => {
|
||||
if (result) {
|
||||
this_this.is_buy_now = e.target.classList.contains('buynow') ? 1 : 0;
|
||||
this.is_buy_now = e.target.classList.contains('buynow') ? 1 : 0;
|
||||
|
||||
setTimeout(function() {
|
||||
document.getElementById('product-form').submit();
|
||||
|
|
@ -261,38 +252,41 @@
|
|||
|
||||
$(function() {
|
||||
$('.spritespin').spritespin({
|
||||
source: SpriteSpin.sourceArray('{{ $productImages[0] }}', {frame: [1,3], digits: 3}),
|
||||
width: 480,
|
||||
height: 327,
|
||||
source: SpriteSpin.sourceArray('http://localhost/3d-image/sample-{lane}-{frame}.jpg', {
|
||||
lane: [0,5],
|
||||
frame: [0,5],
|
||||
digits: 2
|
||||
}),
|
||||
// width and height of the display
|
||||
width: 400,
|
||||
height: 225,
|
||||
// the number of lanes (vertical angles)
|
||||
lanes: 12,
|
||||
// the number of frames per lane (per vertical angle)
|
||||
frames: 24,
|
||||
// interaction sensitivity (and direction) modifier for horizontal movement
|
||||
sense: 1,
|
||||
// interaction sensitivity (and direction) modifier for vertical movement
|
||||
senseLane: -2,
|
||||
|
||||
// the initial lane number
|
||||
lane: 6,
|
||||
// the initial frame number (within the lane)
|
||||
frame: 0,
|
||||
// disable autostart of the animation
|
||||
animate: false,
|
||||
|
||||
plugins: [
|
||||
'360'
|
||||
],
|
||||
onFrame: function(e, data) {
|
||||
$('.spritespin-slider').val(data.frame)
|
||||
},
|
||||
onInit: function(e, data) {
|
||||
$('.spritespin-slider')
|
||||
.attr("min", 0)
|
||||
.attr("max", data.source.length - 1)
|
||||
.attr("value", 0)
|
||||
.on("input", function(e) {
|
||||
SpriteSpin.updateFrame(data, e.target.value);
|
||||
})
|
||||
}
|
||||
'progress',
|
||||
'360',
|
||||
'drag'
|
||||
];
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(document).ready(function() {
|
||||
var addTOButton = document.getElementsByClassName('add-to-buttons')[0];
|
||||
// document.getElementById('loader').style.display="none";
|
||||
// addTOButton.style.display="flex";
|
||||
});
|
||||
|
||||
window.onload = function() {
|
||||
var thumbList = document.getElementsByClassName('thumb-list')[0];
|
||||
var thumbFrame = document.getElementsByClassName('thumb-frame');
|
||||
|
|
|
|||
Loading…
Reference in New Issue