From 9bac56b052372abf6bee3cd88d3fb28edca9b7ec Mon Sep 17 00:00:00 2001 From: Raiyan Ahmed Date: Thu, 18 Jul 2024 20:13:51 +0000 Subject: [PATCH] Feat(CMS, Page): dynamically using CMS site data and info loading f(), extra 3 pages added, added 3 page custom styling. --- about.html | 78 ++++++++ dummyContent.md | 199 +++++++++++++++++++++ faq.html | 79 ++++++++ foodie-site/schemaTypes/detail.js | 12 ++ foodie-site/schemaTypes/index.js | 15 +- foodie-site/schemaTypes/product.js | 90 +++++----- foodie-site/schemaTypes/productCategory.js | 28 ++- help.html | 78 ++++++++ index.html | 19 +- js/cms.js | 27 ++- js/content-loader.js | 5 +- js/fetchProduct.js | 22 +++ styles/style.css | 27 +++ 13 files changed, 604 insertions(+), 75 deletions(-) create mode 100644 about.html create mode 100644 dummyContent.md create mode 100644 faq.html create mode 100644 help.html create mode 100644 js/fetchProduct.js diff --git a/about.html b/about.html new file mode 100644 index 0000000..8971e86 --- /dev/null +++ b/about.html @@ -0,0 +1,78 @@ + + + + + + FOODIE | Home + + + + + + + + + + +
+ + +
+ + + + +
+ + + + + +
+ Developed   By  +

+ Raiyan Ahmed   +

