Show last authors
1 {{box cssClass="floatinginfobox"}}
2 {{html clean="false"}}
3 <iframe src="//www.youtube.com/embed/bnKppGlGXrA" allowfullscreen></iframe>
4 <div>CMS</div>
5 <div>CMS Overview</div>
6 <div><a href="//www.youtube.com/embed/bnKppGlGXrA"><i class="fa fa-play"></i>&nbsp; Play</a> 15:33</div>
7 {{/html}}
8 {{/box}}
9
10 {{toc/}}
11
12
13
14
15 = Overview =
16
17 Content management system (CMS) allows to enrich e-commerce website with business driven content. Generally speaking this enrichment encompasses the following functions:
18
19 * Creation of content **pages**
20 * Creation of content **includes** (chunks of pages to be used in templates of a [[theme >>doc:3\.3\.x.For Business Users.Storefront.Themes.WebHome]]used by shop)
21
22 CMS allows to create micro sites as well create navigation menus, promotion banners, customer messaging, which are specific to each shop instance. Each content object can belong only to a single shop.
23
24 Whenever a new [[shop instance>>doc:3\.3\.x.For Business Users.JAM - Admin App.Shop.WebHome]] is created CMS section of admin is populated with an entry to access the root content object of the specific shop instance. Child content objects can be attached to this root with child content objects of their own to form content hierarchies with unlimited level of depth.
25
26 == Page ==
27
28 The layout of the content page is determined by theme's content page template. Most commonly these templates include a fixed structure with header, body section and footer. The body of the content object is inserted into the body section. Template is resolved from the **content template** configuration of content object. Default theme defines two of such templates: **content** and **dynocontent** which use content body as **plain HTML** and **HTML with groovy scripts** respectively.
29
30 However custom theme implementation can define its own content templates, which could use more complex rendering of pages.
31
32 == Include ==
33
34 Include refers to a special **content template** configuration **include**. The purpose of include is to specify internal content objects that are private (i.e. not available on storefront).
35
36 Main use cases are:
37
38 * Grouping content in admin for better management
39 * Creating a logical root of hierarchy (i.e. include content object can have public content objects children thus creating a public content branch, effectively a microsite section)
40 * Theme template includes - predefined zones in theme templates that allow configuration of page elements (e.g. meganav, footer, cart page configurable elements)
41
42 == External CMS ==
43
44 YC content service engine does not force business users to use built in CMS. Users that have existing CMS (e.g. Alfresco, Adobe CMS) have two integration options:
45
46 * Plug into the YC content service layer (via custom content service adapter) to retrieve content from their systems.
47 * Use external CMS as their primary website engine and then use YC [[REST API>>doc:3\.3\.x.For Business Users.REST API.WebHome]] as data processing engine bypassing content and themes altogether.
48
49 = Content management =
50
51 CMS management is focused at managing content for a specific shop at a time.
52
53 There is option of browsing the content hierarchy of a shop or search using keywords. Search filter can also accept special characters that instruct search to behave in a certain way (e.g. prefixing search with ^ would result in displaying content matching the search keyword and its immediate children). Use the help button on filter to see more options available for searching.
54
55
56 (% style="text-align:center" %)
57 [[image:yc-3.5.0-content-overview.png]]
58
59
60 Content object editor has a number of tabs each containing function specific configurations.
61
62 Mian tab allows to move content in the hierarchy by changing the parent (more details on setting up hierarchies are in [[this cookbook>>doc:3\.3\.x.Cookbooks.Cookbook - CMS Basics.WebHome]]). Also content availability options can be set either temporal or by toggling disabled flag. Only available content will be publicly visible on frontend.
63
64 Localisation contains settings for content name that is displayed in menus and breadcrumbs.
65
66 Templates tab contains content template that defines how the content body is used.
67
68 |=Templates *|=Accessible via URL |=Rendering
69 |content |(% style="color:green" %){{icon name="check"/}}|Basic layout of web page with content menu. Content body fills the middle section of the page
70 |dynocontent |(% style="color:green" %){{icon name="check"/}}|Dynamic content is enhanced version of "content" that treats content body as template that can contain variables and call custom functions.
71 Variables available to template depend on the theme.
72 |include |(% style="color:red" %){{icon name="times-circle"/}}|Content which is non accessible via public URL used to fill in placeholders in web pages defined by theme.
73 Another usage is splitting content hierarchies into sub hierarchies for purpose of better content management in YUM and creation of distinct microsites.
74
75 ^^* Custom themes can include other templates for alternative render process^^
76
77 SEO - search optimisation engine configurations.
78
79 CMS - actual content that is used according to template configuration
80
81 Attributes/Images tag - for additional configurations that can be used by this content object
82
83
84 = SEO =
85
86 SEO tab allows full control over locale specific settings. Options allow to manipulate URI and meta tags.
87
88
89 (% style="text-align:center" %)
90 [[image:yc-3.5.0-content-seo.png]]
91
92
93 = Content body =
94
95 Content body is optional and is reserved only for content objects that render content on storefront. Typically these are content pages and content includes that are defined by templates.
96
97 At the top of the tab are locale toggle buttons. These buttons do not disable locales, they are used to show/hide language blocks to make this screen a bit more manageable when working with large content bodies (to enable/disable shop locales see [[shop configurations>>doc:3\.3\.x.For Business Users.JAM - Admin App.Shop.WebHome]]).
98
99 Each language block has a heading bar with three tools: WYSIWYG editor, raw editor and preview. In addition to this it contains a language label that is either green (for non empty content body) or red (for empty content body). This is useful when content body does not contain visible element (e.g. scripts or meta tags).
100
101 Lower section of the content block shows a preview but it differs from the actual design. In order to see this body as it would be visible in shop you must use **preview** tool. This tool includes the **yc-preview.css** that contains full CSS bundle of the theme and thus will display HTML as closely as possible to the end result. Because preview tool opens in a new window you can also resize it to see responsive design in action.
102
103
104 (% style="text-align:center" %)
105 [[image:yc-3.5.0-content-body.png]]
106
107
108 **Raw data editor** allows raw source manipulation and is intended for use by professional web designers in order to fine tune design and add non standard attributes that may be used by JavaScript functions or other external tools such as Google tag manager or other analytics engines.
109
110 **WYSIWYG editor** is intended for use by business users and has advanced features to allow user friendly web design experience. **Insert template** function allows to insert predefined responsive templates to arrange blocks of HTML. User should familiarise with hot keys and tips that can be viewed using **help button** in the editor.
111
112
113 == WYSIWYG ==
114
115 By default this editor has **Show block borders** toggled, which draws a dotted line around blocks of HTML (e.g. div, p, pre). This allows to visualise blocks of HTML and how they behave when size of screen changes. Green indicates desktop size, blue - tables and red - mobile.
116
117
118 (% style="text-align:center" %)
119 [[image:yc-3.5.0-content-wysiwyg.png]]
120
121 Editor is displayed in a separate window, so it can be resized at any point to visualise how HTML reacts to different view ports.
122
123 (% style="color:#ff0000" %){{icon name="times-circle"/}} Note that working with blocks ENTER key creates a new line within each block. Thus to escape out of the block to add new one use hot key "SHIFT+ENTER". Use help button to view full list of shortcuts and tips.
124
125 == Media repository {{html}}<span class="label label-info">YCE 3.5.0+</span>{{/html}} ==
126
127 {{box cssClass="floatinginfobox"}}
128 {{html clean="false"}}
129 <iframe src="//www.youtube.com/embed/48GEmJ9l3TE" allowfullscreen></iframe>
130 <div>CMS Media Management</div>
131 <div>
132 <a href="//www.youtube.com/embed/48GEmJ9l3TE">&nbsp; Play</a>
133 5:57
134 </div>
135 {{/html}}
136 {{/box}}
137
138
139 Media repository is {{html}}<span class="label label-info">YCE</span>{{/html}} integration for CMS WYSIWYG editor that allows to browse uploaded media files. In open source version only files and images that are attached as attributes to specific content objects can be used by copying generated URI. This integration allows to upload media unrelated to data objects and also browse and select it from WYSIWYG.
140
141
142
143
144 (% style="text-align:center" %)
145 [[image:yc-3.5.0-content-fm.png]]
146
147
148
149 == Using functions ==
150
151 (% style="color:red" %){{icon name="times-circle"/}} We strongly recommend using only **raw editor** for content that uses functions or scripts
152
153 If you recall in **content template **configurations we had an option of using **dynocontent**. This type of template is an advanced version of **content** template that treats the body not just as plain HTML but as a mix of HTML and Groovy script. This enables use of predefined functions and also some advanced scripting in the content to make the content dynamic (i.e. enriched with server side data, such as product details, category details, cart details etc).
154
155 The following built in functions are available in core code:
156
157 |=Function|=Param 1|=Param 2|=Example|=Description
158 |include|uri| |(((
159 {{code}}
160 ${include('license')}
161 {{/code}}
162 )))|Allows to include body of another content by URI reference
163 |contentURL *|uri| |(((
164 {{code}}
165 <a href="${contentURL('license')}">License page</a>
166 {{/code}}
167 )))|Generates a link to content by its URI
168 |categoryURL *|uri| |(((
169 {{code}}
170 <a href="${categoryURL('notebooks')}">Notebooks</a>
171 {{/code}}
172 )))|Generates a link to category by its URI
173 |productURL *|uri| |(((
174 {{code}}
175 <a href="${productURL('158')}">TS-231 + 2X ST2000VN001</a>
176 {{/code}}
177 )))|Generates a link to product by its URI
178 |skuURL *|uri| |(((
179 {{code}}
180 <a href="${skuURL('82')}">ME181C-A1-WT</a>
181 {{/code}}
182 )))|Generates a link to SKU (a specific variant of product) by its URI
183 |URL *|uri| |(((
184 {{code}}
185 <a href="${URL('')}">Home</a>
186 {{/code}}
187 )))|Generates a link
188
189 ^^* It is not necessary to use functions for links, you can simply use {{box}}<a href="/category/notebooks">Notebooks</a>{{/box}} instead of {{box}}<a href="${categoryURL('notebooks')}">Notebooks</a>{{/box}}. However functions become useful when you have multiple environments and some of them are not running from root (e.g. www.mydomain.com) but from a sub root (www.mydomain.com/yes-shop). In such setups above stated functions will automatically resolve "/yes-shop" and prepend it to all generated URLs^^
190
191
192 (% style="color:green" %){{icon name="check"/}} For technical users: custom functions can be injected into ContentServiceTemplateSupport through registerFunction so you can add your own functions when customising content service API
193
194
195 === URL include {{html}}<span class="label label-info">YCE</span>{{/html}} ===
196
197 URL include is an advanced feature of {{html}}<span class="label label-info">YCE</span>{{/html}} CMS rendering. It allows to include any arbitrary content by referencing it inside script tag of type **yd-include**. For example:
198
199 (((
200 {{code}}
201 <script type='yc-include'>/internal/custom/controller/?param1=value1&param2=value2</script>
202 {{/code}}
203 )))
204
205 This feature **is not the same as include function from dynocontent template** and serves a multitude of purposes.
206
207 * include function runs within scope of content it was called from (i.e. like a script). So all parameters that are passed to included content are exactly the same and thus there is a dependency on the parameter input in included. On the contrast url includes run in a separate server side sub request and allows to pass additional parameters (e.g. param1 and param2 in the example above). There is no limit on the parameters but only simple types can be passed (i.e. not objects) but plain text
208 * url includes do not depend on dynocontent and thus can be included in any content anywhere thus allowing to embed custom components. For example if you developed an element such as featured product gallery, on internal controller "/internal/productgalery", which accepts a list of product SKU, then this component can be embedded anywhere in content by reference {{box}}<script type='yc-include'>/internal/productgalery?sku=SKU_A|SKU_B|SKU_C</script>{{/box}} and therefore any such gallery can be placed in any content by simply including one line. See featured products sliders on demo http://edemo.yes-cart.org which use this concept, the same component is included several times with list of SKU to generate different sliders of complete product pods
209 * lastly url includes allow to fine tune page caching (a feature) or SFG implementation that boosts performance enormously by caching chunks of generated HTML for given URI
210
211 == Groovy scripts ==
212
213 (% style="color:red" %){{icon name="times-circle"/}} We strongly recommend using only **raw editor** for content that uses functions or scripts
214
215 Scripting is beyond the scope of this overview, see [[this cookbook>>doc:3\.3\.x.Cookbooks.Cookbook - CMS Basics.WebHome]] for more technical in-depth details
216
217
YesCart.org © 2009 - 2018
v.1.0.0