[{"data":1,"prerenderedAt":508},["ShallowReactive",2],{"bootstrap":3,"blog-get-creative-with-our-custom-microstore":277},{"navigation":4,"globalConfig":196,"forms":218},{"headerSections":5,"headerFooterLinks":67,"footer":76,"legalLinks":153,"socialLinks":176},[6,39,44,50,57,62],{"hasSubMenu":7,"title":8,"links":9,"columns":38},true,"Product",[10,20,26,32],{"showTag":11,"_modelApiKey":12,"text":13,"subtitle":14,"icon":15,"isExternal":11,"link":16,"openForm":11},false,"navigation_link","Universal checkout","Sell anywhere","globe-simple",{"_modelApiKey":17,"slug":18,"title":19},"page","universal-checkout","Universal Checkout",{"showTag":11,"_modelApiKey":12,"text":21,"subtitle":22,"icon":23,"isExternal":11,"link":24,"openForm":11},"Distributed OMS","Manage orders","package",{"_modelApiKey":17,"slug":25,"title":21},"distributed-oms",{"showTag":11,"_modelApiKey":12,"text":27,"subtitle":28,"icon":29,"isExternal":11,"link":30,"openForm":11},"Promotion engine","Automated discounts","seal-percent",{"_modelApiKey":17,"slug":31,"title":27},"promotion-engine",{"showTag":11,"_modelApiKey":12,"text":33,"subtitle":34,"icon":35,"isExternal":11,"link":36,"openForm":11},"POS system","Operate stores","devices",{"_modelApiKey":17,"slug":37,"title":33},"pos-system",2,{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":40,"isExternal":11,"link":41,"openForm":11,"title":40},"Pricing",{"_modelApiKey":42,"slug":43},"pricing_page","pricing",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":45,"isExternal":11,"link":46,"openForm":11,"title":45},"Customers",{"_modelApiKey":47,"slug":48,"title":49},"customer_landing_page","customers","Customers page",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":51,"isExternal":11,"link":52,"openForm":11,"form":54,"title":51},"Partners",{"_modelApiKey":17,"slug":53,"title":51},"partners",{"_modelApiKey":55,"slug":53,"name":56},"form","PartnersForm",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":58,"label":59,"isExternal":7,"url":60,"openForm":11,"title":61},"Docs Hub","Learn more","https:\u002F\u002Fdocs.commercelayer.io\u002F","Docs",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":63,"isExternal":11,"link":64,"openForm":11,"title":63},"Blog",{"_modelApiKey":65,"slug":66},"blog_landing_page","blog",[68,72],{"text":69,"link":70},"Sign in",{"_modelApiKey":12,"text":69,"isExternal":7,"url":71,"openForm":11},"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_in",{"text":73,"link":74},"Sign up for free",{"_modelApiKey":12,"text":73,"isExternal":7,"url":75,"openForm":11},"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_up",[77,89,109,132],{"hasSubMenu":7,"title":8,"links":78},[79,81,83,85,87],{"showTag":11,"_modelApiKey":12,"text":13,"subtitle":14,"icon":15,"isExternal":11,"link":80,"openForm":11},{"_modelApiKey":17,"slug":18,"title":19},{"showTag":11,"_modelApiKey":12,"text":21,"subtitle":22,"icon":23,"isExternal":11,"link":82,"openForm":11},{"_modelApiKey":17,"slug":25,"title":21},{"showTag":11,"_modelApiKey":12,"text":27,"subtitle":28,"icon":29,"isExternal":11,"link":84,"openForm":11},{"_modelApiKey":17,"slug":31,"title":27},{"showTag":11,"_modelApiKey":12,"text":33,"subtitle":34,"icon":35,"isExternal":11,"link":86,"openForm":11},{"_modelApiKey":17,"slug":37,"title":33},{"showTag":11,"_modelApiKey":12,"text":40,"isExternal":11,"link":88,"openForm":11},{"_modelApiKey":42,"slug":43},{"hasSubMenu":7,"title":90,"links":91},"Resources",[92,94,99,104,107],{"showTag":11,"_modelApiKey":12,"text":93,"isExternal":7,"url":60,"openForm":11},"Documentation",{"showTag":11,"_modelApiKey":12,"text":95,"label":95,"isExternal":11,"link":96,"openForm":11},"Agentic Commerce",{"_modelApiKey":17,"slug":97,"title":98},"agentic-commerce-whitepaper","Agentic Commerce Whitepaper",{"showTag":11,"_modelApiKey":12,"text":100,"isExternal":11,"link":101,"openForm":11},"Core concepts",{"_modelApiKey":17,"slug":102,"title":103},"headless-commerce","Headless commerce",{"showTag":11,"_modelApiKey":12,"text":105,"isExternal":7,"url":106,"openForm":11},"Changelog","https:\u002F\u002Fdocs.commercelayer.io\u002Fchangelog\u002F",{"showTag":11,"_modelApiKey":12,"text":63,"isExternal":11,"link":108,"openForm":11},{"_modelApiKey":65,"slug":66},{"hasSubMenu":7,"title":110,"links":111},"Company",[112,116,118,121,126],{"showTag":11,"_modelApiKey":12,"text":113,"isExternal":11,"link":114,"openForm":11},"Vision",{"_modelApiKey":17,"slug":115,"title":113},"vision",{"showTag":11,"_modelApiKey":12,"text":45,"isExternal":11,"link":117,"openForm":11},{"_modelApiKey":47,"slug":48,"title":49},{"showTag":11,"_modelApiKey":12,"text":51,"isExternal":11,"link":119,"openForm":11,"form":120},{"_modelApiKey":17,"slug":53,"title":51},{"_modelApiKey":55,"slug":53,"name":56},{"showTag":11,"_modelApiKey":12,"text":122,"isExternal":11,"link":123,"openForm":11},"Security",{"_modelApiKey":17,"slug":124,"title":125},"security","Security at Commerce Layer",{"showTag":11,"_modelApiKey":12,"text":127,"label":128,"isExternal":11,"openForm":7,"form":129},"Giveback","Giveback program",{"_modelApiKey":55,"slug":130,"name":131},"giveback","GivebackForm",{"hasSubMenu":7,"title":133,"links":134},"Get in touch",[135,140,145,149],{"showTag":11,"_modelApiKey":12,"text":136,"isExternal":11,"openForm":7,"form":137},"Contact",{"_modelApiKey":55,"slug":138,"name":139},"contact","ContactUsForm",{"showTag":11,"_modelApiKey":12,"text":141,"isExternal":11,"openForm":7,"form":142},"Book a demo",{"_modelApiKey":55,"slug":143,"name":144},"demo","RequestDemoForm",{"showTag":11,"_modelApiKey":12,"text":146,"label":147,"isExternal":7,"url":148,"openForm":11},"Support","Email support","mailto:support@commercelayer.io",{"showTag":11,"_modelApiKey":12,"text":150,"label":151,"isExternal":7,"url":152,"openForm":11},"Community","Discord community","https:\u002F\u002Fdiscord.gg\u002Fcommercelayer",{"hasSubMenu":7,"title":154,"links":155},"Legal",[156,161,165,169,173],{"showTag":11,"_modelApiKey":12,"text":157,"label":158,"isExternal":7,"url":159,"openForm":11,"htmlClassNames":160},"Terms","Terms and conditions","\u002Flegal-embed\u002Fterms-of-service","iubenda-nostyle no-brand iubenda-noiframe iubenda-embed",{"showTag":11,"_modelApiKey":12,"text":162,"label":163,"isExternal":7,"url":164,"openForm":11,"htmlClassNames":160},"Privacy","Privacy policy","\u002Flegal-embed\u002Fprivacy-policy",{"showTag":11,"_modelApiKey":12,"text":166,"label":167,"isExternal":7,"url":168,"openForm":11,"htmlClassNames":160},"Cookies","Cookie policy","\u002Flegal-embed\u002Fcookie-policy",{"showTag":11,"_modelApiKey":12,"text":170,"isExternal":7,"url":171,"openForm":11,"htmlClassNames":172},"Notice at collection","#","iubenda-cs-uspr-link",{"showTag":11,"_modelApiKey":12,"text":174,"isExternal":7,"url":171,"openForm":11,"htmlClassNames":175},"Privacy preferences","iubenda-cs-preferences-link",[177,180,184,188,192],{"title":178,"type":179,"url":152,"isExternal":7},"Discord","discord-logo",{"title":181,"type":182,"url":183,"isExternal":7},"Github","github","https:\u002F\u002Fgithub.com\u002Fcommercelayer",{"title":185,"type":186,"url":187,"isExternal":7},"Bluesky","bluesky-logo","https:\u002F\u002Fbsky.app\u002Fprofile\u002Fcommercelayer.io",{"title":189,"type":190,"url":191,"isExternal":7},"X","x-logo","https:\u002F\u002Fx.com\u002Fcommercelayer",{"title":193,"type":194,"url":195,"isExternal":7},"LinkedIn","linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fcommerce-layer",{"pagesWithoutCtaPanel":197,"ctaPanel":198,"notification":208,"showApiResponseTime":11,"newsletterSignup":216},[],{"title":199,"subtitle":200,"ctas":201},"Ready to get started?","Discover how we can help your business.",[202,205],{"_modelApiKey":203,"text":204,"isExternal":7,"url":75,"openForm":11},"link","Get started for free",{"_modelApiKey":203,"text":206,"isExternal":11,"openForm":7,"form":207},"Contact us",{"_modelApiKey":55,"slug":138,"name":139},{"showNotification":7,"link":209,"linkText":210,"text":215},{"_modelApiKey":203,"text":210,"isExternal":11,"link":211,"openForm":11},"Read article",{"_modelApiKey":212,"slug":213,"title":214},"blog_post","the-new-payments-api-built-for-how-people-pay-now","The new Payments API. Built for how people pay now.","\u003Cp>The new Payments API. Built for how people pay now.\u003C\u002Fp>\n",{"ctaText":217},"Subscribe",[219,225,229,236,240,246,249,253,261,262,267,272,274],{"_modelApiKey":55,"slug":220,"pardotFormEmbedCode":221,"formEmbedMinHeight":222,"successTitle":223,"successCopy":224},"agentic-commerce","https:\u002F\u002Fcommercelayer.fillout.com\u002Ft\u002F5w4Khwgxr6us?whitepaper=agentic",520,"Thank you for your request!","We’ll be in touch soon to arrange a date and time for your personalized demo.",{"_modelApiKey":55,"slug":226,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"successTitle":223,"successCopy":224},"shopify","https:\u002F\u002Fform.fillout.com\u002Ft\u002FgVnLSmKZwRus",850,{"_modelApiKey":55,"slug":130,"pardotFormEmbedCode":230,"formEmbedMinHeight":231,"displayTitle":232,"copy":233,"successTitle":234,"successCopy":235},"https:\u002F\u002Fform.fillout.com\u002Ft\u002FmVDF8aAiofus",500,"We give back.","\u003Cp>Part of Commerce Layer's company ethos is to empathize and support one another: co-workers, customers, and community. We want to do our part to help nonprofit organizations and small businesses who may feel adversely affected by the current global economic climate, and as a result, need in-kind support to reach their customers.\u003C\u002Fp>\n\n\u003Cp>If this general description matches your organization’s needs, please tell us your story by completing the following form so we can consider helping your cause.\u003C\u002Fp>\n","Thank you!","We will contact you soon to learn more about your story.",{"_modelApiKey":55,"slug":237,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":238,"copy":239},"book-an-onboarding-session","Book an onboarding session","\u003Cp>Schedule some time and our devs will help you set up a Commerce Layer + Sanity store.\u003C\u002Fp>\n",{"_modelApiKey":55,"slug":241,"pardotFormEmbedCode":242,"formEmbedMinHeight":243,"displayTitle":244,"successTitle":234,"successCopy":245},"download-our-whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=ComposableCommerce",450,"Download our whitepaper.","Check your inbox. You should receive a download link soon.",{"_modelApiKey":55,"slug":247,"pardotFormEmbedCode":248,"formEmbedMinHeight":243,"displayTitle":244,"successTitle":234,"successCopy":245},"download-the-content-and-commerce-whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=ContentAndCommerce",{"_modelApiKey":55,"slug":250,"pardotFormEmbedCode":251,"formEmbedMinHeight":243,"displayTitle":244,"copy":252,"successTitle":234,"successCopy":245},"whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=Jamstack","\u003Cp>Commerce Layer is the perfect platform for building commerce on the Jamstack. Convert any design into pixel perfect HTML pages. Connect a best-of-breed headless CMS. Go serverless and forget the hassle of managing complex infrastructures.\u003C\u002Fp>\n",{"_modelApiKey":55,"slug":254,"pardotFormEmbedCode":255,"formEmbedMinHeight":256,"displayTitle":257,"copy":258,"successTitle":259,"successCopy":260},"contact-links","https:\u002F\u002Fform.fillout.com\u002Ft\u002FeWPyhHGHT7us",750,"Contact us.","\u003Cp>Tell us about your project. Our team will reach out to you for a personalized offer.\u003C\u002Fp>\n","Thanks for your message!","We’ll be in touch soon to discuss your project details.",{"_modelApiKey":55,"slug":138,"pardotFormEmbedCode":255,"formEmbedMinHeight":256,"displayTitle":257,"copy":258,"successTitle":259,"successCopy":260},{"_modelApiKey":55,"slug":263,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":264,"successTitle":265,"successCopy":266},"demo-embed","Want to see it in action? Request a demo.","Thanks for your request!","We’ll be in touch soon to arrange a date and time for your free live demo.",{"_modelApiKey":55,"slug":53,"pardotFormEmbedCode":268,"formEmbedMinHeight":228,"displayTitle":269,"copy":270,"successTitle":234,"successCopy":271},"https:\u002F\u002Fform.fillout.com\u002Ft\u002F9MTkDWMUSqus","Become our partner.","\u003Cp>Join us and get our guidance in helping your clients succeed. Our partners are our ambassadors. We are committed to your success as much as you are.\u003C\u002Fp>\n","We will contact you soon to discuss the details of our partnership.",{"_modelApiKey":55,"slug":273,"pardotFormEmbedCode":268,"formEmbedMinHeight":228,"displayTitle":269,"copy":270,"successTitle":234,"successCopy":271},"partners-embed",{"_modelApiKey":55,"slug":143,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":275,"copy":276,"successTitle":265,"successCopy":266},"Get a free live demo.","\u003Cp>Get a personalized demo and learn more about what Commerce Layer can do for your company.\u003C\u002Fp>\n",{"_modelApiKey":212,"link":278,"subtitle":283,"date":283,"author":284,"additionalAuthors":294,"icon":295,"abstract":296,"tag":297,"displayTitle":279,"cardRatio":300,"featured":11,"seoMetaTags":301,"layout":365,"blogPostCarousel":303,"_seoMetaTags":469,"authors":503},{"text":279,"isExternal":11,"url":280,"link":281},"Create a custom microstore with our Links and Micro Frontends.","",{"_modelApiKey":212,"slug":282},"get-creative-with-our-custom-microstore","January 14, 2025",{"name":285,"picture":286},"Alex Canessa",{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":291,"customData":293},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1754320167-alessandro-can.jpg","Commerce Layer avatar",1280,"jpg",{"x":292,"y":292},0.5,{},[],"storefront","This tutorial demonstrates how to build a highly customized microstore using Commerce Layer Links, transforming a standard SKU list into an interactive shopping experience with cart and checkout functionality.",{"color":298,"name":299},"gray","Tutorials","portrait",[302,306,310,313,317,320,323,327,331,335,338,342,346,350,354,357,361],{"attributes":303,"tag":304,"content":305},null,"title","Get creative with Commerce Layer Links and Micro Frontends",{"attributes":307,"tag":309,"content":303},{"property":308,"content":305},"og:title","meta",{"attributes":311,"tag":309,"content":303},{"name":312,"content":305},"twitter:title",{"attributes":314,"tag":309,"content":303},{"name":315,"content":316},"description","Build a creative microstore with Commerce Layer Links. Create an interactive shopping experience with a custom UI, cart integration, and checkout.",{"attributes":318,"tag":309,"content":303},{"property":319,"content":316},"og:description",{"attributes":321,"tag":309,"content":303},{"name":322,"content":316},"twitter:description",{"attributes":324,"tag":309,"content":303},{"property":325,"content":326},"og:image","https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1736848525-cl_links-and-microfrontend-02.jpg?auto=format&fit=max&w=1200",{"attributes":328,"tag":309,"content":303},{"property":329,"content":330},"og:image:width","1200",{"attributes":332,"tag":309,"content":303},{"property":333,"content":334},"og:image:height","630",{"attributes":336,"tag":309,"content":303},{"name":337,"content":326},"twitter:image",{"attributes":339,"tag":309,"content":303},{"property":340,"content":341},"og:locale","en",{"attributes":343,"tag":309,"content":303},{"property":344,"content":345},"og:type","article",{"attributes":347,"tag":309,"content":303},{"property":348,"content":349},"og:site_name","Commerce Layer",{"attributes":351,"tag":309,"content":303},{"property":352,"content":353},"article:modified_time","2025-10-08T16:28:21Z",{"attributes":355,"tag":309,"content":303},{"property":356,"content":280},"article:publisher",{"attributes":358,"tag":309,"content":303},{"name":359,"content":360},"twitter:card","summary_large_image",{"attributes":362,"tag":309,"content":303},{"name":363,"content":364},"twitter:site","@commercelayer",[366,372,377,380,383,387,390,393,406,416,419,422,433,436,438,441,443,446,456,459],{"_modelApiKey":367,"copy":368,"listStyle":369,"darkTheme":11,"buttons":370,"color":371,"indent":7},"wysiwyg","\u003Cp>If you’ve been following our recent (big) news, we just launched a brand new product: Commerce Layer Links. Links allow you to expose a Commerce Layer API resource, at the moment SKUs, SKU Lists, and Orders, using our micro-frontends.\u003C\u002Fp>\n\n\u003Cp>And if you’ve been following my blog posts, you’ll remember that sometime ago I published an article entitled \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fcommercelayer.io\u002Fblog\u002Fcommercify-anything-even-pokemon-and-poke-mart-express\">\u003Cem>Commercify Anything\u003C\u002Fem>\u003C\u002Fa> where I built an ecommerce using an open Pokemon API and Commerce Layer. It was a thought exercise intended to show two things:\u003C\u002Fp>\n\n\u003Col>\n\u003Cli>How to start selling stock immediately with Commerce Layer.\u003C\u002Fli>\n\u003Cli>How to customize the experience to match any requirements, even something as playful as Pokémon.\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Cp>For this post, I used the time I had on sitting on a train ride from Napoli to Milano, which takes about 5 hours to take that first post a bit further. I decided to build a “micro store” that can be used via Commerce Layer’s Links.\u003C\u002Fp>\n\n\u003Ch4>The concept\u003C\u002Fh4>\n\n\u003Cp>Once again, I want to heavily customize the experience. Visitors to the store don’t just browse a list, they become “trainers” by selecting their Pokémon starter, just like in the game franchise.\u003C\u002Fp>\n\n\u003Cp>The goal is not only to showcase the versatility of Commerce Layer Links, but also to inspire developers and businesses by demonstrating how creative you can get with our micro-frontends. Whether you’re looking to build a themed microstore, create engaging marketing campaigns, or design dynamic customer experiences, the possibilities with Links are endless.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>A micro what?\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp>A micro frontend brings the concept of microservices to the frontend, dividing the user interface into smaller, independently deployable pieces. Each focuses on a specific feature, simplifying development and updates. In Commerce Layer, micro-frontends enable modular experiences like a standalone checkout app or a microstore, seamlessly integrating into existing ecosystems. This means with Links you can show a list of SKUs in a stand alone microstore, without having to deploy a full website. Learn more by reading our \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fcommercelayer.github.io\u002Fdrop-in.js\u002F?path=\u002Fdocs\u002Fintroduction--docs\">interactive documentation\u003C\u002Fa>. \u003C\u002Fp>\n\n\u003Ch4>The Plan\u003C\u002Fh4>\n\n\u003Cp>The easiest way for me to build this would be to fork our \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fmfe-microstore\">mfe-microstore\u003C\u002Fa>, customize it, and deploy it as-is. However, I want to truly understand how it works and build it myself from the ground up. That way, I can create a Pokémon-themed microstore and provide a clear tutorial for others.\u003C\u002Fp>\n\n\u003Cp>Here’s my plan:\u003C\u002Fp>\n\n\u003Col>\n\u003Cli>\u003Cstrong>Deploy a minimal microstore\u003C\u002Fstrong>:\nStart with a basic setup that retrieves and displays a list of Pokémon SKUs using Commerce Layer Links. I’ll configure Commerce Layer to use this custom microstore as the entry point.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Customize the UI\u003C\u002Fstrong>:\nTransform the plain display into a pixel-art Pokémon-themed starter choice flow. The goal is to create an immersive, nostalgic experience where users feel like they’re navigating a classic Pokémon game.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Add the “selecting” functionality (e.g. cart integration)\u003C\u002Fstrong>:\nIntroduce a gamified cart experience. Instead of adding items to a cart conventionally, shoppers will “select” their first Pokémon. The selected Pokémon will be added to the cart using the Commerce Layer SDK.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Leverage Hosted Checkout\u003C\u002Fstrong>:\nSeamlessly transition the caught Pokémon into Commerce Layer’s hosted checkout for a streamlined purchasing experience.\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Ch4>Deploy a minimal microstore\u003C\u002Fh4>\n\n\u003Cp>Starting from the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fpokemart-express\">pokemart repository\u003C\u002Fa>, the first thing to do is to create a \u003Ccode>\u002Fmicrostore\u003C\u002Fcode> route that gets the list. In the current root layout we have elements that we don’t want in the microstore. I’m going to extract the auth and the header into a \u003Ccode>Page\u003C\u002Fcode> component that I can use when I need it. Then, create a nested \u003Ccode>app\u002Fmicrostore\u002Flayout.tsx\u003C\u002Fcode> to handle the and a \u003Ccode>app\u002Fmicrostore\u002Flist\u002F[id]\u002Fpage.tsx\u003C\u002Fcode>. For our layout, we don’t need the \u003Ccode>CommerceLayerAuth\u003C\u002Fcode> component we built, because the token it’s going to be passed by the link.\u003C\u002Fp>\n","checkbox",[],"red",{"_modelApiKey":373,"code":374,"showLineNumbers":11,"highlightLines":280,"language":375,"size":376},"code_block","\u002F\u002F app\u002Fmicrostore\u002Flayout.tsx\nimport { useSearchParams } from \"next\u002Fnavigation\";\nimport {\n  CommerceLayer,\n  OrderContainer,\n  OrderStorage,\n} from \"@commercelayer\u002Freact-components\";\n\nexport default function MicrostoreLayout({\n  children,\n}: Readonly\u003C{\n  children: React.ReactNode;\n}>) {\n  const searchParams = useSearchParams();\n  const accessToken = searchParams?.get(\"accessToken\");\n  const slug = process.env.NEXT_PUBLIC_CL_SLUG;\n\tconst market = process.env.NEXT_PUBLIC_CL_MARKET;\n\n  if (!accessToken || !slug || !market) {\n    throw new Error(\n      \"Missing access token, slug, or market in the URL\u002Fenvironment.\",\n    );\n  }\n\n  const persistKey = `order-${market}`;\n\n  return (\n    \u003CCommerceLayer\n      accessToken={accessToken}\n      endpoint={`https:\u002F\u002F${slug}.commercelayer.io`}\n    >\n      \u003COrderStorage persistKey={persistKey}>\n        {\u002F* @ts-expect-error: OrderContainer children do not align to ReactNode type. *\u002F}\n        \u003COrderContainer>{children}\u003C\u002FOrderContainer>\n      \u003C\u002FOrderStorage>\n    \u003C\u002FCommerceLayer>\n  );\n}","javascript","Standard",{"_modelApiKey":367,"copy":378,"listStyle":369,"darkTheme":11,"buttons":379,"color":371,"indent":11},"\u003Cp>First of all, we want to get the \u003Ccode>id\u003C\u002Fcode> from the parameter and the \u003Ccode>sdkClient\u003C\u002Fcode> from the \u003Ccode>useCommerceLayer\u003C\u002Fcode> hook, which leverages the provider we’ve set in the layout and use to fetch details.\u003C\u002Fp>\n",[],{"_modelApiKey":373,"code":381,"showLineNumbers":11,"highlightLines":280,"language":382,"size":376},"\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { useParams } from \"next\u002Fnavigation\";\nimport { useCommerceLayer } from \"@commercelayer\u002Freact-components\";\n\nconst MicrostorePage = () => {\n  const { id: skuListId } = useParams() || {};\n  const { sdkClient } = useCommerceLayer();\n  \n  useEffect(() => {\n    const client = sdkClient();\n    const fetchSkus = async () => {\n      if (!skuListId) {\n        console.error(\"Missing SKU list ID.\");\n        setLoading(false);\n        return;\n      }\n\n      try {\n        const skuList = await client?.sku_lists.retrieve(\n          Array.isArray(skuListId) ? skuListId[0] : skuListId,\n          {\n            include: [\"skus\"],\n          },\n        );\n\n        if (skuList?.skus) {\n          setSkuCodes(skuList.skus.map((sku: any) => sku.code)); \u002F\u002F Map to an array of SKU codes\n        }\n      } catch (error) {\n        console.error(\"Error fetching SKU list:\", error);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchSkus();\n  }, [skuListId, sdkClient]);\n\n  if (loading) {\n    return \u003Cp>Loading SKUs...\u003C\u002Fp>;\n  }\n\n  return \u003Ccode>{JSON.stringify(skuCodes)}\u003C\u002Fcode>;\n};","typescript",{"_modelApiKey":367,"copy":384,"listStyle":385,"darkTheme":11,"buttons":386,"color":371,"indent":11},"\u003Cp>And now that we have this code, let’s set Commerce Layer to point at our custom microstore.\u003C\u002Fp>\n\n\u003Ch4>Use the Provisioning API to update the org\u003C\u002Fh4>\n\n\u003Cp>We will need to use the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fprovisioning\u002Fgetting-started\u002Fauthorization\">Provisioning API credential keys\u003C\u002Fa> that are found in the user menu in the top right corner of the dashboard. Authorize the retrieval of the token. Now we’re ready to use the Provisioning API to change \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fprovisioning\u002Fapi-reference\u002Forganizations#micro-frontends-configuration\">organizational Links to point at our microstore\u003C\u002Fa> with the body looking like this:\u003C\u002Fp>\n","directional",[],{"_modelApiKey":373,"code":388,"showLineNumbers":11,"highlightLines":280,"language":389,"size":376},"{\n    \"data\": {\n        \"type\": \"organizations\",\n        \"id\": \"\u003Corganization-id>\",\n        \"attributes\": {\n            \"config\": {\n                \"mfe\": {\n                    \"default\": {\n                        \"links\": {\n                            \"microstore\": \"\u003Clink-to-microstore>\u002Flist\u002F:sku_list_id?access_token=:accessToken\"\n                        }\n                    }\n                }\n            }\n        }\n    }\n}","json",{"_modelApiKey":367,"copy":391,"listStyle":369,"darkTheme":11,"buttons":392,"color":371,"indent":11},"\u003Ch4>Let’s test the Link\u003C\u002Fh4>\n\n\u003Cp>I’m going to create a “Starter Pokemon” SKU List and generate the Link to the microstore.\u003C\u002Fp>\n",[],{"_modelApiKey":394,"border":7,"caption":395,"image":396,"size":405,"darkTheme":11,"rounded":7,"color":371},"image_block","Generate Links from the SKU List App.",{"url":397,"alt":398,"title":399,"width":400,"height":401,"format":402,"focalPoint":403,"customData":404},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1736874948-image.png","Screenshot of the SKU List App from the Commerce Layer dashboard","The SKU List App view to create a Commerce Layer Link for the Pokemon checkout experience.",2534,1716,"png",{"x":292,"y":292},{},"standard",{"_modelApiKey":394,"border":7,"caption":407,"image":408,"size":405,"darkTheme":11,"rounded":7,"color":371},"Links can be shared via QR codes, links, or by email or WhatsApp",{"url":409,"alt":410,"title":411,"width":412,"height":413,"format":402,"focalPoint":414,"customData":415},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1736875014-image-2.png","A screenshot of the final step in creating a link, showing the QR code you can copy.","The resulting Link creation dialogue will show a QR code you can copy, the link, a share button, and an open link button.",2538,1764,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":417,"listStyle":369,"darkTheme":11,"buttons":418,"color":371,"indent":11},"\u003Cp>Tadà 🎉 , you should get the list of Pokémon SKU codes as per the code! Excellent.\u003C\u002Fp>\n",[],{"_modelApiKey":367,"copy":420,"listStyle":369,"darkTheme":11,"buttons":421,"color":371,"indent":11},"\u003Cp>But what if I want to be really creative and make the microstore a different experience from the main store, more focused? Since this experience will be a starter Pokémon, Pokéfans reading this blog post may know where I’m going with this.\u003C\u002Fp>\n\n\u003Ch4>The Starter Selector microstore\u003C\u002Fh4>\n\n\u003Cp>First of all, this has to be a laser-focused experience for the user: no menu, no cart, not even a logo. I want the experience to be like the starter selection in the games: three pokéballs, and when you select the Pokémon, it will get you to the cart. I’m taking inspiration from the Pokémon Black and White starter choice:\u003C\u002Fp>\n",[],{"_modelApiKey":394,"border":7,"caption":423,"image":424,"size":405,"darkTheme":11,"rounded":7,"color":371},"Starter Pokémon selection from the \"Pokémon Black and White\" game",{"url":425,"alt":426,"title":427,"width":428,"height":429,"format":430,"focalPoint":431,"customData":432},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1736957218-chatgpt-pokemon-small.gif","The gif is as generated by AI to show a classic Pokémon style game.","ChatGPT Generated Pokémon Gif",253,189,"gif",{"x":292,"y":292},{},{"_modelApiKey":367,"copy":434,"listStyle":369,"darkTheme":11,"buttons":435,"color":371,"indent":11},"\u003Cp>ChatGPT provides a pixelated lab pic to use as a background, the rest I’ll achieve with CSS 💅.\u003C\u002Fp>\n\n\u003Cp>The experience is missing a last, very important step. When I select “yes”, I want to add a starter Pokémon to my cart and go directly to the checkout page with my brand new pokémon.\u003C\u002Fp>\n\n\u003Cp>\u003Cem>Be sure to checkout the repo at the tag \u003Ccode>step-3\u003C\u002Fcode> 🎉\u003C\u002Fem>\u003C\u002Fp>\n\n\u003Ch4>Add the Pokémon to the order\u003C\u002Fh4>\n\n\u003Cp>When a user selects “yes”, I want to:\u003C\u002Fp>\n\n\u003Col>\n\u003Cli>Remove any existing line items because I want to allow only one.\u003C\u002Fli>\n\u003Cli>Add the selected Pokémon to the cart.\u003C\u002Fli>\n\u003Cli>Show the selected Pokémon and present a button to checkout.\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Cp>To include line item data in the \u003Ccode>OrderContext\u003C\u002Fcode> used by the \u003Ccode>useOrderContainer\u003C\u002Fcode>, we need to wrap this component in the \u003Ccode>LineItemsContainer\u003C\u002Fcode> component.\u003C\u002Fp>\n",[],{"_modelApiKey":373,"code":437,"showLineNumbers":11,"highlightLines":280,"language":382,"size":376},"const { sdkClient, accessToken } = useCommerceLayer();\nconst { current: client } = useRef(sdkClient());\nconst { order, addToCart } = useOrderContainer();\n\nconst handlePokemonSelection = useCallback(async () => {\n  try {\n    if (!(client && selectedPokemon)) {\n      throw new Error(\"Missing access token, client, or pokemon\");\n    }\n\n    if (order) {\n      await Promise.all(\n        (order.line_items || []).map((lineItem) => {\n          return client.line_items.delete(lineItem.id);\n        }),\n      );\n    }\n\n    await addToCart({\n      skuCode: selectedPokemon.name,\n      quantity: 1,\n    });\n\n    setSelectedPokemon(null);\n  } catch (error) {\n    console.error(error);\n  }\n}, [order, selectedPokemon, addToCart, client]);",{"_modelApiKey":367,"copy":439,"listStyle":369,"darkTheme":11,"buttons":440,"color":371,"indent":11},"\u003Cp>Then I can add the link to the checkout:\u003C\u002Fp>\n",[],{"_modelApiKey":373,"code":442,"showLineNumbers":11,"highlightLines":280,"language":375,"size":376},"{order?.line_items?.length && selectedPokemon === null && (\n  \u003Cdiv className=\"self-center justify-self-center mt-auto relative z-20\">\n    \u003CCheckoutLink>\n      {({ href }) => {\n        return (\n          \u003Ca\n            href={href}\n            className=\"flex flex-col items-center justify-center p-5 h-full text-xl text-black shadow-pixel bg-white\"\n          >\n            You have selected {order?.line_items?.[0]?.name}.\n            \u003Cspan className=\"underline mt-2\">\n              Start your adventure!\n            \u003C\u002Fspan>\n          \u003C\u002Fa>\n        );\n      }}\n    \u003C\u002FCheckoutLink>\n  \u003C\u002Fdiv>\n)}",{"_modelApiKey":367,"copy":444,"listStyle":369,"darkTheme":11,"buttons":445,"color":371,"indent":11},"\u003Cp>And now we have a completely customized microstore for any SKU List. We could have the same for every generation starter, or between Pikachu and Eevee!.\u003C\u002Fp>\n",[],{"_modelApiKey":394,"border":7,"caption":447,"image":448,"size":405,"darkTheme":11,"rounded":7,"color":371},"A custom experience featuring PokéAPI, Commerce Layer Links, and our Hosted Checkout Micro Frontend",{"url":449,"alt":450,"title":451,"width":452,"height":453,"format":430,"focalPoint":454,"customData":455},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1736949327-pokemon_selection_small.gif","The gif shows the Pokémon game that finishes with Commerce Layer's hosted checkout.","The final product – Pokémon Store with checkout",1258,1148,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":457,"listStyle":369,"darkTheme":11,"buttons":458,"color":371,"indent":11},"\u003Ch4>Conclusion\u003C\u002Fh4>\n\n\u003Cp>In this project, I harnessed the power of Commerce Layer Links to build a fully customized microstore with minimal effort. What sets this apart is how easily we transformed a simple SKU list into an interactive, immersive experience. This showcases not just the technical flexibility of Links, but also the boundless creative potential they unlock. Whether it’s for a product campaign, a themed promotion, or even a temporary sales channel, Commerce Layer Links enable businesses to spin up unique, targeted microstores that bring their brand vision to life, all without needing a full website. The possibilities are only limited by your imagination.\u003C\u002Fp>\n",[],{"_modelApiKey":394,"border":11,"caption":460,"image":461,"size":468,"darkTheme":11,"rounded":7,"color":371},"You want to try? Scan the Link QR code!",{"url":462,"alt":463,"title":464,"width":465,"height":465,"format":402,"focalPoint":466,"customData":467},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1738070028-starter_pokemon_selection_qr.png","Starter Pokémon Microstore Link","Starter Pokémon Link",640,{"x":292,"y":292},{},"slim",[470,471,473,475,477,479,481,483,485,487,489,491,493,495,497,499,501],{"attributes":303,"tag":304,"content":305},{"attributes":472,"tag":309,"content":303},{"property":308,"content":305},{"attributes":474,"tag":309,"content":303},{"name":312,"content":305},{"attributes":476,"tag":309,"content":303},{"name":315,"content":316},{"attributes":478,"tag":309,"content":303},{"property":319,"content":316},{"attributes":480,"tag":309,"content":303},{"name":322,"content":316},{"attributes":482,"tag":309,"content":303},{"property":325,"content":326},{"attributes":484,"tag":309,"content":303},{"property":329,"content":330},{"attributes":486,"tag":309,"content":303},{"property":333,"content":334},{"attributes":488,"tag":309,"content":303},{"name":337,"content":326},{"attributes":490,"tag":309,"content":303},{"property":340,"content":341},{"attributes":492,"tag":309,"content":303},{"property":344,"content":345},{"attributes":494,"tag":309,"content":303},{"property":348,"content":349},{"attributes":496,"tag":309,"content":303},{"property":352,"content":353},{"attributes":498,"tag":309,"content":303},{"property":356,"content":280},{"attributes":500,"tag":309,"content":303},{"name":359,"content":360},{"attributes":502,"tag":309,"content":303},{"name":363,"content":364},[504],{"name":285,"picture":505},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":506,"customData":507},{"x":292,"y":292},{},1791534737297]