\n\n\n\n \n \n
Rekomendasi Produk Pilihan<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n<\/head>\n<body class=\"bg-slate-50 text-slate-800 min-h-screen pb-12 font-sans antialiased\">\n\n <main class=\"max-w-md mx-auto px-4 pt-6\">\n \n <!-- Navigation Bar: Kembali ke Beranda -->\n <div class=\"flex items-center justify-between mb-4\">\n <a href=\"\/\" class=\"inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium text-slate-600 bg-white border border-slate-200 shadow-sm hover:bg-slate-100 hover:text-indigo-600 transition-all active:scale-95\">\n <i class=\"fa-solid fa-arrow-left text-[11px]\"><\/i>\n <span>Kembali ke Beranda<\/span>\n <\/a>\n <\/div>\n\n <!-- Profile Header -->\n <header class=\"text-center mb-5\">\n <img decoding=\"async\" src=\"https:\/\/affiliate.papipgendong.com\/wp-content\/uploads\/2026\/09\/profile-picture.jpg\" \n alt=\"Foto Profil\" \n class=\"w-20 h-20 rounded-full mx-auto shadow-md border-2 border-white object-cover mb-3\">\n <h1 class=\"text-xl font-bold text-slate-900\">Rekomendasi Barang Spill<\/h1>\n <p class=\"text-xs text-slate-500 mt-1\">Cari nomor barang yang aku sebutkan di konten ya! \u2728<\/p>\n <\/header>\n\n <!-- \ud83d\udd0d INPUT SEARCH BAR -->\n <div class=\"mb-5 relative\">\n <div class=\"absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400\">\n <i class=\"fa-solid fa-magnifying-glass text-xs\"><\/i>\n <\/div>\n <input type=\"text\" \n id=\"search-input\" \n placeholder=\"Cari nomor (#01), nama barang, atau kategori...\" \n class=\"w-full pl-9 pr-4 py-2.5 text-xs bg-white border border-slate-200 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\/20 focus:border-indigo-500 transition-all placeholder:text-slate-400\">\n <\/div>\n\n <!-- Skeleton Loading Effect -->\n <div id=\"loading-state\" class=\"space-y-3\">\n <div class=\"h-20 bg-slate-200\/70 animate-pulse rounded-2xl\"><\/div>\n <div class=\"h-20 bg-slate-200\/70 animate-pulse rounded-2xl\"><\/div>\n <div class=\"h-20 bg-slate-200\/70 animate-pulse rounded-2xl\"><\/div>\n <\/div>\n\n <!-- Container List Item Affiliate -->\n <section id=\"affiliate-list\" class=\"space-y-3 hidden\"><\/section>\n\n <!-- State Jika Pencarian Tidak Ditemukan -->\n <div id=\"no-results\" class=\"hidden text-center py-8\">\n <i class=\"fa-solid fa-box-open text-3xl text-slate-300 mb-2\"><\/i>\n <p class=\"text-xs text-slate-500 font-medium\">Barang yang kamu cari tidak ditemukan.<\/p>\n <\/div>\n\n <!-- Footer -->\n <footer class=\"mt-8 text-center text-[11px] text-slate-400\">\n <p>\u00a9 Rekomendasi Produk Pilihan<\/p>\n <\/footer>\n\n <\/main>\n\n <script>\n const GOOGLE_SCRIPT_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbxhX1TiZ1_jn4m7KYv5QpYRF5iCUn-PUTWakxhLRzLies9rpzPfm90G61zpE9HiH-uK\/exec\";\n const DEFAULT_IMAGE_URL = \"https:\/\/affiliate.papipgendong.com\/wp-content\/uploads\/2026\/09\/default-pic.png\";\n\n let allProducts = [];\n\n async function fetchAffiliateData() {\n const listContainer = document.getElementById(\"affiliate-list\");\n const loadingState = document.getElementById(\"loading-state\");\n\n try {\n const response = await fetch(GOOGLE_SCRIPT_URL);\n allProducts = await response.json();\n\n loadingState.classList.add(\"hidden\");\n listContainer.classList.remove(\"hidden\");\n\n renderProducts(allProducts);\n\n } catch (error) {\n console.error(\"Gagal mengambil data:\", error);\n loadingState.classList.add(\"hidden\");\n listContainer.classList.remove(\"hidden\");\n listContainer.innerHTML = `<p class=\"text-center text-xs text-red-400 py-6\">Gagal memuat data barang.<\/p>`;\n }\n }\n\n function renderProducts(products) {\n const listContainer = document.getElementById(\"affiliate-list\");\n const noResults = document.getElementById(\"no-results\");\n\n if (products.length === 0) {\n listContainer.innerHTML = \"\";\n noResults.classList.remove(\"hidden\");\n return;\n }\n\n noResults.classList.add(\"hidden\");\n let htmlContent = \"\";\n\n products.forEach((item) => {\n const itemPhoto = item.foto && item.foto.toString().trim() !== '' ? item.foto : DEFAULT_IMAGE_URL;\n\n htmlContent += `\n <a href=\"${item.link}\" target=\"_blank\" rel=\"noopener\" \n class=\"flex items-center p-3 bg-white hover:bg-slate-50 border border-slate-200\/80 rounded-2xl shadow-sm transition-all duration-200 active:scale-[0.98] group relative overflow-hidden\">\n \n <div class=\"flex-shrink-0 w-8 h-8 rounded-lg bg-indigo-600 text-white font-bold text-xs flex items-center justify-center mr-2.5 shadow-sm\">\n ${item.no || '#'}\n <\/div>\n\n <img decoding=\"async\" src=\"${itemPhoto}\" \n alt=\"${item.nama}\" \n class=\"w-14 h-14 rounded-xl object-cover flex-shrink-0 bg-slate-100 border border-slate-100\">\n \n <div class=\"ml-3 flex-1 min-w-0\">\n <span class=\"inline-block px-2 py-0.5 text-[9px] font-semibold text-indigo-600 bg-indigo-50 rounded-full mb-0.5\">\n ${item.kategori || 'Umum'}\n <\/span>\n <h2 class=\"text-xs font-bold text-slate-900 truncate group-hover:text-indigo-600\">${item.nama}<\/h2>\n <p class=\"text-[11px] text-slate-500 truncate mt-0.5\">\"${item.catatan}\"<\/p>\n <\/div>\n\n <div class=\"ml-1 pl-1 text-slate-300 group-hover:text-indigo-600 transition-colors\">\n <i class=\"fa-solid fa-chevron-right text-xs\"><\/i>\n <\/div>\n <\/a>\n `;\n });\n\n listContainer.innerHTML = htmlContent;\n }\n\n document.getElementById(\"search-input\").addEventListener(\"input\", function (e) {\n const keyword = e.target.value.toLowerCase().trim();\n\n const filtered = allProducts.filter((item) => {\n const noMatch = item.no ? item.no.toString().toLowerCase().includes(keyword) : false;\n const nameMatch = item.nama ? item.nama.toString().toLowerCase().includes(keyword) : false;\n const categoryMatch = item.kategori ? item.kategori.toString().toLowerCase().includes(keyword) : false;\n const noteMatch = item.catatan ? item.catatan.toString().toLowerCase().includes(keyword) : false;\n\n return noMatch || nameMatch || categoryMatch || noteMatch;\n });\n\n renderProducts(filtered);\n });\n\n fetchAffiliateData();\n <\/script>\n<\/body>\n<\/html>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Rekomendasi Produk Pilihan Kembali ke Beranda Rekomendasi Barang Spill Cari nomor barang yang aku sebutkan di konten ya! \u2728 Barang yang kamu cari tidak ditemukan. \u00a9 Rekomendasi Produk Pilihan<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-canvas.php","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-161","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"blogus-slider-full":false,"blogus-featured":false,"blogus-medium":false},"uagb_author_info":{"display_name":"Nurhayati Khasanah","author_link":"https:\/\/affiliate.papipgendong.com\/index.php\/author\/nurhayati-khasanah\/"},"uagb_comment_info":0,"uagb_excerpt":"Rekomendasi Produk Pilihan Kembali ke Beranda Rekomendasi Barang Spill Cari nomor barang yang aku sebutkan di konten ya! \u2728 Barang yang kamu cari tidak ditemukan. \u00a9 Rekomendasi Produk Pilihan","_links":{"self":[{"href":"https:\/\/affiliate.papipgendong.com\/index.php\/wp-json\/wp\/v2\/pages\/161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/affiliate.papipgendong.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/affiliate.papipgendong.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/affiliate.papipgendong.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affiliate.papipgendong.com\/index.php\/wp-json\/wp\/v2\/comments?post=161"}],"version-history":[{"count":5,"href":"https:\/\/affiliate.papipgendong.com\/index.php\/wp-json\/wp\/v2\/pages\/161\/revisions"}],"predecessor-version":[{"id":177,"href":"https:\/\/affiliate.papipgendong.com\/index.php\/wp-json\/wp\/v2\/pages\/161\/revisions\/177"}],"wp:attachment":[{"href":"https:\/\/affiliate.papipgendong.com\/index.php\/wp-json\/wp\/v2\/media?parent=161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}