Spaces:
No application file
No application file
Update Static.js
#2
by
ajaybolloju
- opened
Static.js
CHANGED
|
@@ -0,0 +1,207 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
let conversation = [
|
| 2 |
+
{ role: 'bot', message: "Hi there! I'm Chat Bot! May I know your name?" }
|
| 3 |
+
];
|
| 4 |
+
let selectedIngredients = [];
|
| 5 |
+
let selectedMenuItem = null;
|
| 6 |
+
let cart = [];
|
| 7 |
+
|
| 8 |
+
function addMessage(role, message) {
|
| 9 |
+
const chatMessages = document.getElementById('chatMessages');
|
| 10 |
+
if (!chatMessages) {
|
| 11 |
+
console.error('Chat messages container not found!');
|
| 12 |
+
return;
|
| 13 |
+
}
|
| 14 |
+
const messageDiv = document.createElement('div');
|
| 15 |
+
messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message';
|
| 16 |
+
messageDiv.textContent = message;
|
| 17 |
+
chatMessages.appendChild(messageDiv);
|
| 18 |
+
chatMessages.scrollTop = chatMessages.scrollHeight;
|
| 19 |
+
console.log(`Added ${role} message: ${message}`);
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
function sendMessage() {
|
| 23 |
+
const userInput = document.getElementById('userInput');
|
| 24 |
+
if (!userInput) {
|
| 25 |
+
console.error('User input field not found!');
|
| 26 |
+
return;
|
| 27 |
+
}
|
| 28 |
+
const message = userInput.value.trim();
|
| 29 |
+
if (message) {
|
| 30 |
+
addMessage('user', message);
|
| 31 |
+
conversation.push({ role: 'user', message: message });
|
| 32 |
+
userInput.value = '';
|
| 33 |
+
setTimeout(() => handleResponse(message), 500);
|
| 34 |
+
} else {
|
| 35 |
+
console.warn('Empty message!');
|
| 36 |
+
}
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
function handleResponse(userInput) {
|
| 40 |
+
const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
|
| 41 |
+
let botResponse = '';
|
| 42 |
+
let options = [];
|
| 43 |
+
|
| 44 |
+
// Handle name input (first user response after bot's greeting)
|
| 45 |
+
if (conversation.length === 2 && conversation[0].role === 'bot' && conversation[0].message.includes('May I know your name?')) {
|
| 46 |
+
botResponse = `Nice to meet you, ${userInput}! 😊 How can I assist you today?`;
|
| 47 |
+
options = [
|
| 48 |
+
{ text: 'What is TioNat?', class: 'blue' },
|
| 49 |
+
{ text: 'How do I create an account on TioNat?', class: 'blue' },
|
| 50 |
+
{ text: 'How can I track my order?', class: 'blue' },
|
| 51 |
+
{ text: 'Do you ship internationally?', class: 'blue' },
|
| 52 |
+
{ text: 'What payment methods do you accept?', class: 'blue' },
|
| 53 |
+
{ text: 'What is the best supplement for boosting immunity?', class: 'blue' },
|
| 54 |
+
{ text: 'Are your nutritional supplements vegan-friendly?', class: 'blue' },
|
| 55 |
+
{ text: 'How do I know which supplement is right for me?', class: 'blue' },
|
| 56 |
+
{ text: 'Are there any side effects of using your supplements?', class: 'blue' },
|
| 57 |
+
{ text: 'Do you offer products for specific health conditions?', class: 'blue' },
|
| 58 |
+
{ text: 'How do I use your health care products?', class: 'blue' },
|
| 59 |
+
{ text: 'Do your products come with a money-back guarantee?', class: 'blue' },
|
| 60 |
+
{ text: 'Are your health care products FDA-approved?', class: 'blue' },
|
| 61 |
+
{ text: 'Are your personal care products cruelty-free?', class: 'blue' },
|
| 62 |
+
{ text: 'What ingredients do you use in your skincare products?', class: 'blue' },
|
| 63 |
+
{ text: 'Can I use your personal care products for sensitive skin?', class: 'blue' },
|
| 64 |
+
{ text: 'How do I find the right skincare routine?', class: 'blue' },
|
| 65 |
+
{ text: 'Can I modify or cancel my order after placing it?', class: 'blue' },
|
| 66 |
+
{ text: 'How long does it take to receive my order?', class: 'blue' },
|
| 67 |
+
{ text: 'Do you offer free shipping?', class: 'blue' },
|
| 68 |
+
{ text: 'How do I return a product?', class: 'blue' },
|
| 69 |
+
{ text: 'How can I contact customer service?', class: 'blue' },
|
| 70 |
+
{ text: 'Can I track my return?', class: 'blue' },
|
| 71 |
+
{ text: 'How can I get a product recommendation?', class: 'blue' },
|
| 72 |
+
{ text: 'How do I reset my password?', class: 'blue' },
|
| 73 |
+
{ text: 'Is my payment information secure?', class: 'blue' },
|
| 74 |
+
{ text: 'How do I update my account information?', class: 'blue' },
|
| 75 |
+
{ text: 'Can I leave a review for a product?', class: 'blue' },
|
| 76 |
+
{ text: 'How do I report a product issue?', class: 'blue' }
|
| 77 |
+
];
|
| 78 |
+
} else if (lastMessage.includes('what is tionat?')) {
|
| 79 |
+
botResponse = 'TioNat is an e-commerce platform offering a wide range of products in Nutritional Care, Health Care, and Personal Care categories. We aim to improve the quality of life with top-notch, reliable, and scientifically-backed products.';
|
| 80 |
+
} else if (lastMessage.includes('how do i create an account on tionat?')) {
|
| 81 |
+
botResponse = 'To create an account on TioNat, simply click on the "Sign Up" button on the top-right corner of our website. Enter your name, email address, and a password. Once registered, you can start shopping!';
|
| 82 |
+
} else if (lastMessage.includes('how can i track my order?')) {
|
| 83 |
+
botResponse = 'After placing your order, you will receive a tracking number via email. You can also track your order from your TioNat account under the "Order History" section.';
|
| 84 |
+
} else if (lastMessage.includes('do you ship internationally?')) {
|
| 85 |
+
botResponse = 'Yes, we offer international shipping to select countries. You can check if your country is eligible for delivery during the checkout process.';
|
| 86 |
+
} else if (lastMessage.includes('what payment methods do you accept?')) {
|
| 87 |
+
botResponse = 'We accept a wide variety of payment methods, including credit/debit cards (Visa, MasterCard, American Express), net banking, PayPal, and cash on delivery (where applicable).';
|
| 88 |
+
} else if (lastMessage.includes('what is the best supplement for boosting immunity?')) {
|
| 89 |
+
botResponse = 'Our Immunity Booster supplements, like Vitamin C, Zinc, and Echinacea, are popular choices for improving immune system health. We recommend consulting with a healthcare provider to find the best fit for you.';
|
| 90 |
+
} else if (lastMessage.includes('are your nutritional supplements vegan-friendly?')) {
|
| 91 |
+
botResponse = 'Yes, many of our nutritional supplements are vegan-friendly. Please check the product details for specific information on ingredients and certifications.';
|
| 92 |
+
} else if (lastMessage.includes('how do i know which supplement is right for me?')) {
|
| 93 |
+
botResponse = 'We recommend consulting with a healthcare professional before choosing a supplement. You can also check our detailed product descriptions and consult with our customer service for recommendations.';
|
| 94 |
+
} else if (lastMessage.includes('are there any side effects of using your supplements?')) {
|
| 95 |
+
botResponse = 'All our products are thoroughly tested for safety, but individual reactions may vary. We suggest reading the product description for possible side effects or consulting with a healthcare provider before using any product.';
|
| 96 |
+
} else if (lastMessage.includes('do you offer products for specific health conditions?')) {
|
| 97 |
+
botResponse = 'Yes, we offer a variety of health care products for conditions such as joint pain, heart health, digestion issues, and more. Please browse through our Health Care category for detailed information.';
|
| 98 |
+
} else if (lastMessage.includes('how do i use your health care products?')) {
|
| 99 |
+
botResponse = 'Each product comes with detailed instructions for use on the packaging. Additionally, you can find user guides and recommendations on our website under each product’s description.';
|
| 100 |
+
} else if (lastMessage.includes('do your products come with a money-back guarantee?')) {
|
| 101 |
+
botResponse = 'Yes, we offer a 30-day money-back guarantee on most of our health care products. Please refer to our return policy for specific conditions and guidelines.';
|
| 102 |
+
} else if (lastMessage.includes('are your health care products fda-approved?')) {
|
| 103 |
+
botResponse = 'Many of our health care products are manufactured following strict quality guidelines and may be FDA-approved where applicable. You can check the product details for certification information.';
|
| 104 |
+
} else if (lastMessage.includes('are your personal care products cruelty-free?')) {
|
| 105 |
+
botResponse = 'Yes, all our personal care products are cruelty-free. We ensure that none of our products are tested on animals, and they are made with sustainable and ethical practices.';
|
| 106 |
+
} else if (lastMessage.includes('what ingredients do you use in your skincare products?')) {
|
| 107 |
+
botResponse = 'Our skincare products are formulated with high-quality ingredients, such as natural oils, vitamins, and plant-based extracts. For specific ingredient lists, please refer to the product description on each item page.';
|
| 108 |
+
} else if (lastMessage.includes('can i use your personal care products for sensitive skin?')) {
|
| 109 |
+
botResponse = 'We offer products specifically designed for sensitive skin. Check the product descriptions for details on ingredients and suitability for sensitive skin. We also recommend doing a patch test before full application.';
|
| 110 |
+
} else if (lastMessage.includes('how do i find the right skincare routine?')) {
|
| 111 |
+
botResponse = 'We suggest starting with a basic routine: cleansing, toning, and moisturizing. For more tailored recommendations, please check out our personalized skincare guides, or reach out to our customer service for advice.';
|
| 112 |
+
} else if (lastMessage.includes('can i modify or cancel my order after placing it?')) {
|
| 113 |
+
botResponse = 'Orders can be modified or canceled within 24 hours of placement. Please contact our customer support immediately for any changes.';
|
| 114 |
+
} else if (lastMessage.includes('how long does it take to receive my order?')) {
|
| 115 |
+
botResponse = 'Orders typically take 3-7 business days to process and ship, depending on your location. You can check your tracking number for more accurate delivery details.';
|
| 116 |
+
} else if (lastMessage.includes('do you offer free shipping?')) {
|
| 117 |
+
botResponse = 'Yes, we offer free shipping on orders above a certain amount. Check the shipping details at checkout to confirm eligibility.';
|
| 118 |
+
} else if (lastMessage.includes('how do i return a product?')) {
|
| 119 |
+
botResponse = 'If you are not satisfied with your purchase, you can return most products within 30 days. Please visit our Returns & Exchange page for detailed instructions.';
|
| 120 |
+
} else if (lastMessage.includes('how can i contact customer service?')) {
|
| 121 |
+
botResponse = 'You can reach our customer service team via email at support@tionat.com or call us at +1-800-123-4567. We\'re here to assist you with any queries.';
|
| 122 |
+
} else if (lastMessage.includes('can i track my return?')) {
|
| 123 |
+
botResponse = 'Yes, once your return is processed, you will receive a tracking number to monitor the status of your return shipment.';
|
| 124 |
+
} else if (lastMessage.includes('how can i get a product recommendation?')) {
|
| 125 |
+
botResponse = 'You can check out our product recommendations under each category. If you\'re unsure, feel free to ask our chatbot or reach out to our customer support for personalized advice.';
|
| 126 |
+
} else if (lastMessage.includes('how do i reset my password?')) {
|
| 127 |
+
botResponse = 'If you\'ve forgotten your password, click on the "Forgot Password" link on the login page. You will receive an email with instructions on how to reset your password.';
|
| 128 |
+
} else if (lastMessage.includes('is my payment information secure?')) {
|
| 129 |
+
botResponse = 'Yes, we use industry-standard encryption (SSL) to protect your payment information. All payments are processed securely through trusted payment gateways.';
|
| 130 |
+
} else if (lastMessage.includes('how do i update my account information?')) {
|
| 131 |
+
botResponse = 'You can update your account information by logging into your account and navigating to the "Account Settings" page. From there, you can update your address, payment methods, and personal details.';
|
| 132 |
+
} else if (lastMessage.includes('can i leave a review for a product?')) {
|
| 133 |
+
botResponse = 'Yes! After purchasing a product, you can leave a review directly on the product page. We value your feedback and it helps other customers make informed decisions.';
|
| 134 |
+
} else if (lastMessage.includes('how do i report a product issue?')) {
|
| 135 |
+
botResponse = 'If you receive a defective or damaged product, please contact our customer service immediately for assistance with returns or exchanges.';
|
| 136 |
+
} else {
|
| 137 |
+
// Fallback for unrecognized input
|
| 138 |
+
botResponse = "Sorry, I didn't understand that. Could you please clarify or choose an option?";
|
| 139 |
+
if (conversation.length === 2) {
|
| 140 |
+
options = [
|
| 141 |
+
{ text: 'What is TioNat?', class: 'blue' },
|
| 142 |
+
{ text: 'How do I create an account on TioNat?', class: 'blue' },
|
| 143 |
+
{ text: 'How can I track my order?', class: 'blue' },
|
| 144 |
+
{ text: 'Do you ship internationally?', class: 'blue' },
|
| 145 |
+
{ text: 'What payment methods do you accept?', class: 'blue' },
|
| 146 |
+
{ text: 'What is the best supplement for boosting immunity?', class: 'blue' },
|
| 147 |
+
{ text: 'Are your nutritional supplements vegan-friendly?', class: 'blue' },
|
| 148 |
+
{ text: 'How do I know which supplement is right for me?', class: 'blue' },
|
| 149 |
+
{ text: 'Are there any side effects of using your supplements?', class: 'blue' },
|
| 150 |
+
{ text: 'Do you offer products for specific health conditions?', class: 'blue' },
|
| 151 |
+
{ text: 'How do I use your health care products?', class: 'blue' },
|
| 152 |
+
{ text: 'Do your products come with a money-back guarantee?', class: 'blue' },
|
| 153 |
+
{ text: 'Are your health care products FDA-approved?', class: 'blue' },
|
| 154 |
+
{ text: 'Are your personal care products cruelty-free?', class: 'blue' },
|
| 155 |
+
{ text: 'What ingredients do you use in your skincare products?', class: 'blue' },
|
| 156 |
+
{ text: 'Can I use your personal care products for sensitive skin?', class: 'blue' },
|
| 157 |
+
{ text: 'How do I find the right skincare routine?', class: 'blue' },
|
| 158 |
+
{ text: 'Can I modify or cancel my order after placing it?', class: 'blue' },
|
| 159 |
+
{ text: 'How long does it take to receive my order?', class: 'blue' },
|
| 160 |
+
{ text: 'Do you offer free shipping?', class: 'blue' },
|
| 161 |
+
{ text: 'How do I return a product?', class: 'blue' },
|
| 162 |
+
{ text: 'How can I contact customer service?', class: 'blue' },
|
| 163 |
+
{ text: 'Can I track my return?', class: 'blue' },
|
| 164 |
+
{ text: 'How can I get a product recommendation?', class: 'blue' },
|
| 165 |
+
{ text: 'How do I reset my password?', class: 'blue' },
|
| 166 |
+
{ text: 'Is my payment information secure?', class: 'blue' },
|
| 167 |
+
{ text: 'How do I update my account information?', class: 'blue' },
|
| 168 |
+
{ text: 'Can I leave a review for a product?', class: 'blue' },
|
| 169 |
+
{ text: 'How do I report a product issue?', class: 'blue' }
|
| 170 |
+
];
|
| 171 |
+
}
|
| 172 |
+
}
|
| 173 |
+
|
| 174 |
+
addMessage('bot', botResponse);
|
| 175 |
+
if (options.length > 0) {
|
| 176 |
+
displayOptions(options);
|
| 177 |
+
}
|
| 178 |
+
}
|
| 179 |
+
function displayOptions(options) {
|
| 180 |
+
const chatMessages = document.getElementById('chatMessages');
|
| 181 |
+
if (!chatMessages) {
|
| 182 |
+
console.error('Chat messages container not found for options!');
|
| 183 |
+
return;
|
| 184 |
+
}
|
| 185 |
+
|
| 186 |
+
// Display each option as a bot message in the chat
|
| 187 |
+
options.forEach(opt => {
|
| 188 |
+
const messageDiv = document.createElement('div');
|
| 189 |
+
messageDiv.className = 'bot-message'; // This makes the options look like bot messages
|
| 190 |
+
const button = document.createElement('button');
|
| 191 |
+
button.textContent = opt.text;
|
| 192 |
+
button.className = `option-button ${opt.class}`;
|
| 193 |
+
|
| 194 |
+
// When an option is clicked, treat it as a user response and trigger the appropriate handler
|
| 195 |
+
button.onclick = () => {
|
| 196 |
+
addMessage('user', opt.text);
|
| 197 |
+
conversation.push({ role: 'user', message: opt.text });
|
| 198 |
+
setTimeout(() => handleResponse(opt.text), 500);
|
| 199 |
+
};
|
| 200 |
+
|
| 201 |
+
messageDiv.appendChild(button);
|
| 202 |
+
chatMessages.appendChild(messageDiv); // Append the button inside a bot message container
|
| 203 |
+
});
|
| 204 |
+
|
| 205 |
+
// Scroll to the bottom of the chat container
|
| 206 |
+
chatMessages.scrollTop = chatMessages.scrollHeight;
|
| 207 |
+
}
|