{"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-4066 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=4066\" 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=\"300\" height=\"168\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/jsimage-300x168.jpg\" class=\"attachment-medium size-medium wp-image-3501\" alt=\"\" srcset=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/jsimage-300x168.jpg 300w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/07\/jsimage.jpg 500w\" 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=4066\" >\n\t\t\t\tPromo Aplikasi Tanpa Web Regarcomm\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\t28 Agustus 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>Level Up Bisnismu dengan Aplikasi Web dari Regarcomm Regarcomm Development Solusi Aplikasi Web Digital Saatnya bisnis naik level Level Up Bisnismu dengan Aplikasi Web Keren dari Regarcomm! Bosan sama sistem manual yang ribet? \ud83e\udd2f Mau bisnis makin cuan dan efisien? Regarcomm Development hadir buat nyulap bisnismu jadi GO DIGITAL! \u2728 \u2728 Lihat Fitur \ud83d\udcac Konsultasi<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=4066\" aria-label=\"Read more about Promo Aplikasi Tanpa Web Regarcomm\" 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-4061 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=4061\" 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=\"243\" height=\"208\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/08\/download-2026-04-25T111005.537.jpg\" class=\"attachment-medium size-medium wp-image-3543\" 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=4061\" >\n\t\t\t\tPromo Aplikasi Regarcomm Development\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\t28 Agustus 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>Level Up Bisnismu dengan Aplikasi Web dari Regarcomm \ud83d\udd25 Level Up Bisnismu Pakai Aplikasi Web Keren dari Regarcomm! \ud83d\udd25 Bosan sama sistem manual yang ribet? \ud83e\udd2f Mau bisnis makin cuan dan efisien? Tenang, Regarcomm Development hadir buat nyulap bisnismu jadi GO DIGITAL! \u2728 Kehebatan Produk Kami \ud83c\udfc3\u200d\u2642\ufe0f\ud83d\udca8 Absensi Anti Ribet: Lupakan absen manual yang bikin<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=4061\" aria-label=\"Read more about Promo Aplikasi Regarcomm Development\" 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-4056 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=4056\" 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\/2021\/05\/SingleProduct-10-300x300.jpg\" class=\"attachment-medium size-medium wp-image-3716\" alt=\"\" srcset=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2021\/05\/SingleProduct-10-300x300.jpg 300w, https:\/\/regarcomm.com\/wp-content\/uploads\/2021\/05\/SingleProduct-10-100x100.jpg 100w, https:\/\/regarcomm.com\/wp-content\/uploads\/2021\/05\/SingleProduct-10-600x600.jpg 600w, https:\/\/regarcomm.com\/wp-content\/uploads\/2021\/05\/SingleProduct-10-150x150.jpg 150w, https:\/\/regarcomm.com\/wp-content\/uploads\/2021\/05\/SingleProduct-10-768x768.jpg 768w, https:\/\/regarcomm.com\/wp-content\/uploads\/2021\/05\/SingleProduct-10.jpg 804w\" 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=4056\" >\n\t\t\t\tPromo Bank Sampah\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\t28 Agustus 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 Bank Sampah Modern | Regarcomm Development Regarcomm Development Lihat Harga \ud83c\udf31 Google Apps Script Edition Aplikasi Bank Sampah Modern Solusi manajemen praktis untuk Bank Sampah. Tanpa biaya server bulanan, otomatis cetak struk dan kirim bukti transaksi melalui WhatsApp. \ud83d\udcf2 Konsultasi via WhatsApp Lihat Fitur Dashboard Bank Sampah Sistem manajemen transaksi NasabahAktif StatusOnline \u267b\ufe0f Setoran<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=4056\" aria-label=\"Read more about Promo Bank Sampah\" 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-4019 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=4019\" 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=\"147\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/08\/photo_2026-08-26_07-58-26-300x147.jpg\" class=\"attachment-medium size-medium wp-image-3802\" alt=\"\" srcset=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/08\/photo_2026-08-26_07-58-26-300x147.jpg 300w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/08\/photo_2026-08-26_07-58-26.jpg 757w\" 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=4019\" >\n\t\t\t\tAplikasi Web Tanpa Hosting &amp; Domain\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 Agustus 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>Regarcomm Development beri solusi praktis: membangun aplikasi web tanpa perlu membeli hosting atau domain dengan memanfaatkan Google Sheets + Google Apps Script. Pendekatan ini cocok untuk prototipe cepat, aplikasi internal, dashboard, atau form interaktif yang butuh backend sederhana dan penyimpanan data. Kenapa memakai Google Sheets + Apps Script? Tanpa biaya hosting\/domain: data tersimpan di Google<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=4019\" aria-label=\"Read more about Aplikasi Web Tanpa Hosting &amp; Domain\" 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-4011 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=4011\" 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=\"251\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2025\/09\/Buat-Website-1-300x251.png\" class=\"attachment-medium size-medium wp-image-1068\" alt=\"\" srcset=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2025\/09\/Buat-Website-1-300x251.png 300w, https:\/\/regarcomm.com\/wp-content\/uploads\/2025\/09\/Buat-Website-1-600x503.png 600w, https:\/\/regarcomm.com\/wp-content\/uploads\/2025\/09\/Buat-Website-1-768x644.png 768w, https:\/\/regarcomm.com\/wp-content\/uploads\/2025\/09\/Buat-Website-1.png 940w\" 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=4011\" >\n\t\t\t\tLanding Page Regarcomm Development\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 Agustus 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\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=4011\" aria-label=\"Read more about Landing Page Regarcomm Development\" 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-3797 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=3797\" 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=\"251\" src=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/08\/Regarcomm1-300x251.jpg\" class=\"attachment-medium size-medium wp-image-3770\" alt=\"\" srcset=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/08\/Regarcomm1-300x251.jpg 300w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/08\/Regarcomm1-1024x858.jpg 1024w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/08\/Regarcomm1-768x644.jpg 768w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/08\/Regarcomm1-600x503.jpg 600w, https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/08\/Regarcomm1.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=3797\" >\n\t\t\t\tLanding Page Regarcomm Development\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\t25 Agustus 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>Regarcomm Development &#8211; Jasa Pembuatan Website Profesional \ud83d\udcac REGARCOMM DEVELOPMENT \ud83d\udcac Hubungi WA Jasa Pembuatan Website Profesional Ingin punya website keren untuk kebutuhan pribadi atau bisnis? Kami siap membantu Anda membangun website yang modern, cepat, aman, dan sesuai kebutuhan! \ud83d\ude80 \ud83d\udcac Konsultasi Gratis \ud83c\udf10 Kunjungi Website Kami Layanan Website Kami Profil Diri Halaman identitas pribadi<\/p>\n\t\t<\/div>\n\t\t\n\t\t<a class=\"elementor-post__read-more\" href=\"https:\/\/regarcomm.com\/?p=3797\" aria-label=\"Read more about Landing Page Regarcomm Development\" 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}]}}