¨4.0.1¨
This commit is contained in:
¨NW¨
@@ -15,10 +15,7 @@ export default {
|
||||
accept() {
|
||||
this.show = false;
|
||||
|
||||
$.ajax({
|
||||
method: 'DELETE',
|
||||
url: route('storefront.cookie_bar.destroy'),
|
||||
});
|
||||
axios.delete(route("storefront.cookie_bar.destroy"));
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
:placeholder="
|
||||
$trans('storefront::layout.search_for_products')
|
||||
"
|
||||
@focus="showExistingSuggestions"
|
||||
@keydown.esc="hideSuggestions"
|
||||
@keydown.down="nextSuggestion"
|
||||
@keydown.up="prevSuggestion"
|
||||
@@ -92,7 +93,7 @@
|
||||
|
||||
<div class="header-search-sm-form">
|
||||
<form class="search-form" @submit.prevent="search">
|
||||
<div class="btn-close">
|
||||
<div class="btn-close" @click="showSuggestions = false">
|
||||
<i class="las la-arrow-left"></i>
|
||||
</div>
|
||||
|
||||
@@ -107,6 +108,7 @@
|
||||
"
|
||||
:value="form.query"
|
||||
@input="form.query = $event.target.value"
|
||||
@focus="showExistingSuggestions"
|
||||
@keydown.esc="hideSuggestions"
|
||||
@keydown.down="nextSuggestion"
|
||||
@keydown.up="prevSuggestion"
|
||||
@@ -118,7 +120,10 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="search-suggestions" v-if="shouldShowSuggestions">
|
||||
<div
|
||||
class="search-suggestions overflow-hidden"
|
||||
v-if="shouldShowSuggestions"
|
||||
>
|
||||
<div
|
||||
class="search-suggestions-inner custom-scrollbar"
|
||||
ref="searchSuggestionsInner"
|
||||
@@ -179,7 +184,7 @@
|
||||
'image-placeholder':
|
||||
!hasBaseImage(product),
|
||||
}"
|
||||
alt="product image"
|
||||
:alt="product.name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -212,31 +217,29 @@
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a
|
||||
v-if="suggestions.remaining !== 0"
|
||||
:href="moreResultsUrl"
|
||||
@click="hideSuggestions"
|
||||
class="more-results"
|
||||
>
|
||||
{{
|
||||
$trans("storefront::layout.more_results", {
|
||||
count: this.suggestions.remaining,
|
||||
})
|
||||
}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
v-if="suggestions.remaining !== 0"
|
||||
:href="moreResultsUrl"
|
||||
@click="hideSuggestions"
|
||||
class="more-results"
|
||||
>
|
||||
{{
|
||||
$trans("storefront::layout.more_results", {
|
||||
count: this.suggestions.remaining,
|
||||
})
|
||||
}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductHelpersMixin from "../../mixins/ProductHelpersMixin";
|
||||
import { throttle } from "lodash";
|
||||
|
||||
export default {
|
||||
mixins: [ProductHelpersMixin],
|
||||
|
||||
props: [
|
||||
"categories",
|
||||
"mostSearchedKeywords",
|
||||
@@ -303,7 +306,7 @@ export default {
|
||||
},
|
||||
|
||||
watch: {
|
||||
"form.query": function (newQuery) {
|
||||
"form.query": throttle(function (newQuery) {
|
||||
if (newQuery === "") {
|
||||
this.clearSuggestions();
|
||||
} else {
|
||||
@@ -311,7 +314,7 @@ export default {
|
||||
|
||||
this.fetchSuggestions();
|
||||
}
|
||||
},
|
||||
}, 600),
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -322,17 +325,16 @@ export default {
|
||||
},
|
||||
|
||||
fetchSuggestions() {
|
||||
$.ajax({
|
||||
method: "GET",
|
||||
url: route("suggestions.index", this.form),
|
||||
}).then((suggestions) => {
|
||||
this.suggestions.categories = suggestions.categories;
|
||||
this.suggestions.products = suggestions.products;
|
||||
this.suggestions.remaining = suggestions.remaining;
|
||||
axios
|
||||
.get(route("suggestions.index", this.form))
|
||||
.then(({ data }) => {
|
||||
this.suggestions.categories = data.categories;
|
||||
this.suggestions.products = data.products;
|
||||
this.suggestions.remaining = data.remaining;
|
||||
|
||||
this.clearActiveSuggestion();
|
||||
this.resetSuggestionScrollBar();
|
||||
});
|
||||
this.clearActiveSuggestion();
|
||||
this.resetSuggestionScrollBar();
|
||||
});
|
||||
},
|
||||
|
||||
search() {
|
||||
@@ -362,12 +364,18 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
showExistingSuggestions() {
|
||||
if (this.form.query !== "") {
|
||||
this.showSuggestions = true;
|
||||
}
|
||||
},
|
||||
|
||||
clearSuggestions() {
|
||||
this.suggestions.categories = [];
|
||||
this.suggestions.products = [];
|
||||
},
|
||||
|
||||
hideSuggestions(e) {
|
||||
hideSuggestions() {
|
||||
this.showSuggestions = false;
|
||||
|
||||
this.clearActiveSuggestion();
|
||||
@@ -447,6 +455,22 @@ export default {
|
||||
this.$refs.searchSuggestionsInner.scrollTop = 0;
|
||||
}
|
||||
},
|
||||
|
||||
productUrl(product) {
|
||||
return route("products.show", product.slug);
|
||||
},
|
||||
|
||||
hasBaseImage(product) {
|
||||
return product.base_image.length !== 0;
|
||||
},
|
||||
|
||||
baseImage(product) {
|
||||
if (this.hasBaseImage(product)) {
|
||||
return product.base_image.path;
|
||||
}
|
||||
|
||||
return `${window.FleetCart.baseUrl}/build/assets/image-placeholder.png`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
email: '',
|
||||
email: "",
|
||||
subscribed: false,
|
||||
subscribing: false,
|
||||
error: '',
|
||||
error: "",
|
||||
disable_popup: false,
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
email() {
|
||||
this.error = '';
|
||||
this.error = "";
|
||||
},
|
||||
|
||||
disable_popup(bool) {
|
||||
@@ -25,48 +25,46 @@ export default {
|
||||
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
$('.newsletter-wrap').modal('show');
|
||||
$(".newsletter-wrap").modal("show");
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
methods: {
|
||||
enableNewsletterPopup() {
|
||||
$.ajax({
|
||||
method: 'POST',
|
||||
url: route('storefront.newsletter_popup.store'),
|
||||
});
|
||||
axios.post(route("storefront.newsletter_popup.store"));
|
||||
},
|
||||
|
||||
disableNewsletterPopup() {
|
||||
$.ajax({
|
||||
method: 'DELETE',
|
||||
url: route('storefront.newsletter_popup.destroy'),
|
||||
});
|
||||
axios.delete(route("storefront.newsletter_popup.destroy"));
|
||||
},
|
||||
|
||||
subscribe() {
|
||||
if (! this.email || this.subscribed) {
|
||||
if (!this.email || this.subscribed) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.subscribing = true;
|
||||
|
||||
$.ajax({
|
||||
method: 'POST',
|
||||
url: route('subscribers.store'),
|
||||
data: { email: this.email },
|
||||
}).then(() => {
|
||||
this.email = '';
|
||||
this.subscribed = true;
|
||||
}).catch((response) => {
|
||||
if (response.status === 422) {
|
||||
this.error = response.responseJSON.errors.email[0];
|
||||
} else {
|
||||
this.error = response.responseJSON.message;
|
||||
}
|
||||
}).always(() => {
|
||||
this.subscribing = false;
|
||||
});
|
||||
axios
|
||||
.post(route("subscribers.store"), {
|
||||
email: this.email,
|
||||
})
|
||||
.then(() => {
|
||||
this.email = "";
|
||||
this.subscribed = true;
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.response.status === 422) {
|
||||
this.error = error.response.data.errors.email[0];
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.error = error.response.data.message;
|
||||
})
|
||||
.finally(() => {
|
||||
this.subscribing = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
email: '',
|
||||
email: "",
|
||||
subscribed: false,
|
||||
subscribing: false,
|
||||
};
|
||||
@@ -9,28 +9,32 @@ export default {
|
||||
|
||||
methods: {
|
||||
subscribe() {
|
||||
if (! this.email || this.subscribed) {
|
||||
if (!this.email || this.subscribed) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.subscribing = true;
|
||||
|
||||
$.ajax({
|
||||
method: 'POST',
|
||||
url: route('subscribers.store'),
|
||||
data: { email: this.email },
|
||||
}).then(() => {
|
||||
this.email = '';
|
||||
this.subscribed = true;
|
||||
}).catch((response) => {
|
||||
if (response.status === 422) {
|
||||
this.$notify(response.responseJSON.errors.email[0]);
|
||||
} else {
|
||||
this.$notify(response.responseJSON.message);
|
||||
}
|
||||
}).always(() => {
|
||||
this.subscribing = false;
|
||||
});
|
||||
axios
|
||||
.post(route("subscribers.store"), {
|
||||
email: this.email,
|
||||
})
|
||||
.then(() => {
|
||||
this.email = "";
|
||||
this.subscribed = true;
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.response.status === 422) {
|
||||
this.$notify(error.response.data.errors.email[0]);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.$notify(error.response.data.message);
|
||||
})
|
||||
.finally(() => {
|
||||
this.subscribing = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import store from '../../store';
|
||||
import SidebarCartItem from './SidebarCartItem.vue';
|
||||
import store from "../../store";
|
||||
|
||||
export default {
|
||||
components: { SidebarCartItem },
|
||||
components: { SidebarCartItem: () => import("./SidebarCartItem.vue") },
|
||||
|
||||
computed: {
|
||||
cart() {
|
||||
@@ -14,7 +13,30 @@ export default {
|
||||
},
|
||||
|
||||
cartIsNotEmpty() {
|
||||
return ! store.cartIsEmpty();
|
||||
return !store.cartIsEmpty();
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.initEventListeners();
|
||||
},
|
||||
|
||||
methods: {
|
||||
initEventListeners() {
|
||||
const sidebarCartWrap = $(".sidebar-cart-wrap");
|
||||
const overlay = $(".overlay");
|
||||
|
||||
$(".header-cart").on("click", (e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
overlay.addClass("active");
|
||||
sidebarCartWrap.addClass("active");
|
||||
});
|
||||
|
||||
$(".sidebar-cart-close").on("click", () => {
|
||||
overlay.removeClass("active");
|
||||
sidebarCartWrap.removeClass("active");
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,26 +1,98 @@
|
||||
<template>
|
||||
<div class="sidebar-cart-item">
|
||||
<a :href="productUrl(cartItem.product)" class="product-image">
|
||||
<div class="cart-item sidebar-cart-item">
|
||||
<a :href="productUrl(cartItem)" class="product-image">
|
||||
<img
|
||||
:src="baseImage(cartItem.product)"
|
||||
:class="{ 'image-placeholder': ! hasBaseImage(cartItem.product) }"
|
||||
alt="product image"
|
||||
>
|
||||
:src="baseImage(cartItem)"
|
||||
:class="{
|
||||
'image-placeholder': !hasBaseImage(cartItem),
|
||||
}"
|
||||
:alt="cartItem.product.name"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<div class="product-info">
|
||||
<a :href="productUrl(cartItem.product)" class="product-name" :title="cartItem.product.name">
|
||||
<a
|
||||
:href="productUrl(cartItem)"
|
||||
class="product-name"
|
||||
:title="cartItem.product.name"
|
||||
>
|
||||
{{ cartItem.product.name }}
|
||||
</a>
|
||||
|
||||
<ul class="list-inline product-options">
|
||||
<ul
|
||||
v-if="Object.entries(cartItem.variations).length !== 0"
|
||||
class="list-inline product-options"
|
||||
>
|
||||
<li
|
||||
v-for="(variation, key, index) in cartItem.variations"
|
||||
:key="index"
|
||||
>
|
||||
<label>{{ variation.name }}:</label>
|
||||
{{ variation.values[0].label
|
||||
}}{{
|
||||
index === Object.values(cartItem.variations).length - 1
|
||||
? ""
|
||||
: ","
|
||||
}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul
|
||||
v-if="Object.entries(cartItem.options).length !== 0"
|
||||
class="list-inline product-options"
|
||||
>
|
||||
<li v-for="option in cartItem.options" :key="option.id">
|
||||
<label>{{ option.name }}:</label> {{ optionValues(option) }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="product-quantity">
|
||||
{{ cartItem.qty }} x <span v-html="cartItem.unitPrice.inCurrentCurrency.formatted"></span>
|
||||
<div class="d-flex align-items-center justify-content-between mt-1">
|
||||
<div class="number-picker">
|
||||
<div class="input-group-quantity">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-number btn-minus"
|
||||
:disabled="cartItem.qty <= 1"
|
||||
@click="updateQuantity(cartItem, cartItem.qty - 1)"
|
||||
>
|
||||
-
|
||||
</button>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
:value="cartItem.qty"
|
||||
min="1"
|
||||
:max="maxQuantity(cartItem)"
|
||||
class="form-control input-number input-quantity"
|
||||
@focus="$event.target.select()"
|
||||
@input="
|
||||
changeQuantity(
|
||||
cartItem,
|
||||
Number($event.target.value)
|
||||
)
|
||||
"
|
||||
@keydown.up="
|
||||
updateQuantity(cartItem, cartItem.qty + 1)
|
||||
"
|
||||
@keydown.down="
|
||||
updateQuantity(cartItem, cartItem.qty - 1)
|
||||
"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-number btn-plus"
|
||||
:disabled="isQtyIncreaseDisabled(cartItem)"
|
||||
@click="updateQuantity(cartItem, cartItem.qty + 1)"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-price">
|
||||
x {{ cartItem.unitPrice.inCurrentCurrency.formatted }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -33,37 +105,52 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '../../store';
|
||||
import ProductHelpersMixin from '../../mixins/ProductHelpersMixin';
|
||||
import store from "../../store";
|
||||
import CartItemHelpersMixin from "../../mixins/CartItemHelpersMixin";
|
||||
|
||||
export default {
|
||||
mixins: [
|
||||
ProductHelpersMixin,
|
||||
],
|
||||
export default {
|
||||
mixins: [CartItemHelpersMixin],
|
||||
|
||||
props: ['cartItem'],
|
||||
props: ["cartItem"],
|
||||
|
||||
methods: {
|
||||
optionValues(option) {
|
||||
let values = [];
|
||||
|
||||
for (let value of option.values) {
|
||||
values.push(value.label);
|
||||
}
|
||||
|
||||
return values.join(', ');
|
||||
},
|
||||
|
||||
remove() {
|
||||
store.removeCartItem(this.cartItem);
|
||||
|
||||
$.ajax({
|
||||
method: 'DELETE',
|
||||
url: route('cart.items.destroy', { cartItemId: this.cartItem.id }),
|
||||
}).then((cart) => {
|
||||
store.updateCart(cart);
|
||||
methods: {
|
||||
updateCart(cartItem, qty) {
|
||||
axios
|
||||
.put(
|
||||
route("cart.items.update", {
|
||||
cartItemId: cartItem.id,
|
||||
...(store.hasCoupon() && {
|
||||
coupon_code: store.getCoupon(),
|
||||
}),
|
||||
}),
|
||||
{
|
||||
qty: qty || 1,
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
store.updateCart(response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$notify(error.response.data.message);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
remove() {
|
||||
store.removeCartItem(this.cartItem);
|
||||
|
||||
axios
|
||||
.delete(
|
||||
route("cart.items.destroy", {
|
||||
cartItemId: this.cartItem.id,
|
||||
...(store.hasCoupon() && {
|
||||
coupon_code: store.getCoupon(),
|
||||
}),
|
||||
})
|
||||
)
|
||||
.then((response) => {
|
||||
store.updateCart(response.data);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user