Untitled
unknown
plain_text
a year ago
20 kB
4
Indexable
<template>
<div class="layout-wrapper landing">
<Header></Header>
<div class="row align-items-center">
<div class="col-lg-6 p-5">
<h1 class="Comman-h1 px-3">{{ page_title }}</h1>
<p class="main-p px-3">{{ page_paragraph }}</p>
</div>
<div class="col-lg-6">
<img :src="page_image" alt="" class="image-full">
</div>
</div>
<section class="comman-product-bg py-3" v-for="(item, index) in product" :key="index">
<div class="container bg-white">
<div class="row align-items-center">
<div class="col-lg-5 p-3">
<div class="product-img-slider sticky-side-div">
<swiper :modules="[Navigation, Thumbs]" class="product-thumbnail-slider rounded bg-light"
:navigation="{ nextEl: `.next-slide-${index}`, prevEl: `.prev-slide-${index}`, }"
:thumbs="{ swiper: thumbsSwiper }">
<swiper-slide v-for="(image, imgIndex) in item.main_img" :key="imgIndex">
<img :src="image" alt class="img-fluid d-block" />
</swiper-slide>
</swiper>
<div class="material-shadow swiper-button-next" :class='`next-slide-${index}`'></div>
<div class="material-shadow swiper-button-prev" :class='`prev-slide-${index}`'></div>
<swiper :modules="[Thumbs]" class="product-nav-slider mt-2" :loop="false" :spaceBetween="10"
:slidesPerView="4" :freeMode="true" watch-slides-progress @swiper="setThumbsSwiper">
<swiper-slide v-for="(thumbImage, thumbImgIndex) in item.tumb_img" :key="thumbImgIndex">
<div class="nav-slide-item p-0">
<img :src="thumbImage" alt class="img-fluid d-block" />
</div>
</swiper-slide>
</swiper>
</div>
</div>
<div class="col-lg-7 p-3">
<h1 class="Comman-h3 px-3">{{ item.product_title }}</h1>
<div class="d-lg-flex d-block align-items-center">
<h1 class="Comman-h3 px-3">{{item.product_price}}/ <span class="span-new">Piece</span> </h1>
<a :href="item.price_btn_url" class="link-a ps-lg-0 ps-3">Get Best Price</a>
</div>
<div class="d-flex py-1">
<p class="main-p-hdpe px-3">Minimum Order Quantity:</p>
<b class="product-f"> {{item.minimum_order_quantity}} Piece</b>
</div>
<div class="px-3">
<table class="product-table">
<tr class="main-tr" v-for="(decTable, decTableIndex) in item.product_dec_table" :key="decTableIndex">
<th class="new-td">{{ decTable.title }}</th>
<th class="new-td">{{ decTable.desc }}</th>
</tr>
</table>
<div class="py-4">
<a href="javascript:void(0)" class="Banner-button-first me-3">Les's Connect</a>
<a href="javascript:void(0)" class="Banner-button-second">Les's Connect</a>
</div>
</div>
</div>
<div class="col-lg-7 p-3">
<h1 class="Comman-h3 px-3">{{ item.product_title }}</h1>
<div class="d-lg-flex d-block align-items-center">
<h1 class="Comman-h3 px-3">{{item.product_price}}/ <span class="span-new">Piece</span> </h1>
<a :href="item.price_btn_url" class="link-a ps-lg-0 ps-3">Get Best Price</a>
</div>
<div class="d-flex py-1">
<p class="main-p-hdpe px-3">Minimum Order Quantity:</p>
<b class="product-f"> {{item.minimum_order_quantity}} </b>
</div>
<div class="px-3">
<table class="product-table">
<tr class="main-tr" v-for="(decTable, decTableIndex) in item.product_dec_table" :key="decTableIndex">
<th class="new-td">{{ decTable.title }}</th>
<th class="new-td">{{ decTable.desc }}</th>
</tr>
</table>
<div class="py-4">
<a href="javascript:void(0)" class="Banner-button-first me-3">Les's Connect</a>
<a href="javascript:void(0)" class="Banner-button-second">Les's Connect</a>
</div>
</div>
<div>
</div>
</div>
</section>
<section class="comman-product-bg">
<div class="container">
<BRow>
<BCol xxl="12">
<BCard no-body>
<BCardBody>
<BTabs nav-class="mb-3" justified>
<BTab title="Description" class="nav-item">
<div class="p-3">
<div class="" v-html="html"></div>
</div>
</BTab>
<BTab title="Product">
<h6>Product1</h6>
<p class="mb-0">
You've probably heard that opposites attract. The same is true for fonts. Don't be
afraid to combine
font styles that are different but complementary, like sans serif with serif, short with
tall, or
decorative with simple. Qui photo booth letterpress, commodo enim craft beer mlkshk
aliquip jean shorts
ullamco ad vinyl cillum PBR.
</p>
</BTab>
<BTab title="Review">
<h6>Review</h6>
<p class="mb-0 text-muted">
Etsy mixtape wayfarers, ethical wes anderson tofu before they
sold out mcsweeney's organic lomo retro fanny pack lo-fi
farm-to-table readymade. Messenger bag gentrify pitchfork
tattooed craft beer, iphone skateboard locavore carles etsy
salvia banksy hoodie helvetica. DIY synth PBR banksy irony.
</p>
</BTab>
<BTab title="New Arrivals" class="nav-item">
<h6>New Arrivals</h6>
<p class="mb-0 text-muted">
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy
art party before they sold out master cleanse gluten-free squid
scenester freegan cosby sweater. Fanny pack portland seitan DIY,
art party locavore wolf cliche high life echo park Austin. Cred
vinyl keffiyeh DIY salvia PBR, banh mi before they sold out
farm-to-table VHS.
</p>
</BTab>
</BTabs>
</BCardBody>
</BCard>
</BCol>
</BRow>
</div>
</section>
<section class="bg-service py-lg-5">
<div class="container">
<div class="Comman-heading pb-3">
<h1 class="Comman-h1">Our <span class=" px-1"> Top Selling</span> Products.</h1>
</div>
<div class="bg-white p-4">
<swiper class="swiper responsive-swiper rounded gallery-light" :loop="true" :slidesPerView="1" :autoplay="{ delay: 2500, disableOnInteraction: false }"
:spaceBetween="10" :pagination="{ el: '.swiper-pagination', clickable: true }" :modules="[Pagination,Autoplay]"
:breakpoints="{ 640: { slidesPerView: 2, spaceBetween: 20 }, 768: { slidesPerView: 3, spaceBetween: 40 }, 1200: { slidesPerView: 4, spaceBetween: 50 }, }">
<swiper-slide>
<BCard no-body class="gallery-box-1">
<div class="gallery-container">
<BLink class="image-popup" href="javascript:void(0)" title>
<img class="gallery-img img-fluid mx-auto" src="@assets/images/megatex/BTA-284x284.png" alt />
</BLink >
</div>
<div class="box-content">
<div class="p-1 mt-1">
<div class="flex-grow-1 ">
Megatex HDPE 190 GSM (24X18) Agriculture Waterproof Tarpaulin
</div>
<div class="flex-shrink-0 py-3">
<BLink href="" class="text-body text-truncate button-produtct">Know More</BLink >
</div>
</div>
</div>
</BCard>
</swiper-slide>
<swiper-slide>
<BCard no-body class="gallery-box-1">
<div class="gallery-container">
<BLink class="image-popup" href="javascript:void(0)" title>
<img class="gallery-img img-fluid mx-auto" src="@assets/images/megatex/extra-07367808-284x284.png" alt />
</BLink >
</div>
<div class="box-content">
<div class="p-1 mt-1">
<div class="flex-grow-1 ">
Megatex PVC 550 GSM BIOFLOC Fish Farming Tank with HDPE 190 GSM Cover
</div>
<div class="flex-shrink-0 py-3">
<BLink href="" class="text-body text-truncate button-produtct">Know More</BLink >
</div>
</div>
</div>
</BCard>
</swiper-slide>
<swiper-slide>
<div class="gallery-box-1 card mb-0">
<div class="gallery-container">
<BLink class="image-popup" href="javascript:void(0)" title>
<img class="gallery-img img-fluid mx-auto" src="@assets/images/megatex/OIP-8-284x284.png" alt />
</BLink >
</div>
<div class="box-content">
<div class="p-1 mt-1">
<div class="flex-grow-1 ">
MEGATEX 250 GSM HDPE Azolla Cultivation Bed (12ft x 4ft x 1ft) 75% With Shade Net Cover
</div>
<div class="flex-shrink-0 py-3">
<BLink href="" class="text-body text-truncate button-produtct">Know More</BLink >
</div>
</div>
</div>
</div>
</swiper-slide>
<swiper-slide>
<BCard no-body class="gallery-box-1">
<div class="gallery-container">
<BLink class="image-popup" href="javascript:void(0)" title>
<img class="gallery-img img-fluid mx-auto" src="@assets/images/megatex/WhatsApp-Image-2023-05-25-at-9.04.14-PM-284x284.png" alt />
</BLink >
</div>
<div class="box-content">
<div class="p-1 mt-1">
<div class="flex-grow-1 ">
Megatex 420 GSM ISI TYPE II with HDPE Water Retention Pond Liner Cover
</div>
<div class="flex-shrink-0 py-3">
<BLink href="" class="text-body text-truncate button-produtct">Know More</BLink >
</div>
</div>
</div>
</BCard>
</swiper-slide>
<swiper-slide>
<BCard no-body class="gallery-box-1">
<div class="gallery-container">
<BLink class="image-popup" href="javascript:void(0)" title>
<img class="gallery-img img-fluid mx-auto" src="@assets/images/megatex/banner.png" alt />
</BLink >
</div>
<div class="box-content">
<div class="p-1 mt-1">
<div class="flex-grow-1 ">
Megatex 420 GSM ISI TYPE II with HDPE Water Retention Pond Liner Cover
</div>
<div class="flex-shrink-0 py-3">
<BLink href="" class="text-body text-truncate button-produtct">Know More</BLink >
</div>
</div>
</div>
</BCard>
</swiper-slide>
</swiper>
</div>
</div>
</section>
<Footer></Footer>
<BButton variant="danger" @click="topFunction" class="btn-icon" id="back-to-top">
<i class="ri-arrow-up-line"></i>
</BButton>
</div>
</template>
<script>
import { CountTo } from "vue3-count-to";
import Header from "../../Layouts/frontend/header.vue";
import Footer from "../../Layouts/frontend/footer.vue";
import { Navigation, Thumbs,Autoplay,Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import 'swiper/css/navigation';
import 'swiper/css/pagination';
// Import Images
import Img1 from "@assets/images/demos/default.png";
import Img2 from "@assets/images/demos/saas.png";
import Img3 from "@assets/images/demos/material.png";
import Img4 from "@assets/images/demos/minimal.png";
import Img5 from "@assets/images/demos/creative.png";
import Img6 from "@assets/images/demos/modern.png";
import Img7 from "@assets/images/demos/interactive.png";
export default {
name:"products",
data() {
return {
Img1, Img2, Img3, Img4, Img5, Img6, Img7,
Navigation: Navigation,
Thumbs: Thumbs,
Autoplay,
Pagination,
thumbsSwiper: null,
product:'',
page_title:'',
page_paragraph:'',
html : '',
};
},
components: {
Swiper,
SwiperSlide,
CountTo,
Header,
Footer
},
unmounted() {
window.removeEventListener('scroll', this.setActiveSection);
},
mounted() {
const category = this.$route.path.replaceAll("/","");
this.getProduct(category);
this.setThumbsSwiper();
window.addEventListener('scroll', this.setActiveSection);
let backtoTop = document.getElementById("back-to-top");
if (backtoTop) {
backtoTop = document.getElementById("back-to-top");
window.onscroll = function () {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
backtoTop.style.display = "block";
} else {
backtoTop.style.display = "none";
}
};
}
},
watch: {
layoutType: {
immediate: true,
deep: true,
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.setThumbsSwiper();
}
},
},
async $route(to, from) {
await this.getProduct(to.params.id);
}
},
methods: {
async getProduct(category) {
const response = await this.$axios.get('data/products.json');
const data = response.data.product.find(item => item.id === category);
this.product = data.products;
this.page_title = data.page_title;
this.page_paragraph = data.page_paragraph;
this.html = data.html;
},
setThumbsSwiper(swiper) {
this.thumbsSwiper = swiper;
},
topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
},
anually() {
const highlightedItems = document.querySelectorAll(".month");
highlightedItems.forEach(function (userItem) {
userItem.style.display = "none";
});
const highlightedItems2 = document.querySelectorAll(".annual");
highlightedItems2.forEach(function (userItem) {
userItem.style.display = "block";
});
},
scrollToSection(sectionId) {
const element = document.getElementById(sectionId);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}
},
};
</script>
<script setup>
import { ref, onMounted, watchEffect , inject } from 'vue';
import { useMeta } from "../../Components/use-meta";
import router from "../../router";
const axios = inject('$axios');
// Define a ref to store the page title
const pageTitle = ref('');
// Define a ref to store the current category
const category = router.currentRoute.value.path.replaceAll("/", "");
// Define an async function to fetch product data
const getProductList = async (category) => {
try {
const response = await axios.get('data/products.json');
const data = response.data.product.find(item => item.id === category);
pageTitle.value = data.page_title;
} catch (error) {
// console.error('Error fetching product data:', error);
}
};
// Call the getProductList function when the component is mounted
onMounted(async () => {
await getProductList(category);
// Log the pageTitle (optional)
// Use the pageTitle value in the useMeta function
useMeta({ title: pageTitle.value });
});
// Watch for changes in $route
watchEffect(() => {
(async () => {
await getProductList(router.currentRoute.value.params.id);
useMeta({ title: pageTitle.value });
})();
});
</script>
Editor is loading...
Leave a Comment