+ Tel: +  +91 7339677034  + E-Mail: +  raiyan.c.me@gmail.com  +
+ + diff --git a/dummyContent.md b/dummyContent.md new file mode 100644 index 0000000..c39893d --- /dev/null +++ b/dummyContent.md @@ -0,0 +1,199 @@ +# About Our Cafe + +Welcome to [Cafe Name], your ultimate destination for delightful treats and satisfying snacks! + +## Our Story + +Established in [year], [Cafe Name] was born out of a passion for creating mouthwatering delights that bring joy to our community. What started as a small smoothie stand has blossomed into a beloved local cafe, offering a wide array of tasty options to satisfy every craving. + +## Our Menu + +At [Cafe Name], we pride ourselves on our diverse menu that caters to all tastes and preferences: + +1. **Shakes and Smoothies**: Indulge in our creamy shakes or refresh yourself with our nutrient-packed smoothies, made with the freshest ingredients. + +2. **Ice Cream Delights**: Explore our selection of premium ice creams, featuring both classic flavors and unique, artisanal creations. + +3. **Dessert Delights**: Satisfy your sweet tooth with our range of desserts, from traditional favorites to innovative treats. + +4. **Snack Selection**: For those looking for a quick bite, our varied snack menu offers both sweet and savory options. + +5. **Savory Snack Selection**: Not in the mood for sweets? Our savory snacks are perfect for a satisfying light meal or afternoon pick-me-up. + +## Our Commitment + +We are dedicated to: + +- Using high-quality, fresh ingredients +- Providing excellent customer service +- Creating a welcoming atmosphere for our guests +- Continuously innovating our menu to bring you exciting new flavors + +## Visit Us + +Come experience the warm hospitality and delicious offerings at [Cafe Name]. Whether you're looking for a quick snack, a refreshing drink, or a decadent dessert, we've got something for everyone. + +We look forward to serving you soon! + +--- + +_[Include contact information, address, and operating hours here]_ + +# help page + +# Help & FAQ + +Welcome to the [Cafe Name] Help Page. We're here to make your experience with us as smooth and enjoyable as possible. Below you'll find answers to common questions and helpful information about our services. + +## Frequently Asked Questions + +### Menu & Ordering + +1. **Q: What's on your menu?** + A: Our menu features a variety of items including: + + - Shakes and Smoothies + - Ice Cream Delights + - Dessert Delights + - Snack Selection + - Savory Snack Selection + + Visit our full menu page for detailed descriptions and prices. + +2. **Q: Do you offer vegan/gluten-free options?** + A: Yes! We have several vegan and gluten-free options. These items are clearly marked on our menu. Please inform our staff about any dietary restrictions when ordering. + +3. **Q: Can I customize my order?** + A: Absolutely! We're happy to accommodate special requests when possible. Just ask our friendly staff when placing your order. + +### Hours & Location + +4. **Q: What are your operating hours?** + A: Our current hours are [insert hours here]. Please note that these may change during holidays or special events. + +5. **Q: Where are you located?** + A: You can find us at [insert address here]. Check our 'Contact' page for a map and directions. + +### Payments & Pricing + +6. **Q: What payment methods do you accept?** + A: We accept cash, all major credit cards, and mobile payment options like Apple Pay and Google Pay. + +7. **Q: Do you offer any discounts or loyalty programs?** + A: Yes! We have a loyalty card program. Ask about it at the counter during your next visit. + +### Takeout & Delivery + +8. **Q: Do you offer takeout?** + A: Yes, all our menu items are available for takeout. + +9. **Q: Do you offer delivery?** + A: [If yes, provide details. If no, you might say: "We currently do not offer delivery services, but we're always happy to prepare your order for pickup."] + +### Allergies & Nutrition + +10. **Q: How do you handle food allergies?** + A: We take allergies very seriously. Please inform our staff about any allergies when ordering. While we do our best to accommodate allergies, please note that all our products are prepared in a kitchen that processes nuts, dairy, and gluten. + +11. **Q: Where can I find nutritional information for your menu items?** + A: Nutritional information for our standard menu items is available upon request. Please ask our staff for details. + +## Contact Us + +If you have any questions that aren't answered here, please don't hesitate to reach out to us: + +- **Phone**: [Your phone number] +- **Email**: [Your email address] +- **Social Media**: Follow us on [list your social media accounts] + +We're always happy to help and appreciate your feedback! + +# FAQ + +# Frequently Asked Questions (FAQ) + +Welcome to [Cafe Name]'s FAQ page. Here you'll find quick answers to our most commonly asked questions. + +## Menu & Ordering + +### What items do you offer? + +We specialize in: + +- Shakes and Smoothies +- Ice Cream Delights +- Dessert Delights +- Snack Selection +- Savory Snack Selection + +For a full list with descriptions, please visit our Menu page. + +### Do you have vegan or gluten-free options? + +Yes! We offer several vegan and gluten-free items. These are clearly marked on our menu. Please inform our staff of any dietary restrictions when ordering. + +### Can I customize my order? + +Absolutely! We're happy to accommodate special requests when possible. Just ask our staff when placing your order. + +## Hours & Location + +### What are your operating hours? + +Our current hours are [insert hours here]. Please note that these may change during holidays or special events. + +### Where are you located? + +You can find us at [insert address here]. Visit our Contact page for a map and directions. + +## Payments & Pricing + +### What payment methods do you accept? + +We accept cash, all major credit cards, and mobile payment options like Apple Pay and Google Pay. + +### Do you have any discounts or loyalty programs? + +Yes! We offer a loyalty card program. Ask about it at the counter during your next visit. + +## Takeout & Delivery + +### Do you offer takeout? + +Yes, all our menu items are available for takeout. + +### Do you offer delivery? + +[Answer based on your policy. For example: "We currently do not offer delivery services, but we're always happy to prepare your order for pickup."] + +## Allergies & Nutrition + +### How do you handle food allergies? + +We take allergies very seriously. Please inform our staff about any allergies when ordering. While we do our best to accommodate allergies, please note that all our products are prepared in a kitchen that processes nuts, dairy, and gluten. + +### Where can I find nutritional information? + +Nutritional information for our standard menu items is available upon request. Please ask our staff for details. + +## Miscellaneous + +### Do you cater for events? + +[Answer based on your policy. For example: "Yes, we offer catering services for various events. Please contact us for more information about our catering menu and services."] + +### Can I book your space for a private event? + +[Answer based on your policy. For example: "Yes, we offer private event bookings during certain hours. Please contact us for availability and pricing."] + +### Do you offer Wi-Fi? + +[Answer based on your policy. For example: "Yes, we offer free Wi-Fi to our customers. Please ask our staff for the current password."] + +If you have a question that isn't answered here, please don't hesitate to contact us: + +- Phone: [Your phone number] +- Email: [Your email address] +- Or visit our Contact page for more ways to reach us. + +We're always happy to help! diff --git a/faq.html b/faq.html new file mode 100644 index 0000000..f19eeaa --- /dev/null +++ b/faq.html @@ -0,0 +1,79 @@ + + + + + + FOODIE | Home + + + + + + + + +
+ + +
+ + + + + +
+ + + + + +
+ Developed   By  +

+ Raiyan Ahmed   +

