feat(CMS): dynamically site details are loaded !

raiyanu · Jul 18, 2024 · 1c03f8b · 1c03f8b
1 parent 963512e
commit 1c03f8b
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 24 deletions.
diff --git a/foodie-site/schemaTypes/detail.js b/foodie-site/schemaTypes/detail.js
@@ -0,0 +1,32 @@
+import {defineType, defineField, defineArrayMember} from 'sanity'
+
+export const detail = defineType({
+  type: 'document',
+  name: 'detail',
+  fields: [
+    defineField({
+      type: 'string',
+      name: 'SiteName',
+    }),
+    defineField({
+      type: 'string',
+      name: 'Slogans',
+    }),
+    defineField({
+      type: 'string',
+      name: 'Telephone',
+    }),
+    defineField({
+      type: 'string',
+      name: 'Email',
+    }),
+    defineField({
+      type: 'string',
+      name: 'Address',
+    }),
+    defineField({
+      type: 'string',
+      name: 'Mobile',
+    }),
+  ],
+})
diff --git a/foodie-site/schemaTypes/index.js b/foodie-site/schemaTypes/index.js
@@ -1,13 +1,8 @@
-import { author } from "./author";
-import { blogPost } from "./blogPost";
-import { product } from "./product";
-import { productCategory } from "./productCategory";
-import { variant } from "./variant";
+import {author} from './author'
+import {blogPost} from './blogPost'
+import {product} from './product'
+import {productCategory} from './productCategory'
+import {variant} from './variant'
+import {detail} from './detail'
 
-export const schemaTypes = [
-  author,
-  blogPost,
-  product,
-  productCategory,
-  variant,
-];
+export const schemaTypes = [author, detail, blogPost, product, productCategory, variant]
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>FOODIE | Home</title>
+    <title id="title">FOODIE | Home</title>
     <link rel="icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="./styles/style.css" />
     <link rel="stylesheet" href="./styles/menu.css" />
@@ -14,8 +14,8 @@
     <!-- menu and header -->
     <header>
       <div class="logo">
-        <h2>FOODIE</h2>
-        <h4>MENU</h4>
+        <h2 id="FsiteName">FOODIE</h2>
+        <h4 id="SsiteName">MENU</h4>
       </div>
       <nav>
         <a href="#" class="active_tab">home</a>
@@ -60,19 +60,22 @@ <h4>MENU</h4>
       <hr style="width: 205px; margin-block: 0.5rem 1.5rem" />
       <span style="z-index: 99">
         <a href="#"
-          ><span style="color: red; font-weight: bolder">Tel:</span>+91
-          7339677034</a
+          ><span style="color: red; font-weight: bolder">Tel:</span><span id="tel">+91
+            7339677034</span></a
         >
         <a href="#"
-          ><span style="color: red; font-weight: bolder">Mob:</span>+91
-          733-967-7034</a
+          ><span style="color: red; font-weight: bolder">Mob:</span>
+          <span id="mob"></span>
+          </a
         >
         <a href="#"
-          ><span style="color: red; font-weight: bolder">E-Mail:</span
-          >[email protected]</a
+          ><span style="color: red; font-weight: bolder">E-Mail:</span 
+          >
+          <span id="email">[email protected]</span>
+          </a
         >
       </span>
-      <address>
+      <address id="address">
         11/12,RZZ Road, ambur - 635810, Vellore District, TamilNadu, India.
       </address>
     </footer>
@@ -81,19 +84,20 @@ <h4>MENU</h4>
     <section class="dev">
       <span>Developed</span> &nbsp; By&nbsp;
       <h2>
-        <a href="mailto:[email protected]">Raiyan Ahmed&nbsp;&nbsp;</a>
+        <a href="https://raiyanu.github.io/lp">Raiyan Ahmed&nbsp;&nbsp;</a>
       </h2>
       <a href="tel:+91 7339677034"
         ><span style="color: darkgreen; font-weight: bolder">Tel:</span>
         &nbsp;+91 7339677034&nbsp;</a
       >
-      <a href="#"
+      <a href="mailto:[email protected]"
         ><span style="color: darkgreen; font-weight: bolder">E-Mail:</span>
         &nbsp;[email protected]&nbsp;</a
       >
     </section>
 
     <!-- for qr code -->
+    <script src="./js/cms.js"></script>
     <script type="module" src="./js/content-loader.js"></script>
     <script src="./js/qrcode.min.js"></script>
     <script src="./js/qrcode.min-init.js"></script>

diff --git a/js/cms.js b/js/cms.js
@@ -0,0 +1,50 @@
+const fetchSiteDetails = async () => {
+  try {
+    const res = await fetch(
+      "https://nxiwlt7k.api.sanity.io/v2022-03-07/data/query/production?query=*%5B_type%3D%3D%22detail%22%5D%5B0%5D"
+    );
+    const data = await res.json();
+    console.log("data : ", data);
+    return data;
+  } catch (error) {
+    console.error(error);
+    console.error("File: js/cms.js");
+    console.error("Error: Error in cms.js file");
+  }
+};
+
+const useDetails = async () => {
+  const data = await fetchSiteDetails();
+  try {
+    const details = {
+      SiteName: data.result.SiteName,
+      Slogans: data.result.Slogans,
+      Email: data.result.Email,
+      Telephone: data.result.Telephone,
+      Mobile: data.result.Mobile,
+      Address: data.result.Address,
+    };
+    console.table(details);
+
+    document.getElementById("title").innerText =
+      `${details.SiteName}`.toUpperCase() + " | Home";
+    const siteFirstName = `${details.SiteName}`.split(" ")[0].toLowerCase();
+    const siteSecondName = `${details.SiteName}`.split(" ")[1].toLowerCase();
+
+    document.getElementById("FsiteName").innerText =
+      siteFirstName.toUpperCase();
+    document.getElementById("SsiteName").innerText =
+      siteSecondName.toUpperCase();
+
+    document.getElementById("mob").innerText = details.Mobile;
+    document.getElementById("tel").innerText = details.Telephone;
+    document.getElementById("email").innerText = details.Email;
+    document.getElementById("address").innerText = details.Address;
+  } catch (error) {
+    console.error(error);
+    console.error("File: js/cms.js");
+    console.error("Error: Error in cms.js file");
+  }
+};
+
+useDetails();