[{"data":1,"prerenderedAt":645},["ShallowReactive",2],{"bootstrap":3,"blog-how-to-create-a-content-data-model-for-a-product-catalog-in-a-cms":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":299,"featured":11,"seoMetaTags":300,"layout":370,"blogPostCarousel":518,"_seoMetaTags":602,"authors":640},{"text":279,"isExternal":11,"url":280,"link":281},"Separate your product catalog from commerce.","",{"_modelApiKey":212,"slug":282},"how-to-create-a-content-data-model-for-a-product-catalog-in-a-cms","April 16, 2024",{"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,{},[],"list-bullets","Learn why and how to create a data model for your product catalog with best-in-class CMSs Contentful, Contentstack, and Sanity.",{"color":298,"name":100},"gray","portrait",[301,304,308,311,315,318,321,325,329,333,337,340,343,347,351,355,359,362,366],{"attributes":302,"tag":303,"content":279},null,"title",{"attributes":305,"tag":307,"content":302},{"property":306,"content":279},"og:title","meta",{"attributes":309,"tag":307,"content":302},{"name":310,"content":279},"twitter:title",{"attributes":312,"tag":307,"content":302},{"name":313,"content":314},"description","Learn how and why to separate your content data, including a product catalog, from commerce logic. CMSs are perfect to manage content data in a single place.",{"attributes":316,"tag":307,"content":302},{"property":317,"content":314},"og:description",{"attributes":319,"tag":307,"content":302},{"name":320,"content":314},"twitter:description",{"attributes":322,"tag":307,"content":302},{"property":323,"content":324},"og:image","https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1713182358-commerce-logic-vs-content-data-diagram.jpg?auto=format&fit=max&w=1200",{"attributes":326,"tag":307,"content":302},{"property":327,"content":328},"og:image:width","1200",{"attributes":330,"tag":307,"content":302},{"property":331,"content":332},"og:image:height","630",{"attributes":334,"tag":307,"content":302},{"property":335,"content":336},"og:image:alt","This diagram shows Commerce Layers vision for how product catalog content, which is simply rich content data, should be separated from the commerce logic on a website.",{"attributes":338,"tag":307,"content":302},{"name":339,"content":324},"twitter:image",{"attributes":341,"tag":307,"content":302},{"name":342,"content":336},"twitter:image:alt",{"attributes":344,"tag":307,"content":302},{"property":345,"content":346},"og:locale","en",{"attributes":348,"tag":307,"content":302},{"property":349,"content":350},"og:type","article",{"attributes":352,"tag":307,"content":302},{"property":353,"content":354},"og:site_name","Commerce Layer",{"attributes":356,"tag":307,"content":302},{"property":357,"content":358},"article:modified_time","2025-10-08T16:24:06Z",{"attributes":360,"tag":307,"content":302},{"property":361,"content":280},"article:publisher",{"attributes":363,"tag":307,"content":302},{"name":364,"content":365},"twitter:card","summary_large_image",{"attributes":367,"tag":307,"content":302},{"name":368,"content":369},"twitter:site","@commercelayer",[371,377,380,393,397,407,410,413,422,425,430,433,436,439,441,444,446,449,459,462,472,475,485,488,497,500,509,512],{"_modelApiKey":372,"copy":373,"listStyle":374,"darkTheme":11,"buttons":375,"color":376,"indent":7},"wysiwyg","\u003Cp>\u003Cem>"Do you know what sets us apart from our competitors?"\u003C\u002Fem> This is our usual opener when we introduce Commerce Layer. \u003Cem>"Well, we believe that the product catalog shouldn't just 'live' next to the commerce engine."\u003C\u002Fem> A pause follows, often filled with intrigued looks. \u003Cem>"Ehm, huh?!"\u003C\u002Fem> And that's where our conversation begins.\u003C\u002Fp>\n","directional",[],"orange",{"_modelApiKey":372,"copy":378,"listStyle":374,"darkTheme":11,"buttons":379,"color":376,"indent":11},"\u003Chr>\n\n\u003Cp>This approach may seem unconventional when thinking about the traditional commerce data model. Yet, it's not the first time the industry had to pivot the perspective on content. Recall the early 2010s, when everyone embraced "Headless" CMSs designed to feed Single Page Applications (SPAs) with APIs. This innovation required a mental shift: content authors were \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=1C8HPR10uho\">no longer creating pages; they were creating content\u003C\u002Fa>. Now, let's extend this philosophy: \u003Cstrong>Product is also content.\u003C\u002Fstrong> Bear with me.\u003C\u002Fp>\n\n\u003Ch3>Content data vs. commerce logic\u003C\u002Fh3>\n\n\u003Cp>Imagine crafting a digital brochure focused solely on showcasing your products, without direct sales capabilities. I have personally always believed that products should be treated as any other content, housed within the CMS, unless a Product Information Management (PIM) system is necessary. In this case, we could make the argument that \u003Cstrong>all product data\u003C\u002Fstrong> is just content aimed directly at the end-user.\u003C\u002Fp>\n\n\u003Cp>If we continue with this line of thinking, we can divide the data that comprise our digital experience into two broad categories: \u003Cstrong>content data\u003C\u002Fstrong> and \u003Cstrong>commerce logic\u003C\u002Fstrong>. Commerce logic encompasses the necessary details for performing operations around purchasing products and orders. In contrast, content data is purely for the end-user's experience.\u003C\u002Fp>\n",[],{"_modelApiKey":381,"border":7,"caption":382,"image":383,"size":392,"darkTheme":11,"rounded":7,"color":376},"image_block","Rich content data cleanly separated from the commerce logic data.",{"url":384,"alt":385,"title":386,"width":387,"height":388,"format":389,"focalPoint":390,"customData":391},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1713177855-content-data-vs-commerce-logic.png","The illustration shows a clear separation of content data and commerce logic. A CMS is position on the left side of the picture and is shown powering all the content data of a website. Commerce Layer is positioned on the right side of the drawing, clearly powering all the commerce logic, including things like price and availability messaging.","Content data vs. commerce logic",3304,1940,"png",{"x":292,"y":292},{},"standard",{"_modelApiKey":372,"copy":394,"listStyle":395,"darkTheme":11,"buttons":396,"color":376,"indent":11},"\u003Cp>This dichotomy underpins Commerce Layer's philosophy: separate the logic that is essential for order fulfillment from the content designed for the end-user experience. Logic data lives in the commerce engine. Content lives elsewhere, outside the commerce engine. This separation not only enhances data management, but also simplifies transforming our brochure into a fully-functional commerce platform by integrating the necessary logic data into Commerce Layer.\u003C\u002Fp>\n\n\u003Ch4>Delivery vs. transactional APIs\u003C\u002Fh4>\n\n\u003Cp>Another distinction that further supports the separation of data types is the difference between caching strategies.\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Content data gets fetched via a Delivery API, characterized by a heavy caching strategy to optimize performance over “freshness” of data.\u003C\u002Fli>\n\u003Cli>Data calculated by commerce logic, like the price, requires fast delivery of the latest version. \u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Commerce Layer utilizes a distinct caching strategy for commerce data combined to laser-focused payloads to ensure rapid delivery to the user.\u003C\u002Fp>\n\n\u003Ch3>Integrating your product catalog into your CMS\u003C\u002Fh3>\n\n\u003Cp>We’ve built a high growth, global business on this philosophy. Since day one, our founders Filippo and Massimo believe that Commerce Layer should focus on managing transactional data. And our growing \u003Ca href=\"https:\u002F\u002Fcommercelayer.io\u002Fcustomers\">list of customers\u003C\u002Fa> all subscribe to our way. But the way to achieve this clean separation of content and commerce, specifically related to managing a product catalog associated with your SKUs, is not apparent to everyone. This is the motivation behind our CMS Commerce project: to define and share a product catalog content model that aligns with Commerce Layer's vision and can be easily adopted within a CMS.\u003C\u002Fp>\n\n\u003Cp>We kickstarted this initiative with a content modeling session with Fabrizio Picca, Tom Smith from \u003Ca href=\"http:\u002F\u002Fsanity.io\u002F\">Sanity.io\u003C\u002Fa>, and me. The idea was inspired by \u003Ca href=\"https:\u002F\u002Fcommercefordevs.org\u002Fhow-to-model-product-catalogs\u002F\">Filippo's insights on product catalogs\u003C\u002Fa>. We focused on how to manage variant attributes versus product attributes. We also discussed the optimal way to store essential data like prices and SKUs.\u003C\u002Fp>\n\n\u003Cp>The resulting content model is structured as follows:\u003C\u002Fp>\n","checkbox",[],{"_modelApiKey":381,"border":7,"caption":398,"image":399,"size":392,"darkTheme":11,"rounded":7,"color":376},"A product catalog content data model diagram ",{"url":400,"alt":401,"title":402,"width":403,"height":404,"format":389,"focalPoint":405,"customData":406},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1712918614-product-catalog-content-data-modeling.png","The diagram shows the proposed content data model diagram that someone might model inside a CMS. It shows the one-to-many relationships between starting at the top and progressing through the entire catalog. Catalog --> Taxonomy (or Category) --> Taxons (or Sub-categories) --> Products --> Variants of products","Product catalog content data model",1562,1448,{"x":292,"y":292},{},{"_modelApiKey":372,"copy":408,"listStyle":395,"darkTheme":11,"buttons":409,"color":376,"indent":11},"\u003Cul>\n\u003Cli>\u003Cstrong>Catalog\u003C\u002Fstrong>: A catalog is a collection of products, often tailored for different markets or seasons. It acts as a container for your product offerings, allowing for organization and easy management within a specific context.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Taxonomy\u003C\u002Fstrong>: A taxonomy is a hierarchical system for classifying and organizing content. It is used to group products into category systems, such as 'Audience' or 'Genre', which can then be broken down into more specific subcategories or taxons.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Taxon\u003C\u002Fstrong>: A taxon is an individual category within a taxonomy. Taxons can be nested, allowing you to create a detailed structure for product classification.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Product\u003C\u002Fstrong>: A product acts as a set of common information for its different variants. For example, consider a “Book” as our product. Its attributes might contain “Author”, “Description”, or “Publisher”.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Variant\u003C\u002Fstrong>: A variant is a specific version of a product, which might differ in size, color, or other attributes. Each variant is a unique combination of these attributes and is typically associated with a unique SKU. The variant is the actual product the merchant is selling. In the “Book” example, a variant could have a “Type” attribute, being “Hardcover”, “Paperback”, and “Digital”.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>This model is dynamic. It allows for customization of certain content type names, indicated by the square brackets in the diagram, catering to different terminologies or preferences. For instance, "Taxonomy" and "Taxon" could be alternatively termed "Category System" and "Category" for those unfamiliar with the original nomenclature. Moreover, this flexibility empowers businesses to tailor their product catalogs to specific needs, such as distinguishing a “Book” product type with unique attributes like “Author”.\u003C\u002Fp>\n\n\u003Ch4>\u003Cstrong>The app\u002Fplugin architecture\u003C\u002Fstrong>\u003C\u002Fh4>\n\n\u003Cp>The architectural design for implementing this model across different CMS platforms was a collaborative effort between me and Fabrizio. After consulting with CMS experts and earning a Contentstack certification, we were ready to begin development. We initially focused on Sanity, Contentful, and Contentstack, each requiring a unique approach.\u003C\u002Fp>\n",[],{"_modelApiKey":372,"copy":411,"listStyle":374,"darkTheme":11,"buttons":412,"color":376,"indent":11},"\u003Ch4>\u003Cstrong>Sanity\u003C\u002Fstrong>\u003C\u002Fh4>\n\n\u003Cp>Sanity’s overall experience is developer-centric. Much of its capabilities are extendable with an npm plugin-based architecture. They have an excellent tool to start creating plugins: the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsanity-io\u002Fplugin-kit\">@sanity\u002Fplugin-kit\u003C\u002Fa>. This npm package initializes a project to build a custom plugin and offers documentation on how to test it within a Sanity project.\u003C\u002Fp>\n",[],{"_modelApiKey":381,"border":7,"caption":414,"image":415,"size":392,"darkTheme":11,"rounded":7,"color":376},"Sanity Commerce by Commerce Layer",{"url":416,"alt":417,"title":414,"width":418,"height":419,"format":389,"focalPoint":420,"customData":421},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1712918850-sanity-commerce.png","The image is a screenshot of the Sanity Commerce plugin found on Github: https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fsanity-commerce",1994,1355,{"x":292,"y":292},{},{"_modelApiKey":372,"copy":423,"listStyle":374,"darkTheme":11,"buttons":424,"color":376,"indent":11},"\u003Cp>After we prepared the plugin scaffolding, we had to\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Translate the content model to Sanity’s document types.\u003C\u002Fli>\n\u003Cli>Make the schema easily extendable. Remember we want product data to be tailored to the specific case, like “Book” vs. “Product”.\u003C\u002Fli>\n\u003Cli>Export TypeScript types to guarantee the configuration of the plugin was straight-forward.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>We created a \u003Ccode>schema.ts\u003C\u002Fcode> file, which leverages Sanity’s \u003Ccode>defineType\u003C\u002Fcode> function to create the documents types, all wrapped in a \u003Ccode>getSchema(config: PluginConfiguration): SanityDocument[]\u003C\u002Fcode> function.\u003C\u002Fp>\n\n\u003Cp>The plugin configuration, which allows to extend schema information like how to name a “Product”, looks like this:\u003C\u002Fp>\n",[],{"_modelApiKey":426,"code":427,"showLineNumbers":11,"highlightLines":280,"language":428,"size":429},"code_block","import { FieldDefinition } from 'sanity';\n\nexport type SanityCommercePluginConfig = {\n  productLabel?: string;\n  variantLabel?: string;\n  taxonomyLabel?: string;\n  taxonLabel?: string;\n  productAttributes?: FieldDefinition[];\n  variantAttributes?: FieldDefinition[];\n};","typescript","Standard",{"_modelApiKey":372,"copy":431,"listStyle":374,"darkTheme":11,"buttons":432,"color":376,"indent":11},"\u003Cp>\u003Cstrong>Installation and usage\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.sanity.io\u002Fplugins\u002Fsanity-commerce\">https:\u002F\u002Fwww.sanity.io\u002Fplugins\u002Fsanity-commerce\u003C\u002Fa>\u003C\u002Fp>\n\n\u003Cp>Use the plugin by installing it in your Sanity project root:\u003C\u002Fp>\n",[],{"_modelApiKey":426,"code":434,"showLineNumbers":11,"highlightLines":280,"language":435,"size":429},"# use npm, pnpm, or yarn\npnpm install @commercelayer\u002Fsanity-plugin-commerce","shell",{"_modelApiKey":372,"copy":437,"listStyle":374,"darkTheme":11,"buttons":438,"color":376,"indent":11},"\u003Cp>Then add it to your \u003Ccode>sanity.config.ts\u003C\u002Fcode> file:\u003C\u002Fp>\n",[],{"_modelApiKey":426,"code":440,"showLineNumbers":11,"highlightLines":280,"language":428,"size":429},"import { defineConfig } from 'sanity';\nimport {\n  sanityCommerce,\n  SanityCommercePluginConfig,\n} from '@commercelayer\u002Fsanity-plugin-commerce';\n\nconst sanityCommerceConfig: SanityCommercePluginConfig = {\n  \u002F\u002F ...configure the plugin here.\n};\n\nexport default defineConfig({\n  \u002F\u002F ... other config settings.\n  plugins: [sanityCommerce(sanityCommerceConfig)],\n});",{"_modelApiKey":372,"copy":442,"listStyle":374,"darkTheme":11,"buttons":443,"color":376,"indent":11},"\u003Cp>\u003Cstrong>Configuration\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp>Let’s continue to use our “Book” product example as a reference. An example configuration for the plugin might look like this:\u003C\u002Fp>\n",[],{"_modelApiKey":426,"code":445,"showLineNumbers":11,"highlightLines":280,"language":428,"size":429},"const sanityCommerceConfig: SanityCommercePluginConfig = {\n  productLabel: 'Book',\n  variantLabel: 'Book Variant',\n  taxonomyLabel: 'Category System',\n  taxonLabel: 'Category',\n  productAttributes: [\n\t  {\n\t\t  name: 'author',\n\t\t  title: 'Author',\n\t\t  type: 'string'\n\t\t},\n\t\t{\n\t\t\tname: 'publisher',\n\t\t\ttitle: 'Publisher',\n\t\t\ttype: 'string'\n\t],\n  variantAttributes: [\n    {\n      name: 'type',\n      title: 'Type',\n      type: 'string',\n      options: {\n        list: [\n          { title: 'Hardcover', value: 'hardcover' },\n          { title: 'Paperback', value: 'paperback' },\n          { title: 'Digital', value: 'digital' },\n        ],\n      },\n    },\n  ],\n};",{"_modelApiKey":372,"copy":447,"listStyle":374,"darkTheme":11,"buttons":448,"color":376,"indent":11},"\u003Cp>Hit save, and you will have the content model ready in your Sanity Studio, here used to populate the Book product catalog.\u003C\u002Fp>\n",[],{"_modelApiKey":381,"border":7,"caption":450,"image":451,"size":392,"darkTheme":11,"rounded":7,"color":376},"A product catalog in Sanity Studio built by the Commerce Layer plugin ",{"url":452,"alt":453,"title":454,"width":455,"height":456,"format":389,"focalPoint":457,"customData":458},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1712920444-product-catalog-sanity-studio.png","The view shows what a product catalog data model actually looks like inside Sanity's content editor called Sanity Studio.","A product catalog in Sanity Studio built by the Commerce Layer plugin",2964,2296,{"x":292,"y":292},{},{"_modelApiKey":372,"copy":460,"listStyle":374,"darkTheme":11,"buttons":461,"color":376,"indent":11},"\u003Ch4>\u003Cstrong>Contentful\u003C\u002Fstrong>\u003C\u002Fh4>\n\n\u003Cp>Contentful’s platform is different from Sanity. It can be extended using custom applications that enhance different aspects of its UI. Contentful also has a great tool to boost our application development, using the \u003Ca href=\"https:\u002F\u002Fwww.contentful.com\u002Fdevelopers\u002Fdocs\u002Fextensibility\u002Fapp-framework\u002Fcreate-contentful-app\u002F\">Create Contentful App CLI\u003C\u002Fa>. To keep it as simple as possible, we want the user to configure only a few fields and run the tool. Therefore, the configuration screen is the only view needed to build a product catalog in Contentful.\u003C\u002Fp>\n",[],{"_modelApiKey":381,"border":7,"caption":463,"image":464,"size":392,"darkTheme":11,"rounded":7,"color":376},"Contentful Commerce by Commmerce Layer",{"url":465,"alt":466,"title":467,"width":468,"height":469,"format":389,"focalPoint":470,"customData":471},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1712920955-contentful-commerce-by-commerce-layer.png","An image of the Contentful Commerce app by Commerce Layer.","Contentful Commerce by Commerce Layer",2300,1374,{"x":292,"y":292},{},{"_modelApiKey":372,"copy":473,"listStyle":395,"darkTheme":11,"buttons":474,"color":376,"indent":11},"\u003Cp>When a user hits the “Add to Contentful” button on the repository, we want them to:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Install the app\u003C\u002Fli>\n\u003Cli>Add some initial configuration like the names of the Content Types.\u003C\u002Fli>\n\u003Cli>Save the configuration and get the Content Model ready.\u003C\u002Fli>\n\u003Cli>Edit the rest of the attributes leveraging the amazing UI Contentful offers.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>To build the UI we used the \u003Ccode>@contentful\u002Ff36-components\u003C\u002Fcode> package, which exports Contentful-looking components such as \u003Ccode>Form\u003C\u002Fcode>, \u003Ccode>Paragraph\u003C\u002Fcode>, \u003Ccode>TextInput\u003C\u002Fcode>, etc.\u003C\u002Fp>\n\n\u003Cp>Contentful offers a \u003Ccode>@contentful\u002Fapp-sdk\u003C\u002Fcode> package, which we used in conjunction with the \u003Ccode>useSDK\u003C\u002Fcode> hook from \u003Ccode>@contentful\u002Freact-apps-toolkit\u003C\u002Fcode>. This provided access to the management APIs exposed by the App SDK and enabled us to create the function, which writes all the Content Types.\u003C\u002Fp>\n\n\u003Cp>Now we can configure the app, hit save, and voilà, our product catalog content model is now in Contentful:\u003C\u002Fp>\n",[],{"_modelApiKey":381,"border":7,"caption":476,"image":477,"size":392,"darkTheme":11,"rounded":7,"color":376},"A product catalog data model inside Contentful powered by the Commerce Layer app",{"url":478,"alt":479,"title":480,"width":481,"height":482,"format":389,"focalPoint":483,"customData":484},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1712921048-product-catalog-in-contentful.png","The image shows a series of blocks that define the data model for the product catalog. It follows the same general structure, using a \"book\" as the product. Catalog --> Category System --> Category --> Book --> Book Type","Product catalog data model in Contentful",2138,1308,{"x":292,"y":292},{},{"_modelApiKey":372,"copy":486,"listStyle":374,"darkTheme":11,"buttons":487,"color":376,"indent":11},"\u003Ch4>Contentstack\u003C\u002Fh4>\n\n\u003Cp>The initial idea for \u003Ca href=\"https:\u002F\u002Fwww.contentstack.com\u002Fplatforms\u002Fheadless-cms\">Contentstack\u003C\u002Fa> was to create an application, similar to Contentful. I’ve obtained the market apps certification using their new course, and we started working on the app.\u003C\u002Fp>\n",[],{"_modelApiKey":381,"border":7,"caption":489,"image":490,"size":392,"darkTheme":11,"rounded":7,"color":376},"Contentstack Commerce by Commerce Layer",{"url":491,"alt":492,"title":489,"width":493,"height":494,"format":389,"focalPoint":495,"customData":496},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1712921356-contentstack-commerce.png","The image shows the README file from the Commerce Layer Github page: https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fcontentstack-commerce",2356,2042,{"x":292,"y":292},{},{"_modelApiKey":372,"copy":498,"listStyle":395,"darkTheme":11,"buttons":499,"color":376,"indent":11},"\u003Cp>Soon after we started, by using \u003Ca href=\"https:\u002F\u002Fwww.contentstack.com\u002Fdocs\u002Fdevelopers\u002Fdeveloper-hub\u002Fgetting-started-with-your-first-app\">their amazing CLI’s\u003C\u002Fa> \u003Ccode>app:create\u003C\u002Fcode> command, we realized that Contentstack’s app SDK does not expose their Management SDK, which is \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcontentstack\u002Fcontentstack-management-javascript\u002Fissues\u002F5\">not meant to work on a browser\u003C\u002Fa>. That’s ok though! We can still leverage Contentstack’s CLI to run a migration command on a JSON content model.\u003C\u002Fp>\n\n\u003Cp>The idea is simple: Expose two methods, \u003Ccode>login\u003C\u002Fcode> and \u003Ccode>migrate\u003C\u002Fcode>.\u003C\u002Fp>\n\n\u003Cp>The user has to\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Clone the repository\u003C\u002Fli>\n\u003Cli>Get the Stack API Key from Contentstack since it’s going to be an authenticated request and add it to a \u003Ccode>.env\u003C\u002Fcode> file.. We don’t need the Management Token.\u003C\u002Fli>\n\u003Cli>Change content type files in the \u003Ccode>.\u002Fdata\u003C\u002Fcode> folder according to your products’ attributes and names.\u003C\u002Fli>\n\u003Cli>Run \u003Ccode>pnpm run migrate\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Once you open Contentstack, you should see the content model there:\u003C\u002Fp>\n",[],{"_modelApiKey":381,"border":7,"caption":501,"image":502,"size":392,"darkTheme":11,"rounded":7,"color":376},"The product catalog created in Contentstack by the Commerce Layer script",{"url":503,"alt":504,"title":501,"width":505,"height":506,"format":389,"focalPoint":507,"customData":508},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1712921486-contentstack-product-catalog-data-model.png","The image shows a table of content types in Contentstack. The left column has the product catalog, starting from Catalog at the top. From top to bottom, the column includes the Product, Taxon, Taxonomy, and Variant rows. Each row contains a description of the product catalog data type.",2718,1238,{"x":292,"y":292},{},{"_modelApiKey":372,"copy":510,"listStyle":374,"darkTheme":11,"buttons":511,"color":376,"indent":11},"\u003Ch3>What’s next?\u003C\u002Fh3>\n\n\u003Cp>Beyond expanding to other CMS platforms, our plans include enhancing the content model to support complex product data and operations. Leveraging your CMS as a product catalog is not only feasible, it's a strategic choice. With Commerce Layer's focus on optimizing the commerce engine, we're dedicated to enhancing performance and features, allowing for a more integrated and efficient digital commerce experience\u003C\u002Fp>\n\n\u003Cp>These three examples get you started, but are by no means the final product. But, it does show you how easily you can configure a CMS to manage a product catalog. Ideally, you spend some time white boarding your Taxonomy and Taxons, building out your ideal product catalog strategy, and then go from there. We can help you think through this if you want, just find me on #community. I’ll join any jam session you want to set up and help you think through it. \u003C\u002Fp>\n\n\u003Cp>Furthermore, this exercise gives you three distinct options that might help you choose a CMS. All of them are quite feasible, but if you prefer one path over the other, you know know how each CMS platform plugin or app works. Again, if you have questions about which CMS pathway might be best for you, please reach out. Slack is probably best, but I’m on \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexcanessa\u002F\">LinkedIn\u003C\u002Fa> and \u003Ca href=\"mailto:alessandro.canessa@commercelayer.io?subject=Modeling%20the%20rich%20content%20data%20for%20a%20product%20catalog%20\">email\u003C\u002Fa>.\u003C\u002Fp>\n",[],{"_modelApiKey":513,"title":514,"ctas":515},"cta_block","We can help you plan your next digital transformation.",[516],{"_modelApiKey":203,"text":133,"label":280,"subtitle":280,"icon":280,"isExternal":11,"url":280,"link":302,"anchor":280,"openForm":7,"form":517,"htmlClassNames":280},{"_modelApiKey":55,"slug":143,"name":144},{"displayTitle":519,"cta":302,"ctaText":280,"cards":520},"Your next read",[521,540,555,569,587],{"_modelApiKey":212,"link":522,"subtitle":526,"date":526,"author":527,"additionalAuthors":534,"icon":535,"abstract":536,"tag":537,"displayTitle":523,"cardRatio":299,"featured":539},{"text":523,"isExternal":11,"url":280,"link":524},"How to build an ecommerce website with Commerce Layer Demo Store.",{"_modelApiKey":212,"slug":525},"how-to-build-an-ecommerce-website-with-commerce-layer-demo-store","January 17, 2023",{"name":528,"picture":529},"Bolaji Ayodeji",{"url":530,"alt":531,"title":531,"width":289,"height":289,"format":290,"focalPoint":532,"customData":533},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1643036479-bolaji.jpg","Bolaji Ayodeji — Developer Advocate at Commerce Layer",{"x":292,"y":292},{},[],"storefront","Learn how to build a sleek, modern, and user-friendly conference swag digital store using composable commerce APIs, micro-frontends, and the Commerce Layer Nextjs Demo Store project. ",{"color":298,"name":538},"Tutorials",0,{"_modelApiKey":212,"link":541,"subtitle":545,"date":545,"author":546,"additionalAuthors":550,"icon":551,"abstract":552,"tag":553,"displayTitle":542,"cardRatio":11,"featured":554},{"text":542,"isExternal":11,"url":280,"link":543},"How to build an international ecommerce website with Sanity and Commerce Layer.",{"_modelApiKey":212,"slug":544},"how-to-build-an-international-ecommerce-website-with-sanity-and-commerce-layer","April 6, 2022",{"name":528,"picture":547},{"url":530,"alt":531,"title":531,"width":289,"height":289,"format":290,"focalPoint":548,"customData":549},{"x":292,"y":292},{},[],"shapes","Learn how to integrate Sanity with Commerce Layer by looking at how we built our starter template using Sanity Studio, Next.js, and our React components library.",{"color":298,"name":538},1,{"_modelApiKey":212,"link":556,"subtitle":560,"date":560,"author":561,"additionalAuthors":565,"icon":566,"abstract":567,"tag":568,"displayTitle":557,"cardRatio":11,"featured":38},{"text":557,"isExternal":11,"url":280,"link":558},"Getting started with Commerce Layer JavaScript SDK.",{"_modelApiKey":212,"slug":559},"getting-started-with-commerce-layer-javascript-sdk","April 14, 2022",{"name":528,"picture":562},{"url":530,"alt":531,"title":531,"width":289,"height":289,"format":290,"focalPoint":563,"customData":564},{"x":292,"y":292},{},[],"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":538},{"_modelApiKey":212,"link":570,"subtitle":574,"date":574,"author":575,"additionalAuthors":582,"icon":583,"abstract":584,"tag":585,"displayTitle":571,"cardRatio":11,"featured":586},{"text":571,"isExternal":11,"url":280,"link":572},"How to build a dynamic pricing engine with Commerce Layer's External Prices API and ChatGPT.",{"_modelApiKey":212,"slug":573},"how-to-build-dynamic-pricing-with-external-prices-api-chatgpt-ai","January 23, 2024",{"name":576,"picture":577},"Fabrizio Picca",{"url":578,"alt":579,"title":579,"width":289,"height":289,"format":389,"focalPoint":580,"customData":581},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1614875259-commercelayeravatarsquare113f26.png","Fabrizio Picca —      Partnerships Manager at Commerce Layer",{"x":292,"y":292},{},[],"robot","In this article, we use OpenAI's ChatGPT to generate prices for articles (SKUs) added to a cart.  To do this, we utilize Commerce Layer's External Prices API and custom logic to get prices based on criteria we provided to ChatGPT.",{"color":298,"name":538},3,{"_modelApiKey":212,"link":588,"subtitle":592,"date":592,"author":593,"additionalAuthors":597,"icon":598,"abstract":599,"tag":600,"displayTitle":589,"cardRatio":11,"featured":601},{"text":589,"isExternal":11,"url":280,"link":590},"Build a business dashboard with Retool and the Commerce Layer Metrics API.",{"_modelApiKey":212,"slug":591},"build-a-business-dashboard-with-retool-and-the-commerce-layer-metrics-api","February 20, 2024",{"name":576,"picture":594},{"url":578,"alt":579,"title":579,"width":289,"height":289,"format":389,"focalPoint":595,"customData":596},{"x":292,"y":292},{},[],"chart-line","Our Metrics API is a powerful resource used to measure the health of a business. Coupled with Retool, you can visualize your sales data to gain better insights into the health of your business.",{"color":298,"name":538},4,[603,604,606,608,610,612,614,616,618,620,622,624,626,628,630,632,634,636,638],{"attributes":302,"tag":303,"content":279},{"attributes":605,"tag":307,"content":302},{"property":306,"content":279},{"attributes":607,"tag":307,"content":302},{"name":310,"content":279},{"attributes":609,"tag":307,"content":302},{"name":313,"content":314},{"attributes":611,"tag":307,"content":302},{"property":317,"content":314},{"attributes":613,"tag":307,"content":302},{"name":320,"content":314},{"attributes":615,"tag":307,"content":302},{"property":323,"content":324},{"attributes":617,"tag":307,"content":302},{"property":327,"content":328},{"attributes":619,"tag":307,"content":302},{"property":331,"content":332},{"attributes":621,"tag":307,"content":302},{"property":335,"content":336},{"attributes":623,"tag":307,"content":302},{"name":339,"content":324},{"attributes":625,"tag":307,"content":302},{"name":342,"content":336},{"attributes":627,"tag":307,"content":302},{"property":345,"content":346},{"attributes":629,"tag":307,"content":302},{"property":349,"content":350},{"attributes":631,"tag":307,"content":302},{"property":353,"content":354},{"attributes":633,"tag":307,"content":302},{"property":357,"content":358},{"attributes":635,"tag":307,"content":302},{"property":361,"content":280},{"attributes":637,"tag":307,"content":302},{"name":364,"content":365},{"attributes":639,"tag":307,"content":302},{"name":368,"content":369},[641],{"name":285,"picture":642},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":643,"customData":644},{"x":292,"y":292},{},1790593729913]