+ Tel: +  +91 7339677034  + E-Mail: +  raiyan.c.me@gmail.com  +
+ + + + diff --git a/foodie-site/schemaTypes/detail.js b/foodie-site/schemaTypes/detail.js index 2e7ccbf..55dd8e2 100644 --- a/foodie-site/schemaTypes/detail.js +++ b/foodie-site/schemaTypes/detail.js @@ -28,5 +28,17 @@ export const detail = defineType({ type: 'string', name: 'Mobile', }), + defineField({ + type: 'text', + name: 'AboutPageContent', + }), + defineField({ + type: 'text', + name: 'FAQPageContent', + }), + defineField({ + type: 'text', + name: 'HelpPageContent', + }), ], }) diff --git a/foodie-site/schemaTypes/index.js b/foodie-site/schemaTypes/index.js index 142037e..7aa8013 100644 --- a/foodie-site/schemaTypes/index.js +++ b/foodie-site/schemaTypes/index.js @@ -1,8 +1,15 @@ -import {author} from './author' -import {blogPost} from './blogPost' +// import {author} from './author' +// import {blogPost} from './blogPost' import {product} from './product' import {productCategory} from './productCategory' -import {variant} from './variant' +// import {variant} from './variant' import {detail} from './detail' -export const schemaTypes = [author, detail, blogPost, product, productCategory, variant] +export const schemaTypes = [ + // author, + detail, + // blogPost, + product, + productCategory, + // variant +] diff --git a/foodie-site/schemaTypes/product.js b/foodie-site/schemaTypes/product.js index 2d9d1f0..a79ca2f 100644 --- a/foodie-site/schemaTypes/product.js +++ b/foodie-site/schemaTypes/product.js @@ -7,6 +7,9 @@ export const product = defineType({ defineField({ type: 'string', name: 'title', + options: { + isRequired: true, + }, }), defineField({ type: 'number', @@ -21,58 +24,61 @@ export const product = defineType({ options: { source: 'title', maxLength: 96, + options: { + isRequired: true, + }, }, }), defineField({ type: 'text', name: 'description', }), - defineField({ - type: 'image', - name: 'mainImage', - options: {hotspot: true}, - }), - defineField({ - type: 'array', - name: 'variants', - of: [ - defineArrayMember({ - type: 'variant', - }), - ], - }), - defineField({ - type: 'array', - name: 'tags', - of: [ - defineArrayMember({ - type: 'string', - }), - ], - }), + // defineField({ + // type: 'image', + // name: 'mainImage', + // options: {hotspot: true}, + // }), + // defineField({ + // type: 'array', + // name: 'variants', + // of: [ + // defineArrayMember({ + // type: 'variant', + // }), + // ], + // }), + // defineField({ + // type: 'array', + // name: 'tags', + // of: [ + // defineArrayMember({ + // type: 'string', + // }), + // ], + // }), defineField({ type: 'reference', name: 'productCategory', to: [{type: 'productCategory'}], }), - defineField({ - type: 'array', - name: 'content', - of: [ - defineArrayMember({ - type: 'block', - }), - defineArrayMember({ - type: 'image', - fields: [ - { - type: 'string', - name: 'caption', - }, - ], - options: {hotspot: true}, - }), - ], - }), + // defineField({ + // type: 'array', + // name: 'content', + // of: [ + // defineArrayMember({ + // type: 'block', + // }), + // defineArrayMember({ + // type: 'image', + // fields: [ + // { + // type: 'string', + // name: 'caption', + // }, + // ], + // options: {hotspot: true}, + // }), + // ], + // }), ], }) diff --git a/foodie-site/schemaTypes/productCategory.js b/foodie-site/schemaTypes/productCategory.js index d0d3f6c..1951537 100644 --- a/foodie-site/schemaTypes/productCategory.js +++ b/foodie-site/schemaTypes/productCategory.js @@ -1,25 +1,23 @@ -import { defineType, defineField } from 'sanity' +import {defineType, defineField} from 'sanity' export const productCategory = defineType({ - type: "document", - name: "productCategory", + type: 'document', + name: 'productCategory', fields: [ defineField({ - type: "string", - name: "title", - }), - defineField({ - type: "slug", - name: "slug", + type: 'string', + name: 'title', options: { - source: "title", - maxLength: 96, + isRequired: true, }, }), defineField({ - type: "text", - name: "description", + type: 'slug', + name: 'Slug', + options: { + source: 'title', + isRequired: true, + }, }), ], -}); - +}) diff --git a/help.html b/help.html new file mode 100644 index 0000000..03417c4 --- /dev/null +++ b/help.html @@ -0,0 +1,78 @@ + + + + + + FOODIE | Home + + + + + + + + +
+ + +
+ + +
+ + + + + +
+ Developed   By  +

+ Raiyan Ahmed   +

+ Tel: +  +91 7339677034  + E-Mail: +  raiyan.c.me@gmail.com  +
+ + + + + + diff --git a/index.html b/index.html index d45abda..f2c3fac 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@

MENU

@@ -60,20 +60,17 @@

MENU

