\n\n\n\n\n
Yelp Store Locator<\/title>\n<style>\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background: #f8f8f8; \/* Slight grey background *\/\n}\n\n\/* Flex container for the whole page content *\/\n.form-wrapper {\n display: flex;\n justify-content: space-around; \/* Evenly distribute space around items *\/\n flex-wrap: wrap; \/* Allow items to wrap if not enough space *\/\n margin: 20px;\n}\n\n\/* Search form and results container *\/\n.form-wrapper .form-container {\n flex-basis: 47%;\n margin-bottom: 20px;\n}\n\n\/* Search bar at the top *\/\n.search-top {\n margin-top: 20px;\n}\n.search-bar {\n max-width: 1024px;\n padding:0 20px;\n padding: 10px;\n border-radius: 4px;\n margin: 0 auto 20px;\n}\n.search-bar #searchForm {\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: rgba(0,0,0,0.15) 0px 2px 18px 0px;\n}\n.search-field {\n flex: 1;\n}\n.search-field.desc {\n position: relative;\n}\n.search-field.desc::after {\n content: '';\n position: absolute;\n top: 10px;\n bottom: 10px;\n right: 0;\n width: 2px;\n background-color: rgba(0, 0, 0, 0.2);\n}\n#searchForm .search-field input {\n border: 0;\n \n}\n.search-field.category-dropdown select {\n width: auto;\n background: transparent;\n margin-top:15px;\n}\n.search-field input[type=\"text\"],\n.search-field select {\n width: 100%; \/* Full width of parent *\/\n padding: 15px 10px;\n border: 1px solid #ddd;\n font-size: 14px;\n box-sizing: border-box;\n}\n\n\/* Search button styling *\/\n.search-button button {\n padding: 17px 20px;\n background-color: #ff0000; \/* Yelp red *\/\n color: #fff;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n text-transform: uppercase;\n font-weight: bold;\n}\n\n\/* Style the pagination buttons *\/\n.pagination{\n border-top: 1px solid #e3d8d8;\n padding: 15px 0;\n margin-top: 20px;\n border-bottom: 1px solid #e3d8d8;\n}\n\n\n.pagination button {\n background: none;\n padding: 5px 10px;\n border-radius: 4px;\n margin-right: 5px;\n border: none;\n cursor: pointer;\n font-size: 16px;\n}\n\n.pagination button.active,\n.pagination button:hover {\n font-weight: bold;\n}\n\n\/* Map container styling *\/\n#map {\n flex: 1;\n height: 700px; \/* Adjusted height for consistency *\/\n border-radius: 4px; \/* Rounded corners *\/\n overflow: hidden; \/* Clip the content *\/\n margin-left: 20px; \/* Space from the form container *\/\n}\n\n\/* Search results card styles *\/\n.card {\n display: flex;\n background: #fff;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow: hidden;\n align-items: center;\n padding: 0 15px;\n border-bottom: 1px solid #eee;\n}\n\n.card img {\n width: 200px; \/* Slightly smaller images *\/\n height: 200px;\n object-fit: cover;\n}\n\n.card-content {\n padding: 15px;\n flex-grow: 1;\n}\n\n\/* Loader style adjustments *\/\n#loader {\n display: none; \/* Hide by default, show when loading *\/\n position: fixed; \/* Or absolute, depending on use-case *\/\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n}\n\n#loader img {\n width: 50px; \/* Adjust as needed *\/\n height: 50px; \/* Adjust as needed *\/\n \/* Animation for spinning *\/\n animation: spin 1s linear infinite;\n}\n\n\/* Loader animation *\/\n@keyframes spin {\n 0% { transform: translate(-50%, -50%) rotate(0deg); }\n 100% { transform: translate(-50%, -50%) rotate(360deg); }\n}\n\n@media (max-width: 768px) {\n .form-wrapper {\n flex-direction: column; \/* Stack on smaller screens *\/\n }\n\n .form-container,\n #map {\n width: 100%;\n max-width: none;\n margin-left: 0; \/* Remove margin for full width *\/\n }\n\n #map {\n order: -1; \/* Map comes before search results on small screens *\/\n }\n}\n\n\/* Add responsive design for very small screens *\/\n@media (max-width: 480px) {\n .search-bar {\n flex-direction: column; \/* Stack form fields vertically *\/\n }\n\n .search-field,\n .search-button button {\n width: 100%; \/* Full width for small screens *\/\n margin: 5px 0; \/* Add space between stacked items *\/\n }\n}\n\n\/* Style the dropdown button *\/\n.dropbtn {\n background-color: transparent;\n color: black;\n padding: 16px;\n font-size: 16px;\n border: none;\n cursor: pointer;\n}\n\n\/* The container <div> - needed to position the dropdown content *\/\n.dropdown {\n position: relative;\n display: inline-block;\n margin: 10px 0;\n}\n\n\/* Dropdown Content (Hidden by Default) *\/\n.dropdown-content {\n display: none;\n position: absolute;\n background-color: #f9f9f9;\n min-width: 240px;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 1;\n gap: 20px;\n padding: 0 10px;\n}\n\n\/* Links inside the dropdown *\/\n.dropdown-content span {\n color: black;\n padding: 16px 0;\n text-decoration: none;\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.dropdown-content .flex-links{\n padding: 12px 0\n}\n\n\/* Icon styling *\/\n.icon {\n margin-right: 10px;\n \/* You can use SVGs or Font Icons like FontAwesome, or background-image with sprites *\/\n}\n\n\/* Change color of dropdown links on hover *\/\n.dropdown-content span:hover {background-color: #ddd;}\n\n\/* Show the dropdown menu on hover *\/\n.dropdown:hover .dropdown-content {\n \/* display: block; *\/\n display: flex;\n}\n\n\/* Show the dropdown menu on focus *\/\n.dropdown:focus-within .dropdown-content {\n display: block;\n}\n\n\/* Other styles for icons can be added here, using the specific class names *\/\n.dry-cleaning-icon {\n \/* Add background-image or other styling for the dry cleaning icon *\/\n}\n\n.pagination, #loader {\n display: none; \/* Hidden by default *\/\n}\n\n.autocomplete-results {\n display: none;\n position: absolute;\n background: white;\n border: 1px solid #ddd;\n border-top: none;\n z-index: 2;\n width: 100%;\n box-sizing: border-box;\n}\n\n.autocomplete-suggestion {\n padding: 10px;\n border-bottom: 1px solid #ddd;\n cursor: pointer;\n}\n\n.autocomplete-suggestion:last-child {\n border-bottom: none;\n}\n\n.autocomplete-suggestion:hover {\n background-color: #f8f8f8;\n}\n\n\n\/* Similarly add specific icon styles for other menu items *\/\n<\/style>\n<\/head>\n<body>\n<div class=\"search-top\">\n <div class=\"search-bar\">\n <form id=\"searchForm\" action=\"\/yelp-store-locator\" method=\"get\">\n <div class=\"search-field desc\">\n <input type=\"text\" id=\"searchDescription\" name=\"searchDescription\" placeholder=\"Search description\">\n <div id=\"autocomplete-results\" class=\"autocomplete-results\"><\/div>\n <\/div>\n \n <div class=\"search-field location\">\n <input type=\"text\" id=\"locationQuery\" name=\"location\" placeholder=\"Enter search location\" value=\"Utah\" required>\n <\/div>\n <div class=\"search-button\">\n <button type=\"submit\">Search<\/button>\n <\/div>\n <\/form>\n\n <div class=\"dropdown\">\n <span class=\"dropbtn\">More \u25bc<\/span>\n <div class=\"dropdown-content\">\n <div class=\"flex-links\">\n <span>\n <i class=\"icon dry-cleaning-icon\"><\/i> Restaurants\n <\/span>\n <span>\n <i class=\"icon hair-salons-icon\"><\/i> Coffee Shops\n <\/span>\n <span>\n <i class=\"icon phone-repair-icon\"><\/i> Grocery Stores\n <\/span>\n <span>\n <i class=\"icon phone-repair-icon\"><\/i> Nightlife\n <\/span>\n <\/div>\n <div class=\"flex-links\">\n <span>\n <i class=\"icon phone-repair-icon\"><\/i> Medical\n <\/span>\n <span>\n <i class=\"icon phone-repair-icon\"><\/i> Activities\n <\/span>\n <span>\n <i class=\"icon phone-repair-icon\"><\/i> Schools\n <\/span>\n <span>\n <i class=\"icon phone-repair-icon\"><\/i> Hair Salon\n <\/span>\n <\/div>\n <!-- Add other menu items here -->\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"form-wrapper\">\n <div class=\"form-container\">\n <div id=\"searchResults\"><\/div>\n <div class=\"pagination\"><\/div>\n <\/div>\n <!-- Map Container -->\n <div id=\"map\"><\/div>\n<\/div>\n\n<!-- Loader HTML -->\n<!-- <div id=\"loader\">Loading...<\/div> -->\n<div id=\"loader\">\n <img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/sunraycityguide.com\/Utah-C21Everest\/wp-content\/plugins\/yelp-store-locator\/assets\/images\/loader.png\" alt=\"Loading...\" \/>\n<\/div>\n\n\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script>\n $(document).ready(function () {\n var yelpAutocompleteUrl = \"https:\/\/api.yelp.com\/v3\/autocomplete\";\n\n $('#searchDescription').on('input', function() {\n var searchText = $(this).val();\n \n \/\/ Make sure the search text is not empty\n if (searchText.length > 0) {\n $.ajax({\n url: '\/wp-content\/plugins\/yelp-store-locator\/proxy\/yelp-autocomplete-proxy.php',\n method: 'GET',\n data: {\n text: searchText \/\/ text entered by the user\n },\n success: function(data) {\n \/\/ Clear previous suggestions\n $('#autocomplete-results').empty();\n \n \/\/ Process the response and append suggestions\n if(data.terms && data.terms.length > 0) {\n data.terms.forEach(function(term) {\n $('#autocomplete-results').append('<div class=\"autocomplete-suggestion\">' + term.text + '<\/div>');\n });\n $('#autocomplete-results').show();\n }\n },\n error: function(jqXHR, textStatus, errorThrown) {\n console.error(\"Error with Autocomplete API:\", textStatus, errorThrown);\n }\n });\n } else {\n \/\/ If the search text is empty, clear and hide suggestions\n $('#autocomplete-results').empty().hide();\n }\n });\n\n \/\/ Listener for clicking on an autocomplete suggestion\n $('#autocomplete-results').on('click', '.autocomplete-suggestion', function() {\n \/\/ Set the input to the clicked suggestion and hide suggestions\n $('#searchDescription').val($(this).text());\n $('#autocomplete-results').empty().hide();\n });\n \n \/\/ Initially hide pagination and loader\n $('.pagination').hide();\n $('#loader').hide();\n\n var map; \/\/ Declare map variable globally\n var markers = []; \/\/ Array to store markers\n var currentPage = 1;\n var resultsPerPage = 5;\n var totalResults = 0;\n\n \/\/ Event handler for category selection\n $('.dropdown-content span').on('click', function() {\n \/\/ Get the text of the clicked category\n var categoryText = $(this).text().trim();\n\n \/\/ Set the value of the searchDescription input\n $('#searchDescription').val(categoryText);\n\n \/\/ Close the dropdown if needed\n $('.dropdown-content').hide();\n\n \/\/ Optionally, you could submit the form automatically after selection\n \/\/ $('#searchForm').submit();\n });\n\n \/\/ Toggle dropdown content on click\n $('.dropbtn').on('click', function() {\n \/\/ Use slideToggle for a simple animation\n $('.dropdown-content').slideToggle();\n });\n\n \/\/ Close the dropdown if clicked outside\n $(document).on('click', function(e) {\n if (!$(e.target).closest('.dropdown').length) {\n $('.dropdown-content').hide();\n }\n });\n\n \/\/ Populate search description initially\n $('#searchDescription').val($('#category').find('option:selected').text());\n\n \/\/ Update search description when category changes\n $('#category').change(function() {\n $('#searchDescription').val($(this).find('option:selected').text());\n });\n\n \/\/ Check if the location is provided and trigger search\n if ($('#locationQuery').val() !== '') {\n setTimeout(function() {\n $('#searchForm').submit();\n }, 500);\n }\n\n $('#searchForm').submit(function (event) {\n event.preventDefault();\n $('#loader').show(); \/\/ Show loader here when the search starts\n $('.pagination').hide(); \/\/ Hide pagination during loading\n\n var locationQuery = $('#locationQuery').val();\n \/\/ Use the value from the search description input\n var searchDescription = $('#searchDescription').val();\n var apiUrl = 'https:\/\/sunraycityguide.com\/Utah-C21Everest\/wp-content\/plugins\/yelp-store-locator\/proxy\/proxy.php?location=' + encodeURIComponent(locationQuery) + '&term=' + encodeURIComponent(searchDescription);\n\n \/\/ Hide search results and map\n $('#searchResults').hide();\n $('#map').hide();\n \/\/ Show loader before making the API request\n $('#loader').show();\n\n fetch(apiUrl)\n .then(response => {\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n return response.json(); \/\/ Parse JSON response\n })\n .then(data => {\n if (data && data.businesses && data.businesses.length > 0) {\n $('.pagination').show();\n } else {\n $('.pagination').hide();\n }\n $('#loader').hide(); \/\/ Hide loader after data is processed\n \/\/ ...Display results...\n totalResults = data.businesses.length;\n\n \/\/ Clear previous search results\n $('#searchResults').empty();\n\n \/\/ Initialize map\n map = new google.maps.Map(document.getElementById('map'), {\n center: { lat: 0, lng: 0 }, \/\/ Default center\n zoom: 12 \/\/ Default zoom level\n });\n\n \/\/ Clear previous markers\n markers.forEach(marker => marker.setMap(null));\n markers = [];\n\n \/\/ Create a LatLngBounds object to encompass all markers\n var bounds = new google.maps.LatLngBounds();\n\n \/\/ Calculate pagination values\n var startIndex = (currentPage - 1) * resultsPerPage;\n var endIndex = startIndex + resultsPerPage;\n endIndex = endIndex > totalResults ? totalResults : endIndex;\n\n \/\/ Iterate over each business in the response data for the current page\n for (var i = startIndex; i < endIndex; i++) {\n var business = data.businesses[i];\n\n \/\/ Create card element to display business information\n var cardHtml = '<div class=\"card\">';\n cardHtml += '<img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"' + business.image_url + '\" alt=\"' + business.name + '\">';\n cardHtml += '<div class=\"card-content\">';\n cardHtml += '<h3><a href=\"' + business.url + '\">' + business.name + '<\/a><\/h3>';\n cardHtml += '<p><strong>Rating:<\/strong> ' + business.rating + '<\/p>';\n cardHtml += '<p><strong>Review Count:<\/strong> ' + business.review_count + '<\/p>';\n if (business.categories.length > 0) {\n cardHtml += '<p><strong>Category:<\/strong> ' + business.categories[0].title + '<\/p>';\n }\n cardHtml += '<p><strong>Address:<\/strong> ' + business.location.address1 + ', ' + business.location.city + ', ' + business.location.state + ' ' + business.location.zip_code + '<\/p>';\n cardHtml += '<p><strong>Phone:<\/strong> ' + business.display_phone + '<\/p>';\n cardHtml += '<\/div><\/div>';\n\n \/\/ Append the card HTML to the searchResults div\n $('#searchResults').append(cardHtml);\n\n \/\/ Display coordinates if available\n if (business.coordinates) {\n \/\/ Add marker to the map for each business\n var marker = new google.maps.Marker({\n position: { lat: business.coordinates.latitude, lng: business.coordinates.longitude },\n map: map,\n title: business.name\n });\n\n markers.push(marker);\n\n \/\/ Extend the bounds to include the marker's position\n bounds.extend(marker.getPosition());\n }\n }\n\n \/\/ Adjust map bounds to fit all markers\n map.fitBounds(bounds);\n\n \/\/ Hide loader after request is completed\n $('#loader').hide();\n \/\/ Show search results and map\n $('#searchResults').show();\n $('#map').show();\n\n \/\/ Generate pagination controls\n generatePaginationControls();\n })\n .catch(error => {\n console.error('There was a problem with the fetch operation:', error);\n\n $('#loader').hide(); \/\/ Ensure to hide loader on error as well\n $('.pagination').hide(); \/\/ Hide pagination if there's an error\n \/\/ Show search results and map\n $('#searchResults').show();\n $('#map').show();\n });\n });\n\n \/\/ Function to generate pagination controls\n function generatePaginationControls() {\n var totalPages = Math.ceil(totalResults \/ resultsPerPage);\n $('.pagination').empty();\n\n for (var i = 1; i <= totalPages; i++) {\n var button = $('<button>').text(i);\n if (i === currentPage) {\n button.addClass('active');\n }\n button.click(function() {\n currentPage = parseInt($(this).text());\n $('#searchForm').submit();\n });\n $('.pagination').append(button);\n }\n }\n });\n<\/script>\n\n<!-- Include Google Maps JavaScript API with your API key -->\n<script async defer src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyDdc1Kke8as6XyfJRAv1veZfIqxp-ioDMo&callback=initMap\"><\/script>\n\n<\/body>\n<\/html><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":2910,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"portfolio_category":[41],"portfolio_skills":[],"portfolio_tags":[],"class_list":["post-2803","avada_portfolio","type-avada_portfolio","status-publish","format-standard","has-post-thumbnail","hentry","portfolio_category-historic-site"],"_links":{"self":[{"href":"https:\/\/sunraycityguide.com\/Utah-C21Everest\/wp-json\/wp\/v2\/avada_portfolio\/2803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sunraycityguide.com\/Utah-C21Everest\/wp-json\/wp\/v2\/avada_portfolio"}],"about":[{"href":"https:\/\/sunraycityguide.com\/Utah-C21Everest\/wp-json\/wp\/v2\/types\/avada_portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/sunraycityguide.com\/Utah-C21Everest\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sunraycityguide.com\/Utah-C21Everest\/wp-json\/wp\/v2\/comments?post=2803"}],"version-history":[{"count":7,"href":"https:\/\/sunraycityguide.com\/Utah-C21Everest\/wp-json\/wp\/v2\/avada_portfolio\/2803\/revisions"}],"predecessor-version":[{"id":2912,"href":"https:\/\/sunraycityguide.com\/Utah-C21Everest\/wp-json\/wp\/v2\/avada_portfolio\/2803\/revisions\/2912"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sunraycityguide.com\/Utah-C21Everest\/wp-json\/wp\/v2\/media\/2910"}],"wp:attachment":[{"href":"https:\/\/sunraycityguide.com\/Utah-C21Everest\/wp-json\/wp\/v2\/media?parent=2803"}],"wp:term":[{"taxonomy":"portfolio_category","embeddable":true,"href":"https:\/\/sunraycityguide.com\/Utah-C21Everest\/wp-json\/wp\/v2\/portfolio_category?post=2803"},{"taxonomy":"portfolio_skills","embeddable":true,"href":"https:\/\/sunraycityguide.com\/Utah-C21Everest\/wp-json\/wp\/v2\/portfolio_skills?post=2803"},{"taxonomy":"portfolio_tags","embeddable":true,"href":"https:\/\/sunraycityguide.com\/Utah-C21Everest\/wp-json\/wp\/v2\/portfolio_tags?post=2803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}