/o//commerce-media/accounts/-1/images/18605342?download=true
Marketing layouts - special mobile-first responsive layout templates
DXP App
These special layout templates uses mobile-first approach and breaks
common stacking order on mobile devices (tablets, smart-phones
etc.),
which helps you to show your desired product on top
position while columns are stacked under each other.
Layouts have different stacking breakpoints which enables you
perfect targeting for your
user base to achieve great user
experience on every device (smartphone, table, PC etc.).
Breakpoints are 575 px, 767 px, 991 px and 1279 px.
The best way
to figure out which devices uses your users the most is to look for
these stats in
tools such as Google Analytics etc. and then use
layout with breakpoint which suits the majority of
your users to
achieve best user experience.
Layout sets has different thumbnail colors for quick recognition
at Liferay control panel
which enables you high productivity while
creating new pages.
Layouts HTML markup is developed according to Twitter Bootstrap 4
HTML/CSS framework rules, which is part
of Liferay 7.1, that means
that they are universal and could be used with any Liferay 7.1 theme.
Layouts (each layout with breakpoints 575 px, 767 px, 991 px and
1279 px):
2 Columns right first
1-2 Columns right first
1-2-1 Columns right first
2 Columns (66/33%) right first
1-2
Columns (66/33%) right first
1-2-1 Columns (66/33%) right
first
2 Columns (33/66%) right first
1-2 Columns (33/66%)
right first
1-2-1 Columns (33/66%) right first
3 Columns
center first
1-3 Columns center first
1-3-1 Columns center
first
4 Columns right first
1-4 Columns right first
1-4-1
Columns right first
After deployment to Liferay server instance, layouts are
available for all Liferay Sites/Themes.
To change layout of the page:
1.) login to Liferay Control
Panel
2.) under your Liferay Site click Build
3.) then click
to Pages
4.) on each page click on three dots and then click on
Configure
5.) select which layout you want to use and click Save
DEVELOPER
Se ha producido un error al procesar la plantilla.
The string doesn't match the expected date/time/date-time format. The string to parse was: "21/11/24 18:34". The expected format was: "MM/dd/yy h:mm a".
The nested reason given follows:
Unparseable date: "21/11/24 18:34"
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${CPDefinition_displayDate.getData()?... [in template "3192443#3192485#null" at line 46, column 20]
~ Reached through: #nested [in template "3192443#3192485#null" in macro "section" at line 197, column 17]
~ Reached through: @section title=languageUtil.get(local... [in template "3192443#3192485#null" at line 42, column 1]
----
1<#assign
2 channel = restClient.get("/headless-commerce-delivery-catalog/v1.0/channels?accountId=-1&filter=name eq 'Marketplace Channel' and siteGroupId eq '${themeDisplay.getScopeGroupId()}'")
3
4 product = restClient.get(
5 "/headless-commerce-delivery-catalog/v1.0/channels/" + channel.items[0].id +
6 "/products/" + CPDefinition_cProductId.getData() +
7 "?accountId=-1&nestedFields=categories,productSpecifications,skus&skus.accountId=-1&skus.currencyCode=USD"
8 )
9
10 catalogName = product.catalogName!""
11 categories = product.categories![]
12 productSpecifications = product.productSpecifications![]
13
14 liferayVersions = productSpecifications?filter(item -> stringUtil.equals(item.specificationKey, "liferay-version"))
15 platformOffering = categories?filter(item -> stringUtil.equals(item.vocabulary, "marketplace-liferay-platform-offering"))
16>
17
18<#assign publisherDetailsResponse = restClient.get("/c/publisherdetailses?filter=publisherName eq '${catalogName}'") />
19
20<#if publisherDetailsResponse.items?has_content>
21 <#assign
22 publisherDetails = publisherDetailsResponse.items[0]
23 profileImageURL = publisherDetails.publisherProfileImage?replace("https://", "http://")
24 />
25</#if>
26
27<#assign
28 cpuValue = getSpecificationValue("cpu")
29 developerName = getSpecificationValue("developer-name", catalogName)
30 publisherURL = (getSpecificationValue("publisherwebsiteurl")?trim?replace(" ", ""))!""
31 ramValue = getSpecificationValue("ram")
32 supportEmail = getSpecificationValue("supportemailaddress")
33 supportPhone = getSpecificationValue("supportphone")
34 type = getSpecificationValue("type")?lower_case
35>
36<@section title = languageUtil.get(locale, "developer")>
37 <a class = "bg-neutral-8" href = "/?developer-name=${developerName}">
38 ${developerName}
39 </a>
40</@section>
41
42<@section title = languageUtil.get(locale, "publisher-date", "Publisher Date")>
43 <#setting date_format = "MMMM d, yyyy">
44
45 <#if CPDefinition_displayDate.getData()?has_content>
46 <p>${CPDefinition_displayDate.getData()?date("MM/dd/yy h:mm a")?string("MMMM d, yyyy")}</p>
47 </#if>
48</@section>
49
50<@section title = languageUtil.get(locale, "deployment-method", "Deployment Method")>
51 <#list platformOffering as offering>
52 <p>${offering.name}</p>
53 </#list>
54</@section>
55
56<@section title = languageUtil.get(locale, "app-type", "App Type")>
57 <#if type == 'client-extension'> Client Extension </#if>
58 <#if type == 'cloud'> Cloud </#if>
59 <#if type == 'composite-app'> Composite App </#if>
60 <#if type == 'dxp'> DXP </#if>
61 <#if type == 'low-code-configuration'> Low Code Configuration </#if>
62</@section>
63
64<@section title = languageUtil.get(locale, "version")>
65 ${getSpecificationValue("latest-version", "1.0.0")}
66</@section>
67
68<#if liferayVersions?has_content>
69 <@section title = languageUtil.get(locale, "supported-versions", "Supported Versions")>
70 <#list liferayVersions as version>
71 ${version.value}<#if version?has_next>, </#if>
72 </#list>
73 </@section>
74</#if>
75
76<#if cpuValue?has_content>
77 <@section title = languageUtil.get(locale, "resource-requirements", "Resource Requirements")>
78 <p>
79 <#if cpuValue?has_content>
80 ${cpuValue}
81 <#assign cpuNumber = cpuValue?number?default(0) />
82 <#if cpuValue?eval gt 1>
83 CPUS
84 </#if>
85 <#if cpuValue?eval lt 2>
86 CPU
87 </#if>
88 </#if>, <#if ramValue?has_content>${ramValue} GB RAM</#if>
89 </p>
90 </@section>
91</#if>
92
93<@section title = languageUtil.get(locale, "standard-price", "Standard Price")>
94 <div>
95 <#assign purchasableSkus = [] />
96
97 <#list product.skus as sku>
98 <#if sku.purchasable?? && sku.purchasable>
99 <#assign purchasableSkus = purchasableSkus + [sku] />
100 </#if>
101 </#list>
102
103 <#assign standardSku = {} />
104
105 <#list purchasableSkus as sku>
106 <#assign matched = false />
107
108 <#list sku.skuOptions as opt>
109 <#if stringUtil.equals(opt.skuOptionValueKey, "standard")>
110 <#assign
111 matched = true
112 standardSku = sku
113 />
114
115 <#break>
116 </#if>
117 </#list>
118 <#if matched><#break></#if>
119 </#list>
120
121 <#if standardSku.price?? && standardSku.price.price?eval gt 0>
122 <div class="bg-neutral-8">${standardSku.price.priceFormatted!""}</div>
123 <#else>
124 ${languageUtil.get(locale, "free", "Free")}
125 </#if>
126 </div>
127</@section>
128
129<@section title = languageUtil.get(locale, "help-and-support", "Help and Support")>
130 <div class="d-flex flex-column mt-4">
131 <div class="d-flex">
132 <span class="help-and-support-link-icon">
133 <@clay["icon"] symbol="document" />
134 </span>
135
136 <a class="d-flex w-100 justify-content-between help-and-support-link" href="https://www.liferay.com/en/legal/marketplace-terms-of-service" target="_blank">
137 <span class="copy-text ml-1 help-and-support-link">
138 ${languageUtil.get(locale, "terms-and-conditions", "Terms & Conditions")}
139 </span>
140
141 <@clay["icon"]
142 className="help-and-support-link-arrow link-arrow ml-auto"
143 height="12"
144 symbol="angle-right"
145 />
146 </a>
147 </div>
148
149 <div class="d-flex">
150 <span class="help-and-support-link-icon">
151 <@clay["icon"] symbol="document" />
152 </span>
153
154 <a class="d-flex w-100 justify-content-between help-and-support-link" href="javascript:void(0)" onClick="openModal()">
155 <span class="copy-text ml-1 help-and-support-link">
156 ${languageUtil.get(locale, "publisher-contact-info", "Publisher Contact Info")}
157 </span>
158
159 <@clay["icon"]
160 className="help-and-support-link-arrow link-arrow ml-auto"
161 height="12"
162 symbol="angle-right"
163 />
164 </a>
165 </div>
166 </div>
167</@section>
168
169<@section
170 showLine = false
171 title = languageUtil.get(locale, "share-link")
172>
173 <a class="align-items-center copy-text d-flex font-weight-bold ml-1 text-decoration-none text-primary" href="#copy-share-link" onclick="copyToClipboard(Liferay.ThemeDisplay.getCanonicalURL())">
174 <span class="help-and-support-link-icon mr-1">
175 <@clay["icon"] symbol="link" />
176 </span>
177 Copy & Share
178 </a>
179</@section>
180
181<#function getSpecificationValue key default="">
182 <#local spec = productSpecifications?filter(productSpecification ->
183 stringUtil.equals(productSpecification.specificationKey, key)) />
184
185 <#return (spec?first.value)!default />
186</#function>
187
188<#macro section
189 title
190 showLine=true
191>
192 <p>
193 <strong>${title}</strong>
194 </p>
195
196 <div>
197 <#nested>
198 </div>
199
200 <#if showLine>
201 <hr />
202 </#if>
203</#macro>
204
205<script ${nonceAttribute}>
206 function modalBody() {
207 return `
208 <div class="align-items-center d-flex flex-row mb-3">
209 <span class="align-items-center d-flex justify-content-center modal-icon-background mr-3" style="background: #E2E2E4; border-radius:50%; height:40px; overflow:hidden; width:40px;">
210 <#if profileImageURL?? && profileImageURL?length gt 0>
211 <img src="${profileImageURL}" alt="Publisher Image" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;" />
212 <#else>
213 <@clay["icon"]
214 style="fill:#6B6C7E;"
215 symbol="picture"
216 />
217 </#if>
218 </span>
219
220 <div class="d-flex flex-column">
221 <h3 class="font-weight-bold mb-0">
222 ${catalogName}
223 </h3>
224 </div>
225 </div>
226
227 <#if publisherURL?has_content>
228 <div class="align-items-center d-flex flex-row mb-3">
229 <span class="align-items-center d-flex justify-content-center modal-icon-background mr-3" style="background: #E2E2E4; border-radius:50%; height:40px; overflow:hidden; width:40px;">
230 <@clay["icon"]
231 style="fill:#6B6C7E;"
232 symbol="globe"
233 />
234 </span>
235
236 <div class="d-flex flex-column">
237 <span class="text-black-50">${languageUtil.get(locale, "publisher-website", "Publisher Website")}</span>
238
239 <a href="${publisherURL}" target="_blank" class="font-weight-bold">
240 ${publisherURL}
241 </a>
242 </div>
243 </div>
244 </#if>
245
246 <#if supportEmail?has_content>
247 <div class="align-items-center d-flex flex-row mb-3">
248 <span class="align-items-center d-flex justify-content-center modal-icon-background mr-3" style="background: #E2E2E4; border-radius:50%; height:40px; overflow:hidden; width:40px;">
249 <@clay["icon"] style="fill:#6B6C7E;"symbol="envelope-closed" />
250 </span>
251
252 <div class="d-flex flex-column">
253 <span class="text-black-50">${languageUtil.get(locale, "support-email", "Support Email")}</span>
254
255 <a class="font-weight-bold" href="mailto:${supportEmail}" target="_blank">
256 ${supportEmail}
257 </a>
258 </div>
259 </div>
260 </#if>
261
262 <#if supportPhone?has_content>
263 <div class="d-flex flex-row align-items-center mb-3">
264 <span class="align-items-center d-flex justify-content-center modal-icon-background mr-3" style="background: #E2E2E4; border-radius:50%; height:40px; overflow:hidden; width:40px;">
265 <@clay["icon"]
266 style="fill:#6B6C7E;"
267 symbol="phone"
268 />
269 </span>
270
271 <div class="d-flex flex-column">
272 <span class="text-black-50">${languageUtil.get(locale, "phone")}</span>
273
274 <a class="font-weight-bold" href="tel:${supportPhone}" target="_blank">
275 ${supportPhone}
276 </a>
277 </div>
278 </div>
279 </#if>
280 `;
281 }
282
283 function openModal() {
284 Liferay.Util.openModal({
285 bodyHTML: modalBody(),
286 center: true,
287 headerHTML: "<h2>Publisher Support Contact Info</h2>",
288 size: "md"
289 });
290 }
291</script>
292
293<script ${nonceAttribute}>
294 function copyToClipboard(text) {
295 if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
296 navigator.clipboard.writeText(text);
297
298 Liferay.Util.openToast({ message: "Copied link to the clipboard" });
299 }
300 }
301</script>
302
303<style ${nonceAttribute}>
304 .copy-text {
305 color: #282934;
306 font-size: 16px;
307 }
308
309 .help-and-support-link {
310 color: inherit;
311 text-decoration: none;
312 }
313
314 .help-and-support-link-arrow {
315 fill: rgb(133, 140, 148);
316 }
317
318 .help-and-support-link:hover {
319 color: inherit;
320 text-decoration: none;
321 }
322
323 .help-and-support-link-icon {
324 color: rgb(133, 140, 148);
325 }
326
327 .help-and-support-svg mask,
328 .link-arrow mask {
329 mask-type: alpha;
330 }
331</style>
DEVELOPER
21/11/24 18:34
Published date
21/11/24 18:34
Published Date
21/11/24 18:34
SUPPORTED OFFERINGS
Liferay PaaS
Supported Versions
7.1
Resource Requirements
Edition
CE
PRICE
Paid
help & support
SHARE LINK
HTML Example
A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. Paragraphs are usually an expected part of formal writing, used to organize longer prose.