{"id":1747,"date":"2026-02-18T20:16:46","date_gmt":"2026-02-18T20:16:46","guid":{"rendered":"https:\/\/nazly.com.sa\/points-of-sale\/"},"modified":"2026-02-18T20:16:46","modified_gmt":"2026-02-18T20:16:46","slug":"points-of-sale","status":"publish","type":"page","link":"https:\/\/nazly.com.sa\/en\/points-of-sale\/","title":{"rendered":"Points of sale"},"content":{"rendered":"\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800&#038;display=swap\" rel=\"stylesheet\"\/>\n\n<div id=\"nazly-widget-root\" dir=\"rtl\">\n    <style>\n        #nazly-widget-root {\n            --n-primary: #2563eb; \/* \u0644\u0648\u0646 \u0647\u0648\u064a\u0629 \u0646\u0627\u0632\u0644\u064a \u0627\u0644\u0623\u0632\u0631\u0642 *\/\n            --n-bg: #F8FAFC;\n            font-family: 'Tajawal', sans-serif !important;\n            background-color: var(--n-bg);\n            min-height: 600px;\n            display: flex; align-items: center; justify-content: center;\n            padding: 20px; width: 100%; box-sizing: border-box;\n        }\n        #nazly-widget-root input, #nazly-widget-root button, #nazly-widget-root select { font-family: 'Tajawal', sans-serif !important; }\n        #nazly-widget-root * { box-sizing: border-box; }\n\n        .nazly-card {\n            width: 100%; max-width: 420px; background: white; border-radius: 28px;\n            padding: 24px; box-shadow: 0 15px 35px rgba(37, 99, 235, 0.08);\n            position: relative; overflow: hidden; display: flex; flex-direction: column;\n            gap: 20px; height: 560px; border: 1px solid #eef2f6;\n        }\n\n        .nazly-title { font-size: 22px; font-weight: 800; color: #1e293b; margin: 0; text-align: center; letter-spacing: -0.5px; }\n        .nazly-subtitle { font-size: 13px; color: #64748b; margin: 5px 0 0 0; text-align: center; font-weight: 500; }\n        .nazly-label { font-size: 11px; font-weight: 800; color: #94a3b8; margin-bottom: 8px; display: block; text-transform: uppercase; }\n\n        .nazly-region-box {\n            background: #F1F5F9; border: 2px solid transparent; border-radius: 18px;\n            padding: 16px; display: flex; align-items: center; gap: 12px;\n            cursor: pointer; transition: 0.3s;\n        }\n        .nazly-region-box:hover { background: #e2e8f0; }\n        .nazly-region-box.has-value { border-color: var(--n-primary); background: #eff6ff; }\n\n        .nazly-grid {\n            display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;\n            overflow-y: auto; padding: 2px;\n        }\n        .nazly-grid::-webkit-scrollbar { width: 4px; }\n        .nazly-grid::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }\n\n        .nazly-chip { \n            display: flex; align-items: center; justify-content: center;\n            padding: 12px 6px; border-radius: 14px; \n            background: #fff; border: 1.5px solid #e2e8f0; \n            color: #64748b; font-size: 12px; font-weight: 700; \n            cursor: pointer; transition: 0.2s; text-align: center;\n        }\n        .nazly-chip.active { background: var(--n-primary); color: white; border-color: var(--n-primary); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }\n\n        .nazly-btn {\n            background: var(--n-primary); color: white; padding: 16px; border-radius: 18px;\n            font-weight: 800; font-size: 16px; width: 100%; border: none;\n            cursor: pointer; margin-top: auto; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);\n            transition: 0.3s;\n        }\n        .nazly-btn:hover { opacity: 0.9; transform: translateY(-1px); }\n        .nazly-btn:active { transform: scale(0.97); }\n\n        .nazly-overlay {\n            position: absolute; inset: 0; background: white; z-index: 20;\n            transform: translateY(110%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);\n            display: flex; flex-direction: column;\n        }\n        .nazly-overlay.show { transform: translateY(0); }\n\n        .nazly-modal-header { padding: 18px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }\n        .nazly-close-btn { width: 34px; height: 34px; background: #f1f5f9; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #475569; }\n\n        .nazly-loader { position: absolute; inset: 0; background: white; z-index: 50; display: flex; align-items: center; justify-content: center; flex-direction: column; }\n        .n-spinner { width: 35px; height: 35px; border: 4px solid #f1f5f9; border-top-color: var(--n-primary); border-radius: 50%; animation: n-spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite; }\n        @keyframes n-spin { 100% { transform: rotate(360deg); } }\n\n        .nazly-result-item { \n            background: white; padding: 18px; border-radius: 20px; border: 1px solid #f1f5f9; \n            display: flex; flex-direction: column; gap: 10px; transition: 0.2s;\n            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);\n        }\n        .nazly-map-btn {\n            width: 46px; height: 46px; background: var(--n-primary); color: white; border-radius: 14px;\n            display: flex; align-items: center; justify-content: center; text-decoration: none;\n            transition: 0.2s; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);\n        }\n        .nazly-map-btn:active { transform: scale(0.9); }\n    <\/style>\n\n    <div class=\"nazly-card\">\n        <div id=\"n-loader\" class=\"nazly-loader\">\n            <div class=\"n-spinner\"><\/div>\n            <p style=\"margin-top:12px; font-size:12px; color:#64748b; font-weight:700;\">\u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0641\u0631\u0648\u0639&#8230;<\/p>\n        <\/div>\n\n        <div>\n            <h2 class=\"nazly-title\">\u0634\u0628\u0643\u0629 \u0627\u0644\u0645\u0648\u0632\u0639\u064a\u0646<\/h2>\n            <p class=\"nazly-subtitle\">\u062a\u0641\u0636\u0644 \u0628\u0632\u064a\u0627\u0631\u0629 \u0623\u0642\u0631\u0628 \u0646\u0642\u0637\u0629 \u0628\u064a\u0639 \u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0646\u0627\u0632\u0644\u064a<\/p>\n        <\/div>\n\n        <div>\n            <span class=\"nazly-label\">\u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u062c\u063a\u0631\u0627\u0641\u064a\u0629<\/span>\n            <div class=\"nazly-region-box\" onclick=\"nazlyToggle('region-view', true)\">\n                <span style=\"font-size:20px;\">\ud83d\uddfa\ufe0f<\/span>\n                <div style=\"flex:1;\">\n                    <span id=\"n-region-txt\" style=\"font-size:14px; font-weight:700; color:#475569;\">\u0627\u062e\u062a\u0631 \u0627\u0644\u0645\u0646\u0637\u0642\u0629&#8230;<\/span>\n                <\/div>\n                <span style=\"color:#94a3b8; font-size: 10px;\">\u25bc<\/span>\n            <\/div>\n        <\/div>\n\n        <div style=\"flex:1; display:flex; flex-direction:column; min-height:0;\">\n            <span class=\"nazly-label\">\u062a\u0635\u0646\u064a\u0641 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a<\/span>\n            <div class=\"nazly-grid\" id=\"n-products\">\n                <div class=\"nazly-chip active\" style=\"grid-column: span 3;\" data-val=\"all\" onclick=\"nazlyProd('all', this)\">\u0643\u0644 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a<\/div>\n            <\/div>\n        <\/div>\n\n        <button class=\"nazly-btn\" onclick=\"nazlySearch()\">\u0627\u0633\u062a\u0639\u0631\u0627\u0636 \u0646\u0642\u0627\u0637 \u0627\u0644\u0628\u064a\u0639<\/button>\n\n        <div class=\"nazly-overlay\" id=\"region-view\">\n            <div class=\"nazly-modal-header\">\n                <span style=\"font-weight:800; color:#1e293b;\">\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0646\u0637\u0642\u0629<\/span>\n                <div class=\"nazly-close-btn\" onclick=\"nazlyToggle('region-view', false)\">\u2715<\/div>\n            <\/div>\n            <div style=\"padding:15px;\">\n                <input type=\"text\" onkeyup=\"nazlyFilterReg(this)\" placeholder=\"\u0627\u0628\u062d\u062b \u0639\u0646 \u0645\u0646\u0637\u0642\u062a\u0643...\" style=\"width:100%; padding:14px; border:1.5px solid #f1f5f9; border-radius:14px; outline:none; font-size:14px; background:#F8FAFC;\"\/>\n            <\/div>\n            <div style=\"flex:1; overflow-y:auto; padding:0 15px;\" id=\"n-reg-list\"><\/div>\n        <\/div>\n\n        <div class=\"nazly-overlay\" id=\"res-view\">\n            <div class=\"nazly-modal-header\">\n                <div class=\"nazly-close-btn\" onclick=\"nazlyToggle('res-view', false)\">\u279c<\/div>\n                <span style=\"font-weight:800; font-size:14px; color:#1e293b;\" id=\"n-res-head\">\u0646\u0642\u0627\u0637 \u0627\u0644\u0628\u064a\u0639<\/span>\n                <div style=\"width:34px;\"><\/div>\n            <\/div>\n            <div style=\"padding:12px; border-bottom:1px solid #f1f5f9; white-space: nowrap; overflow-x: auto; display:flex; gap:8px;\" id=\"n-city-filt\" class=\"no-scrollbar\"><\/div>\n            <div style=\"flex:1; overflow-y:auto; padding:15px; display:flex; flex-direction:column; gap:12px; background:#F8FAFC;\" id=\"n-res-list\"><\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        (function() {\n            const NazlyApp = { data: [], products: [], selReg: '', selProds: ['all'], labels: {}, currRes: [] };\n\n            fetch('https:\/\/pos.tybah.store\/api.php?v=' + new Date().getTime())\n            .then(r=>r.json()).then(response => {\n                NazlyApp.products = response.products;\n                const prodContainer = document.getElementById('n-products');\n                response.products.forEach(p => {\n                    NazlyApp.labels[p.slug] = p.name;\n                    const chip = document.createElement('div');\n                    chip.className = 'nazly-chip';\n                    chip.innerText = p.name;\n                    chip.onclick = function() { window.nazlyProd(p.slug, this); };\n                    prodContainer.appendChild(chip);\n                });\n\n                NazlyApp.data = response.points;\n                const regs = [...new Set(response.points.map(i=>i.region))].sort();\n                const lst = document.getElementById('n-reg-list');\n                regs.forEach(r=>{\n                    const el = document.createElement('div');\n                    el.style.padding = '16px'; el.style.borderBottom = '1px solid #f8fafc';\n                    el.style.cursor = 'pointer'; el.style.fontWeight = '700'; el.style.fontSize = '14px';\n                    el.innerText = r;\n                    el.onclick = () => { \n                        NazlyApp.selReg = r; \n                        document.getElementById('n-region-txt').innerText = r;\n                        document.getElementById('n-region-txt').style.color = '#2563eb';\n                        document.querySelector('.nazly-region-box').classList.add('has-value');\n                        window.nazlyToggle('region-view', false);\n                    };\n                    lst.appendChild(el);\n                });\n                document.getElementById('n-loader').style.display='none';\n            }).catch(e => {\n                document.getElementById('n-loader').innerHTML = '<span style=\"color:#ef4444; font-size:12px; font-weight:bold;\">\u0639\u0630\u0631\u0627\u064b\u060c \u0641\u0634\u0644 \u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u0627\u0644\u062e\u0627\u062f\u0645<\/span>';\n            });\n\n            window.nazlyToggle = (id, show) => document.getElementById(id).classList.toggle('show', show);\n\n            window.nazlyFilterReg = (inp) => {\n                const v = inp.value.toUpperCase();\n                document.querySelectorAll('#n-reg-list div').forEach(x => {\n                    x.style.display = x.innerText.toUpperCase().indexOf(v) > -1 ? 'block' : 'none';\n                });\n            };\n\n            window.nazlyProd = (v, el) => {\n                const chips = document.getElementById('n-products').children;\n                if(v==='all'){\n                    NazlyApp.selProds=['all'];\n                    for(let c of chips) c.classList.remove('active');\n                    el.classList.add('active');\n                } else {\n                    if(NazlyApp.selProds.includes('all')){ NazlyApp.selProds=[]; chips[0].classList.remove('active'); }\n                    if(NazlyApp.selProds.includes(v)){ NazlyApp.selProds = NazlyApp.selProds.filter(x=>x!==v); el.classList.remove('active'); }\n                    else { NazlyApp.selProds.push(v); el.classList.add('active'); }\n                    if(NazlyApp.selProds.length===0){ NazlyApp.selProds=['all']; chips[0].classList.add('active'); }\n                }\n            };\n\n            window.nazlySearch = () => {\n                if(!NazlyApp.selReg) {\n                    const btn = document.querySelector('.nazly-region-box');\n                    btn.style.borderColor='#ef4444'; setTimeout(()=>btn.style.borderColor='', 500);\n                    return;\n                }\n                const res = NazlyApp.data.filter(i => {\n                    const rm = i.region === NazlyApp.selReg;\n                    let pm = NazlyApp.selProds.includes('all') || (i.products && NazlyApp.selProds.some(p => i.products.split(',').includes(p)));\n                    return rm && pm;\n                });\n                NazlyApp.currRes = res;\n                document.getElementById('n-res-head').innerText = `\u0646\u062a\u0627\u0626\u062c ${NazlyApp.selReg} (${res.length})`;\n                window.nazlyRender(res);\n                const cts = [...new Set(res.map(i=>i.city))].sort();\n                const cf = document.getElementById('n-city-filt');\n                cf.innerHTML = `<span class=\"nazly-chip active\" style=\"padding:8px 16px;\" onclick=\"nazlyFiltCity('all',this)\">\u0627\u0644\u0643\u0644<\/span>`;\n                cts.forEach(c => { cf.innerHTML += `<span class=\"nazly-chip\" style=\"padding:8px 16px;\" onclick=\"nazlyFiltCity('${c}',this)\">${c}<\/span>`; });\n                window.nazlyToggle('res-view', true);\n            };\n\n            window.nazlyRender = (lst) => {\n                const box = document.getElementById('n-res-list'); box.innerHTML='';\n                if(lst.length===0){\n                    box.innerHTML = `<div style=\"text-align:center; padding:50px 0; color:#94a3b8;\"><div style=\"font-size:40px; margin-bottom:10px;\">\ud83d\udd0d<\/div><p style=\"font-weight:800;\">\u0644\u0645 \u0646\u062c\u062f \u0641\u0631\u0648\u0639\u0627\u064b \u0644\u0647\u0630\u0627 \u0627\u0644\u0641\u0644\u062a\u0631<\/p><\/div>`;\n                    return;\n                }\n                lst.forEach(i => {\n                    let tags = '';\n                    if(i.products) i.products.split(',').forEach(p=>{ \n                        if(NazlyApp.labels[p]) tags+=`<span style=\"font-size:10px; background:#f1f5f9; padding:3px 8px; border-radius:6px; margin-left:5px; color:#475569; font-weight:700;\">${NazlyApp.labels[p]}<\/span>`; \n                    });\n                    box.innerHTML += `\n                    <div class=\"nazly-result-item\">\n                        <div style=\"display:flex; justify-content:space-between; align-items:center;\">\n                            <div style=\"flex:1; padding-left:12px;\">\n                                <div style=\"font-weight:900; font-size:15px; color:#0f172a; margin-bottom:4px;\">${i.shop_name}<\/div>\n                                <div style=\"font-size:11px; color:#64748b; line-height:1.5; font-weight:700;\">\n                                    <span style=\"color:#2563eb;\">${i.city}<\/span> \u2022 ${i.district} \u2022 ${i.street}\n                                <\/div>\n                            <\/div>\n                            <a href=\"${i.location_url}\" target=\"_blank\" class=\"nazly-map-btn\">\n                                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n                            <\/a>\n                        <\/div>\n                        <div style=\"border-top:1px solid #f8fafc; padding-top:10px; display:flex; flex-wrap:wrap; gap:5px;\">${tags}<\/div>\n                    <\/div>`;\n                });\n            };\n\n            window.nazlyFiltCity = (c, el) => {\n                const p = el.parentElement; for(let ch of p.children) ch.classList.remove('active'); el.classList.add('active');\n                window.nazlyRender(c==='all' ? NazlyApp.currRes : NazlyApp.currRes.filter(i=>i.city===c));\n            };\n        })();\n    <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0641\u0631\u0648\u0639&#8230; \u0634\u0628\u0643\u0629 \u0627\u0644\u0645\u0648\u0632\u0639\u064a\u0646 \u062a\u0641\u0636\u0644 \u0628\u0632\u064a\u0627\u0631\u0629 \u0623\u0642\u0631\u0628 \u0646\u0642\u0637\u0629 \u0628\u064a\u0639 \u0644\u0645\u0646\u062a\u062c\u0627\u062a &#8230; <\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1747","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nazly.com.sa\/en\/wp-json\/wp\/v2\/pages\/1747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nazly.com.sa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nazly.com.sa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nazly.com.sa\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nazly.com.sa\/en\/wp-json\/wp\/v2\/comments?post=1747"}],"version-history":[{"count":1,"href":"https:\/\/nazly.com.sa\/en\/wp-json\/wp\/v2\/pages\/1747\/revisions"}],"predecessor-version":[{"id":1748,"href":"https:\/\/nazly.com.sa\/en\/wp-json\/wp\/v2\/pages\/1747\/revisions\/1748"}],"wp:attachment":[{"href":"https:\/\/nazly.com.sa\/en\/wp-json\/wp\/v2\/media?parent=1747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}