{"id":3493,"date":"2026-07-05T04:51:38","date_gmt":"2026-07-05T04:51:38","guid":{"rendered":"https:\/\/regarcomm.com\/?p=3493"},"modified":"2026-08-27T01:00:45","modified_gmt":"2026-08-27T01:00:45","slug":"proses-setup-kolaborasi-astro-dengan-shopify","status":"publish","type":"post","link":"https:\/\/regarcomm.com\/?p=3493","title":{"rendered":"Proses Setup Kolaborasi Astro Dengan shopify"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3493\" class=\"elementor elementor-3493\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f9919d e-flex e-con-boxed e-con e-parent\" data-id=\"5f9919d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cddf674 elementor-widget elementor-widget-gallery\" data-id=\"cddf674\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;columns&quot;:3,&quot;lazyload&quot;:&quot;yes&quot;,&quot;gallery_layout&quot;:&quot;grid&quot;,&quot;columns_tablet&quot;:2,&quot;columns_mobile&quot;:1,&quot;gap&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;gap_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;gap_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;link_to&quot;:&quot;file&quot;,&quot;aspect_ratio&quot;:&quot;3:2&quot;,&quot;overlay_background&quot;:&quot;yes&quot;,&quot;content_hover_animation&quot;:&quot;fade-in&quot;}\" data-widget_type=\"gallery.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-gallery__container\">\n\t\t\t\t\t\t\t<a class=\"e-gallery-item elementor-gallery-item elementor-animated-content\" href=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113805.616.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"cddf674\" data-elementor-lightbox-title=\"download - 2026-07-05T113805.616\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzQ4NiwidXJsIjoiaHR0cHM6XC9cL3JlZ2FyY29tbS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA3XC9kb3dubG9hZC0yMDI2LTA3LTA1VDExMzgwNS42MTYuanBnIiwic2xpZGVzaG93IjoiY2RkZjY3NCJ9\">\n\t\t\t\t\t<div class=\"e-gallery-image elementor-gallery-item__image\" data-thumbnail=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113805.616.jpg\" data-width=\"246\" data-height=\"164\" aria-label=\"\" role=\"img\" ><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-gallery-item__overlay\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<a class=\"e-gallery-item elementor-gallery-item elementor-animated-content\" href=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-94.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"cddf674\" data-elementor-lightbox-title=\"download (94)\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzQ4OCwidXJsIjoiaHR0cHM6XC9cL3JlZ2FyY29tbS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA3XC9kb3dubG9hZC05NC5wbmciLCJzbGlkZXNob3ciOiJjZGRmNjc0In0%3D\">\n\t\t\t\t\t<div class=\"e-gallery-image elementor-gallery-item__image\" data-thumbnail=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-94.png\" data-width=\"246\" data-height=\"138\" aria-label=\"\" role=\"img\" ><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-gallery-item__overlay\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<a class=\"e-gallery-item elementor-gallery-item elementor-animated-content\" href=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"cddf674\" data-elementor-lightbox-title=\"download - 2026-07-05T113903.142\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzQ4NCwidXJsIjoiaHR0cHM6XC9cL3JlZ2FyY29tbS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA3XC9kb3dubG9hZC0yMDI2LTA3LTA1VDExMzkwMy4xNDIuanBnIiwic2xpZGVzaG93IjoiY2RkZjY3NCJ9\">\n\t\t\t\t\t<div class=\"e-gallery-image elementor-gallery-item__image\" data-thumbnail=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg\" data-width=\"246\" data-height=\"109\" aria-label=\"\" role=\"img\" ><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-gallery-item__overlay\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bcdf55f e-flex e-con-boxed e-con e-parent\" data-id=\"bcdf55f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c44e6a2 elementor-widget elementor-widget-text-editor\" data-id=\"c44e6a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div id=\"model-response-message-contentr_496fbbe74079f59e\" class=\"markdown markdown-main-panel enable-luminous-fast-follows enable-updated-hr-color\" dir=\"ltr\" aria-busy=\"false\" aria-live=\"polite\"><p data-path-to-node=\"0\">Proses <i data-path-to-node=\"0\" data-index-in-node=\"7\">setup<\/i> kolaborasi antara <b data-path-to-node=\"0\" data-index-in-node=\"31\">Astro JS<\/b> dan <b data-path-to-node=\"0\" data-index-in-node=\"44\">Shopify<\/b> (menggunakan <b data-path-to-node=\"0\" data-index-in-node=\"65\">Shopify Storefront API<\/b>) melibatkan pemisahan fungsi: Shopify akan fokus mengurus data produk, inventaris, dan transaksi, sedangkan Astro akan bertindak sebagai mesin pembuat tampilan halaman web yang super cepat.<\/p><p data-path-to-node=\"1\">Berikut adalah panduan langkah demi langkah untuk melakukan <i data-path-to-node=\"1\" data-index-in-node=\"60\">setup<\/i> dari awal hingga siap pakai:<\/p><h2 data-path-to-node=\"3\">Langkah 1: Setup di Sisi Shopify (Mendapatkan Akses API)<\/h2><p data-path-to-node=\"4\">Sebelum masuk ke kode Astro, Anda perlu mengaktifkan akses API di toko Shopify Anda agar Astro bisa mengambil data produk.<\/p><ol start=\"1\" data-path-to-node=\"5\"><li><p data-path-to-node=\"5,0,0\">Masuk ke <b data-path-to-node=\"5,0,0\" data-index-in-node=\"9\">Shopify Admin<\/b> Anda.<\/p><\/li><li><p data-path-to-node=\"5,1,0\">Buka menu <b data-path-to-node=\"5,1,0\" data-index-in-node=\"10\">Settings<\/b> (Pengaturan) &gt; <b data-path-to-node=\"5,1,0\" data-index-in-node=\"34\">Apps and sales channels<\/b> (Aplikasi dan saluran penjualan).<\/p><\/li><li><p data-path-to-node=\"5,2,0\">Klik <b data-path-to-node=\"5,2,0\" data-index-in-node=\"5\">Develop apps<\/b> (Kembangkan aplikasi) di bagian atas, lalu klik <b data-path-to-node=\"5,2,0\" data-index-in-node=\"66\">Create an app<\/b>.<\/p><\/li><li><p data-path-to-node=\"5,3,0\">Beri nama aplikasi Anda (misal: <code data-path-to-node=\"5,3,0\" data-index-in-node=\"32\">Astro Frontend<\/code>) dan pilih akun pengembang Anda.<\/p><\/li><li><p data-path-to-node=\"5,4,0\">Di tab <b data-path-to-node=\"5,4,0\" data-index-in-node=\"7\">Configuration<\/b>, cari bagian <b data-path-to-node=\"5,4,0\" data-index-in-node=\"34\">Storefront API integration<\/b> dan klik <b data-path-to-node=\"5,4,0\" data-index-in-node=\"70\">Configure<\/b>.<\/p><\/li><li><p data-path-to-node=\"5,5,0\">Centang semua hak akses (<i data-path-to-node=\"5,5,0\" data-index-in-node=\"25\">scopes<\/i>) yang dibutuhkan, seperti:<\/p><ul data-path-to-node=\"5,5,1\"><li><p data-path-to-node=\"5,5,1,0,0\"><code data-path-to-node=\"5,5,1,0,0\" data-index-in-node=\"0\">read_products<\/code> (Membaca data produk)<\/p><\/li><li><p data-path-to-node=\"5,5,1,1,0\"><code data-path-to-node=\"5,5,1,1,0\" data-index-in-node=\"0\">read_product_listings<\/code><\/p><\/li><li><p data-path-to-node=\"5,5,1,2,0\"><code data-path-to-node=\"5,5,1,2,0\" data-index-in-node=\"0\">unauthenticated_read_product_listings<\/code> (Wajib untuk checkout\/keranjang publik)<\/p><\/li><\/ul><\/li><li><p data-path-to-node=\"5,6,0\">Klik <b data-path-to-node=\"5,6,0\" data-index-in-node=\"5\">Save<\/b>, lalu pindah ke tab <b data-path-to-node=\"5,6,0\" data-index-in-node=\"30\">API credentials<\/b> dan klik <b data-path-to-node=\"5,6,0\" data-index-in-node=\"55\">Install app<\/b>.<\/p><\/li><li><p data-path-to-node=\"5,7,0\">Salin <b data-path-to-node=\"5,7,0\" data-index-in-node=\"6\">Storefront API access token<\/b> dan <b data-path-to-node=\"5,7,0\" data-index-in-node=\"38\">Shopify Domain<\/b> toko Anda (misal: <code data-path-to-node=\"5,7,0\" data-index-in-node=\"71\">toko-anda.myshopify.com<\/code>).<\/p><\/li><\/ol><h2 data-path-to-node=\"7\">Langkah 2: Setup Project Astro JS<\/h2><p data-path-to-node=\"8\">Sekarang, buka terminal di komputer Anda untuk membuat proyek <i data-path-to-node=\"8\" data-index-in-node=\"62\">frontend<\/i> baru.<\/p><ol start=\"1\" data-path-to-node=\"9\"><li><p data-path-to-node=\"9,0,0\">Jalankan perintah pembuatan proyek Astro:<\/p><div class=\"code-block ng-tns-c199063979-164 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"3\"><div class=\"formatted-code-block-internal-container ng-tns-c199063979-164\"><div class=\"animated-opacity ng-tns-c199063979-164\"><div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c199063979-164 ng-star-inserted\"><p><span class=\"ng-tns-c199063979-164\">Bash<\/span><\/p><div class=\"buttons ng-tns-c199063979-164 ng-star-inserted\">\u00a0<\/div><\/div><pre class=\"ng-tns-c199063979-164\"><code class=\"code-container formatted ng-tns-c199063979-164\" role=\"text\" data-test-id=\"code-content\">npm create astro@latest\n<\/code><\/pre><\/div><\/div><\/div><\/li><li><p data-path-to-node=\"9,1,0\">Masuk ke dalam folder proyek Anda:<\/p><div class=\"code-block ng-tns-c199063979-165 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"6\"><div class=\"formatted-code-block-internal-container ng-tns-c199063979-165\"><div class=\"animated-opacity ng-tns-c199063979-165\"><div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c199063979-165 ng-star-inserted\"><p><span class=\"ng-tns-c199063979-165\">Bash<\/span><\/p><div class=\"buttons ng-tns-c199063979-165 ng-star-inserted\">\u00a0<\/div><\/div><pre class=\"ng-tns-c199063979-165\"><code class=\"code-container formatted ng-tns-c199063979-165\" role=\"text\" data-test-id=\"code-content\"><span class=\"hljs-built_in\">cd<\/span> nama-proyek-astro-anda\n<\/code><\/pre><\/div><\/div><\/div><\/li><li><p data-path-to-node=\"9,2,0\">Buat file <code data-path-to-node=\"9,2,0\" data-index-in-node=\"10\">.env<\/code> di akar folder proyek untuk menyimpan token Shopify dengan aman:<\/p><div class=\"code-block ng-tns-c199063979-166 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"9\"><div class=\"formatted-code-block-internal-container ng-tns-c199063979-166\"><div class=\"animated-opacity ng-tns-c199063979-166\"><div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c199063979-166 ng-star-inserted\"><p><span class=\"ng-tns-c199063979-166\">Cuplikan kode<\/span><\/p><div class=\"buttons ng-tns-c199063979-166 ng-star-inserted\">\u00a0<\/div><\/div><pre class=\"ng-tns-c199063979-166\"><code class=\"code-container formatted ng-tns-c199063979-166\" role=\"text\" data-test-id=\"code-content\">SHOPIFY_STOREFRONT_API_TOKEN=isi_dengan_token_storefront_anda\nSHOPIFY_SHOP_DOMAIN=toko-anda.myshopify.com\n<\/code><\/pre><\/div><\/div><\/div><\/li><\/ol><h2 data-path-to-node=\"11\">Langkah 3: Membuat Fungsi Fetcher GraphQL Shopify<\/h2><p data-path-to-node=\"12\">Shopify Storefront API berbasis <b data-path-to-node=\"12\" data-index-in-node=\"32\">GraphQL<\/b>. Kita akan membuat fungsi pembantu (<i data-path-to-node=\"12\" data-index-in-node=\"76\">helper function<\/i>) di Astro untuk melakukan <i data-path-to-node=\"12\" data-index-in-node=\"118\">request<\/i> ke Shopify.<\/p><p data-path-to-node=\"13\">Buat file baru di <code data-path-to-node=\"13\" data-index-in-node=\"18\">src\/utils\/shopify.js<\/code>:<\/p><div class=\"code-block ng-tns-c199063979-167 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"12\"><div class=\"formatted-code-block-internal-container ng-tns-c199063979-167\"><div class=\"animated-opacity ng-tns-c199063979-167\"><div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c199063979-167 ng-star-inserted\"><p><span class=\"ng-tns-c199063979-167\">JavaScript<\/span><\/p><div class=\"buttons ng-tns-c199063979-167 ng-star-inserted\">\u00a0<\/div><\/div><pre class=\"ng-tns-c199063979-167\"><code class=\"code-container formatted ng-tns-c199063979-167\" role=\"text\" data-test-id=\"code-content\"><span class=\"hljs-comment\">\/\/ src\/utils\/shopify.js<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">shopifyFetch<\/span>(<span class=\"hljs-params\">{ query, variables = {} }<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> domain = <span class=\"hljs-keyword\">import<\/span>.meta.env.SHOPIFY_SHOP_DOMAIN;\n  <span class=\"hljs-keyword\">const<\/span> token = <span class=\"hljs-keyword\">import<\/span>.meta.env.SHOPIFY_STOREFRONT_API_TOKEN;\n\n  <span class=\"hljs-keyword\">try<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">`https:\/\/<span class=\"hljs-subst\">${domain}<\/span>\/api\/2024-01\/graphql.json`<\/span>, {\n      <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">'POST'<\/span>,\n      <span class=\"hljs-attr\">headers<\/span>: {\n        <span class=\"hljs-string\">'Content-Type'<\/span>: <span class=\"hljs-string\">'application\/json'<\/span>,\n        <span class=\"hljs-string\">'X-Shopify-Storefront-Access-Token'<\/span>: token,\n      },\n      <span class=\"hljs-attr\">body<\/span>: <span class=\"hljs-built_in\">JSON<\/span>.stringify({ query, variables }),\n    });\n\n    <span class=\"hljs-keyword\">if<\/span> (!response.ok) {\n      <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">`HTTP error! status: <span class=\"hljs-subst\">${response.status}<\/span>`<\/span>);\n    }\n\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">await<\/span> response.json();\n  } <span class=\"hljs-keyword\">catch<\/span> (error) {\n    <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">\"Gagal mengambil data dari Shopify:\"<\/span>, error);\n    <span class=\"hljs-keyword\">throw<\/span> error;\n  }\n}\n<\/code><\/pre><\/div><\/div><\/div><h2 data-path-to-node=\"16\">Langkah 4: Menampilkan Produk di Halaman Utama (<code data-path-to-node=\"16\" data-index-in-node=\"48\">index.astro<\/code>)<\/h2><p data-path-to-node=\"17\">Sekarang mari kita uji koneksinya dengan menarik daftar produk dari Shopify dan menampilkannya menggunakan komponen Astro.<\/p><p data-path-to-node=\"18\">Buka file <code data-path-to-node=\"18\" data-index-in-node=\"10\">src\/pages\/index.astro<\/code>:<\/p><div class=\"code-block ng-tns-c199063979-168 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"15\"><div class=\"formatted-code-block-internal-container ng-tns-c199063979-168\"><div class=\"animated-opacity ng-tns-c199063979-168\"><div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c199063979-168 ng-star-inserted\"><p><span class=\"ng-tns-c199063979-168\">Cuplikan kode<\/span><\/p><div class=\"buttons ng-tns-c199063979-168 ng-star-inserted\">\u00a0<\/div><\/div><pre class=\"ng-tns-c199063979-168\"><code class=\"code-container formatted ng-tns-c199063979-168\" role=\"text\" data-test-id=\"code-content\">---\n\/\/ src\/pages\/index.astro\nimport { shopifyFetch } from '..\/utils\/shopify';\n\n\/\/ Tulis Query GraphQL untuk mengambil 10 produk pertama\nconst graphqlQuery = `\n  {\n    products(first: 10) {\n      edges {\n        node {\n          id\n          title\n          handle\n          description\n          images(first: 1) {\n            edges {\n              node {\n                url\n                altText\n              }\n            }\n          }\n          priceRange {\n            minVariantPrice {\n              amount\n              currencyCode\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\nconst response = await shopifyFetch({ query: graphqlQuery });\nconst products = response.data.products.edges;\n---\n\n&lt;html lang=\"id\"&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"utf-8\" \/&gt;\n    &lt;title&gt;Toko Headless Astro + Shopify&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;Katalog Produk Kami&lt;\/h1&gt;\n    \n    &lt;div class=\"product-grid\"&gt;\n      {products.map(({ node: product }) =&gt; {\n        const image = product.images.edges[0]?.node;\n        const price = product.priceRange.minVariantPrice;\n        \n        return (\n          &lt;div class=\"product-card\"&gt;\n            {image &amp;&amp; &lt;img src={image.url} alt={image.altText || product.title} width=\"200\" \/&gt;}\n            &lt;h2&gt;{product.title}&lt;\/h2&gt;\n            &lt;p&gt;{price.amount} {price.currencyCode}&lt;\/p&gt;\n            &lt;a href={`\/produk\/${product.handle}`}&gt;Detail Produk&lt;\/a&gt;\n          &lt;\/div&gt;\n        );\n      })}\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n\n&lt;style&gt;\n  .product-grid { display: flex; gap: 20px; flex-wrap: wrap; padding: 20px; }\n  .product-card { border: 1px solid #ddd; padding: 15px; border-radius: 8px; width: 220px; }\n  .product-card img { max-width: 100%; height: auto; }\n&lt;\/style&gt;\n<\/code><\/pre><\/div><\/div><\/div><h2 data-path-to-node=\"21\">Langkah 5: Membuat Halaman Detail Produk Dinamis<\/h2><p data-path-to-node=\"22\">Agar setiap produk memiliki halamannya sendiri secara otomatis (misal: <code data-path-to-node=\"22\" data-index-in-node=\"71\">\/produk\/sepatu-keren<\/code>), kita gunakan <i data-path-to-node=\"22\" data-index-in-node=\"107\">Dynamic Routing<\/i> dari Astro.<\/p><p data-path-to-node=\"23\">Buat file baru di <code data-path-to-node=\"23\" data-index-in-node=\"18\">src\/pages\/produk\/[handle].astro<\/code>:<\/p><div class=\"code-block ng-tns-c199063979-169 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"18\"><div class=\"formatted-code-block-internal-container ng-tns-c199063979-169\"><div class=\"animated-opacity ng-tns-c199063979-169\"><div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c199063979-169 ng-star-inserted\"><p><span class=\"ng-tns-c199063979-169\">Cuplikan kode<\/span><\/p><div class=\"buttons ng-tns-c199063979-169 ng-star-inserted\">\u00a0<\/div><\/div><pre class=\"ng-tns-c199063979-169\"><code class=\"code-container formatted ng-tns-c199063979-169\" role=\"text\" data-test-id=\"code-content\">---\n\/\/ src\/pages\/produk\/[handle].astro\nimport { shopifyFetch } from '..\/..\/utils\/shopify';\n\n\/\/ 1. Beritahu Astro halaman apa saja yang perlu dibuat (Build Time)\nexport async function getStaticPaths() {\n  const response = await shopifyFetch({\n    query: `{ products(first: 250) { edges { node { handle } } } }`\n  });\n  \n  return response.data.products.edges.map(({ node }) =&gt; ({\n    params: { handle: node.handle },\n  }));\n}\n\nconst { handle } = Astro.params;\n\n\/\/ 2. Ambil data lengkap produk berdasarkan handle yang sedang dibuka\nconst productQuery = `\n  query getProduct($handle: String!) {\n    product(handle: $handle) {\n      title\n      description\n      images(first: 1) { edges { node { url } } }\n      variants(first: 1) {\n        edges {\n          node { id }\n        }\n      }\n    }\n  }\n`;\n\nconst productResponse = await shopifyFetch({\n  query: productQuery,\n  variables: { handle }\n});\n\nconst product = productResponse.data.product;\nconst variantId = product.variants.edges[0]?.node.id; \/\/ Dibutuhkan untuk checkout nanti\n---\n\n&lt;html lang=\"id\"&gt;\n&lt;head&gt;&lt;title&gt;{product.title}&lt;\/title&gt;&lt;\/head&gt;\n&lt;body&gt;\n  &lt;a href=\"\/\"&gt;\u2190 Kembali ke Toko&lt;\/a&gt;\n  &lt;main&gt;\n    &lt;h1&gt;{product.title}&lt;\/h1&gt;\n    &lt;img src={product.images.edges[0]?.node.url} width=\"400\" \/&gt;\n    &lt;p&gt;{product.description}&lt;\/p&gt;\n    \n    &lt;button data-variant-id={variantId} id=\"buy-button\"&gt;Beli Sekarang&lt;\/button&gt;\n  &lt;\/main&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre><\/div><\/div><\/div><h2 data-path-to-node=\"26\">Langkah 6: Integrasi Sistem Keranjang Belanja &amp; Checkout<\/h2><p data-path-to-node=\"27\">Halaman katalog di atas bersifat statis (Sangat cepat dan ramah SEO). Namun, untuk proses <b data-path-to-node=\"27\" data-index-in-node=\"90\">Beli Sekarang \/ Keranjang<\/b>, kita perlu berinteraksi langsung dengan Shopify via browser pengguna (<i data-path-to-node=\"27\" data-index-in-node=\"187\">Client-side<\/i>).<\/p><p data-path-to-node=\"28\">Cara paling instan tanpa perlu membuat sistem <i data-path-to-node=\"28\" data-index-in-node=\"46\">cart<\/i> yang rumit dari nol adalah menggunakan <b data-path-to-node=\"28\" data-index-in-node=\"90\">Shopify Checkout URL<\/b>. Kita bisa membuat baris kode JavaScript sederhana di dalam tag <code data-path-to-node=\"28\" data-index-in-node=\"175\">&lt;script&gt;<\/code> pada halaman detail produk untuk langsung mengarahkan pengguna ke halaman pembayaran Shopify:<\/p><p data-path-to-node=\"29\">Tambahkan skrip ini di bagian bawah file <code data-path-to-node=\"29\" data-index-in-node=\"41\">src\/pages\/produk\/[handle].astro<\/code> Anda:<\/p><div class=\"code-block ng-tns-c199063979-170 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" data-hveid=\"21\"><div class=\"formatted-code-block-internal-container ng-tns-c199063979-170\"><div class=\"animated-opacity ng-tns-c199063979-170\"><div class=\"code-block-decoration header-formatted gds-emphasized-body-m ng-tns-c199063979-170 ng-star-inserted\"><p><span class=\"ng-tns-c199063979-170\">Cuplikan kode<\/span><\/p><div class=\"buttons ng-tns-c199063979-170 ng-star-inserted\">\u00a0<\/div><\/div><pre class=\"ng-tns-c199063979-170\"><code class=\"code-container formatted ng-tns-c199063979-170\" role=\"text\" data-test-id=\"code-content\">&lt;script&gt;\n  import { shopifyFetch } from '..\/..\/utils\/shopify';\n\n  const buyButton = document.getElementById('buy-button');\n  \n  buyButton.addEventListener('click', async () =&gt; {\n    const variantId = buyButton.getAttribute('data-variant-id');\n    \n    \/\/ Query mutasi GraphQL untuk membuat checkout instan dengan 1 barang\n    const mutation = `\n      mutation checkoutCreate($input: CheckoutInput!) {\n        checkoutCreate(input: $input) {\n          checkout {\n            webUrl\n          }\n        }\n      }\n    `;\n    \n    const variables = {\n      input: {\n        lineItems: [{ variantId: variantId, quantity: 1 }]\n      }\n    };\n    \n    buyButton.innerText = \"Memproses...\";\n    \n    \/\/ Tembak langsung API Shopify dari browser pembeli\n    const domain = \"toko-anda.myshopify.com\"; \/\/ Bisa di-hardcode di script client-side\n    const token = \"isi_token_storefront_anda\"; \/\/ Untuk client-side pastikan token storefront aman (publik)\n    \n    const response = await fetch(`https:\/\/${domain}\/api\/2024-01\/graphql.json`, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application\/json', 'X-Shopify-Storefront-Access-Token': token },\n      body: JSON.stringify({ query: mutation, variables })\n    });\n    \n    const result = await response.json();\n    const checkoutUrl = result.data.checkoutCreate.checkout.webUrl;\n    \n    \/\/ Lempar pembeli ke halaman pembayaran resmi Shopify yang aman\n    window.location.href = checkoutUrl;\n  });\n&lt;\/script&gt;\n<\/code><\/pre><\/div><\/div><\/div><h2 data-path-to-node=\"32\">Langkah 7: Build &amp; Deployment<\/h2><p data-path-to-node=\"33\">Setelah semuanya berfungsi dengan baik di komputer lokal:<\/p><ol start=\"1\" data-path-to-node=\"34\"><li><p data-path-to-node=\"34,0,0\">Jalankan <code data-path-to-node=\"34,0,0\" data-index-in-node=\"9\">npm run build<\/code> untuk memverifikasi tidak ada eror GraphQL. Astro akan menghasilkan file HTML statis siap pakai.<\/p><\/li><li><p data-path-to-node=\"34,1,0\">Hubungkan repositori Git Anda ke platform seperti <b data-path-to-node=\"34,1,0\" data-index-in-node=\"50\">Vercel, Netlify, atau Cloudflare Pages<\/b>. Jangan lupa untuk memasukkan <code data-path-to-node=\"34,1,0\" data-index-in-node=\"119\">SHOPIFY_STOREFRONT_API_TOKEN<\/code> dan <code data-path-to-node=\"34,1,0\" data-index-in-node=\"152\">SHOPIFY_SHOP_DOMAIN<\/code> ke dalam pengaturan <i data-path-to-node=\"34,1,0\" data-index-in-node=\"192\">Environment Variables<\/i> di dashboard hosting tersebut.\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Baca Mengenal <a href=\"https:\/\/regarcomm.com\/?p=3456\">Astro JS<\/a><\/p><\/li><\/ol><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7ae2d13 e-flex e-con-boxed e-con e-parent\" data-id=\"7ae2d13\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-33eb2f5 e-flex e-con-boxed e-con e-parent\" data-id=\"33eb2f5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-920acf4 elementor-grid-3 elementor-grid-tablet-2 elementor-grid-mobile-1 elementor-posts--thumbnail-top elementor-widget elementor-widget-posts\" data-id=\"920acf4\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;classic_columns&quot;:&quot;3&quot;,&quot;classic_columns_tablet&quot;:&quot;2&quot;,&quot;classic_columns_mobile&quot;:&quot;1&quot;,&quot;classic_row_gap&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:35,&quot;sizes&quot;:[]},&quot;classic_row_gap_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;classic_row_gap_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"posts.classic\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-posts-container elementor-posts elementor-posts--skin-classic elementor-grid\" role=\"list\">\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-4185 post type-post status-publish format-standard has-post-thumbnail hentry category-tak-berkategori\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/regarcomm.com\/?p=4185\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img fetchpriority=\"high\" decoding=\"async\" onerror=\"this.src='https:\/\/regarcomm.com\/wp-content\/plugins\/replace-broken-images\/images\/default.jpg'\" width=\"299\" height=\"168\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/10\/images-2026-10-02T101514.240.jpg\" class=\"attachment-medium size-medium wp-image-4184\" alt=\"\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/regarcomm.com\/?p=4185\" >\n\t\t\t\tBikin Soal ExamView Nggak Pakai Ribet: Panduan Import dari File Word untuk Dev &amp; Edukator\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-date\">\n\t\t\t2 Oktober 2026\t\t<\/span>\n\t\t\t\t<span class=\"elementor-post-avatar\">\n\t\t\tTidak ada komentar\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>Bikin Soal ExamView Nggak Pakai Ribet: Panduan Import dari File Word untuk Dev &amp; Edukator Sebagai orang yang akrab dengan dunia pemrograman dan efisiensi teknologi, melihat pekerjaan copy-paste manual satu per satu terasa sangat tidak efisien. Bayangkan harus memasukkan 100 soal ke ExamView Test Generator dengan cara klik new question, ketik soal, ketik opsi A,<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=4185\" aria-label=\"Read more about Bikin Soal ExamView Nggak Pakai Ribet: Panduan Import dari File Word untuk Dev &amp; Edukator\" tabindex=\"-1\" >\n\t\t\tRead More \u00bb\t\t<\/a>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-4167 post type-post status-publish format-standard has-post-thumbnail hentry category-tak-berkategori\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/regarcomm.com\/?p=4167\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img decoding=\"async\" onerror=\"this.src='https:\/\/regarcomm.com\/wp-content\/plugins\/replace-broken-images\/images\/default.jpg'\" width=\"300\" height=\"300\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/photo_2026-09-27_09-27-08-300x300.jpg\" class=\"attachment-medium size-medium wp-image-4159\" alt=\"\" srcset=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/photo_2026-09-27_09-27-08-300x300.jpg 300w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/photo_2026-09-27_09-27-08-1024x1024.jpg 1024w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/photo_2026-09-27_09-27-08-150x150.jpg 150w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/photo_2026-09-27_09-27-08-768x768.jpg 768w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/photo_2026-09-27_09-27-08.jpg 1254w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/regarcomm.com\/?p=4167\" >\n\t\t\t\tAplikasi Website Akuntansi Usaha\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-date\">\n\t\t\t27 September 2026\t\t<\/span>\n\t\t\t\t<span class=\"elementor-post-avatar\">\n\t\t\tTidak ada komentar\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>Aplikasi Web Akuntansi dengan data input dan laporan akuntansi lengkap beserta ekspor laporan dalam format PDF dan Excel Harga : Rp.1.200.000Keunggulan:* Gratis Hosting dan Domain * Gunakan Penyimpanan Google Drive * Kapasitas Penyimpanan 15 GB*Aplikasi Ringan dan tidak memerlukan memori banyak* Tidak memerlukan Instalasi * Aplikasi Web dibuka melalui link* Tidak memerlukan biaya perpanjangan tiap<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=4167\" aria-label=\"Read more about Aplikasi Website Akuntansi Usaha\" tabindex=\"-1\" >\n\t\t\tRead More \u00bb\t\t<\/a>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-4161 post type-post status-publish format-standard has-post-thumbnail hentry category-tak-berkategori\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/regarcomm.com\/?p=4161\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img decoding=\"async\" onerror=\"this.src='https:\/\/regarcomm.com\/wp-content\/plugins\/replace-broken-images\/images\/default.jpg'\" width=\"300\" height=\"200\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/photo_2026-09-26_18-26-41-300x200.jpg\" class=\"attachment-medium size-medium wp-image-4157\" alt=\"\" srcset=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/photo_2026-09-26_18-26-41-300x200.jpg 300w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/photo_2026-09-26_18-26-41-1024x682.jpg 1024w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/photo_2026-09-26_18-26-41-768x512.jpg 768w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/photo_2026-09-26_18-26-41.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/regarcomm.com\/?p=4161\" >\n\t\t\t\tAplikasi Web Absensi Karyawan By Scan QR\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-date\">\n\t\t\t27 September 2026\t\t<\/span>\n\t\t\t\t<span class=\"elementor-post-avatar\">\n\t\t\tTidak ada komentar\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>Aplikasi Web Absensi dengan sistem input manual dan Scan QR serta laporan absensi lengkap beserta ekspor laporan dalam format PDF dan Excel Harga : Rp.1.200.000Keunggulan:* Gratis Hosting dan Domain * Gunakan Penyimpanan Google Drive * Kapasitas Penyimpanan 15 GB*Aplikasi Ringan dan tidak memerlukan memori banyak* Tidak memerlukan Instalasi * Aplikasi Web dibuka melalui link* Tidak<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=4161\" aria-label=\"Read more about Aplikasi Web Absensi Karyawan By Scan QR\" tabindex=\"-1\" >\n\t\t\tRead More \u00bb\t\t<\/a>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-4129 post type-post status-publish format-standard has-post-thumbnail hentry category-tak-berkategori\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/regarcomm.com\/?p=4129\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img loading=\"lazy\" decoding=\"async\" onerror=\"this.src='https:\/\/regarcomm.com\/wp-content\/plugins\/replace-broken-images\/images\/default.jpg'\" width=\"300\" height=\"300\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Toko-Online-300x300.jpg\" class=\"attachment-medium size-medium wp-image-4112\" alt=\"\" srcset=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Toko-Online-300x300.jpg 300w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Toko-Online-1024x1024.jpg 1024w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Toko-Online-150x150.jpg 150w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Toko-Online-768x768.jpg 768w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Toko-Online.jpg 1254w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/regarcomm.com\/?p=4129\" >\n\t\t\t\tPaket Aplikasi Toko Online\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-date\">\n\t\t\t9 September 2026\t\t<\/span>\n\t\t\t\t<span class=\"elementor-post-avatar\">\n\t\t\tTidak ada komentar\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>Aplikasi Web Toko Online Harga : Rp.1.500.000Keunggulan:* Gratis Hosting dan Domain * Gunakan Penyimpanan Google Drive * Kapasitas Penyimpanan 15 GB*Aplikasi Ringan dan tidak memerlukan memori banyak* Tidak memerlukan Instalasi * Aplikasi Web dibuka melalui link* Tidak memerlukan biaya perpanjangan tiap tahun Kembali Menu Depan<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=4129\" aria-label=\"Read more about Paket Aplikasi Toko Online\" tabindex=\"-1\" >\n\t\t\tRead More \u00bb\t\t<\/a>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-4124 post type-post status-publish format-standard has-post-thumbnail hentry category-tak-berkategori\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/regarcomm.com\/?p=4124\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img loading=\"lazy\" decoding=\"async\" onerror=\"this.src='https:\/\/regarcomm.com\/wp-content\/plugins\/replace-broken-images\/images\/default.jpg'\" width=\"300\" height=\"300\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Inventory-300x300.jpg\" class=\"attachment-medium size-medium wp-image-4111\" alt=\"\" srcset=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Inventory-300x300.jpg 300w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Inventory-1024x1024.jpg 1024w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Inventory-150x150.jpg 150w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Inventory-768x768.jpg 768w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Inventory.jpg 1254w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/regarcomm.com\/?p=4124\" >\n\t\t\t\tPaket Aplikasi Inventory\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-date\">\n\t\t\t9 September 2026\t\t<\/span>\n\t\t\t\t<span class=\"elementor-post-avatar\">\n\t\t\tTidak ada komentar\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>Aplikasi Web Inventory Harga : Rp.1.200.000Keunggulan:* Gratis Hosting dan Domain * Gunakan Penyimpanan Google Drive * Kapasitas Penyimpanan 15 GB*Aplikasi Ringan dan tidak memerlukan memori banyak* Tidak memerlukan Instalasi * Aplikasi Web dibuka melalui link* Tidak memerlukan biaya perpanjangan tiap tahun Kembali Ke Menu<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=4124\" aria-label=\"Read more about Paket Aplikasi Inventory\" tabindex=\"-1\" >\n\t\t\tRead More \u00bb\t\t<\/a>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"elementor-post elementor-grid-item post-4119 post type-post status-publish format-standard has-post-thumbnail hentry category-tak-berkategori\" role=\"listitem\">\n\t\t\t\t<a class=\"elementor-post__thumbnail__link\" href=\"https:\/\/regarcomm.com\/?p=4119\" tabindex=\"-1\" >\n\t\t\t<div class=\"elementor-post__thumbnail\"><img loading=\"lazy\" decoding=\"async\" onerror=\"this.src='https:\/\/regarcomm.com\/wp-content\/plugins\/replace-broken-images\/images\/default.jpg'\" width=\"300\" height=\"300\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Absen-Sekolah-300x300.jpg\" class=\"attachment-medium size-medium wp-image-4109\" alt=\"\" srcset=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Absen-Sekolah-300x300.jpg 300w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Absen-Sekolah-1024x1024.jpg 1024w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Absen-Sekolah-150x150.jpg 150w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Absen-Sekolah-768x768.jpg 768w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/09\/Absen-Sekolah.jpg 1254w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/div>\n\t\t<\/a>\n\t\t\t\t<div class=\"elementor-post__text\">\n\t\t\t\t<h3 class=\"elementor-post__title\">\n\t\t\t<a href=\"https:\/\/regarcomm.com\/?p=4119\" >\n\t\t\t\tPaket Absen Sekolah\t\t\t<\/a>\n\t\t<\/h3>\n\t\t\t\t<div class=\"elementor-post__meta-data\">\n\t\t\t\t\t<span class=\"elementor-post-date\">\n\t\t\t9 September 2026\t\t<\/span>\n\t\t\t\t<span class=\"elementor-post-avatar\">\n\t\t\tTidak ada komentar\t\t<\/span>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-post__excerpt\">\n\t\t\t<p>Aplikasi Web Absen Sekolah Harga : Rp.1.200.000Keunggulan:* Gratis Hosting dan Domain * Gunakan Penyimpanan Google Drive * Kapasitas Penyimpanan 15 GB*Aplikasi Ringan dan tidak memerlukan memori banyak* Tidak memerlukan Instalasi * Aplikasi Web dibuka melalui link* Tidak memerlukan biaya perpanjangan tiap tahun Klik di sini<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=4119\" aria-label=\"Read more about Paket Absen Sekolah\" tabindex=\"-1\" >\n\t\t\tRead More \u00bb\t\t<\/a>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/article>\n\t\t\t\t<\/div>\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Proses setup kolaborasi antara Astro JS dan Shopify (menggunakan Shopify Storefront API) melibatkan pemisahan fungsi: Shopify akan fokus mengurus data produk, inventaris, dan transaksi, sedangkan Astro akan bertindak sebagai mesin pembuat tampilan halaman web yang super cepat. Berikut adalah panduan langkah demi langkah untuk melakukan setup dari awal hingga siap pakai: Langkah 1: Setup di&#8230;<\/p>\n","protected":false},"author":1,"featured_media":3484,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3493","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tak-berkategori"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Proses Setup Kolaborasi Astro Dengan shopify - Regarcomm Development<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/regarcomm.com\/?p=3493\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Proses Setup Kolaborasi Astro Dengan shopify - Regarcomm Development\" \/>\n<meta property=\"og:description\" content=\"Proses setup kolaborasi antara Astro JS dan Shopify (menggunakan Shopify Storefront API) melibatkan pemisahan fungsi: Shopify akan fokus mengurus data produk, inventaris, dan transaksi, sedangkan Astro akan bertindak sebagai mesin pembuat tampilan halaman web yang super cepat. Berikut adalah panduan langkah demi langkah untuk melakukan setup dari awal hingga siap pakai: Langkah 1: Setup di...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/regarcomm.com\/?p=3493\" \/>\n<meta property=\"og:site_name\" content=\"Regarcomm Development\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/share\/1DXa1yP9Ao\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-05T04:51:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-27T01:00:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"246\" \/>\n\t<meta property=\"og:image:height\" content=\"109\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ewin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Erwinbinjai\" \/>\n<meta name=\"twitter:site\" content=\"@Erwinbinjai\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ewin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/regarcomm.com\/?p=3493#article\",\"isPartOf\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3493\"},\"author\":{\"name\":\"Ewin\",\"@id\":\"https:\/\/regarcomm.com\/#\/schema\/person\/c2ef7a42a8b09547b2be7ea118e39912\"},\"headline\":\"Proses Setup Kolaborasi Astro Dengan shopify\",\"datePublished\":\"2026-07-05T04:51:38+00:00\",\"dateModified\":\"2026-08-27T01:00:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3493\"},\"wordCount\":442,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/regarcomm.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3493#primaryimage\"},\"thumbnailUrl\":\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg\",\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/regarcomm.com\/?p=3493#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/regarcomm.com\/?p=3493\",\"url\":\"https:\/\/regarcomm.com\/?p=3493\",\"name\":\"Proses Setup Kolaborasi Astro Dengan shopify - Regarcomm Development\",\"isPartOf\":{\"@id\":\"https:\/\/regarcomm.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3493#primaryimage\"},\"image\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3493#primaryimage\"},\"thumbnailUrl\":\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg\",\"datePublished\":\"2026-07-05T04:51:38+00:00\",\"dateModified\":\"2026-08-27T01:00:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3493#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/regarcomm.com\/?p=3493\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/regarcomm.com\/?p=3493#primaryimage\",\"url\":\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg\",\"contentUrl\":\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg\",\"width\":246,\"height\":109},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/regarcomm.com\/?p=3493#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Beranda\",\"item\":\"https:\/\/regarcomm.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Proses Setup Kolaborasi Astro Dengan shopify\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/regarcomm.com\/#website\",\"url\":\"https:\/\/regarcomm.com\/\",\"name\":\"Regarcomm Development\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/regarcomm.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/regarcomm.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/regarcomm.com\/#organization\",\"name\":\"Regarcomm Development\",\"url\":\"https:\/\/regarcomm.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/regarcomm.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/regarcomm.com\/wp-content\/uploads\/2025\/06\/photo_2025-05-13_10-59-37.jpg\",\"contentUrl\":\"http:\/\/regarcomm.com\/wp-content\/uploads\/2025\/06\/photo_2025-05-13_10-59-37.jpg\",\"width\":1280,\"height\":1073,\"caption\":\"Regarcomm Development\"},\"image\":{\"@id\":\"https:\/\/regarcomm.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/share\/1DXa1yP9Ao\/\",\"https:\/\/x.com\/Erwinbinjai\",\"https:\/\/instagram.com\/inerwinsyah\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/regarcomm.com\/#\/schema\/person\/c2ef7a42a8b09547b2be7ea118e39912\",\"name\":\"Ewin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/regarcomm.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6a415ad1031f294d556ac574983fae046c2c491e306ae6b51eea2b30a67238a7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6a415ad1031f294d556ac574983fae046c2c491e306ae6b51eea2b30a67238a7?s=96&d=mm&r=g\",\"caption\":\"Ewin\"},\"sameAs\":[\"http:\/\/localhost\/regarcomm\"],\"url\":\"https:\/\/regarcomm.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Proses Setup Kolaborasi Astro Dengan shopify - Regarcomm Development","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/regarcomm.com\/?p=3493","og_locale":"id_ID","og_type":"article","og_title":"Proses Setup Kolaborasi Astro Dengan shopify - Regarcomm Development","og_description":"Proses setup kolaborasi antara Astro JS dan Shopify (menggunakan Shopify Storefront API) melibatkan pemisahan fungsi: Shopify akan fokus mengurus data produk, inventaris, dan transaksi, sedangkan Astro akan bertindak sebagai mesin pembuat tampilan halaman web yang super cepat. Berikut adalah panduan langkah demi langkah untuk melakukan setup dari awal hingga siap pakai: Langkah 1: Setup di...","og_url":"https:\/\/regarcomm.com\/?p=3493","og_site_name":"Regarcomm Development","article_publisher":"https:\/\/www.facebook.com\/share\/1DXa1yP9Ao\/","article_published_time":"2026-07-05T04:51:38+00:00","article_modified_time":"2026-08-27T01:00:45+00:00","og_image":[{"width":246,"height":109,"url":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg","type":"image\/jpeg"}],"author":"Ewin","twitter_card":"summary_large_image","twitter_creator":"@Erwinbinjai","twitter_site":"@Erwinbinjai","twitter_misc":{"Ditulis oleh":"Ewin","Estimasi waktu membaca":"8 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/regarcomm.com\/?p=3493#article","isPartOf":{"@id":"https:\/\/regarcomm.com\/?p=3493"},"author":{"name":"Ewin","@id":"https:\/\/regarcomm.com\/#\/schema\/person\/c2ef7a42a8b09547b2be7ea118e39912"},"headline":"Proses Setup Kolaborasi Astro Dengan shopify","datePublished":"2026-07-05T04:51:38+00:00","dateModified":"2026-08-27T01:00:45+00:00","mainEntityOfPage":{"@id":"https:\/\/regarcomm.com\/?p=3493"},"wordCount":442,"commentCount":0,"publisher":{"@id":"https:\/\/regarcomm.com\/#organization"},"image":{"@id":"https:\/\/regarcomm.com\/?p=3493#primaryimage"},"thumbnailUrl":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg","inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/regarcomm.com\/?p=3493#respond"]}]},{"@type":"WebPage","@id":"https:\/\/regarcomm.com\/?p=3493","url":"https:\/\/regarcomm.com\/?p=3493","name":"Proses Setup Kolaborasi Astro Dengan shopify - Regarcomm Development","isPartOf":{"@id":"https:\/\/regarcomm.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/regarcomm.com\/?p=3493#primaryimage"},"image":{"@id":"https:\/\/regarcomm.com\/?p=3493#primaryimage"},"thumbnailUrl":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg","datePublished":"2026-07-05T04:51:38+00:00","dateModified":"2026-08-27T01:00:45+00:00","breadcrumb":{"@id":"https:\/\/regarcomm.com\/?p=3493#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/regarcomm.com\/?p=3493"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/regarcomm.com\/?p=3493#primaryimage","url":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg","contentUrl":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg","width":246,"height":109},{"@type":"BreadcrumbList","@id":"https:\/\/regarcomm.com\/?p=3493#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Beranda","item":"https:\/\/regarcomm.com\/"},{"@type":"ListItem","position":2,"name":"Proses Setup Kolaborasi Astro Dengan shopify"}]},{"@type":"WebSite","@id":"https:\/\/regarcomm.com\/#website","url":"https:\/\/regarcomm.com\/","name":"Regarcomm Development","description":"","publisher":{"@id":"https:\/\/regarcomm.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/regarcomm.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/regarcomm.com\/#organization","name":"Regarcomm Development","url":"https:\/\/regarcomm.com\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/regarcomm.com\/#\/schema\/logo\/image\/","url":"http:\/\/regarcomm.com\/wp-content\/uploads\/2025\/06\/photo_2025-05-13_10-59-37.jpg","contentUrl":"http:\/\/regarcomm.com\/wp-content\/uploads\/2025\/06\/photo_2025-05-13_10-59-37.jpg","width":1280,"height":1073,"caption":"Regarcomm Development"},"image":{"@id":"https:\/\/regarcomm.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/share\/1DXa1yP9Ao\/","https:\/\/x.com\/Erwinbinjai","https:\/\/instagram.com\/inerwinsyah"]},{"@type":"Person","@id":"https:\/\/regarcomm.com\/#\/schema\/person\/c2ef7a42a8b09547b2be7ea118e39912","name":"Ewin","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/regarcomm.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6a415ad1031f294d556ac574983fae046c2c491e306ae6b51eea2b30a67238a7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6a415ad1031f294d556ac574983fae046c2c491e306ae6b51eea2b30a67238a7?s=96&d=mm&r=g","caption":"Ewin"},"sameAs":["http:\/\/localhost\/regarcomm"],"url":"https:\/\/regarcomm.com\/?author=1"}]}},"jetpack_featured_media_url":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/download-2026-07-05T113903.142.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/posts\/3493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/regarcomm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3493"}],"version-history":[{"count":13,"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/posts\/3493\/revisions"}],"predecessor-version":[{"id":3976,"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/posts\/3493\/revisions\/3976"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/media\/3484"}],"wp:attachment":[{"href":"https:\/\/regarcomm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/regarcomm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/regarcomm.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}