![\"Update](\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/10\/\u56fe\u7247-8.png\")
<\/figure>\n\n\n\n3. Set placeholder restrictions<\/h4>\n\n\n\n
Add placeholder to the appropriate path<\/p>\n\n\n\n
\/sitecore\/content\/Play\/Play\/Presentation\/Placeholder Settings\/Demo1\/Demo1<\/code><\/pre>\n\n\n\n![\"Set](\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/10\/\u56fe\u7247-9.png\")
<\/figure>\n\n\n\n4. Add a Variant Definition<\/h4>\n\n\n\n\/sitecore\/content\/Play\/Play\/Presentation\/Headless Variants\/Demo1\/WithSub<\/code><\/pre>\n\n\n\n![\"Add](\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/10\/\u56fe\u7247-10.png\")
<\/figure>\n\n\n\n5. FE coding<\/h4>\n\n\n\nimport React from 'react';\nimport {\n Image as JssImage,\n Text,\n ImageField,\n TextField,\n Placeholder,\n} from '@sitecore-jss\/sitecore-jss-nextjs';\nimport { ComponentProps } from 'lib\/component-props';\n\ninterface Fields {\n Image: ImageField;\n Title: TextField;\n}\n\ntype Demo1Props =\n ComponentProps & {\n fields: Fields;\n };\n\nconst Demo1DefaultComponent = (props: Demo1Props): JSX.Element => (\n <div className={`component promo ${props.params.styles}`}>\n <div className=\"component-content\">\n <span className=\"is-empty-hint\">Demo1<\/span>\n <\/div>\n <\/div>\n);\n\nexport const Default = (props: Demo1Props): JSX.Element => {\n const id = props.params.RenderingIdentifier;\n if (props.fields) {\n return (\n <div className={`component promo ${props.params.styles}`} id={id ? id : undefined}>\n <div className=\"component-content\">\n <div className=\"field-promoicon\">\n <JssImage field={props.fields.Image} \/>\n <\/div>\n <div className=\"promo-text\">\n <div>\n <div className=\"field-promotext\">\n <Text field={props.fields.Title} \/>\n\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n );\n }\n\n return <Demo1DefaultComponent {...props} \/>;\n};\n\nexport const WithSub = (props: Demo1Props): JSX.Element => {\n const id = props.params.RenderingIdentifier;\n if (props.fields) {\n return (\n <div className={`component promo ${props.params.styles}`} id={id ? id : undefined}>\n <div className=\"component-content\">\n <div className=\"field-promoicon\">\n <JssImage field={props.fields.Image} \/>\n <\/div>\n <div className=\"promo-text\">\n <div>\n <div className=\"field-promotext\">\n <Text field={props.fields.Title} \/>\n <h1>VVV<\/h1>\n <div className=\"row\"><\/strong>\n \/\/The following is for nesting components\n <Placeholder name=\"demo1\" rendering={props.rendering} \/>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n );\n }\n\n return <Demo1DefaultComponent {...props} \/>;\n};<\/strong>\n<\/code><\/pre>\n\n\n\n\ud83d\udcdd Styles<\/h3>\n\n\n\n1. Add Styles<\/h4>\n\n\n\n
Add the JSON Rendering to the Allowed Renderings of the corresponding Style<\/p>\n\n\n\n
\/sitecore\/content\/Play\/Play\/Presentation\/Styles\/Demo1\/Demo1 large<\/code><\/pre>\n\n\n\n![\"Add](\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/10\/\u56fe\u7247-11.png\")
<\/figure>\n\n\n\n2. FE coding<\/h4>\n\n\n\n
Add scss<\/p>\n\n\n\n![\"Add](\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/10\/\u56fe\u7247-12.png\")
<\/figure>\n\n\n\n@import \"@sass\/abstracts\/vars\";\n@import \"@sass\/abstracts\/mixins\";\n\n.large-css {\n max-width: 960px;\n padding: 0;\n border-top-width: 3px;\n border-style: solid;\n overflow: visible;\n background-color: red;\n}\n<\/code><\/pre>\n\n\n\n3. Preview in Pages <\/h4>\n\n\n\n![\"Preview](\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/10\/\u56fe\u7247-13.png\")
<\/figure>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
This is the last tutorial of the Full-stack XM Cloud Development Guide. So we've covered 2 parts: How to Set Up Docker for XM Cloud Dev and Full-Stack Local XM Cloud Dev Environment Tutorial. This Full-stack XM Cloud Development Guide is written by Yaochang Liu, a Sitecore Content Hub Administrator Certification winner and experienced developer […]<\/p>\n","protected":false},"author":2,"featured_media":3475,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[82],"tags":[21,35,32,23,27,80],"class_list":["post-3424","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-qedge-digital-solutions","tag-qedge-technologies-reviews","tag-sitecore-developer","tag-sitecore-development","tag-sitecore-implementation","tag-xm-cloud-dev"],"views":6719,"_links":{"self":[{"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/posts\/3424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/comments?post=3424"}],"version-history":[{"count":15,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/posts\/3424\/revisions"}],"predecessor-version":[{"id":4795,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/posts\/3424\/revisions\/4795"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/media\/3475"}],"wp:attachment":[{"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/media?parent=3424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/categories?post=3424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/tags?post=3424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Full-stack](\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/10\/\u56fe\u7247.png\")
<\/figure>\n\n\n\n![\"Create](\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/10\/\u56fe\u7247-14.png\")
![\"Create](\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/10\/\u56fe\u7247-2.png\")
<\/figure>\n\n\n\n![\"Create](\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/10\/\u56fe\u7247-3.png\")
<\/figure>\n\n\n\n![\"Create](\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/10\/\u56fe\u7247-4.png\")
<\/figure>\n\n\n\n![\"FE](\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/10\/\u56fe\u7247-5.png\")
<\/figure>\n\n\n![\"FE](\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/10\/\u56fe\u7247-6.png\")
<\/figure>\n<\/div>\n\n\n![\"Create](\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/10\/\u56fe\u7247-7.png\")
<\/figure>\n\n\n\n