{"id":3895,"date":"2023-02-21T11:17:20","date_gmt":"2023-02-21T04:17:20","guid":{"rendered":"https:\/\/prima.jaysoft.asia\/?page_id=3895"},"modified":"2023-03-15T14:28:39","modified_gmt":"2023-03-15T07:28:39","slug":"demo-page","status":"publish","type":"page","link":"https:\/\/prima.com.vn\/en\/demo-page\/","title":{"rendered":"Demo Page"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"3895\" data-post-id=\"3895\" data-obj-id=\"3895\" class=\"elementor elementor-3895 dce-elementor-post-3895\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5bf8a77 elementor-section-full_width wd-section-stretch-content elementor-section-height-default elementor-section-height-default\" data-id=\"5bf8a77\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-53569be tab\" data-id=\"53569be\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a742c2b elementor-widget elementor-widget-heading\" data-id=\"a742c2b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.18.0 - 20-12-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">Khu v\u1ef1c<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e237d0e tab active elementor-widget__width-auto elementor-widget elementor-widget-button\" data-id=\"e237d0e\" data-element_type=\"widget\" data-area=\"all\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">T\u1ea5t c\u1ea3<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9e49ef elementor-widget__width-auto tab elementor-widget elementor-widget-button\" data-id=\"b9e49ef\" data-element_type=\"widget\" data-area=\"hcm\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">H\u1ed3 Ch\u00ed Minh<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a64c344 elementor-widget__width-auto tab elementor-widget elementor-widget-button\" data-id=\"a64c344\" data-element_type=\"widget\" data-area=\"hn\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">H\u00e0 N\u1ed9i<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-22398be elementor-section-full_width wd-section-stretch-content elementor-section-height-default elementor-section-height-default\" data-id=\"22398be\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-d82193a\" data-id=\"d82193a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f9de940 elementor-widget elementor-widget-html\" data-id=\"f9de940\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"marker-list\">\r\n        <div class=\"store\"><h3>c\u1eeda h\u00e0ng:<\/h3><\/div>\r\n      <ul class=\"list-locator\"><\/ul>\r\n    <\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-66 elementor-top-column elementor-element elementor-element-04cc511\" data-id=\"04cc511\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2e56f61 elementor-widget elementor-widget-html\" data-id=\"2e56f61\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"map\"><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-79fbebe elementor-section-boxed elementor-section-height-default elementor-section-height-default wd-section-disabled\" data-id=\"79fbebe\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-10ddea7\" data-id=\"10ddea7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0753482 elementor-widget elementor-widget-html\" data-id=\"0753482\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\n    #map {\n        width: 100%;\n        height: 500px;\n      }\n      \n    #marker-list {\n        max-height: 500px;\n        overflow-y: scroll;\n    }\n    \n    \/* width *\/\n    #marker-list::-webkit-scrollbar {\n      width: 3px;\n    }\n    \n    \/* Track *\/\n    #marker-list::-webkit-scrollbar-track {\n      background: #e8edf0; \n    }\n     \n    \/* Handle *\/\n    #marker-list::-webkit-scrollbar-thumb {\n        border-radius: 5px;\n      background: var(--e-global-color-accent); \n    }\n    \n    #marker-list li {\n        list-style-type: none;\n        display: flex;\n        flex-direction: column;\n        row-gap: 10px;\n        margin: 0;\n        padding: 15px 20px;\n        border-bottom: 1px solid #e8edf0;\n    }\n    \n    #marker-list li:last-child {\n        border-bottom: none;\n    }\n    \n    #marker-list legend, h1, h2, h3, h4, h5, h6, .title{\n        margin-bottom: 0;\n    }\n    \n    .store {\n        background: var(--e-global-color-accent);\n    padding: 10px 20px;\n    position: sticky;\n    top: 0;\n    }\n    .store h3 {\n        color: var(--e-global-color-a9e7c2b);\n        font-size: 14px;\n        font-family: var(--e-global-typography-primary-font-family);\n        font-weight: 500;\n        text-transform: uppercase;\n    }\n    \n    .list-locator {\n        margin: 0;\n        padding: 0;\n    }\n    \n    .list-locator .elementor-icon{\n        color: var(--e-global-color-accent );\n    border-color: var(--e-global-color-accent );\n    font-size: 16px;\n    }\n    \n    .list-locator li span {\n        font-family: var(--e-global-typography-text-font-family);\n        color: var(--e-global-color-primary);\n        font-size: 14px;\n        font-weight: 300;\n    }\n    .list-locator li span.title {\n        color: var(--e-global-color-accent);\n        font-size: 15px;\n        font-weight: 500;\n        cursor: pointer;\n    }\n    \n    .list-locator a, .maplibregl-popup-content a{\n        width: fit-content;\n        padding: 5px 20px;\n        color: var(--e-global-color-a9e7c2b);\n        background: var(--e-global-color-accent);\n        border-radius: 5px;\n    }\n    \n    .maplibregl-popup-content a{\n        margin: 0 auto;\n    }\n    \n    .list-locator .current {\n        background: #e8edf0;\n    }\n    \n    .maplibregl-popup-content {\n        display: flex;\n        flex-direction: column;\n        row-gap: 5px;\n    }\n    \n    @media screen and (max-width:575px) {\n        #map {\n            height: 250px;\n      }\n      \n        #marker-list {\n            max-height: 240px;\n        }\n    }\n<\/style>\n<script src=\"https:\/\/unpkg.com\/maplibre-gl@2.4.0\/dist\/maplibre-gl.js\"><\/script>\n    <link\n      href=\"https:\/\/unpkg.com\/maplibre-gl@2.4.0\/dist\/maplibre-gl.css\"\n      rel=\"stylesheet\"\n    \/>\n<script>\n    const key = \"HI8PGzwCyzm58OIsr7Vx\";\n\n      var map = new maplibregl.Map({\n        container: \"map\",\n        attribution:\n          '\\u003ca href=\"https:\/\/www.maptiler.com\/copyright\/\" target=\"_blank\"\\u003e\\u0026copy; MapTiler\\u003c\/a\\u003e \\u003ca href=\"https:\/\/www.openstreetmap.org\/copyright\" target=\"_blank\"\\u003e\\u0026copy; OpenStreetMap contributors\\u003c\/a\\u003e',\n        style: `https:\/\/api.maptiler.com\/maps\/845bdbe5-8988-4a6f-bca4-666caef06631\/style.json?key=${key}`,\n        center: [107.9380422, 16.0720934], \/\/ starting position [long, lat]\n        zoom: 4, \/\/ starting zoom\n      });\n      \n      map.addControl(new maplibregl.NavigationControl());\n      map.addControl(new maplibregl.FullscreenControl());\n      \n\n      fetch(\"https:\/\/prima.com.vn\/wp-json\/wp\/v2\/locator\")\n        .then((response) => response.json())\n        .then((data) => {\n          let arrMap = [];\n\n          for (var i = 0; i < data.length; i++) {\n            \/\/l\u1ea5y title th\u00eam v\u00e0o m\u1ea3ng acf\n            let title = data[i].title.rendered;\n            data[i].acf.title = title;\n\n            \/\/Th\u00eam m\u1ea3ng v\u00e0o object arrMap\n            arrMap.push(data[i].acf);\n            \n            \/\/Replace place th\u00e0nh dir\n            arrMap[i].ggmap = arrMap[i].ggmap.replace(\"\/place\/\", \"\/dir\/\/\");\n          }\n\n          \/\/ T\u1ea1o m\u1ed9t danh s\u00e1ch c\u00e1c markers\n          const markers = arrMap.map((location) => {\n            \/\/ T\u1ea1o m\u1ed9t marker m\u1edbi v\u1edbi t\u1ecda \u0111\u1ed9 v\u00e0 th\u00f4ng tin t\u1eebng \u0111\u1ecba \u0111i\u1ec3m\n            const marker = new maplibregl.Marker()\n              .setLngLat([location.longitude, location.latitude])\n              .setPopup(\n                new maplibregl.Popup({\n                  closeButton: false,\n                  maxWidth: \"none\",\n                }).setHTML(`<span class=\"title\" area=\"${location.area}\">${location.title}<\/span>\n    <span>${location.address}<\/span>\n    <span>${location.tel}<\/span>\n    <a href=\"${location.ggmap}\" target=\"_blank\">Xem ch\u1ec9 d\u1eabn<\/a>`)\n              );\n            return marker;\n          });\n\n          \/\/ Th\u00eam c\u00e1c marker v\u00e0o b\u1ea3n \u0111\u1ed3\n          markers.forEach((marker) => {\n            marker.addTo(map);\n          });\n\n          const markerList = document.querySelector(\"#marker-list ul\");\n          arrMap.forEach((location, index) => {\n            const markerItem = document.createElement(\"li\");\n            markerItem.innerHTML = `\n    <span class=\"title\" area=\"${location.area}\">${location.title}<\/span>\n    <span><div class=\"elementor-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"icon icon-map-marker1\"><\/i>\t\t\t<\/div> ${location.address}<\/span>\n    <span><div class=\"elementor-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"icon icon-smartphone2\"><\/i>\t\t\t<\/div> ${location.tel}<\/span>\n    <a href=\"${location.ggmap}\" target=\"_blank\">Xem ch\u1ec9 d\u1eabn<\/a>\n  `;\n            markerList.appendChild(markerItem);\n          });\n\n          \/\/ Duy\u1ec7t qua t\u1eebng \u0111\u1ecba \u0111i\u1ec3m, b\u1eaft s\u1ef1 ki\u1ec7n onclick to fly v\u00e0 open popup\n          let locators = document.querySelectorAll(\".list-locator li\");\n\n          locators.forEach((locator, index) => {\n            locator.addEventListener(\"click\", function () {\n              locators.forEach(locator => locator.classList.remove('current'));\n              locator.classList.add('current');\n\n              flyToMarker(index), markers[index].togglePopup();\n            });\n          });\n\n          let markerIcons = document.querySelectorAll(\".maplibregl-marker\");\n          markerIcons.forEach((markerIcon, index) => {\n            markerIcon.addEventListener(\"click\", function () {\n              flyToMarker(index);\n            });\n          });\n\n          \/\/Fly to Marker\n          function flyToMarker(index) {\n            const location = arrMap[index];\n            map.flyTo({\n              center: [location.longitude, location.latitude],\n              zoom: 15,\n              speed: 1,\n            });\n          }\n          \n          let tabs = document.querySelectorAll('.tab .elementor-widget-button');\n          \n          tabs.forEach((tab, index) => {\n            tab.addEventListener(\"click\", function (e) {\n                e.preventDefault();\n              tabs.forEach((tab) =>\n                tab.classList.remove(\"active\")\n              );\n              tab.classList.add(\"active\");\n              \n              const area = tab.getAttribute(\"data-area\");\n              \/\/ \u1ea8n t\u1ea5t c\u1ea3 c\u00e1c th\u1ebb li\n              locators.forEach((locator) => {\n                locator.style.display = \"none\";\n              });\n              if (area === \"all\") {\n                locators.forEach((locator) => {\n                  locator.style.display = \"flex\";\n                });\n                          \/\/ L\u1ea5y \u0111\u1ed1i t\u01b0\u1ee3ng ul\n            var ul = document.querySelector('ul.list-locator');\n            \n            \/\/ L\u1ea5y t\u1ea5t c\u1ea3 c\u00e1c th\u1ebb li trong ul\n            var liList = ul.getElementsByTagName('li');\n            \n            \/\/ \u0110\u1ebfm s\u1ed1 l\u01b0\u1ee3ng th\u1ebb li\n            var count = liList.length;\n            \n            \/\/ L\u1ea5y \u0111\u1ed1i t\u01b0\u1ee3ng th\u1ebb h3\n            var h3 = document.querySelector('.store h3');\n            \n            \/\/ Thay \u0111\u1ed5i n\u1ed9i dung c\u1ee7a th\u1ebb h3 b\u1eb1ng c\u00e1ch n\u1ed1i gi\u00e1 tr\u1ecb c\u1ee7a bi\u1ebfn count v\u00e0o\n            h3.innerHTML = \"C\u1eeda h\u00e0ng: \" + count;\n              } else {\n                const filteredItems = document.querySelectorAll(`.list-locator li span[area=\"${area}\"]`);\n                filteredItems.forEach((locator) => {\n                  locator.parentNode.style.display = \"flex\";\n                });\n                          \/\/ L\u1ea5y \u0111\u1ed1i t\u01b0\u1ee3ng ul\n            var ul = document.querySelector('ul.list-locator');\n            \n            \/\/ L\u1ea5y t\u1ea5t c\u1ea3 c\u00e1c th\u1ebb li trong ul\n            var liList = ul.querySelectorAll(`li span[area=\"${area}\"]`);\n            \n            \/\/ \u0110\u1ebfm s\u1ed1 l\u01b0\u1ee3ng th\u1ebb li\n            var count = liList.length;\n            \n            \/\/ L\u1ea5y \u0111\u1ed1i t\u01b0\u1ee3ng th\u1ebb h3\n            var h3 = document.querySelector('.store h3');\n            \n            \/\/ Thay \u0111\u1ed5i n\u1ed9i dung c\u1ee7a th\u1ebb h3 b\u1eb1ng c\u00e1ch n\u1ed1i gi\u00e1 tr\u1ecb c\u1ee7a bi\u1ebfn count v\u00e0o\n            h3.innerHTML = \"C\u1eeda h\u00e0ng: \" + count;\n              }\n              \n            });\n          });\n          \n                          \/\/ L\u1ea5y \u0111\u1ed1i t\u01b0\u1ee3ng ul\n            var ul = document.querySelector('ul.list-locator');\n            \n            \/\/ L\u1ea5y t\u1ea5t c\u1ea3 c\u00e1c th\u1ebb li trong ul\n            var liList = ul.getElementsByTagName('li');\n            \n            \/\/ \u0110\u1ebfm s\u1ed1 l\u01b0\u1ee3ng th\u1ebb li\n            var count = liList.length;\n            \n            \/\/ L\u1ea5y \u0111\u1ed1i t\u01b0\u1ee3ng th\u1ebb h3\n            var h3 = document.querySelector('.store h3');\n            \n            \/\/ Thay \u0111\u1ed5i n\u1ed9i dung c\u1ee7a th\u1ebb h3 b\u1eb1ng c\u00e1ch n\u1ed1i gi\u00e1 tr\u1ecb c\u1ee7a bi\u1ebfn count v\u00e0o\n            h3.innerHTML = \"C\u1eeda h\u00e0ng: \" + count;\n        })\n        .catch((error) => {\n          \/\/ X\u1eed l\u00fd l\u1ed7i \u1edf \u0111\u00e2y\n          console.error(error);\n        });\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Khu v\u1ef1c T\u1ea5t c\u1ea3 H\u1ed3 Ch\u00ed Minh H\u00e0 N\u1ed9i c\u1eeda h\u00e0ng:<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3895","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/prima.com.vn\/en\/wp-json\/wp\/v2\/pages\/3895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prima.com.vn\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/prima.com.vn\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/prima.com.vn\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prima.com.vn\/en\/wp-json\/wp\/v2\/comments?post=3895"}],"version-history":[{"count":244,"href":"https:\/\/prima.com.vn\/en\/wp-json\/wp\/v2\/pages\/3895\/revisions"}],"predecessor-version":[{"id":5022,"href":"https:\/\/prima.com.vn\/en\/wp-json\/wp\/v2\/pages\/3895\/revisions\/5022"}],"wp:attachment":[{"href":"https:\/\/prima.com.vn\/en\/wp-json\/wp\/v2\/media?parent=3895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}