1<#assign theme_css_path = themeDisplay.getPathThemeCss() />
2<#assign theme_js_path = themeDisplay.getPathThemeJavaScript() />
3<#assign layout = themeDisplay.getLayout() />
4
5<link rel="stylesheet" href="${theme_css_path}/components-standalone/card-standard.css" />
6
7<#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") />
8
9<#assign number_of_cards = entries?size />
10<#assign overflow_class = "" />
11
12<#if number_of_cards lte 3>
13 <#assign overflow_class = "overflow-visible" />
14</#if>
15
16<#assign show_custom_title = false />
17
18${portletDisplay.setShowPortletCssIcon(true)}
19
20<#assign portlet_preferences = portletDisplay.getPortletSetup() />
21
22<#assign portlet_preferences_map = portlet_preferences.getMap() />
23
24<#if portlet_preferences_map?? && portlet_preferences_map["portletSetupUseCustomTitle"]??>
25 <#assign VOID = portlet_preferences.setValue("portletSetupUseCustomTitle", "false") />
26 <#assign show_custom_title = portlet_preferences_map["portletSetupUseCustomTitle"][0]?boolean />
27</#if>
28
29<#assign is_asset_card = true />
30
31<#list portletPreferences as key, value_sequence>
32 <#if key == "anyAssetType" && value_sequence[0] == "true">
33 <#assign is_asset_card = false />
34 </#if>
35</#list>
36
37<#if entries?has_content>
38 <#assign assetRenderer = entries[0].getAssetRenderer() />
39 <#assign className = assetRenderer.getClassName() />
40
41 <#if className == "com.liferay.journal.model.JournalArticle">
42 <#assign assetClassTypeId = entries[0].getClassTypeId() />
43
44 <#assign DDMStructureLocalServiceUtil = staticUtil["com.liferay.dynamic.data.mapping.service.DDMStructureLocalServiceUtil"] />
45
46 <#assign structure = DDMStructureLocalServiceUtil.getStructure(assetClassTypeId) />
47 <#assign structure_name = structure.getName(locale)?trim?upper_case />
48
49 <#if structure_name != "ZAME CARD" && structure_name != "PRODUCT CARD">
50 <#assign is_asset_card = false />
51 </#if>
52 <#else>
53 <#assign is_asset_card = false />
54 </#if>
55</#if>
56
57<#if is_asset_card>
58 <section class="container g-product-cards-carousel">
59 <div class="g-swiper-wrapper">
60 <div class="swiper g-swiper ${overflow_class}" id="product-cards-swiper-${randomNamespace}">
61 <div class="swiper-wrapper">
62 <#if entries?has_content>
63 <#list entries as curEntry>
64 <div class="swiper-slide">
65 <#assign assetRenderer = curEntry.getAssetRenderer() />
66 <#assign asset_object = assetRenderer.getAssetObject() />
67 <#assign card_article_id = asset_object.articleId />
68
69 <#assign group_id = themeDisplay.getScopeGroupId() />
70
71 <#assign card_article = journalArticleLocalService.getArticle(getterUtil.getLong(group_id), card_article_id) />
72 <#assign card_template_ddm_key = card_article.getDDMTemplateKey() />
73
74 <#assign card_article_content = journalArticleLocalService.getArticleDisplay(getterUtil.getLong(group_id), card_article_id, card_template_ddm_key, "", locale, themeDisplay).getContent() />
75
76 ${card_article_content}
77 </div>
78 </#list>
79 </#if>
80 </div>
81 </div>
82 <button type="button" class="swiper-button-prev g-prev-arrow" id="product-cards-swiper-prev-${randomNamespace}"></button>
83 <button type="button" class="swiper-button-next g-next-arrow" id="product-cards-swiper-next-${randomNamespace}"></button>
84 <div class="swiper-pagination" id="product-cards-pagination-${randomNamespace}"></div>
85 </div>
86 </section>
87
88 <script src="${theme_js_path}/vendors/swiper-bundle.min.js" type="text/javascript"></script>
89
90 <script type="text/javascript">
91 Liferay.on("allPortletsReady", function () {
92 new Swiper("#product-cards-swiper-${randomNamespace}", {
93 direction: "horizontal",
94 navigation: {
95 nextEl: "#product-cards-swiper-next-${randomNamespace}",
96 prevEl: "#product-cards-swiper-prev-${randomNamespace}",
97 },
98 pagination: {
99 el: "#product-cards-pagination-${randomNamespace}",
100 type: "bullets",
101 dynamicBullets: true,
102 },
103 slidesPerView: 1,
104 spaceBetween: 24,
105 breakpoints: {
106 576: {
107 slidesPerView: 2,
108 },
109 1024: {
110 slidesPerView: 3,
111 },
112 },
113 loop: false,
114 });
115 });
116 </script>
117<#else>
118 <div class="container">
119 <div class="alert alert-danger">You're using "Cards carousel" template. Please choose Product card or ZAME card as asset type!</div>
120 </div>
121</#if>
