[{"data":1,"prerenderedAt":542},["ShallowReactive",2],{"bootstrap":3,"blog-getting-started-with-commerce-layer-javascript-sdk":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","payment-api-redesigned","Introducing our new Payments API. For humans and agents.","\u003Cp>Introducing our new Payments API. For humans and agents.\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":503,"authors":537},{"text":279,"isExternal":11,"url":280,"link":281},"Getting started with Commerce Layer JavaScript SDK.","",{"_modelApiKey":212,"slug":282},"getting-started-with-commerce-layer-javascript-sdk","April 14, 2022",{"name":285,"picture":286},"Bolaji Ayodeji",{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":291,"customData":293},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1643036479-bolaji.jpg","Bolaji Ayodeji — Developer Advocate at Commerce Layer",1280,"jpg",{"x":292,"y":292},0.5,{},[],"code-block","Commerce Layer provides a JavaScript SDK that makes it quick and easy for developers to interact with our commerce APIs. In this article, we’ll look at some fundamental technical details about how it works.",{"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","Getting Started with Commerce Layer Javascript SDK",{"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","Commerce Layer provides a JavaScript SDK that makes it quick and easy for developers to interact with our commerce APIs. Learn how it works.",{"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\u002F1649778579-getting-started-with-commerce-layer-javascript-sdk.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:20:48Z",{"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,380,383,388,391,393,396,399,402,412,415,419,422,425,428,430,433,435,438,440,443,445,448,450,453,455,458,460,463,465,468,470,473,475,478,480,483,485,488,490,493,495,498,500],{"_modelApiKey":367,"copy":368,"listStyle":369,"darkTheme":11,"buttons":370,"color":371,"indent":7},"wysiwyg","\u003Cp>Commerce Layer provides a \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-sdk\">JavaScript SDK\u003C\u002Fa> that makes it quick and easy for developers to interact with our commerce \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002F\">APIs\u003C\u002Fa>. The SDK simplifies the building of requests and the reading of responses allowing you as a developer to easily build requests to our APIs. With the SDK, responses from our APIs are not returned RAW but denormalized by the SDK, so a related resource is presented as a normal field of the main resource. Generally, with the SDK you get some features like:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Simplified request writing and response reading for developers.\u003C\u002Fli>\n\u003Cli>Automatically generated SDK functions and resources from our public \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdata.commercelayer.app\u002Fschemas\u002Fopenapi.json\">OpenAPI schema\u003C\u002Fa>. \u003Cstrong>From a developer perspective, the fact that we generate our SDK starting from our OpenAPI schema is a guarantee of consistency.\u003C\u002Fstrong> You will find only operations, resources, and fields that are present on the schema of our API in the SDK.\u003C\u002Fli>\n\u003Cli>Typescript support for defined typing and increased team performance.\u003C\u002Fli>\n\u003Cli>Unit testing executed without calling the API for each resource\u002Foperation which makes the SDK highly reliable.\u003C\u002Fli>\n\u003C\u002Ful>\n","directional",[],"red",{"_modelApiKey":373,"title":374,"preTitle":375,"linkText":376,"darkTheme":11,"link":377},"link_block","Commerce Layer JS SDK","Open-source","View on GitHub",{"_modelApiKey":203,"text":378,"label":280,"subtitle":280,"icon":280,"isExternal":7,"url":379,"link":303,"anchor":280,"openForm":11,"form":303,"htmlClassNames":280},"JS SDK","https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-sdk",{"_modelApiKey":367,"copy":381,"listStyle":369,"darkTheme":11,"buttons":382,"color":371,"indent":11},"\u003Cp>Without further ado, let’s get started! :)\u003C\u002Fp>\n\n\u003Chr>\n\n\u003Ch3>Prerequisites\u003C\u002Fh3>\n\n\u003Cul>\n\u003Cli>A general understanding of how APIs work.\u003C\u002Fli>\n\u003Cli>You should have a \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_up\">Commerce Layer account\u003C\u002Fa>, have set up your organization, and created the required commerce data resources for your market. You can follow the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fwelcome\u002Fonboarding-tutorial\">onboarding tutorial\u003C\u002Fa> or the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fwelcome\u002Fmanual-configuration\">manual configuration guide\u003C\u002Fa> to achieve this.\u003C\u002Fli>\n\u003Cli>Node.js and NPM installed (learn \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fnodejs.org\u002Fen\u002Fdownload\u002Fpackage-manager\u002F\">how to install Node.js\u003C\u002Fa> if you haven't already).\u003C\u002Fli>\n\u003Cli>Some JavaScript and command-line knowledge.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Chr>\n\n\u003Ch3>Why JavaScript?\u003C\u002Fh3>\n\n\u003Cp>Commerce Layer is client-side friendly and we’re big advocates of the \u003Ca href=\"\u002Fjamstack\">\u003Cstrong>J\u003C\u002Fstrong>amstack\u003C\u002Fa>, the new standard architecture for the web that makes huge use of JavaScript for building better performant, scalable, and secured applications. Also, a large part of our existing client's brands makes use of JavaScript so we’re investing heavily in building tools to support developers building with Commerce Layer. While this is said, we’re also open to building even more tools to support developers working with other technologies who will join us now and in the future.\u003C\u002Fp>\n\n\u003Ch3>Getting started\u003C\u002Fh3>\n\n\u003Cp>To get started with Commerce Layer JavaScript SDK, you need to install it as a package, get some credentials you need to perform API calls, and generate an access token.\u003C\u002Fp>\n\n\u003Ch4>Installation\u003C\u002Fh4>\n\n\u003Cp>You can install either the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@commercelayer\u002Fsdk\">npm package\u003C\u002Fa>:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":385,"showLineNumbers":11,"highlightLines":280,"language":386,"size":387},"code_block","npm install @commercelayer\u002Fsdk\n","shell","Standard",{"_modelApiKey":367,"copy":389,"listStyle":369,"darkTheme":11,"buttons":390,"color":371,"indent":11},"\u003Cp>Or the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fyarnpkg.com\u002Fpackage\u002F@commercelayer\u002Fsdk\">yarn package\u003C\u002Fa>:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":392,"showLineNumbers":11,"highlightLines":280,"language":386,"size":387},"yarn add @commercelayer\u002Fsdk",{"_modelApiKey":367,"copy":394,"listStyle":369,"darkTheme":11,"buttons":395,"color":371,"indent":11},"\u003Cp>Upon successful installation, you can import the SDK into your project like so:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":397,"showLineNumbers":11,"highlightLines":280,"language":398,"size":387},"import CommerceLayer from '@commercelayer\u002Fsdk'","javascript",{"_modelApiKey":367,"copy":400,"listStyle":369,"darkTheme":11,"buttons":401,"color":371,"indent":11},"\u003Ch4>Authentication\u003C\u002Fh4>\n\n\u003Cp>All requests to Commerce Layer API must be authenticated with an \u003Ca target=\"_blank\" href=\"https:\u002F\u002Foauth.net\u002F2\u002F\">OAuth2\u003C\u002Fa> bearer token. Hence, before starting to use this SDK you need to get a valid access token. To get an access token, you need to execute an authorization flow by using a valid application type as the client. Each application type has its own usage, authentication flow, and permissions. There are three application types: \u003Cstrong>sales channel\u003C\u002Fstrong>, \u003Cstrong>integration\u003C\u002Fstrong>, and \u003Cstrong>webapp\u003C\u002Fstrong>. Each of these applications can be authenticated with different authorization grant flows using the available authorization grant types as described in the table below:\u003C\u002Fp>\n",[],{"_modelApiKey":403,"border":11,"caption":280,"image":404,"size":411,"darkTheme":11,"rounded":11,"color":371},"image_block",{"url":405,"alt":406,"title":406,"width":407,"height":408,"format":409,"focalPoint":303,"customData":410},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1649756685-authorization-flows-table.svg","Authorization flows table",1660,545,"svg",{},"standard",{"_modelApiKey":367,"copy":413,"listStyle":369,"darkTheme":11,"buttons":414,"color":371,"indent":11},"\u003Cul>\n\u003Cli>The \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fauthentication\u002Fclient-credentials\">client credentials\u003C\u002Fa> grant type gives you a "guest" access token to both sales channel and integration applications.\u003C\u002Fli>\n\u003Cli>The \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fauthentication\u002Fpassword\">password\u003C\u002Fa> grant type gives you an access token to sales channel applications in exchange for customer credentials.\u003C\u002Fli>\n\u003Cli>The \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fauthentication\u002Fauthorization-code\">authorization code\u003C\u002Fa> grant type is used by backend applications to exchange an authorization code for an access token.\u003C\u002Fli>\n\u003Cli>The \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fauthentication\u002Frefresh-token\">refresh token\u003C\u002Fa> grant type is used by clients to exchange a refresh token for an expired access token.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Access tokens generally expire after 2 hours for security reasons (duration can be set for each applications on the Dashboard), so you will need to get a new token upon expiration. Also, you should note that each access token generated based on the application types gets a specific set of permissions. For example, sales channel applications can read resource lists only for SKUs, SKU options, prices, promotions, and bundles. Anything outside this will require another application type. You can read the documentation to learn more about the available \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Froles-and-permissions\">roles and permissions\u003C\u002Fa> or for further information on \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fapi\u002Fauthentication\">authentication\u003C\u002Fa> with Commerce Layer APIs.\u003C\u002Fp>\n\n\u003Cp>For the sake of this tutorial, we will use the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-js-auth\">Commerce Layer JS Auth\u003C\u002Fa> library — a JavaScript library that helps you wrap around our authentication API and get the \u003Ccode>authentication\u003C\u002Fcode> named method for each of the flows mentioned earlier. (\u003Ccode>client_credentials\u003C\u002Fcode>, \u003Ccode>password\u003C\u002Fcode>, \u003Ccode>authorization_code\u003C\u002Fcode>, and \u003Ccode>refresh_token\u003C\u002Fcode>)\u003C\u002Fp>\n",[],{"_modelApiKey":373,"title":416,"preTitle":375,"linkText":376,"darkTheme":11,"link":417},"Commerce Layer JS Auth",{"_modelApiKey":203,"text":376,"label":280,"subtitle":280,"icon":280,"isExternal":7,"url":418,"link":303,"anchor":280,"openForm":11,"form":303,"htmlClassNames":280},"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-js-auth",{"_modelApiKey":367,"copy":420,"listStyle":369,"darkTheme":11,"buttons":421,"color":371,"indent":11},"\u003Cp>This will enable us to get an access token to use with the SDK. Ideally, you will do the same thing when you’re building your ecommerce project with the SDK. You will get an access token, save it as a cookie while it’s not expired (if expired, the cookie is deleted and the function will request for a new token), as seen in the code below:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":423,"showLineNumbers":11,"highlightLines":280,"language":398,"size":424},"import Cookies from \"js-cookie\";\nimport { authentication } from \"@commercelayer\u002Fjs-auth\";\n\n(async () => {\nlet token = \"\";\n  const getCookieToken = Cookies.get(\"clIntegrationToken\");\n  if (!getCookieToken && CLIENT_ID && CLIENT_SECRET && SLUG) {\n    const auth = await authentication(\"client_credentials\", {\n      slug: SLUG,\n      clientId: CLIENT_ID,\n      clientSecret: CLIENT_SECRET\n    });\n    token = auth.accessToken;\n    Cookies.set(\"clIntegrationToken\", token, {\n      expires: auth.expires\n    });\n  } else {\n    token = getCookieToken || \"\";\n  }\n  return token;\n})();","Wide",{"_modelApiKey":367,"copy":426,"listStyle":369,"darkTheme":11,"buttons":427,"color":371,"indent":11},"\u003Ch3>How it works\u003C\u002Fh3>\n\n\u003Cp>To show you how the SDK works, we’re going to perform some CRUD (Create, Retrieve, Update, and Delete) operations on the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fv\u002Fapi-reference\u002Fskus\">SKU\u003C\u002Fa> resource. To help you through this tutorial, we’ve created a \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fexamples\u002Ftree\u002Fmain\u002Fsolutions\u002Fjs-sdk-sandbox\">sandbox\u003C\u002Fa> with all the code samples for you to follow. It might help as you go through every step of how to use our SDK. To get started, you have to initialize the SDK like so:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":429,"showLineNumbers":11,"highlightLines":280,"language":398,"size":387},"const cl = CommerceLayer({\n  organization: 'your-organization-slug',\n  accessToken: 'your-access-token'\n})",{"_modelApiKey":367,"copy":431,"listStyle":369,"darkTheme":11,"buttons":432,"color":371,"indent":11},"\u003Cp>When you use the SDK to make any request to any of our API endpoints, the API will respond with an \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.w3.org\u002FProtocols\u002Frfc2616\u002Frfc2616-sec10.html\">HTTP response code\u003C\u002Fa> to show the success or failure of the request. You can explore the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fhandling-errors\">full list\u003C\u002Fa> of our API response codes and how to handle them in our documentation. You can also head to the Commerce Layer dashboard to preview the resource (if created or updated).\u003C\u002Fp>\n\n\u003Ch4>Create\u003C\u002Fh4>\n\n\u003Cp>To create a new SKU, you need to send a \u003Ccode>POST\u003C\u002Fcode> request to the \u003Ccode>\u002Fapi\u002Fskus\u003C\u002Fcode> endpoint, passing the resource arguments in the request body as described in the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fv\u002Fapi-reference\u002Fskus\u002Fcreate\">API reference\u003C\u002Fa>. An SKU needs to be associated with a shipping category that determines the available shipping options for that SKU. Depending on your use case, you might want to create new SKUs via the order management system in the Commerce Layer dashboard, or \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fwelcome\u002Fmanual-configuration#skus\">through our CLI\u003C\u002Fa>. We used the CLI to get the shipping category ID (which is \u003Ccode>JNxyxFLOXw\u003C\u002Fcode>) for the shipping category we created before (named \u003Cem>Merchandising\u003C\u002Fem>) and created a new SKU with the SDK like so:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":434,"showLineNumbers":11,"highlightLines":280,"language":398,"size":424},"const createSku = async () => {\n\n  const newSku = await cl.skus.create({\n    shipping_category: cl.shipping_categories.relationship(\"JNxyxFLOXw\"), \u002F\u002F assigning the shipping category relationship\n    code: \"HOODIEGR0001XLXX\",\n    name: \"Grey Coding Hoodie\",\n    description: \"A very beautiful and cozy unisex hoodie\",\n    reference: \"HOODIEGR0001\",\n    weight: \"500\",\n    unit_of_weight: \"gr\"\n  });\n\n  console.log(`SKU: ${newSku.id} created succefully`);\n  console.log(createSku); \u002F\u002F this will return the created resource object\n};",{"_modelApiKey":367,"copy":436,"listStyle":369,"darkTheme":11,"buttons":437,"color":371,"indent":11},"\u003Ch4>Retrieve\u003C\u002Fh4>\n\n\u003Cp>To retrieve an SKU, you need to send a \u003Ccode>GET\u003C\u002Fcode> request to the \u003Ccode>\u002Fapi\u002Fskus\u002F:id\u003C\u002Fcode> endpoint, passing the ID of the SKU you want to fetch. You can \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fv\u002Fapi-reference\u002Fskus\u002Flist\">fetch all SKUs\u003C\u002Fa> in your market with the SDK like so:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":439,"showLineNumbers":11,"highlightLines":280,"language":398,"size":387},"const fetchSkus = await cl.skus.list()",{"_modelApiKey":367,"copy":441,"listStyle":369,"darkTheme":11,"buttons":442,"color":371,"indent":11},"\u003Ch5>\u003Cstrong>Filtering the results\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>When you request some resources, you can \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Ffiltering-data\">filter the results\u003C\u002Fa> to return specific data using the \u003Ccode>filters\u003C\u002Fcode> query parameter. With the SDK fetch a particular SKU with the SKU code like so:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":444,"showLineNumbers":11,"highlightLines":280,"language":398,"size":387},"const fetchSku = await cl.skus.list({\n  filters: { code_eq: \"HOODIEGR0001XLXX\" }\n});",{"_modelApiKey":367,"copy":446,"listStyle":369,"darkTheme":11,"buttons":447,"color":371,"indent":11},"\u003Cp>You can fetch only the SKUs whose code contain a particular string like so:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":449,"showLineNumbers":11,"highlightLines":280,"language":398,"size":424},"const fetchSkus = await cl.skus.list({ filters: { name_cont: \"Hoodie\" } })",{"_modelApiKey":367,"copy":451,"listStyle":369,"darkTheme":11,"buttons":452,"color":371,"indent":11},"\u003Cp>You can fetch only the SKUs whose code starts with a particular string like so:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":454,"showLineNumbers":11,"highlightLines":280,"language":398,"size":424},"const fetchSkus = await cl.skus.list({ filters: { code_start: \"HOODIE\" } })",{"_modelApiKey":367,"copy":456,"listStyle":369,"darkTheme":11,"buttons":457,"color":371,"indent":11},"\u003Cp>You can fetch only the SKUs whose code ends with a particular string like so:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":459,"showLineNumbers":11,"highlightLines":280,"language":398,"size":424},"const fetchSkus = await cl.skus.list({ filters: { code_end: \"XLXX\" } })",{"_modelApiKey":367,"copy":461,"listStyle":369,"darkTheme":11,"buttons":462,"color":371,"indent":11},"\u003Cp>You can fetch only the SKUs created between two specific dates like so:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":464,"showLineNumbers":11,"highlightLines":280,"language":398,"size":424},"const fetchSkus = await cl.skus.list({\n  filters: { created_at_gt: \"2022-01-01\", created_at_lt: \"2022-04-01\" }\n});",{"_modelApiKey":367,"copy":466,"listStyle":369,"darkTheme":11,"buttons":467,"color":371,"indent":11},"\u003Ch5>\u003Cstrong>Sorting the results\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>When you request some resources, you can \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fsorting-results\">sort the results\u003C\u002Fa> to be returned in a specific manner using the \u003Ccode>sort\u003C\u002Fcode> query parameter. For example, you can sort the returned SKUs by creation date in ascending or descending order  like so:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":469,"showLineNumbers":11,"highlightLines":280,"language":398,"size":424},"\u002F\u002F Sorts in ascending order (this is the default behavior)\nconst fetchSkus = await cl.skus.list({ sort: { created_at: \"asc\" } })\n\n\u002F\u002F Sorts in descending order\nconst fetchSkus = await cl.skus.list({ sort: { created_at: \"desc\" } })",{"_modelApiKey":367,"copy":471,"listStyle":369,"darkTheme":11,"buttons":472,"color":371,"indent":11},"\u003Ch5>\u003Cstrong>Including associations\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>When you make a request for some resources, you can include other related resources as \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fincluding-associations\">associations\u003C\u002Fa> using the \u003Ccode>include\u003C\u002Fcode> query parameter. For example, you can fetch an SKU and include the related prices or stock items like so:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":474,"showLineNumbers":11,"highlightLines":280,"language":398,"size":424},"const fetchSkus = await cl.skus.list({ include: [ \"prices\" ] })\n\nconst fetchSkus = await cl.skus.list({ include: [ \"stock_items\" ] })",{"_modelApiKey":367,"copy":476,"listStyle":369,"darkTheme":11,"buttons":477,"color":371,"indent":11},"\u003Ch5>\u003Cstrong>Returning specific fields\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>When you make a request for some resources, you can return only \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fsparse-fieldsets\">specific fields\u003C\u002Fa> using the \u003Ccode>fields\u003C\u002Fcode> query parameter. For example, you can fetch an SKU and return only the \u003Ccode>name\u003C\u002Fcode>, \u003Ccode>description\u003C\u002Fcode>, and \u003Ccode>weight\u003C\u002Fcode> fields and like so:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":479,"showLineNumbers":11,"highlightLines":280,"language":398,"size":424},"const fetchSkus = await cl.skus.list({ fields: { skus: [ \"name\", \"description\", \"weight\" ] } })",{"_modelApiKey":367,"copy":481,"listStyle":369,"darkTheme":11,"buttons":482,"color":371,"indent":11},"\u003Ch5>\u003Cstrong>Pagination\u003C\u002Fstrong>\u003C\u002Fh5>\n\n\u003Cp>When you fetch a collection of multiple SKUs with \u003Ccode>skus.list()\u003C\u002Fcode>, the results are \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fpagination\">grouped into pages\u003C\u002Fa>. The default behavior is that only 10 items are returned on each page (this applies to other Commerce Layer resources too). You can customize this behavior and return specific pages or increase the items on each page up to 25: \u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":484,"showLineNumbers":11,"highlightLines":280,"language":398,"size":424},"const fetchSkus = await cl.skus.list({ pageNumber: 2, pageSize: 15 })",{"_modelApiKey":367,"copy":486,"listStyle":369,"darkTheme":11,"buttons":487,"color":371,"indent":11},"\u003Cp>This will also return the current page, the total number of SKUs in the collection (\u003Ccode>recordCount\u003C\u002Fcode>), and the total number of pages (\u003Ccode>pageCount\u003C\u002Fcode>) in the \u003Ccode>meta\u003C\u002Fcode> object.\u003C\u002Fp>\n\n\u003Chr>\n\n\u003Cp>There’s so much more you can do when retrieving resources from Commerce Layer. Eventually, when you fetch data from Commerce Layer, you can map through to get specific data you need like the SKU code, associated prices, and more.\u003C\u002Fp>\n\n\u003Ch4>Update\u003C\u002Fh4>\n\n\u003Cp>You can update an SKU by sending a \u003Ccode>PATCH\u003C\u002Fcode> request to the \u003Ccode>api\u002Fskus\u002F:id\u003C\u002Fcode> endpoint, passing the resource arguments you want to update in the request body as described in the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fv\u002Fapi-reference\u002Fskus\u002Fupdate\">API reference\u003C\u002Fa>:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":489,"showLineNumbers":11,"highlightLines":280,"language":398,"size":387},"const updateSku = cl.skus.update({\n  id: \"BdplSqwDLb\",\n  name: \"Grey Programming Hoodie\",\n  description: \"Add a new description here\",\n  weight: \"600\"\n});",{"_modelApiKey":367,"copy":491,"listStyle":369,"darkTheme":11,"buttons":492,"color":371,"indent":11},"\u003Ch4>Delete\u003C\u002Fh4>\n\n\u003Cp>To delete an SKU, you need to send a \u003Ccode>DELETE\u003C\u002Fcode> request to the \u003Ccode>api\u002Fskus\u002F:id\u003C\u002Fcode> endpoint, passing the SKU id in the request body as described in the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fv\u002Fapi-reference\u002Fskus\u002Fdelete\">API reference\u003C\u002Fa>:\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":494,"showLineNumbers":11,"highlightLines":280,"language":398,"size":387},"const deleteSku = cl.skus.delete(\"BdplSqwDLb\");",{"_modelApiKey":367,"copy":496,"listStyle":369,"darkTheme":11,"buttons":497,"color":371,"indent":11},"\u003Ch3>Conclusion\u003C\u002Fh3>\n\n\u003Cp>We hope you have learned the fundamentals of our commerce APIs and how to use the JavaScript SDK to make requests to any of our API endpoints. You can find all the code examples used in \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fexamples\u002Ftree\u002Fmain\u002Fsolutions\u002Fjs-sdk-sandboxgation=1&module=%2Fapp.js\">this sandbox\u003C\u002Fa>. The same CRUD operations we’ve practiced can be performed on other resources (the following example shows how to create a \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fv\u002Fapi-reference\u002Fcustomers\">customer\u003C\u002Fa>):\u003C\u002Fp>\n",[],{"_modelApiKey":384,"code":499,"showLineNumbers":11,"highlightLines":280,"language":398,"size":424},"(async () => {\n  const createCustomer = await cl.customers.create({\n    email: \"testuser@commercelayer.io\"\n  });\n\n  console.log(`Customer: ${createCustomer.id} created succefully`);\n  console.log(createCustomer); \u002F\u002F this will return the created resource object\n})();",{"_modelApiKey":367,"copy":501,"listStyle":369,"darkTheme":11,"buttons":502,"color":371,"indent":11},"\u003Cp>Commerce Layer provides 400+ endpoints and you can explore our \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fv\u002Fapi-reference\">API reference\u003C\u002Fa> to learn more about other core resources you can play around with and use while building your ecommerce project. As we progress and grow our community, we will develop other language-specific SDKs and libraries to enable you to achieve more with Commerce Layer. \u003Cstrong>We believe in the developer-first approach and we’re constantly building for your happiness and success.\u003C\u002Fstrong> Feel free to join our global \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fslack.commercelayer.app\u002F\">Slack community\u003C\u002Fa> if you need any help or have suggestions to share.\u003C\u002Fp>\n\n\u003Cp>Our JavaScript SDK is \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcommercelayer-sdk\">open-sourced\u003C\u002Fa> on GitHub and we appreciate your contribution, improvement suggestions, or bug reports.\u003C\u002Fp>\n",[],[504,505,507,509,511,513,515,517,519,521,523,525,527,529,531,533,535],{"attributes":303,"tag":304,"content":305},{"attributes":506,"tag":309,"content":303},{"property":308,"content":305},{"attributes":508,"tag":309,"content":303},{"name":312,"content":305},{"attributes":510,"tag":309,"content":303},{"name":315,"content":316},{"attributes":512,"tag":309,"content":303},{"property":319,"content":316},{"attributes":514,"tag":309,"content":303},{"name":322,"content":316},{"attributes":516,"tag":309,"content":303},{"property":325,"content":326},{"attributes":518,"tag":309,"content":303},{"property":329,"content":330},{"attributes":520,"tag":309,"content":303},{"property":333,"content":334},{"attributes":522,"tag":309,"content":303},{"name":337,"content":326},{"attributes":524,"tag":309,"content":303},{"property":340,"content":341},{"attributes":526,"tag":309,"content":303},{"property":344,"content":345},{"attributes":528,"tag":309,"content":303},{"property":348,"content":349},{"attributes":530,"tag":309,"content":303},{"property":352,"content":353},{"attributes":532,"tag":309,"content":303},{"property":356,"content":280},{"attributes":534,"tag":309,"content":303},{"name":359,"content":360},{"attributes":536,"tag":309,"content":303},{"name":363,"content":364},[538],{"name":285,"picture":539},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":540,"customData":541},{"x":292,"y":292},{},1790593730653]