first upload all files
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<section class="banner-wrap one-column-banner">
|
||||
<div class="container">
|
||||
<a
|
||||
:href="banner.call_to_action_url"
|
||||
class="banner"
|
||||
:target="banner.open_in_new_window ? '_blank' : '_self'"
|
||||
>
|
||||
<img :src="banner.image.path" alt="banner">
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['banner'],
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<section class="banner-wrap three-column-banner">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<a
|
||||
:href="data.banner_1.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_1.open_in_new_window ? '_blank' : '_self'"
|
||||
>
|
||||
<img :src="data.banner_1.image.path" alt="banner">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<a
|
||||
:href="data.banner_2.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_2.open_in_new_window ? '_blank' : '_self'"
|
||||
>
|
||||
<img :src="data.banner_2.image.path" alt="banner">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<a
|
||||
:href="data.banner_3.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_3.open_in_new_window ? '_blank' : '_self'"
|
||||
>
|
||||
<img :src="data.banner_3.image.path" alt="banner">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['data'],
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<section
|
||||
class="banner-wrap three-column-full-width-banner padding-tb-75"
|
||||
:style="'background-image: url(' + data['background'].image.path + ')'"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<a
|
||||
:href="data.banner_1.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_1.open_in_new_window ? '_blank' : '_self'"
|
||||
>
|
||||
<img :src="data.banner_1.image.path" alt="banner">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-10">
|
||||
<a
|
||||
:href="data.banner_2.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_2.open_in_new_window ? '_blank' : '_self'"
|
||||
>
|
||||
<img :src="data.banner_2.image.path" alt="banner">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<a
|
||||
:href="data.banner_3.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_3.open_in_new_window ? '_blank' : '_self'"
|
||||
>
|
||||
<img :src="data.banner_3.image.path" alt="banner">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['data'],
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<section class="banner-wrap two-column-banner">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<a
|
||||
:href="data.banner_1.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_1.open_in_new_window ? '_blank' : '_self'"
|
||||
>
|
||||
<img :src="data.banner_1.image.path" alt="banner">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<a
|
||||
:href="data.banner_2.call_to_action_url"
|
||||
class="banner"
|
||||
:target="data.banner_2.open_in_new_window ? '_blank' : '_self'"
|
||||
>
|
||||
<img :src="data.banner_2.image.path" alt="banner">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['data'],
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
export default {
|
||||
name: "DynamicTab",
|
||||
|
||||
props: ["label", "initialLogo", "url"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
hasLogo() {
|
||||
return !Array.isArray(this.initialLogo);
|
||||
},
|
||||
|
||||
logo() {
|
||||
if (this.hasLogo) {
|
||||
return this.initialLogo.path;
|
||||
}
|
||||
|
||||
return `${window.FleetCart.baseUrl}/themes/storefront/public/images/image-placeholder.png`;
|
||||
},
|
||||
},
|
||||
|
||||
template: "<div></div>",
|
||||
};
|
||||
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<section class="featured-categories-wrap">
|
||||
<div class="container">
|
||||
<div class="featured-categories-header">
|
||||
<div class="featured-categories-text">
|
||||
<h2 class="title">{{ data.title }}</h2>
|
||||
<span class="excerpt">{{ data.subtitle }}</span>
|
||||
</div>
|
||||
|
||||
<ul class="tabs featured-categories-tabs">
|
||||
<li
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="classes(tab)"
|
||||
@click="change(tab)"
|
||||
>
|
||||
<div class="featured-category-image">
|
||||
<img :src="tab.logo" :class="{ 'image-placeholder': ! tab.hasLogo }" alt="category logo">
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<dynamic-tab
|
||||
v-for="(category, index) in data.categories"
|
||||
:key="index"
|
||||
:label="category.name"
|
||||
:initial-logo="category.logo"
|
||||
: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';
|
||||
|
||||
export default {
|
||||
components: { ProductCard },
|
||||
|
||||
mixins: [
|
||||
DynamicTabsMixin,
|
||||
],
|
||||
|
||||
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,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="col-xl-6 col-lg-18">
|
||||
<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"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FlashSaleProductCard from './FlashSaleProductCard.vue';
|
||||
import { slickPrevArrow, slickNextArrow } from '../../functions';
|
||||
|
||||
export default {
|
||||
components: { FlashSaleProductCard },
|
||||
|
||||
props: ['title', 'url'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
products: [],
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
$.ajax({
|
||||
method: 'GET',
|
||||
url: this.url,
|
||||
}).then((products) => {
|
||||
this.products = products;
|
||||
|
||||
this.$nextTick(() => {
|
||||
$(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,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<section class="vertical-products-wrap">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<flash-sale
|
||||
:title="data.flash_sale_title"
|
||||
:url="route('storefront.flash_sale_products.index')"
|
||||
>
|
||||
</flash-sale>
|
||||
|
||||
<vertical-products
|
||||
:title="data.vertical_products_1_title"
|
||||
:url="route('storefront.vertical_products.index', { columnNumber: 1 })"
|
||||
>
|
||||
</vertical-products>
|
||||
|
||||
<vertical-products
|
||||
:title="data.vertical_products_2_title"
|
||||
:url="route('storefront.vertical_products.index', { columnNumber: 2 })"
|
||||
>
|
||||
</vertical-products>
|
||||
|
||||
<vertical-products
|
||||
:title="data.vertical_products_3_title"
|
||||
:url="route('storefront.vertical_products.index', { columnNumber: 3 })"
|
||||
>
|
||||
</vertical-products>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['data'],
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<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">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a :href="productUrl" class="product-name">
|
||||
<h6>{{ product.name }}</h6>
|
||||
</a>
|
||||
|
||||
<div class="product-info">
|
||||
<div class="product-price" v-html="product.formatted_price"></div>
|
||||
|
||||
<ProductRating :ratingPercent="product.rating_percent" :reviewCount="product.reviews.length"/>
|
||||
</div>
|
||||
|
||||
<div class="daily-deals-countdown clearfix"></div>
|
||||
|
||||
<div class="deal-progress">
|
||||
<div class="deal-stock">
|
||||
<div class="stock-available">
|
||||
{{ $trans('storefront::product_card.available') }}
|
||||
<span>{{ product.pivot.qty }}</span>
|
||||
</div>
|
||||
|
||||
<div class="stock-sold">
|
||||
{{ $trans('storefront::product_card.sold') }}
|
||||
<span>{{ product.pivot.sold }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress">
|
||||
<div class="progress-bar" :style="{ width: progress }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductRating from '../ProductRating.vue';
|
||||
import ProductCardMixin from '../../mixins/ProductCardMixin';
|
||||
|
||||
export default {
|
||||
components: { ProductRating },
|
||||
|
||||
mixins: [
|
||||
ProductCardMixin,
|
||||
],
|
||||
|
||||
props: ['product'],
|
||||
|
||||
computed: {
|
||||
progress() {
|
||||
return (this.product.pivot.sold / this.product.pivot.qty * 100) + '%';
|
||||
},
|
||||
},
|
||||
|
||||
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'),
|
||||
],
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<section class="features-wrap">
|
||||
<div class="container">
|
||||
<div class="features">
|
||||
<div class="feature-list">
|
||||
<div class="single-feature" v-for="(feature, index) in features" :key="index">
|
||||
<div class="feature-icon">
|
||||
<i :class="feature.icon"></i>
|
||||
</div>
|
||||
|
||||
<div class="feature-details">
|
||||
<h6>{{ feature.title }}</h6>
|
||||
<span>{{ feature.subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['features'],
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<section class="grid-products-wrap clearfix">
|
||||
<div class="container">
|
||||
<div class="tab-products-header clearfix">
|
||||
<ul class="tabs float-left">
|
||||
<li
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="classes(tab)"
|
||||
@click="change(tab)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</li>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<dynamic-tab
|
||||
v-for="(tabLabel, index) in data"
|
||||
:key="index"
|
||||
:label="tabLabel"
|
||||
:url="route('storefront.product_grid.index', { tabNumber: index + 1 })"
|
||||
>
|
||||
</dynamic-tab>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductCard from '../ProductCard.vue';
|
||||
import DynamicTabsMixin from '../../mixins/DynamicTabsMixin';
|
||||
import { slickPrevArrow, slickNextArrow } from '../../functions';
|
||||
|
||||
export default {
|
||||
components: { ProductCard },
|
||||
|
||||
mixins: [
|
||||
DynamicTabsMixin,
|
||||
],
|
||||
|
||||
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,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<section class="landscape-tab-products-wrap clearfix">
|
||||
<div class="container">
|
||||
<div class="tab-products-header clearfix">
|
||||
<ul class="tabs float-left">
|
||||
<li
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="classes(tab)"
|
||||
@click="change(tab)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tab-content landscape-left-tab-products">
|
||||
<ProductCard
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:product="product"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<dynamic-tab
|
||||
v-for="(tabLabel, index) in data"
|
||||
:key="index"
|
||||
:label="tabLabel"
|
||||
:url="
|
||||
route('storefront.tab_products.index', {
|
||||
sectionNumber: 1,
|
||||
tabNumber: index + 1,
|
||||
})
|
||||
"
|
||||
>
|
||||
</dynamic-tab>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductCard from "../ProductCard.vue";
|
||||
import DynamicTabsMixin from "../../mixins/DynamicTabsMixin";
|
||||
import { slickPrevArrow, slickNextArrow } from "../../functions";
|
||||
|
||||
export default {
|
||||
components: { ProductCard },
|
||||
|
||||
mixins: [DynamicTabsMixin],
|
||||
|
||||
props: ["data"],
|
||||
|
||||
methods: {
|
||||
selector() {
|
||||
return $(".landscape-left-tab-products");
|
||||
},
|
||||
|
||||
slickOptions() {
|
||||
return {
|
||||
rows: 0,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
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: 661,
|
||||
settings: {
|
||||
dots: true,
|
||||
arrows: false,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 641,
|
||||
settings: {
|
||||
dots: true,
|
||||
arrows: false,
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<section class="landscape-tab-products-wrap clearfix">
|
||||
<div class="container">
|
||||
<div class="tab-products-header clearfix">
|
||||
<h5 class="section-title float-left">{{ data.title }}</h5>
|
||||
|
||||
<ul class="tabs float-right">
|
||||
<li
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="classes(tab)"
|
||||
@click="change(tab)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tab-content landscape-right-tab-products">
|
||||
<ProductCard v-for="product in products" :key="product.id" :product="product"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dynamic-tab
|
||||
v-for="(tabLabel, index) in data.tabs"
|
||||
:key="index"
|
||||
:label="tabLabel"
|
||||
: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';
|
||||
|
||||
export default {
|
||||
components: { ProductCard },
|
||||
|
||||
mixins: [DynamicTabsMixin],
|
||||
|
||||
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,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<section class="top-brands-wrap clearfix">
|
||||
<div class="container">
|
||||
<div class="top-brands clearfix">
|
||||
<a
|
||||
v-for="(topBrand, index) in topBrands"
|
||||
:key="index"
|
||||
:href="topBrand.url"
|
||||
class="top-brand-image"
|
||||
>
|
||||
<img :src="topBrand.logo.path" alt="brand logo">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['topBrands'],
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div class="col-xl-4 col-lg-6">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductCardVertical from '../ProductCardVertical.vue';
|
||||
|
||||
export default {
|
||||
components: { ProductCardVertical },
|
||||
|
||||
props: ['title', 'url'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
products: [],
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
$.ajax({
|
||||
method: 'GET',
|
||||
url: this.url,
|
||||
}).then((products) => {
|
||||
this.products = products;
|
||||
|
||||
this.$nextTick(() => {
|
||||
$(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,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user