1<style>
2
3 .ssp-card-explore-profissoes__overlay {
4 width: 100%;
5 height: 100%;
6 opacity: .4!important;
7 background-color: #454f63;
8 position: absolute;
9 }
10
11 .ssp:not(.liferay-instance) .ssp-card-explore-profissoes__content-btn {
12
13 text-align: center;
14 width: fit-content;
15 position: relative;
16 z-index: 1;
17 pointer-events: none;
18 margin:0 auto;
19 color: #004a8c!important;
20 font-weight: 600!important;
21 font-size:15px!important;
22 }
23
24 .ssp:not(.liferay-instance) .ssp-card-explore-profissoes{
25 display:block;
26 text-decoration: none!important;
27 }
28
29 .ssp:not(.liferay-instance) .ssp-card-explore-profissoes__categoria-sub {
30 font-weight: normal;
31 }
32
33 .ssp-card-explore-profissoes .image-background{
34 position: absolute;
35 top:0;
36 object-fit: cover;
37 object-position: center;
38 width: 100%;
39 height: 100%;
40 }
41
42 .ssp:not(.liferay-instance) .ssp-card-explore-profissoes__categoria-icon{
43
44 max-width: 57px;
45 object-fit: cover;
46 object-position: center;
47 padding:0;
48
49 }
50
51
52 @media only screen and (max-width: 768px){
53
54 .ssp:not(.liferay-instance) .ssp-card-explore-profissoes__content-btn {
55
56 font-size:12px!important;
57 }
58
59 .ssp-card-explore-profissoes__body {
60 height: 210px!important;
61 }
62
63 }
64
65
66 @media only screen and (max-width: 768px) and (min-width: 376px){
67
68 .ssp-exploreprofissoes__slider {
69 height: 390px;
70 width: 88vw!important;
71 }
72
73 }
74
75 @media only screen and (max-width: 375px){
76
77 .ssp-exploreprofissoes__slider {
78 height: 390px;
79 width: 92vw!important;
80 }
81
82 }
83
84
85
86</style>
87
88
89
90<#assign prefix = "ssp" />
91
92 <div class="slick-area-explore-senac slick-area-explore-senac--md-bleed slider-container">
93
94 <#list entries![] as entry>
95
96 <#assign renderer = entry.getAssetRenderer() />
97 <#assign document = saxReaderUtil.read(renderer.getArticle().getContent()) />
98 <#assign rootElement = document.getRootElement() />
99 <#assign journalArticle = renderer.getArticle() />
100
101 <#-- Get fields -->
102 <#-- Get item fields -->
103
104 <#-- Título da Campanha -->
105 <#assign xPathSelector_tituloCampanha = saxReaderUtil.createXPath("dynamic-element[@field-reference='tituloCampanha']")>
106 <#assign tituloCampanha = xPathSelector_tituloCampanha.selectSingleNode(rootElement).getStringValue()>
107
108 <#-- SubTítulo da campanha-->
109 <#assign xPathSelector_subtituloCampanha = saxReaderUtil.createXPath("dynamic-element[@field-reference='subtituloCampanha']")>
110 <#assign subtituloCampanha = xPathSelector_subtituloCampanha.selectSingleNode(rootElement).getStringValue()>
111
112 <#-- Chamada da campanha-->
113 <#assign xPathSelector_chamadaCampanha = saxReaderUtil.createXPath("dynamic-element[@field-reference='chamadaPrincipalCampanha']")>
114 <#assign chamadaCampanha = xPathSelector_chamadaCampanha.selectSingleNode(rootElement).getStringValue()>
115
116 <#-- SubTítulo da chamda campanha-->
117 <#assign xPathSelector_subtituloChamdaCampanha = saxReaderUtil.createXPath("dynamic-element[@field-reference='subtituloChamadaCampanha']")>
118 <#assign subtituloChamadaCampanha = xPathSelector_subtituloChamdaCampanha.selectSingleNode(rootElement).getStringValue()>
119
120 <#-- txt botão -->
121 <#assign xPathSelector_txtBtnExplore = saxReaderUtil.createXPath("dynamic-element[@field-reference='txtBtnExplore']")>
122 <#assign txtBtn = xPathSelector_txtBtnExplore.selectSingleNode(rootElement).getStringValue()>
123
124 <#-- link botão -->
125 <#assign xPathSelector_linkBtnExplore = saxReaderUtil.createXPath("dynamic-element[@field-reference='linkBtnExplore']")>
126 <#assign linkBtn = xPathSelector_linkBtnExplore.selectSingleNode(rootElement).getStringValue()>
127
128
129 <#-- Imagem ícone-->
130 <#assign xPathSelector_imagemIcone = saxReaderUtil.createXPath("dynamic-element[@field-reference='iconeCampanha']")>
131
132
133 <#assign imagemStrIcon = xPathSelector_imagemIcone.selectSingleNode(rootElement).getStringValue()>
134
135 <#if imagemStrIcon?contains("{") >
136 <#assign
137 imagemJsonIcon = jsonFactoryUtil.createJSONObject(imagemStrIcon)
138 imagemIdIcon = getterUtil.getInteger(imagemJsonIcon.get('fileEntryId'))
139 dl = serviceLocator.findService("com.liferay.document.library.kernel.service.DLAppService")
140 dlURLHelper = serviceLocator.findService("com.liferay.document.library.util.DLURLHelper")
141 fileEntry = dl.getFileEntry(imagemIdIcon)
142 imagemIconAlt = imagemJsonIcon.get('alt')
143 imagemUrlIcone = dlURLHelper.getImagePreviewURL(fileEntry, themeDisplay)
144 />
145 <#else>
146 <#assign imagemUrlIcone = "">
147 </#if>
148
149
150 <#-- Imagem Background-->
151 <#assign xPathSelector_imagem = saxReaderUtil.createXPath("dynamic-element[@field-reference='imagemExplore']")>
152
153
154 <#assign imagemStr = xPathSelector_imagem.selectSingleNode(rootElement).getStringValue()>
155
156 <#if imagemStr?contains("{") >
157 <#assign
158 imagemJson = jsonFactoryUtil.createJSONObject(imagemStr)
159 imagemId = getterUtil.getInteger(imagemJson.get('fileEntryId'))
160 dl = serviceLocator.findService("com.liferay.document.library.kernel.service.DLAppService")
161 dlUtil = serviceLocator.findService("com.liferay.document.library.util.DLURLHelper")
162 fileEntry = dl.getFileEntry(imagemId)
163 imagemAlt = imagemJson.get('alt')
164 imagemUrl = dlUtil.getImagePreviewURL(fileEntry, themeDisplay)
165 />
166 <#else>
167 <#assign imagemUrl = "">
168 </#if>
169
170
171 <#-- <#assign
172 xPathSelectorInfoCampanha = saxReaderUtil.createXPath("dynamic-element[@field-reference='infoCampanha']")
173 InfoCampanha = xPathSelectorInfoCampanha.selectSingleNode(rootElement)
174 titulo = xPathSelectorTituloCampanha = saxReaderUtil.createXPath("dynamic-element[@field-reference='tituloCampanha']")
175 descricao = xPathSelectorDescCampanha = saxReaderUtil.createXPath("dynamic-element[@field-reference='descricaoCampanha']")
176 /> -->
177
178
179 <#-- /Getfields -->
180
181 <#-- Paint! -->
182
183 <div class="slick-area__item">
184
185 <#assign dominio= currentURL?keep_after('//')?keep_before('/')>
186
187 <#assign target = '_blank'>
188
189 <#if linkBtn?contains(dominio)>
190 <#assign target = ''>
191 </#if>
192
193
194 <a class="ssp-card-explore-profissoes" style="background-image: url(${imagemUrl})" draggable="true" href="${linkBtn}" target="${target}">
195
196 <img ssp-load-lazy-image="${imagemUrl}" class="image-background" loading="lazy" <#if imagemAlt?length != 0> alt="${imagemAlt}"</#if> >
197
198 <div class="ssp-card-explore-profissoes__overlay"></div>
199
200 <div class="ssp-card-explore-profissoes__content">
201
202 <div class="ssp-card-explore-profissoes__header">
203 <img ssp-load-lazy-image="${imagemUrlIcone}" class="ssp-card-explore-profissoes__categoria-icon image-icon" loading="lazy" <#if imagemIconAlt?length != 0> alt="${imagemIconAlt}"</#if> >
204
205 <div>
206
207 <h6 class="ssp-card-explore-profissoes__categoria">
208 ${tituloCampanha}
209 </h6>
210
211 <span class="ssp-card-explore-profissoes__categoria-sub">
212 ${subtituloCampanha}
213 </span>
214
215 </div>
216
217 </div>
218
219 <div class="ssp-card-explore-profissoes__body">
220
221 <h5 class="ssp-card-explore-profissoes__title">
222 ${chamadaCampanha}
223 <span>${subtituloChamadaCampanha}</span>
224 </h5>
225
226
227
228 </div>
229
230 <div class="ssp-card-explore-profissoes__content-btn btn btn-light px-5">
231 ${txtBtn}
232 </div>
233
234
235 </div>
236
237 </a>
238
239 </div>
240
241 </#list>
242
243
244
245 </div>
246
247<script>
248
249 $( document ).ready(function() {
250
251 $('.slick-area-explore-senac').slick({
252
253 slidesToShow: 3,
254 slidesToScroll: 3,
255 autoplay: false,
256 infinite: false,
257 dots: true,
258 prevArrow: '<a href="#" class="slick-prev"><i class="fas fa-chevron-left"></i></a>',
259 nextArrow: '<a href="#" class="slick-next"><i class="fas fa-chevron-right"></i></a>',
260 responsive: [
261 {
262 breakpoint: 1200,
263 settings: {
264 slidesToShow: 1,
265 slidesToScroll: 1,
266 variableWidth: true,
267 infinite: false,
268 centerMode: false,
269
270 }
271 },
272 {
273 breakpoint: 768,
274 settings: {
275 slidesToShow: 1,
276 slidesToScroll: 1,
277 variableWidth: true,
278 infinite: false,
279 centerPadding: 0,
280 arrows:false,
281 centerMode: false,
282 }
283 }
284
285 ]
286
287 });
288
289 });
290
291</script>
