1<#assign cdn=(mlxUrlUtilService.getCdn(groupId))!"" />
2 <script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script>
3 <script src="https://unpkg.com/vue-router@4.2.5/dist/vue-router.global.js"></script>
4 <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
5 <link rel='stylesheet' href='https://unpkg.com/nprogress@0.2.0/nprogress.css'/>
6
7<#-- variables servicios -->
8 <#assign numElem=18 />
9 <#if (request.getParameter("page")?has_content)>
10 <#attempt>
11 <#assign currentPage=request.getParameter("page")?number - 1 />
12 <#if currentPage < 0>
13 <#assign currentPage=0 />
14 </#if>
15 <#recover>
16 <#assign currentPage=0 />
17 </#attempt>
18 <#else>
19 <#assign currentPage=0 />
20 </#if>
21 <#if (request.getParameter("prodId")?has_content)>
22 <#assign prodId=request.getParameter("prodId") />
23 <#else>
24 <#assign prodId='' />
25 </#if>
26 <#if (request.getParameter("catId")?has_content)>
27 <#assign catId=request.getParameter("catId") />
28 <#else>
29 <#assign catId='' />
30 </#if>
31<#-- OBTENER LISTA REFERENCIAS -->
32<#assign references=mlxUtilService.getReferences(groupId,themeDisplay.getLanguageId(),catId,prodId,currentPage,numElem,true,false) />
33<#-- OBTENER TOTAL PAGINAS -->
34<#assign totalPages=references.pages />
35<#-- OBTENER TOTAL ITEMS -->
36<#assign totalItems=references.count />
37<#--Se hace un ?replace para limpiar el json de los caracteres especiales (encoding) para que el ?eval no genere errores de Syntax error, se podria intentar probar con la version de freemarker (2.3.31) el ?eval_json https://freemarker.apache.org/docs/dgui_template_exp.html#dgui_template_exp_direct_string -->
38<#assign referencesList = references.references?replace('\\u','\\x')?replace('<[^>]+>','','r')?replace('<\\/i>','')?replace('<i>','') />
39<style>
40// Hide app until loaded
41[v-cloak] {
42 display: none;
43}
44
45[v-cloak] .corporate--references--client-list--filter {
46 pointer-events: none;
47 opacity: .5;
48}
49
50.loading {
51 display: grid;
52 place-content: center;
53 background: rgba(0, 0, 0, 0.3);
54 z-index: 999;
55 position: fixed;
56 top: 0;
57 left: 0;
58 bottom: 0;
59 right: 0;
60}
61
62#app {
63 position: relative;
64}
65
66.overlay {
67 position: absolute;
68 left: 0;
69 top: 0;
70 right: 0;
71 bottom: 0;
72 z-index: 4;
73 background-color: rgba(255, 255, 255, 0.8);
74}
75
76.overlay-content {
77 position: sticky;
78 transform: translateY(-40%);
79 -webkit-transform: translateY(-40%);
80 -ms-transform: translateY(-40%);
81 top: 40%;
82 left: 0;
83 right: 0;
84 text-align: center;
85 margin-top: max(250px, 26%);
86}
87
88#app:not([v-cloak])~.loading {
89 display: none;
90}
91
92#app:[v-cloak] .corporate--references--client-list--filter {
93 pointer-events: none;
94 opacity: .5;
95}
96
97/*FIX añadir coma por css excepto en el lastItem en lista de productos de mientras que hay productos copy ("*")y no podemos controlar el size del array*/
98.corporate--references--client-list--item--description span:not(:last-child):after {
99 content: ", "
100}
101
102/*Fix padding Pagination*/
103.lfr-pagination {
104 padding: 1rem 0 !important;
105}
106
107.pagination-bar {
108 margin: 0 !important;
109}
110
111.lfr-icon-menu-text {
112 margin-left: 0 !important;
113}
114
115.lfr-pagination a.disabled {
116 pointer-events: none;
117 display: none !important;
118}
119
120/*Fix selectors font bold*/
121.corporate--references--client-list--filter {
122 font-weight: normal;
123 font-family: inherit;
124}
125</style>
126
127 <div id="app" v-cloak>
128 <div class="overlay">
129 <div class="overlay-content">${corporate.img(cdn+"/o/corporate-theme/images/common/loading2.gif", false, 'alt=""', 'title=""', 'class="sending"')}</div>
130 </div>
131 <span id="corporate--filter-section--nav-anchor"></span>
132 <div class="corporate--references--client-list">
133 <div class="corporate--references--client-list--container">
134 <div class="corporate--references--client-list--row">
135 <h2 class="corporate--references--client-list--title">
136 <@corporate.mlxlanguage key="mlx.practical-case.see-practical-cases" />
137 </h2>
138 <div class="corporate--references--client-list--filters">
139 <div class="corporate--references--client-list--filter-wrapper">
140 <select class="corporate--references--client-list--filter" id="sectorSelector" :disabled="sectors.length == 0" v-model="sectorSelected" v-on:change="onChange($event)">
141 <option value="">
142 <@corporate.mlxlanguage key="mlx.practical-case.sector" />
143 </option>
144 <option :key="index" :value="Object.values(sector)[0]" v-for="(sector, index) in sectors">{{Object.keys(sector)[0]}}
145 </option>
146 </select>
147 </div>
148 <div class="corporate--references--client-list--filter-wrapper">
149 <select class="corporate--references--client-list--filter" id="productSelector" :disabled="products.length == 0" v-model="productSelected" v-on:change="onChange($event)">
150 <option value="">
151 <@corporate.mlxlanguage key="mlx.practical-case.product" />
152 </option>
153 <option :key="index" :value="Object.values(product)[0]" v-for="(product, index) in filterProducts">{{Object.keys(product)[0]}}
154 </option>
155 </select>
156 </div>
157 <div class="corporate--references--client-list--filter-wrapper-button">
158 <button v-on:click="resetFilters()" class="corporate--references--client-list--filters--reset">
159 <svg class="lexicon-icon lexicon-icon-reset" role="presentation" viewBox="0 0 512 512" style="fill:#fff; width:1rem; height:1rem">
160 <path class="lexicon-icon-outline" d="M256,0C179.5,0,110.9,33.5,64,86.7V64c0-44.5-64-43-64,0v96l0,0c0,18.5,15,32,32,32l0,0h96c41.5,0,43.5-64,0-64h-15.1c35.2-39.3,86.2-64,143.1-64c251,0,253,384,0,384c-95.1,0-174.1-69.2-189.3-160H2c15.7,126.3,123.5,224,254,224C593,512,598,0,256,0z"></path>
161 </svg>
162 </button>
163 </div>
164 </div>
165 </div>
166 <ul class="corporate--references--client-list--list" v-if="firstLoad" id="freemarker">
167 <#attempt>
168 <#if references.references?has_content>
169 <#list referencesList?eval as reference>
170 <li class="corporate--references--client-list--item">
171 <#if reference.pcase?has_content>
172 <#assign cursor='pointer' />
173 <#else>
174 <#assign cursor='auto' />
175 </#if>
176 <article class="corporate--references--client-list--item--card" style="cursor:${cursor}">
177 <figure class="corporate--references--client-list--item--figure">
178 <#if reference.pcase.title_alt_list_image??>
179 <#--imWidth-->
180 <#assign urlParamConcat=reference.pcase.list_image?contains("?")?then("&","?")>
181 <#--<img class="corporate--references--client-list--item--image" src="${reference.pcase.list_image}${urlParamConcat}imwidth=620" alt="${reference.pcase.list_image}">-->
182 ${corporate.img(reference.pcase.list_image+urlParamConcat+'imwidth=620', false, 'alt="' + reference.pcase.title_alt_list_image + '"', 'title="' + reference.pcase.title_alt_list_image + '"', 'class="corporate--references--client-list--item--image"', 'loading="lazy"')}
183 </#if>
184 </figure>
185 <figure class="corporate--references--client-list--item--logo-figure">
186 <#if reference.logo?has_content>
187 <#--<img class="corporate--references--client-list--item--logo" src="${reference.logo!}" alt="${reference.name!}">-->
188 ${corporate.img(reference.logo, false, 'alt="' + reference.name + '"', 'title="' + reference.name + '"', 'class="corporate--references--client-list--item--logo"', 'loading="lazy"')}
189 <#else>
190 <span class="corporate--references--client-list--item--logo">
191 ${reference.name}
192 </span>
193 </#if>
194 <#list reference.sectorCategories as sector>
195 <#list sector as sec , cod>
196 <figcaption class="corporate--references--client-list--item--sector">
197 ${sec}
198 </figcaption>
199 </#list>
200 </#list>
201 </figure>
202 <#if reference.pcase?has_content>
203 <span class="corporate--references--client-list--item--icon-figure">
204 <#if reference.pcase.video==true>
205 <#--<img class="corporate--references--client-list--item--icon" src="/documents/20128/6174241/ico_references_case_withvideo.svg/ce23d985-080e-36f8-cf81-ff4327ca83bd?t=1675436696064">-->
206 ${corporate.img('/documents/d/global/i-caso-practico-video', false, 'alt=""', 'title=""', 'class="corporate--references--client-list--item--icon"', 'loading="lazy"')}
207 <#assign gtm='data-gtm-event="hover,click" data-gtm-event-category="Grid_Item" data-gtm-event-label="Client_CpTrue_VidTrue"' />
208 <#else>
209 <#--<img class="corporate--references--client-list--item--icon" src="/documents/20128/6174241/ico_references_pcase_default.svg/150655e5-6370-2cdb-4137-474d4e8cf61c?t=1675436666447">-->
210 ${corporate.img('/documents/d/global/i-caso-practico', false, 'alt=""', 'title=""', 'class="corporate--references--client-list--item--icon"', 'loading="lazy"')}
211 <#assign gtm='data-gtm-event="hover,click" data-gtm-event-category="Grid_Item" data-gtm-event-label="Client_CpTrue_VidFalse"' />
212 </#if>
213 </span>
214 <a class="corporate--references--client-list--item--rollover" href="${reference.pcase.url}" ${gtm}>
215 <span class="corporate--references--client-list--item--upper-heading">
216 ${reference.name}
217 </span>
218 <h3 class="corporate--references--client-list--item--heading">
219 ${reference.pcase.name}
220 </h3>
221 <p class="corporate--references--client-list--item--description">
222 <#assign realProductIndex=0 />
223 <#list reference.products as product>
224 <#if !product.name?contains("*")>
225 <#if realProductIndex < 4 >
226 <span>${product.name}</span>
227 <#assign realProductIndex = realProductIndex + 1 />
228 </#if>
229 </#if>
230 </#list>
231 </p>
232 </a>
233 <#else>
234
235 <div class="corporate--references--client-list--item--rollover" data-gtm-event="hover,click" data-gtm-event-category="Grid_Item" data-gtm-event-label="Client_CpFalse">
236 <span class="corporate--references--client-list--item--upper-heading">
237 ${reference.name}
238 </span>
239 <h3 class="corporate--references--client-list--item--heading">
240 ${reference.activity}
241 </h3>
242 <p class="corporate--references--client-list--item--description">
243 <#assign realProductIndex=0 />
244 <#list reference.products as product>
245 <#if !product.name?contains("*")>
246 <#if realProductIndex < 4>
247 <span>
248 ${product.name}
249 </span>
250 <#assign realProductIndex=realProductIndex + 1 />
251 </#if>
252 </#if>
253 </#list>
254 </p>
255 </div>
256 </#if>
257 </article>
258 </li>
259 </#list>
260 </#if>
261 <#recover>
262 </#attempt>
263 </ul>
264 <ul class="corporate--references--client-list--list" v-else-if="!firstLoad && references.length > 0" id="vue">
265 <template :key="index" v-for="(reference, index) in references">
266 <li class="corporate--references--client-list--item">
267 <article class="corporate--references--client-list--item--card" v-bind:style="Object.keys(reference.pcase).length ? 'cursor:pointer' : 'cursor:auto'">
268 <figure class="corporate--references--client-list--item--figure">
269 <template v-if="Object.keys(reference.pcase).length">
270 <template v-if="reference.pcase.list_image.indexOf('&') == -1">
271 <img class="corporate--references--client-list--item--image" v-if="reference.pcase.list_image.length" :src="reference.pcase.list_image + '?imwidth=620'" :alt="reference.pcase.title_alt_list_image" loading="lazy">
272 </template>
273 <template v-else>
274 <img class="corporate--references--client-list--item--image" v-if="reference.pcase.list_image.length" :src="reference.pcase.list_image + '&imwidth=620'" :alt="reference.pcase.title_alt_list_image" loading="lazy">
275 </template>
276 </template>
277 </figure>
278 <figure class="corporate--references--client-list--item--logo-figure">
279 <img class="corporate--references--client-list--item--logo" v-if="reference.logo.length" :src="reference.logo" :alt="reference.name" loading="lazy">
280 <span class="corporate--references--client-list--item--logo" v-else>{{reference.name}}
281 </span>
282 <template :key="key" v-for="(key, value) in reference.sectorCategories">
283 <figcaption class="corporate--references--client-list--item--sector" v-for="(cod , sec) in key">{{ sec }}
284 </figcaption>
285 </template>
286 </figure>
287 <template v-if="Object.keys(reference.pcase).length">
288 <span class="corporate--references--client-list--item--icon-figure">
289 <img class="corporate--references--client-list--item--icon" v-if="reference.pcase.video == true" src="/documents/d/global/i-caso-practico-video" loading="lazy">
290 <img class="corporate--references--client-list--item--icon" v-else src="/documents/d/global/i-caso-practico" loading="lazy">
291 </span>
292 <a class="corporate--references--client-list--item--rollover" v-bind:href="reference.pcase.url" data-gtm-event="hover,click" data-gtm-event-category="Grid_Item" :data-gtm-event-label="reference.pcase.video == true ? 'Client_CpTrue_VidTrue' : 'Client_CpTrue_VidFalse'">
293 <span class="corporate--references--client-list--item--upper-heading">{{reference.name}}
294 </span>
295 <h3 class="corporate--references--client-list--item--heading">{{reference.pcase.name}}
296 </h3>
297 <p class="corporate--references--client-list--item--description">
298 <template v-for="(key, index) in reference.products">
299 <span v-if="(key.name.indexOf('*') == -1) && (realProductIndex < 4)">{{key.name}}
300 </span>
301 </template>
302 </p>
303 </a>
304 </template>
305 <template v-else>
306 <div class="corporate--references--client-list--item--rollover" data-gtm-event="hover, click" data-gtm-event-category="Grid_Item" data-gtm-event-label="Client_CpFalse">
307 <span class="corporate--references--client-list--item--upper-heading">{{reference.name}}</span>
308 <h3 class="corporate--references--client-list--item--heading">{{reference.activity}}
309 </h3>
310 <p class="corporate--references--client-list--item--description">
311 <template :key="key" v-for="(key, index) in reference.products">
312 <span v-if="(key.name.indexOf('*') == -1) && (realProductIndex < 4)">{{key.name}}
313 </span>
314 </template>
315 </p>
316 </div>
317 </template>
318 </article>
319 </li>
320 </template>
321 </ul>
322 <ul v-else>
323 <p>No hay datos</p>
324 </ul>
325 <#--<h2>CurrentPage : {{page}} </h2>-->
326 <#-- valorar si usar variable this.$router.history.current.path o poner por freemarker -->
327 <div class="pagination-bar">
328 <!--section class="pagination--container"-->
329
330 <div class="clearfix lfr-pagination">
331 <div class="lfr-pagination-config">
332 <div class="lfr-pagination-page-selector">
333 <div class="btn-group lfr-icon-menu current-page-menu">
334 <a class="dropdown-toggle direction-down max-display-items-15 btn btn-default">
335 <span v-if="1 <= page && page <= totalPages" class="lfr-icon-menu-text">
336 <#assign pagText><@corporate.mlxlanguage key="mlx.search.paginate" /></#assign>
337 ${pagText?replace('0','{ page }')?replace('1','{ totalPages }')}
338 </span>
339 </a>
340 </div>
341 </div>
342 </div>
343 <ul class="lfr-pagination-buttons pager" v-if="1 <= page && page <= totalPages">
344 <li>
345 <router-link onclick="pushSpaEvent(this)" :class="{ disabled: isInFirstPage }" spa-clic="click" data-gtm-event-category="Grid_Pagination" data-gtm-event-label="First"
346 :to="{ path: '${themeDisplay.getLayout().getFriendlyURL()}', query: newQueryCopyValue( 'page', 1)}" > ←
347 <@corporate.mlxlanguage key="first" />
348 </router-link>
349 </li>
350 <li v-if="!isInFirstPage">
351 <router-link onclick="pushSpaEvent(this)" :class="{ disabled: isInFirstPage }" spa-clic="click" data-gtm-event-category="Grid_Pagination" data-gtm-event-label="Previous"
352 :to="{ path: '${themeDisplay.getLayout().getFriendlyURL()}', query: newQueryCopyValue( 'page', parseInt(this.page)-1)}" >
353 <@corporate.mlxlanguage key="previous" />
354 </router-link>
355 </li>
356 <li v-if="!isInLastPage">
357 <router-link onclick="pushSpaEvent(this)" :class="{ disabled: isInLastPage }" spa-clic="click" data-gtm-event-category="Grid_Pagination" data-gtm-event-label="Next"
358 :to="{ path: '${themeDisplay.getLayout().getFriendlyURL()}', query: newQueryCopyValue( 'page', parseInt(this.page)+1)}" >
359 <@corporate.mlxlanguage key="next" />
360 </router-link>
361 </li>
362 <li>
363 <router-link onclick="pushSpaEvent(this)" :class="{ disabled: isInLastPage }" spa-clic="click" data-gtm-event-category="Grid_Pagination" data-gtm-event-label="Last"
364 :to="{ path: '${themeDisplay.getLayout().getFriendlyURL()}', query: newQueryCopyValue( 'page', totalPages)}" >
365 <@corporate.mlxlanguage key="last" /> →
366 </router-link>
367 </li>
368 </ul>
369 </div>
370 </div>
371 </div>
372 </div>
373 </div>
374
375
376 <script>
377
378 /*Personalizacion gtm paginador*/
379
380 function pushSpaEvent(element) {
381 if ("cache" in mecalux && (window.google_tag_manager) && ("dataLayer" in window)) {
382 let eventName = "click";
383 let eventCategory = element.getAttribute("data-gtm-event-category");
384 let eventLabel = element.getAttribute("data-gtm-event-label") || "";
385 let href = element.getAttribute("href");
386
387 let infoGtm = {};
388 infoGtm.clickType = 'CTA';
389 infoGtm.clickLocation = 'Body';
390 infoGtm.clickElement = element.getAttribute('class') || '';
391 infoGtm.pagePath = mecalux.pagePath;
392
393 addEventSpaToDataLayer(eventName, eventCategory, eventLabel, infoGtm);
394 }
395 }
396
397 //construye un objeto para hacer el push a dataLayer
398 let addEventSpaToDataLayer = function(eventName, eventCategory, eventLabel, infoGtm, eventCallback) {
399 let pushData = {};
400 pushData.event = eventName || "";
401 pushData.eventCategory = eventCategory || "";
402 pushData.eventLabel = eventLabel || "";
403 if (infoGtm) {
404 pushData.clickType = infoGtm.clickType || "";
405 pushData.clickLocation = infoGtm.clickLocation || "";
406 pushData.clickElement = infoGtm.clickElement || "";
407 pushData.pagePath = infoGtm.pagePath || "";
408 }
409 pushData.eventTimeout = 2000;
410 pushData.eventCallback = eventCallback || null;
411
412 dataLayerSpaPush(pushData);
413 }
414
415 //push
416 let dataLayerSpaPush = function(data) {
417 if (dataLayer) {
418 dataLayer.push(data);
419 }
420 }
421
422 window.addEventListener('load', function() {
423 //num elementos a mostrar
424 var numElem = ${numElem};
425
426
427 // Define routes
428 var routes = [
429 {
430 path: '${themeDisplay.getLayout().getFriendlyURL()}',
431 component: {template:'<span style="display: none;"></span>'},
432 name: 'referenciasSPA',
433 }, // tambien sirve Liferay.ThemeDisplay.getLayoutRelativeURL()
434{
435 path: '${themeDisplay.getLayout().getFriendlyURL()}'+'/:catchAll(.*)',
436 name: 'error'
437 }
438 ]
439 // Create the router instance and pass the `routes` option
440 const router = VueRouter.createRouter({
441 history: VueRouter.createWebHistory(),
442 routes: routes,
443 scrollBehavior(to, from, savedPosition) {
444 if (!isNaN(to.query.page)) {
445 document.getElementById('corporate--filter-section--nav-anchor').scrollIntoView();
446 } else if (from.name !== undefined) {
447 document.getElementById('corporate--filter-section--nav-anchor').scrollIntoView();
448 }
449 },
450 })
451
452 NProgress.configure({
453 speed: 200,
454 parent: '#stickyHeader',
455 template: '<progress max="100" role="bar" value="100" class="corporate--scroll-progress-bar"></progress>'
456 })
457 router.beforeEach((to, from, next) => {
458 NProgress.start()
459 NProgress.set(0.6)
460 next()
461 document.getElementsByClassName('overlay')[0].style.display = 'block'
462 })
463 router.afterEach(() => {
464 setTimeout(function(){
465 NProgress.done()
466 document.getElementsByClassName('overlay')[0].style.display = 'none'
467 }, 1000);
468 })
469
470 const { createApp } = Vue
471
472 let app = Vue.createApp({
473 data() {
474 return {
475 sector: [],
476 productSelected: '${prodId}',
477 sectorSelected: '${catId}',
478 products: ${references.productSelector},
479 sectors: ${references.sectorSelector},
480 references: [],
481 catId: '',
482 prodId: '',
483 realProductIndex: 0,
484 page: ${currentPage},
485 totalItems: ${totalItems},
486 totalPages: ${totalPages},
487 respondToRouteChanges: true,
488 firstLoad: undefined,
489 }
490 },
491 created: function created() {
492 // Initially load store dat
493 // this.loadData();
494 },
495 mounted: function mounted() {
496 this.$watch(
497 () => this.$route.params,
498 (toParams, previousParams) => {
499 if (this.$route.query.page > 0) {
500 this.page = this.$route.query.page;
501 } else {
502 if (this.$route.query.page !== undefined || Object.keys(this.$route.query).length > 0) {
503 this.page = 1;
504 router.push('${themeDisplay.getLayout().getFriendlyURL()}')
505
506 }else {
507 this.page = 1;
508 }
509 }
510 }
511 )
512 },
513 watch: {
514 $route: function(to, from) {
515 this.loadData();
516 this.firstLoad = from.name == null ? true : false
517 },
518
519 },
520 computed: {
521 isInFirstPage() {
522 return this.page == 1;
523 },
524 isInLastPage() {
525 return this.page == this.totalPages;
526 },
527 filterProducts() {
528 return this.products.filter(product => !Object.keys(product)[0].includes("*"));
529 },
530 },
531 methods: {
532 loadData: function loadData() {
533 //sector
534 this.sectorSelected = this.queryCatId();
535 this.catId = this.queryCatId();
536 //product
537 this.productSelected = this.queryProdId();
538 this.prodId = this.queryProdId();
539 this.page = this.$route.query.page || 1;
540
541 // Update canonical href
542 document.querySelector('link[rel="canonical"]').setAttribute('href', Liferay.ThemeDisplay.getPortalURL() + this.$route.path + '?page=' + this.page);
543 // Call API to get shop data
544 mecalux.remote.ws.getReferences(this.queryCatId(), this.queryProdId(), this.queryPage(), numElem, true, false, function(obj) {
545 app.sector = obj.sectorCategories;
546 app.totalPages = obj.pages;
547 app.totalItems = obj.count;
548 app.products = obj.productSelector;
549 app.sectors = obj.sectorSelector;
550 app.references = obj.references;
551 });
552
553 },
554 setCatId: function setCatId() {
555 if (!this.respondToRouteChanges) {
556 // console.log('ignoring since route changes ignored')
557 return;
558 }
559 if (this.catId !== this.queryCatId) this.catId = this.queryCatId;
560 },
561 queryCatId: function queryCatId() {
562 return this.$route.query.catId || '';
563 },
564 queryProdId: function queryProdId() {
565 return this.$route.query.prodId || '';
566 },
567 queryPage: function queryPage() {
568 var copyQuery = Object.assign({}, this.$route.query);
569 var copyQueryPage = copyQuery.page - 1;
570 return (copyQueryPage > 0) ? copyQueryPage : 0;
571 },
572 // clona la query actual y agrega un parametro (para sustituir a '...' en ie)
573 newQueryCopyValue: function newQueryCopyValue(newParam, newValue) {
574 var copyQuery = {};
575 if(this.queryCatId()){
576 copyQuery['catId'] = this.queryCatId();
577 }
578 if(this.queryProdId()){
579 copyQuery['prodId'] = this.queryProdId();
580 }
581 copyQuery[newParam] = newValue;
582 return copyQuery;
583 },
584 updateQueryParams: function updateQueryParams() {
585 //cambiar parametros de la query de la url (?) sin tener que hacer reload
586 this.respondToRouteChanges = false;
587 //params
588 var params = {};
589 if (this.catId !== '') {
590 params['catId'] = this.catId;
591 }
592 if (this.prodId !== '') {
593 params['prodId'] = this.prodId;
594 }
595 if (this.page >= 1) {
596 params['page'] = this.page;
597 }
598 //if(Object.keys(params).length){
599 router.push({
600 path: '${themeDisplay.getLayout().getFriendlyURL()}',
601 query: params
602 }).catch(function(e) {
603 //para evitar el error Avoided redundant navigation
604 console.log(e);
605 }).finally(function() {
606 //para que se pueda hacer reload de nuevo en la pagina
607 this.respondToRouteChanges = true;
608 });
609 //}
610 },
611 onChange: function onChange(event) {
612 if (event.target.id === "sectorSelector") this.catId = event.target.value;
613 if (event.target.id === "productSelector") this.prodId = event.target.value;
614 this.page = 1;
615 this.updateQueryParams();
616 },
617 resetFilters: function resetFilters() {
618 this.catId = '';
619 this.prodId = '';
620 this.page = 1;
621 this.updateQueryParams();
622 }
623 },
624 }).use(router).mount('#app');
625 // Now the app has started!
626 },
627 false)
628 </script>