{"id":1143,"date":"2024-01-31T20:23:34","date_gmt":"2024-01-31T20:23:34","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=1143"},"modified":"2024-02-02T09:15:17","modified_gmt":"2024-02-02T09:15:17","slug":"shopping-demo","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/shopping-demo\/","title":{"rendered":"Shopping Demo"},"content":{"rendered":"\n\n\n\n Product Chat Demo<\/title>\n <style>\n .product {\n cursor: pointer;\n transition: transform 0.3s ease;\n width: 150px; \/* Adjust the width as needed *\/\n height: auto; \/* This keeps the aspect ratio intact *\/\n }\n .product:hover {\n transform: scale(1.05);\n }\n \/* Start of Modal Styles *\/\n .modal {\n display: none; \/* Hidden by default *\/\n position: fixed; \/* Stay in place *\/\n z-index: 1000; \/* Sit on top *\/\n left: 0;\n top: 0;\n width: 100%; \/* Full width *\/\n height: 100%; \/* Full height *\/\n overflow: auto; \/* Enable scroll if needed *\/\n background-color: rgba(0,0,0,0.4); \/* Black w\/ opacity *\/\n padding-top: 100px; \/* Location of the box *\/\n }\n .modal-content {\n background-color: #fefefe;\n margin: auto;\n padding: 20px;\n border: 1px solid #888;\n width: 40%; \/* Could be more or less, depending on screen size *\/\n }\n .close {\n color: #aaa;\n float: right;\n font-size: 28px;\n font-weight: bold;\n }\n .close:hover,\n .close:focus {\n color: black;\n text-decoration: none;\n cursor: pointer;\n }\n \/* End of Modal Styles *\/\n \/* Chat box input and send button *\/\n .chat-input {\n width: 100%;\n padding: 10px;\n margin-bottom: 10px;\n }\n .chat-send {\n width: 100%;\n padding: 10px;\n }\n \/* Chat log container *\/\n .chat-log {\n height: 200px;\n overflow-y: auto;\n margin-bottom: 10px;\n background: #f9f9f9;\n border: 1px solid #ccc;\n padding: 10px;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"product-container\">\n <img decoding=\"async\" src=\"https:\/\/www.beams-experiments.com\/errings1.png\" alt=\"Earrings for Casual Occasions\" class=\"product\">\n <p>Earrings for Casual Occasions<\/p>\n<\/div>\n\n<div class=\"product-container\">\n <img decoding=\"async\" src=\"https:\/\/www.beams-experiments.com\/errings2.png\" alt=\"Elegant Evening Earrings\" class=\"product\">\n<p>Elegant Evening Earrings<\/p>\n\n<\/div>\n<!-- The Modal -->\n<div id=\"myModal\" class=\"modal\">\n <!-- Modal content -->\n <div class=\"modal-content\">\n <span class=\"close\">×<\/span>\n <div class=\"chat-log\" id=\"chat-log\">\n <!-- Chat messages will appear here -->\n <\/div>\n <input type=\"text\" id=\"chat-input\" class=\"chat-input\" placeholder=\"Type your message here...\">\n <button id=\"chat-send\" class=\"chat-send\">Send<\/button>\n <\/div>\n<\/div>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n \/\/ Ensure the DOM is fully loaded before trying to access elements\n\n \/\/ Get the modal\n var modal = document.getElementById(\"myModal\");\n\n \/\/ Get the button that closes the modal\n var span = document.getElementsByClassName(\"close\")[0];\n\n \/\/ When the user clicks on the product, open the modal\n var products = document.getElementsByClassName(\"product\");\n for (var i = 0; i < products.length; i++) {\n products[i].onclick = function() {\n modal.style.display = \"block\";\n }\n }\n\n \/\/ When the user clicks on <span> (x), close the modal\n span.onclick = function() {\n modal.style.display = \"none\";\n resetImageSize();\n }\n\n \/\/ When the user clicks anywhere outside of the modal, close it\n window.onclick = function(event) {\n if (event.target == modal) {\n modal.style.display = \"none\";\n resetImageSize();\n }\n }\n\n \/\/ Function to reset the size of all product images\n function resetImageSize() {\n var images = document.getElementsByClassName(\"product\");\n for (var i = 0; i < images.length; i++) {\n images[i].style.transform = \"scale(1)\";\n }\n }\n\n \/\/ When the user clicks the send button, handle the message\n document.getElementById(\"chat-send\").addEventListener('click', function() {\n var input = document.getElementById(\"chat-input\");\n var message = input.value.trim();\n if (message) {\n console.log('Sending message to server:', message); \/\/ Log the message for debugging\n\n \/\/ Use jQuery for AJAX call if available, else use vanilla JS for AJAX\n if (window.jQuery) {\n jQuery.ajax({\n url: 'https:\/\/www.beams-experiments.com\/wp-content\/plugins\/product-chat\/product-chat.php',\n type: 'POST',\n data: {\n 'message': message, \/\/ Ensure this matches server expectations\n },\n success: function(response) {\n console.log('Received response from server:', response); \/\/ Log the response for debugging\n\n appendMessageToChatLog(\"You: \" + message);\n appendMessageToChatLog(\"AI: \" + response); \/\/ Assuming response is text\n },\n error: function(xhr, status, error) {\n console.error('Error receiving response:', error); \/\/ Log any errors\n }\n });\n } else {\n console.error('jQuery is not loaded. AJAX call cannot be made.');\n }\n\n \/\/ Clear the input field after sending the message\n input.value = \"\";\n }\n });\n\n function appendMessageToChatLog(text) {\n var chatLog = document.getElementById(\"chat-log\");\n var messageElement = document.createElement(\"p\");\n messageElement.textContent = text;\n chatLog.appendChild(messageElement);\n chatLog.scrollTop = chatLog.scrollHeight; \/\/ Scroll to the bottom\n }\n});\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Product Chat Demo Earrings for Casual Occasions Elegant Evening Earrings × Send<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-1143","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/1143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/comments?post=1143"}],"version-history":[{"count":17,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/1143\/revisions"}],"predecessor-version":[{"id":1168,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/1143\/revisions\/1168"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=1143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}