Tel:+91 - 7339677034Tel:+91 7339677034 Mob: - + E-Mail: + >E-Mail: ray38250968@gmail.com - +
11/12,RZZ Road, ambur - 635810, Vellore District, TamilNadu, India. @@ -97,8 +94,8 @@

- - + + diff --git a/js/cms.js b/js/cms.js index 4461595..7feb670 100644 --- a/js/cms.js +++ b/js/cms.js @@ -1,10 +1,12 @@ +import { marked } from "https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js"; + 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); + // console.log("data : ", data); return data; } catch (error) { console.error(error); @@ -23,8 +25,11 @@ const useDetails = async () => { Telephone: data.result.Telephone, Mobile: data.result.Mobile, Address: data.result.Address, + HelpPageContent: data.result.HelpPageContent, + AboutPageContent: data.result.AboutPageContent, + FaqPageContent: data.result.FAQPageContent, }; - console.table(details); + // console.table(details); document.getElementById("title").innerText = `${details.SiteName}`.toUpperCase() + " | Home"; @@ -40,6 +45,24 @@ const useDetails = async () => { document.getElementById("tel").innerText = details.Telephone; document.getElementById("email").innerText = details.Email; document.getElementById("address").innerText = details.Address; + try { + var aboutPageTemplate = document.createElement("template"); + aboutPageTemplate.innerHTML = marked.parse(details.AboutPageContent); + var result = aboutPageTemplate.content.children; + document.getElementById("aboutPage").append(...result); + } catch (error) {} + try { + var faqPageTemplate = document.createElement("template"); + faqPageTemplate.innerHTML = marked.parse(details.FaqPageContent); + var result = faqPageTemplate.content.children; + document.getElementById("faqPage").append(...result); + } catch (error) {} + try { + var helpPageTemplate = document.createElement("template"); + helpPageTemplate.innerHTML = marked.parse(details.HelpPageContent); + var result = helpPageTemplate.content.children; + document.getElementById("helpPage").append(...result); + } catch (error) {} } catch (error) { console.error(error); console.error("File: js/cms.js"); diff --git a/js/content-loader.js b/js/content-loader.js index 962bdfb..9daff48 100644 --- a/js/content-loader.js +++ b/js/content-loader.js @@ -1,3 +1,5 @@ +// import fetchProduct from "./fetchProduct.js"; + async function fetchContentData(dataPath) { try { const response = await fetch(dataPath); @@ -5,7 +7,7 @@ async function fetchContentData(dataPath) { throw new Error("Network response was not ok"); } const menuData = await response.json(); - console.log(menuData); + // console.log(menuData); appendMenuData(menuData); } catch (error) { console.error("Fetch error:", error); @@ -76,3 +78,4 @@ document.addEventListener("DOMContentLoaded", async function () { await fetchContentData("/foodie-site/data.json"); }); +// console.group(await fetchProduct()); diff --git a/js/fetchProduct.js b/js/fetchProduct.js new file mode 100644 index 0000000..cd28c54 --- /dev/null +++ b/js/fetchProduct.js @@ -0,0 +1,22 @@ +// export default +async function fetchProduct() { + const res = await fetch( + "https://nxiwlt7k.api.sanity.io/v2022-03-07/data/query/production?query=*%5B%5D" + ); + const data = await res.json(); + // console.group("new fetch", data); + getCategorey(data); + return data; +} + +const getCategorey = async (data) => { + const filteredData = []; + Object.keys(data.result).map((key) => { + console.log("Category", data.result[key]); + if (data.result[key]._type === "productCategory") { + filteredData.push(data.result[key]); + } + }); + console.log("filteredData", filteredData); +}; +fetchProduct(); diff --git a/styles/style.css b/styles/style.css index 28f60ba..514eaf1 100644 --- a/styles/style.css +++ b/styles/style.css @@ -13,6 +13,7 @@ --numb-white: #f5f5f5; } body { + scroll-behavior: smooth; /* background-color: var(--primary-clr); */ background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../assets/bg-1.jpg"); @@ -87,3 +88,29 @@ header nav a:hover { padding: 5px 15px; color: var(--numb-white); } + +:is(#aboutPage, #faqPage, #helpPage) { + gap: 5px; + padding-top: 10px; +} + +:is(#aboutPage, #faqPage, #helpPage) > * { + margin: unset; + display: block; + margin-inline: 1rem; + text-align: left; + width: 100%; + margin-block: 5px; +} + +:is(#aboutPage, #faqPage, #helpPage) h2 { + font-size: 2rem; + color: var(--seconday-clr); + margin-block: 10px; +} + +:is(#aboutPage, #faqPage, #helpPage) > h3 { + font-size: 1.2rem; + /* color: var(--numb-white); */ + color: var(--numb-white); +}