Clientes

Clientes

Soluciones de almacenamiento a medida para cada empresa y sector

Más de 55 años implementando proyectos en empresas de todos los tamaños y sectores

Conozca en profundidad algunas de las soluciones de vanguardia desarrolladas por Mecalux

La satisfacción del cliente, nuestra prioridad

Implementaciones exitosas en pequeñas, medianas y grandes empresas de todos los sectores

Al asociarse con una empresa tecnológica como Mecalux, nuestros clientes obtienen una ventaja competitiva con soluciones integrales y diseños de almacenamiento adaptados a sus necesidades.

Se ha producido un error al procesar la plantilla.
Java method "com.mecalux.util.service.impl.MlxUtilServiceImpl.getReferences(long, String, String, String, int, int, boolean, boolean)" threw an exception when invoked on com.mecalux.util.service.impl.MlxUtilServiceImpl object "com.mecalux.util.service.impl.MlxUtilServiceImpl@5713d296"; see cause exception in the Java stack trace.

----
FTL stack trace ("~" means nesting-related):
	- Failed at: #assign references = mlxUtilService.g...  [in template "20101#20128#REFERENCIAS-TPL" at line 32, column 1]
----
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)}" > &larr; 
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" /> &rarr; 
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> 

LO QUE DICEN NUESTROS CLIENTES

Cepsa

El nuevo almacén automático ha supuesto una de las mayores inversiones para el negocio de lubricantes de Cepsa. Con Mecalux hemos encontrado el partner ideal, el resultado ha sido excelente. Hoy tenemos integrados los procesos de fabricación, envasado y expedición en una sola instalación.

Stéphane Barthélémy Responsable de Operaciones
Cepsa
Heidelberg

Con Easy WMS hemos mejorado los tiempos de respuesta, la ubicación de los productos y los controles de calidad de los artículos. Gracias al nuevo software de Mecalux hemos simplificado la gestión del inventario.

Sonia Ros Responsable de logística
Heildelberg
Adidas

La solución instalada por Mecalux nos ha permitido alcanzar el principal objetivo de este almacén: preparar los pedidos y enviarlos a los clientes en el menor tiempo posible. Además, también hemos optimizado nuestro espacio de almacenamiento a fin de lograr un aumento de la capacidad.

Felix Felder Director de Operaciones
Adidas
Decathlon

La gran calidad y la distribución de los racks nos han ayudado a incrementar notablemente la productividad en las tareas de picking. Ahora podemos abastecer a los usuarios que compran online y a todas las tiendas de Decathlon en el Reino Unido con mayor rapidez.

Zsolt Kabai Project Manager
Decathlon UK
Michelin

Elegimos a Mecalux como proveedor para nuestro almacén de gomas de Vitoria después de considerar las propuestas de otras cinco compañías. La elección se debe a su experiencia construyendo instalaciones autoportantes y a sus productos de gran calidad.

Antonio J. García-Montalvo Responsable del proyecto del almacén automatizado
Michelin