Untitled

mail@pastecode.io avatar
unknown
plain_text
a month ago
20 kB
2
Indexable
Never
<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>
 
 
Leave a Comment