1<#-- Template: functions - Publicador del producto Plantilla -->
2<#import "${templatesPath}/FUNCTIONS__PUBLICADOR_DEL_PRODUCTO_PLANTILLA" as functions />
3
4<script src="/documents/d/guest/pagination-min" type="text/javascript"></script>
5
6<#if entries?has_content>
7
8<#assign
9 commerceContext = renderRequest.getAttribute("COMMERCE_CONTEXT")
10 commerceChannelId = commerceContext.getCommerceChannelId()
11 />
12
13<section class="product__list_${randomNamespace}">
14
15 <div class="related__products_detail related__products_accessories showMobile">
16 <div class="nav nav-tabs">
17 <div class="nav-item" role="presentation"><div class="nav-link pl-0 pr-0"><@liferay.language key='related.accesories' /></div></div>
18 </div>
19 </div>
20
21 <div class="row mt-3">
22
23 <#assign count = 0 />
24
25 <#list entries as curCPCatalogEntry>
26
27 <#assign definitionId = curCPCatalogEntry.getCPDefinitionId()
28 definitionService = serviceLocator.findService("com.liferay.commerce.product.service.CPDefinitionLocalService")
29 definition = definitionService.getCPDefinition(definitionId)
30 productId = definition.getCProduct().getCProductId()
31 skuProduct = functions.getSkuProduct(productId, commerceChannelId, "")
32 skuProductCss = functions.getSkuProductCss(skuProduct, definitionId)
33 varCategory = functions.getProductCategories(productId, commerceChannelId, "")
34 />
35
36 <div class="paginationItem_${randomNamespace} col-xl-3 col-lg-4 col-md-6 col-6 mb-5 product__list_height">
37 <div class="product__list_img text-center">
38 <div class="row">
39 <div class="col-4">
40 <span class="pl-2 pt-2 ${skuProductCss}"><@liferay.language key="product.sku" /></span>
41 </div>
42 <div class="col-8">
43
44 <#-- category name -->
45<div class="product__list_categories">
46
47 <span class="text-right pr-2 pt-2 pb-2 sku-product">
48 <@liferay.language key="${varCategory?lower_case}.key" />
49 </span>
50
51</div>
52 <#-- category name -->
53
54 </div>
55 </div>
56
57 <#-- ajustar referencia en segunda fila para no cortarse -->
58 <div class="row">
59 <div class="col-12">
60 <span class="pl-2 pb-2 ${skuProductCss}">${skuProduct}</span>
61 </div>
62 </div>
63 <#-- ajustar referencia en segunda fila para no cortarse -->
64 <a href="/p/${curCPCatalogEntry.getUrl()}">
65 <#assign productImage = restClient.get("/headless-commerce-delivery-catalog/v1.0/channels/${commerceChannelId}/products/${productId}/images").items />
66 <#global counter = 0 />
67 <#list productImage as items>
68 <#if counter < 1 && items.priority == 0>
69 <img alt="${curCPCatalogEntry.getName()?replace('&', " ", 'r')}" id="load--product--${curCPCatalogEntry.getCPDefinitionId()}_${randomNamespace}" loading="lazy" class="lazyload img-fluid" src="/o/adaptive-media/image/${items.fileEntryId}/product-catalog/${items.title}" />
70 <#global counter = counter + 1 />
71 </#if>
72 </#list>
73 </a>
74 </div>
75 <div class="row pb-4 align-items-center">
76 <div class="col-lg-6">
77 <@liferay_commerce_ui["compare-checkbox"]
78 CPCatalogEntry=curCPCatalogEntry
79 label=languageUtil.get(request, "compare")
80 />
81 </div>
82 <#if themeDisplay?has_content && themeDisplay.isSignedIn()>
83 <div class="col-lg-6 text-right">
84 <@liferay_commerce_ui["add-to-wish-list"]
85 CPCatalogEntry=curCPCatalogEntry
86 />
87 </div>
88 </#if>
89 </div>
90 <div class="product__list_title pb-2"><h3><a href="/p/${curCPCatalogEntry.getUrl()}">${curCPCatalogEntry.getName()}</a></h3></div>
91 <#-- <div class="product__list_description pb-3">${stringUtil.shorten(htmlUtil.stripHtml(curCPCatalogEntry.getDescription()), 150,"...")}</div> -->
92 <div class="button-holder">
93 <a class="btn btn-primary" href="/p/${curCPCatalogEntry.getUrl()}">
94 <@liferay.language key='details' />
95 </a>
96 </div>
97 </div>
98 <#assign count = curCPCatalogEntry_index />
99 </#list>
100 </div>
101</section>
102 <#if count gt 3>
103 <div class="text-center d-flex">
104 <ul class="pagination paginationPlugin_${randomNamespace}" style="margin: 0 auto;"></ul>
105 </div>
106
107 <script>
108 $(document).ready(function () {
109 $('.paginationPlugin_${randomNamespace}').rpmPagination({
110 domElement: '.paginationItem_${randomNamespace}',
111 limit: 4
112 });
113 });
114 </script>
115</#if>
116
117
118<#else>
119
120<#assign userActive = themeDisplay.getRealUserId()/>
121<#assign administratorRole = "">
122
123<#if themeDisplay.isSignedIn()>
124<#assign typeUser = restClient.get("/headless-admin-user/v1.0/user-accounts/${userActive}").roleBriefs />
125<#list typeUser as x>
126 <#if x.name == "Administrator">
127 <#assign administratorRole = x.name>
128 </#if>
129</#list>
130</#if>
131
132<#if themeDisplay.isSignedIn() && administratorRole == 'Administrator'>
133 <div class="alert alert-info mt-5">
134 <@liferay.language key='not.load.tabs' />
135 </div>
136<#else>
137 <script>
138 $(document).ready(function() {
139 $('.related__products_accessories').hide();
140 $('#profile-tab').parent('li.nav-item').hide();
141 $('#profile-tab').parent('li.nav-item').addClass('hide');
142 $('#accesories').removeClass('active');
143 });
144 </script>
145</#if>
146
147</#if>
148
149<style>
150
151 /*paginator*/
152 .paginationPlugin_${randomNamespace} .page-num:not(.prev):hover, .paginationPlugin_${randomNamespace} .page-num:not(.next):hover{
153 background-color: #dedada;
154 }
155 .paginationPlugin_${randomNamespace} .page-link:hover, .paginationPlugin_${randomNamespace} .page-link.hover{
156 background-color: transparent;
157 }
158 .paginationPlugin_${randomNamespace} .page-link:hover::before, .paginationPlugin_${randomNamespace} .page-link.hover::before {
159 background-color: transparent;
160 height: 0.1875rem;
161}
162 .paginationPlugin_${randomNamespace} .page-num[class^="page-"].disabled {
163background-color: #dedada;
164 border: 1px solid #dedada;
165}
166 .paginationPlugin_${randomNamespace} .page-num[class*="page-"]{
167 background-color: #dedada;
168 border: 1px solid #dedada;
169 }
170.paginationPlugin_${randomNamespace} .page-num.prev, .paginationPlugin_${randomNamespace} .page-num.next{
171 border: 0px !important;
172 width: 48px;
173 height: 50px;
174 display: flex;
175 align-items: center;
176 justify-content: center;
177background: transparent !important;
178}
179
180.paginationPlugin_${randomNamespace} .page-num:not(.prev), .paginationPlugin_${randomNamespace} .page-num:not(.next){
181 border: 1px solid #7F7E81;
182 border-radius: 32px;
183 width: 48px;
184 height: 50px;
185 display: flex;
186 align-items: center;
187 justify-content: center;
188 background: transparent;
189 }
190 .paginationPlugin_${randomNamespace} .page-num .page-link{
191 font: normal normal normal 14px/18px Lexend;
192 letter-spacing: 0px;
193 color: #7F7E81;
194 }
195 /*paginator*/
196
197 .related__products_detail.showMobile .nav-tabs{
198 border-color: #A03123;
199 display: block !important;
200 }
201 .showMobile .nav-link{
202font: normal normal 600 24px/30px Lexend;
203letter-spacing: -0.72px;
204color: #A03123;
205text-transform: uppercase;
206 }
207 @media (min-width: 767px) {
208 .product__list_${randomNamespace} .showMobile{
209 display: none;
210 }
211 }
212 @media (max-width: 767px) {
213 .product__list_${randomNamespace} .showMobile{
214 display: block;
215 }
216 }
217 .product__list_${randomNamespace}{
218 margin-top: 40px;
219 }
220 .product__list_${randomNamespace} .product__list_img img{
221 width: 342px;
222 height: 230px;
223 object-fit: contain;
224 }
225 .product__list_${randomNamespace} .product__list_img{
226 margin-bottom: 22px;
227 background: white;
228 }
229 .product__list_${randomNamespace} .product__list_title h3{
230 font: normal normal 600 18px/22px Lexend;
231 letter-spacing: 0px;
232 color: #2C2C2C;
233 }
234 .product__list_${randomNamespace} .product__list_description{
235 font: normal normal 400 16px/26px Lexend;
236 letter-spacing: -0.48px;
237 color: #5C5C5C;
238 }
239 .product__list_${randomNamespace} .add-to-wish-list .wish-list-icon{
240 margin: 0;
241 }
242 .product__list_${randomNamespace} .add-to-wish-list .wish-list-icon .lexicon-icon-heart{
243 color: white;
244 }
245 .product__list_${randomNamespace} .add-to-wish-list .wish-list-icon .lexicon-icon-heart-full{
246 color: red;
247 }
248 .product__list_${randomNamespace} .add-to-wish-list .btn{
249 padding: 12px;
250 margin-right: 0;
251 background: #E8E8E8 0% 0% no-repeat padding-box;
252 border-color: #E8E8E8;
253 }
254 .product__list_${randomNamespace} .add-to-wish-list .text-truncate-inline{
255 display: none;
256 }
257 .product__list_${randomNamespace} .custom-checkbox input {
258 padding: 0;
259 height: initial;
260 width: initial;
261 margin-bottom: 0;
262 display: none;
263 cursor: pointer;
264 }
265 .product__list_${randomNamespace} .custom-checkbox label {
266 position: relative;
267 cursor: pointer;
268 }
269 .product__list_${randomNamespace} .custom-checkbox .custom-control-input:checked~.custom-control-label::after{
270 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20class='lexicon-icon-outline'%20d='M220.9%20377.2c-8%200-15.8-3.2-21.5-8.9l-91-91c-28.1-28.1%2014.8-71%2042.9-42.9l68.2%2068.2%20139.8-157.2c26.4-30%2072%2010.1%2045.6%2040.1L243.7%20366.9c-5.5%206.3-13.4%2010-21.8%2010.3h-1z'%20fill='%2358A031'/%3E%3C/svg%3E");
271 background-size: 100%;
272 background-position: 2px 2px;
273 }
274 .product__list_${randomNamespace} .custom-checkbox label:before {
275 content:'';
276 -webkit-appearance: none;
277 background: #E8E8E8 0% 0% no-repeat padding-box;
278 border-radius: 6px;
279 padding: 10px;
280 display: inline-block;
281 position: relative;
282 vertical-align: middle;
283 cursor: pointer;
284 margin-right: 5px;
285 }
286 .product__list_${randomNamespace} .custom-control{
287 margin-left: -16px;
288 }
289 .product__list_${randomNamespace} .custom-checkbox label .custom-control-label::before{
290 visibility: hidden;
291 }
292 .product__list_${randomNamespace} .custom-checkbox input:checked + label:after {
293 content: '';
294 display: block;
295 position: absolute;
296 top: 2px;
297 left: 9px;
298 width: 6px;
299 height: 14px;
300 border: solid #0079bf;
301 border-width: 0 2px 2px 0;
302 transform: rotate(45deg);
303 }
304 .product__list_${randomNamespace} .sku-product{
305 text-align: left;
306 display: block;
307 font-weight: 500;
308 line-height: 1rem !important;
309 }
310
311</style>