¨4.0.1¨
This commit is contained in:
¨NW¨
@@ -6,14 +6,14 @@
|
||||
class="banner"
|
||||
:target="banner.open_in_new_window ? '_blank' : '_self'"
|
||||
>
|
||||
<img :src="banner.image.path" alt="banner">
|
||||
<img :src="banner.image.path" alt="Banner" />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['banner'],
|
||||
};
|
||||
export default {
|
||||
props: ["banner"],
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -6,9 +6,13 @@
|
||||
<a
|
||||
:href="data.banner_1.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_1.open_in_new_window ? '_blank' : '_self'"
|
||||
:target="
|
||||
data.banner_1.open_in_new_window
|
||||
? '_blank'
|
||||
: '_self'
|
||||
"
|
||||
>
|
||||
<img :src="data.banner_1.image.path" alt="banner">
|
||||
<img :src="data.banner_1.image.path" alt="Banner" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -16,9 +20,13 @@
|
||||
<a
|
||||
:href="data.banner_2.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_2.open_in_new_window ? '_blank' : '_self'"
|
||||
:target="
|
||||
data.banner_2.open_in_new_window
|
||||
? '_blank'
|
||||
: '_self'
|
||||
"
|
||||
>
|
||||
<img :src="data.banner_2.image.path" alt="banner">
|
||||
<img :src="data.banner_2.image.path" alt="Banner" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -26,9 +34,13 @@
|
||||
<a
|
||||
:href="data.banner_3.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_3.open_in_new_window ? '_blank' : '_self'"
|
||||
:target="
|
||||
data.banner_3.open_in_new_window
|
||||
? '_blank'
|
||||
: '_self'
|
||||
"
|
||||
>
|
||||
<img :src="data.banner_3.image.path" alt="banner">
|
||||
<img :src="data.banner_3.image.path" alt="Banner" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,7 +49,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['data'],
|
||||
};
|
||||
export default {
|
||||
props: ["data"],
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -9,9 +9,13 @@
|
||||
<a
|
||||
:href="data.banner_1.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_1.open_in_new_window ? '_blank' : '_self'"
|
||||
:target="
|
||||
data.banner_1.open_in_new_window
|
||||
? '_blank'
|
||||
: '_self'
|
||||
"
|
||||
>
|
||||
<img :src="data.banner_1.image.path" alt="banner">
|
||||
<img :src="data.banner_1.image.path" alt="Banner" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -19,9 +23,13 @@
|
||||
<a
|
||||
:href="data.banner_2.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_2.open_in_new_window ? '_blank' : '_self'"
|
||||
:target="
|
||||
data.banner_2.open_in_new_window
|
||||
? '_blank'
|
||||
: '_self'
|
||||
"
|
||||
>
|
||||
<img :src="data.banner_2.image.path" alt="banner">
|
||||
<img :src="data.banner_2.image.path" alt="Banner" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -29,9 +37,13 @@
|
||||
<a
|
||||
:href="data.banner_3.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_3.open_in_new_window ? '_blank' : '_self'"
|
||||
:target="
|
||||
data.banner_3.open_in_new_window
|
||||
? '_blank'
|
||||
: '_self'
|
||||
"
|
||||
>
|
||||
<img :src="data.banner_3.image.path" alt="banner">
|
||||
<img :src="data.banner_3.image.path" alt="Banner" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -40,7 +52,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['data'],
|
||||
};
|
||||
export default {
|
||||
props: ["data"],
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -6,9 +6,13 @@
|
||||
<a
|
||||
:href="data.banner_1.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_1.open_in_new_window ? '_blank' : '_self'"
|
||||
:target="
|
||||
data.banner_1.open_in_new_window
|
||||
? '_blank'
|
||||
: '_self'
|
||||
"
|
||||
>
|
||||
<img :src="data.banner_1.image.path" alt="banner">
|
||||
<img :src="data.banner_1.image.path" alt="Banner" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -16,9 +20,13 @@
|
||||
<a
|
||||
:href="data.banner_2.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_2.open_in_new_window ? '_blank' : '_self'"
|
||||
:target="
|
||||
data.banner_2.open_in_new_window
|
||||
? '_blank'
|
||||
: '_self'
|
||||
"
|
||||
>
|
||||
<img :src="data.banner_2.image.path" alt="banner">
|
||||
<img :src="data.banner_2.image.path" alt="Banner" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,7 +35,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['data'],
|
||||
};
|
||||
export default {
|
||||
props: ["data"],
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -19,7 +19,7 @@ export default {
|
||||
return this.initialLogo.path;
|
||||
}
|
||||
|
||||
return `${window.FleetCart.baseUrl}/themes/storefront/public/images/image-placeholder.png`;
|
||||
return `${window.FleetCart.baseUrl}/build/assets/image-placeholder.png`;
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@@ -15,16 +15,28 @@
|
||||
@click="change(tab)"
|
||||
>
|
||||
<div class="featured-category-image">
|
||||
<img :src="tab.logo" :class="{ 'image-placeholder': ! tab.hasLogo }" alt="category logo">
|
||||
<img
|
||||
:src="tab.logo"
|
||||
:class="{ 'image-placeholder': !tab.hasLogo }"
|
||||
alt="Category logo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span class="featured-category-name">{{ tab.label }}</span>
|
||||
<span class="featured-category-name">{{
|
||||
tab.label
|
||||
}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tab-content featured-category-products">
|
||||
<ProductCard v-for="product in products" :key="product.id" :product="product"/>
|
||||
<div class="tab-content">
|
||||
<div class="featured-category-products">
|
||||
<ProductCard
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:product="product"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -33,88 +45,76 @@
|
||||
:key="index"
|
||||
:label="category.name"
|
||||
:initial-logo="category.logo"
|
||||
:url="route('storefront.featured_category_products.index', { categoryNumber: index + 1 })"
|
||||
:url="
|
||||
route('storefront.featured_category_products.index', {
|
||||
categoryNumber: index + 1,
|
||||
})
|
||||
"
|
||||
>
|
||||
</dynamic-tab>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductCard from '../ProductCard.vue';
|
||||
import DynamicTabsMixin from '../../mixins/DynamicTabsMixin';
|
||||
import { slickPrevArrow, slickNextArrow } from '../../functions';
|
||||
import { slickPrevArrow, slickNextArrow } from "../../functions";
|
||||
import ProductCard from "../ProductCard.vue";
|
||||
import DynamicTabsMixin from "../../mixins/DynamicTabsMixin";
|
||||
|
||||
export default {
|
||||
components: { ProductCard },
|
||||
export default {
|
||||
components: { ProductCard },
|
||||
|
||||
mixins: [
|
||||
DynamicTabsMixin,
|
||||
],
|
||||
mixins: [DynamicTabsMixin],
|
||||
|
||||
props: ['data'],
|
||||
props: ["data"],
|
||||
|
||||
methods: {
|
||||
selector() {
|
||||
return $('.featured-category-products');
|
||||
},
|
||||
|
||||
slickOptions() {
|
||||
return {
|
||||
rows: 0,
|
||||
dots: true,
|
||||
arrows: false,
|
||||
infinite: true,
|
||||
slidesToShow: 6,
|
||||
slidesToScroll: 6,
|
||||
rtl: window.FleetCart.rtl,
|
||||
prevArrow: slickPrevArrow(),
|
||||
nextArrow: slickNextArrow(),
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1761,
|
||||
settings: {
|
||||
slidesToShow: 5,
|
||||
slidesToScroll: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1301,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1051,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 881,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 641,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selector() {
|
||||
return $(".featured-category-products");
|
||||
},
|
||||
};
|
||||
|
||||
slickOptions() {
|
||||
return {
|
||||
rows: 0,
|
||||
dots: true,
|
||||
arrows: false,
|
||||
infinite: true,
|
||||
slidesToShow: 6,
|
||||
slidesToScroll: 6,
|
||||
rtl: window.FleetCart.rtl,
|
||||
prevArrow: slickPrevArrow(),
|
||||
nextArrow: slickNextArrow(),
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1761,
|
||||
settings: {
|
||||
slidesToShow: 5,
|
||||
slidesToScroll: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1301,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 577,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,75 +1,89 @@
|
||||
<template>
|
||||
<div class="col-xl-6 col-lg-18">
|
||||
<div class="col-xl-6 col-lg-18" v-if="hasAnyProduct">
|
||||
<div class="daily-deals-wrap">
|
||||
<div class="daily-deals-header clearfix">
|
||||
<h4 class="section-title" v-html="title"></h4>
|
||||
</div>
|
||||
|
||||
<div class="daily-deals" ref="productsPlaceholder">
|
||||
<FlashSaleProductCard v-for="product in products" :key="product.id" :product="product"/>
|
||||
<FlashSaleProductCard
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:product="product"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FlashSaleProductCard from './FlashSaleProductCard.vue';
|
||||
import { slickPrevArrow, slickNextArrow } from '../../functions';
|
||||
import { slickPrevArrow, slickNextArrow } from "../../functions";
|
||||
import FlashSaleProductCard from "./FlashSaleProductCard.vue";
|
||||
import("countdown").then((module) => (window.countdown = module.default));
|
||||
|
||||
export default {
|
||||
components: { FlashSaleProductCard },
|
||||
export default {
|
||||
components: { FlashSaleProductCard },
|
||||
|
||||
props: ['title', 'url'],
|
||||
props: ["title", "url"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
products: [],
|
||||
};
|
||||
data() {
|
||||
return {
|
||||
products: [],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
hasAnyProduct() {
|
||||
return this.products.length !== 0;
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
$.ajax({
|
||||
method: 'GET',
|
||||
url: this.url,
|
||||
}).then((products) => {
|
||||
this.products = products;
|
||||
created() {
|
||||
this.fetchProducts();
|
||||
},
|
||||
|
||||
methods: {
|
||||
async fetchProducts() {
|
||||
await axios.get(this.url).then((response) => {
|
||||
this.products = response.data;
|
||||
|
||||
this.$nextTick(() => {
|
||||
$(this.$refs.productsPlaceholder).slick(this.slickOptions());
|
||||
$(this.$refs.productsPlaceholder).slick(
|
||||
this.slickOptions()
|
||||
);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
slickOptions() {
|
||||
return {
|
||||
rows: 0,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
infinite: true,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
rtl: window.FleetCart.rtl,
|
||||
prevArrow: slickPrevArrow(),
|
||||
nextArrow: slickNextArrow(),
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1200,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
},
|
||||
slickOptions() {
|
||||
return {
|
||||
rows: 0,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
infinite: true,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
rtl: window.FleetCart.rtl,
|
||||
prevArrow: slickPrevArrow(),
|
||||
nextArrow: slickNextArrow(),
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1200,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,28 +1,49 @@
|
||||
<template>
|
||||
<section class="vertical-products-wrap">
|
||||
<section
|
||||
class="vertical-products-wrap"
|
||||
:class="{
|
||||
'flash-sale-enabled': flashSaleEnabled,
|
||||
}"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<flash-sale
|
||||
v-if="flashSaleEnabled"
|
||||
:title="data.flash_sale_title"
|
||||
:url="route('storefront.flash_sale_products.index')"
|
||||
>
|
||||
</flash-sale>
|
||||
|
||||
<vertical-products
|
||||
:flash-sale-enabled="flashSaleEnabled"
|
||||
:title="data.vertical_products_1_title"
|
||||
:url="route('storefront.vertical_products.index', { columnNumber: 1 })"
|
||||
:url="
|
||||
route('storefront.vertical_products.index', {
|
||||
columnNumber: 1,
|
||||
})
|
||||
"
|
||||
>
|
||||
</vertical-products>
|
||||
|
||||
<vertical-products
|
||||
:flash-sale-enabled="flashSaleEnabled"
|
||||
:title="data.vertical_products_2_title"
|
||||
:url="route('storefront.vertical_products.index', { columnNumber: 2 })"
|
||||
:url="
|
||||
route('storefront.vertical_products.index', {
|
||||
columnNumber: 2,
|
||||
})
|
||||
"
|
||||
>
|
||||
</vertical-products>
|
||||
|
||||
<vertical-products
|
||||
:flash-sale-enabled="flashSaleEnabled"
|
||||
:title="data.vertical_products_3_title"
|
||||
:url="route('storefront.vertical_products.index', { columnNumber: 3 })"
|
||||
:url="
|
||||
route('storefront.vertical_products.index', {
|
||||
columnNumber: 3,
|
||||
})
|
||||
"
|
||||
>
|
||||
</vertical-products>
|
||||
</div>
|
||||
@@ -31,7 +52,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['data'],
|
||||
};
|
||||
export default {
|
||||
components: {
|
||||
FlashSale: () => import("./FlashSale.vue"),
|
||||
VerticalProducts: () => import("./VerticalProducts.vue"),
|
||||
},
|
||||
|
||||
props: ["data", "flashSaleEnabled"],
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -2,7 +2,11 @@
|
||||
<div class="daily-deals-inner">
|
||||
<div class="daily-deals-top">
|
||||
<a :href="productUrl" class="product-image">
|
||||
<img :src="baseImage" :class="{ 'image-placeholder': ! hasBaseImage }" alt="product-image">
|
||||
<img
|
||||
:src="baseImage"
|
||||
:class="{ 'image-placeholder': !hasBaseImage }"
|
||||
:alt="product.name"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -11,22 +15,26 @@
|
||||
</a>
|
||||
|
||||
<div class="product-info">
|
||||
<div class="product-price" v-html="product.formatted_price"></div>
|
||||
<div class="product-price" v-html="item.formatted_price"></div>
|
||||
|
||||
<ProductRating :ratingPercent="product.rating_percent" :reviewCount="product.reviews.length"/>
|
||||
<product-rating
|
||||
:ratingPercent="product.rating_percent"
|
||||
:reviewCount="product.reviews.length"
|
||||
>
|
||||
</product-rating>
|
||||
</div>
|
||||
|
||||
<div class="daily-deals-countdown clearfix"></div>
|
||||
<countdown :end-date="product.pivot.end_date"></countdown>
|
||||
|
||||
<div class="deal-progress">
|
||||
<div class="deal-stock">
|
||||
<div class="stock-available">
|
||||
{{ $trans('storefront::product_card.available') }}
|
||||
{{ $trans("storefront::product_card.available") }}
|
||||
<span>{{ product.pivot.qty }}</span>
|
||||
</div>
|
||||
|
||||
<div class="stock-sold">
|
||||
{{ $trans('storefront::product_card.sold') }}
|
||||
{{ $trans("storefront::product_card.sold") }}
|
||||
<span>{{ product.pivot.sold }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -39,38 +47,30 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductRating from '../ProductRating.vue';
|
||||
import ProductCardMixin from '../../mixins/ProductCardMixin';
|
||||
import Countdown from "../Countdown.vue";
|
||||
import ProductCardMixin from "../../mixins/ProductCardMixin";
|
||||
|
||||
export default {
|
||||
components: { ProductRating },
|
||||
export default {
|
||||
components: { Countdown },
|
||||
|
||||
mixins: [
|
||||
ProductCardMixin,
|
||||
],
|
||||
mixins: [ProductCardMixin],
|
||||
|
||||
props: ['product'],
|
||||
props: ["product"],
|
||||
|
||||
computed: {
|
||||
progress() {
|
||||
return (this.product.pivot.sold / this.product.pivot.qty * 100) + '%';
|
||||
data() {
|
||||
return {
|
||||
item: {
|
||||
...(this.product.variant ? this.product.variant : this.product),
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
$(this.$el).find('.daily-deals-countdown').countdown({
|
||||
until: new Date(this.product.pivot.end_date),
|
||||
format: 'DHMS',
|
||||
labels: [
|
||||
this.$trans('storefront::product_card.years'),
|
||||
this.$trans('storefront::product_card.months'),
|
||||
this.$trans('storefront::product_card.weeks'),
|
||||
this.$trans('storefront::product_card.days'),
|
||||
this.$trans('storefront::product_card.hours'),
|
||||
this.$trans('storefront::product_card.minutes'),
|
||||
this.$trans('storefront::product_card.seconds'),
|
||||
],
|
||||
});
|
||||
computed: {
|
||||
progress() {
|
||||
return (
|
||||
(this.product.pivot.sold / this.product.pivot.qty) * 100 + "%"
|
||||
);
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<section class="grid-products-wrap clearfix">
|
||||
<div class="container">
|
||||
<div class="tab-products-header clearfix">
|
||||
<ul class="tabs float-left">
|
||||
<ul class="tabs float-left overflow-hidden">
|
||||
<li
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
@@ -14,9 +14,21 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tab-content grid-products">
|
||||
<div v-for="(productChunks, index) in $chunk(products, 12)" :key="index" class="grid-products-inner">
|
||||
<ProductCard v-for="product in productChunks" :key="product.id" :product="product"/>
|
||||
<div class="tab-content">
|
||||
<div class="grid-products">
|
||||
<div
|
||||
v-for="(productChunks, index) in $chunk(products, 12)"
|
||||
:key="index"
|
||||
class="grid-products-slide d-flex flex-wrap flex-grow-1"
|
||||
>
|
||||
<div
|
||||
class="grid-products-item"
|
||||
v-for="product in productChunks"
|
||||
:key="product.id"
|
||||
>
|
||||
<ProductCard :product="product" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -24,7 +36,11 @@
|
||||
v-for="(tabLabel, index) in data"
|
||||
:key="index"
|
||||
:label="tabLabel"
|
||||
:url="route('storefront.product_grid.index', { tabNumber: index + 1 })"
|
||||
:url="
|
||||
route('storefront.product_grid.index', {
|
||||
tabNumber: index + 1,
|
||||
})
|
||||
"
|
||||
>
|
||||
</dynamic-tab>
|
||||
</div>
|
||||
@@ -32,46 +48,44 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductCard from '../ProductCard.vue';
|
||||
import DynamicTabsMixin from '../../mixins/DynamicTabsMixin';
|
||||
import { slickPrevArrow, slickNextArrow } from '../../functions';
|
||||
import { slickPrevArrow, slickNextArrow } from "../../functions";
|
||||
import ProductCard from "../ProductCard.vue";
|
||||
import DynamicTabsMixin from "../../mixins/DynamicTabsMixin";
|
||||
|
||||
export default {
|
||||
components: { ProductCard },
|
||||
export default {
|
||||
components: { ProductCard },
|
||||
|
||||
mixins: [
|
||||
DynamicTabsMixin,
|
||||
],
|
||||
mixins: [DynamicTabsMixin],
|
||||
|
||||
props: ['data'],
|
||||
props: ["data"],
|
||||
|
||||
methods: {
|
||||
selector() {
|
||||
return $('.grid-products');
|
||||
},
|
||||
|
||||
slickOptions() {
|
||||
return {
|
||||
rows: 0,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
infinite: true,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
rtl: window.FleetCart.rtl,
|
||||
prevArrow: slickPrevArrow(),
|
||||
nextArrow: slickNextArrow(),
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
dots: true,
|
||||
arrows: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selector() {
|
||||
return $(".grid-products");
|
||||
},
|
||||
};
|
||||
|
||||
slickOptions() {
|
||||
return {
|
||||
rows: 0,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
infinite: false,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
rtl: window.FleetCart.rtl,
|
||||
prevArrow: slickPrevArrow(),
|
||||
nextArrow: slickNextArrow(),
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
dots: true,
|
||||
arrows: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -14,12 +14,14 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tab-content landscape-left-tab-products">
|
||||
<ProductCard
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:product="product"
|
||||
/>
|
||||
<div class="tab-content">
|
||||
<div class="landscape-left-tab-products">
|
||||
<ProductCard
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:product="product"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dynamic-tab
|
||||
@@ -39,9 +41,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { slickPrevArrow, slickNextArrow } from "../../functions";
|
||||
import ProductCard from "../ProductCard.vue";
|
||||
import DynamicTabsMixin from "../../mixins/DynamicTabsMixin";
|
||||
import { slickPrevArrow, slickNextArrow } from "../../functions";
|
||||
|
||||
export default {
|
||||
components: { ProductCard },
|
||||
@@ -103,7 +105,7 @@ export default {
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 661,
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
dots: true,
|
||||
arrows: false,
|
||||
|
||||
@@ -16,8 +16,14 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tab-content landscape-right-tab-products">
|
||||
<ProductCard v-for="product in products" :key="product.id" :product="product"/>
|
||||
<div class="tab-content">
|
||||
<div class="landscape-right-tab-products">
|
||||
<ProductCard
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:product="product"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -25,83 +31,95 @@
|
||||
v-for="(tabLabel, index) in data.tabs"
|
||||
:key="index"
|
||||
:label="tabLabel"
|
||||
:url="route('storefront.tab_products.index', {sectionNumber: 2, tabNumber: index + 1 })"
|
||||
:url="
|
||||
route('storefront.tab_products.index', {
|
||||
sectionNumber: 2,
|
||||
tabNumber: index + 1,
|
||||
})
|
||||
"
|
||||
>
|
||||
</dynamic-tab>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductCard from '../ProductCard.vue';
|
||||
import DynamicTabsMixin from '../../mixins/DynamicTabsMixin';
|
||||
import ProductCard from "../ProductCard.vue";
|
||||
import DynamicTabsMixin from "../../mixins/DynamicTabsMixin";
|
||||
|
||||
export default {
|
||||
components: { ProductCard },
|
||||
export default {
|
||||
components: { ProductCard },
|
||||
|
||||
mixins: [DynamicTabsMixin],
|
||||
mixins: [DynamicTabsMixin],
|
||||
|
||||
props: ['data'],
|
||||
props: ["data"],
|
||||
|
||||
methods: {
|
||||
selector() {
|
||||
return $('.landscape-right-tab-products');
|
||||
},
|
||||
|
||||
slickOptions() {
|
||||
return {
|
||||
rows: 0,
|
||||
dots: true,
|
||||
arrows: false,
|
||||
infinite: true,
|
||||
slidesToShow: 6,
|
||||
slidesToScroll: 6,
|
||||
rtl: window.FleetCart.rtl,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1761,
|
||||
settings: {
|
||||
slidesToShow: 5,
|
||||
slidesToScroll: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1301,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1051,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 881,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 641,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selector() {
|
||||
return $(".landscape-right-tab-products");
|
||||
},
|
||||
};
|
||||
|
||||
slickOptions() {
|
||||
return {
|
||||
rows: 0,
|
||||
dots: true,
|
||||
arrows: false,
|
||||
infinite: true,
|
||||
slidesToShow: 6,
|
||||
slidesToScroll: 6,
|
||||
rtl: window.FleetCart.rtl,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1761,
|
||||
settings: {
|
||||
slidesToShow: 5,
|
||||
slidesToScroll: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1301,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1051,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 881,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 641,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<section class="top-brands-wrap clearfix">
|
||||
<div class="container">
|
||||
<div class="top-brands clearfix">
|
||||
<div class="top-brands overflow-hidden clearfix">
|
||||
<a
|
||||
v-for="(topBrand, index) in topBrands"
|
||||
:key="index"
|
||||
:href="topBrand.url"
|
||||
class="top-brand-image"
|
||||
class="top-brand-item d-inline-flex align-items-center justify-content-center overflow-hidden"
|
||||
>
|
||||
<img :src="topBrand.logo.path" alt="brand logo">
|
||||
<img :src="topBrand.logo.path" alt="Brand logo" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -16,7 +16,62 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['topBrands'],
|
||||
};
|
||||
export default {
|
||||
props: ["topBrands"],
|
||||
|
||||
mounted() {
|
||||
$(".top-brands").slick(this.slickOptions());
|
||||
},
|
||||
|
||||
methods: {
|
||||
slickOptions() {
|
||||
return {
|
||||
rows: 0,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
infinite: true,
|
||||
slidesToShow: 7,
|
||||
slidesToScroll: 7,
|
||||
rtl: window.FleetCart.rtl,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1200,
|
||||
settings: {
|
||||
slidesToShow: 6,
|
||||
slidesToScroll: 6,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1050,
|
||||
settings: {
|
||||
slidesToShow: 5,
|
||||
slidesToScroll: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 900,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 750,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 450,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,13 +1,24 @@
|
||||
<template>
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<div
|
||||
:class="flashSaleEnabled ? 'col-xl-4 col-lg-6' : 'col-xl-6 col-lg-6'"
|
||||
v-if="hasAnyProduct"
|
||||
>
|
||||
<div class="vertical-products">
|
||||
<div class="vertical-products-header">
|
||||
<h4 class="section-title">{{ title }}</h4>
|
||||
</div>
|
||||
|
||||
<div class="vertical-products-slider" ref="productsPlaceholder">
|
||||
<div v-for="(productChunks, index) in $chunk(products, 5)" :key="index" class="vertical-products-slide">
|
||||
<ProductCardVertical v-for="product in productChunks" :key="product.id" :product="product"/>
|
||||
<div
|
||||
v-for="(productChunks, index) in $chunk(products, 5)"
|
||||
:key="index"
|
||||
class="vertical-products-slide"
|
||||
>
|
||||
<ProductCardVertical
|
||||
v-for="product in productChunks"
|
||||
:key="product.id"
|
||||
:product="product"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -15,44 +26,53 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductCardVertical from '../ProductCardVertical.vue';
|
||||
import ProductCardVertical from "../ProductCardVertical.vue";
|
||||
|
||||
export default {
|
||||
components: { ProductCardVertical },
|
||||
export default {
|
||||
components: { ProductCardVertical },
|
||||
|
||||
props: ['title', 'url'],
|
||||
props: ["flashSaleEnabled", "title", "url"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
products: [],
|
||||
};
|
||||
data() {
|
||||
return {
|
||||
products: [],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
hasAnyProduct() {
|
||||
return this.products.length !== 0;
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
$.ajax({
|
||||
method: 'GET',
|
||||
url: this.url,
|
||||
}).then((products) => {
|
||||
this.products = products;
|
||||
created() {
|
||||
this.fetchProducts();
|
||||
},
|
||||
|
||||
methods: {
|
||||
async fetchProducts() {
|
||||
await axios.get(this.url).then((response) => {
|
||||
this.products = response.data;
|
||||
|
||||
this.$nextTick(() => {
|
||||
$(this.$refs.productsPlaceholder).slick(this.slickOptions());
|
||||
$(this.$refs.productsPlaceholder).slick(
|
||||
this.slickOptions()
|
||||
);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
slickOptions() {
|
||||
return {
|
||||
rows: 0,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
infinite: true,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
rtl: window.FleetCart.rtl,
|
||||
};
|
||||
},
|
||||
slickOptions() {
|
||||
return {
|
||||
rows: 0,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
infinite: true,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
rtl: window.FleetCart.rtl,
|
||||
};
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user