Clienți

Clienți

Soluții de depozitare personalizate pentru fiecare companie și fiecare sector

Peste 55 de ani de implementări de proiecte în companii de toate dimensiunile și în toate sectoarele

Vă prezentăm în detaliu câteva soluții de ultimă oră dezvoltate de Mecalux

Missconfigured or missplaced portlet, no content found
Dynamic Content: false
Master Name: Clients_Block_Video_Content
Template Key:
O eroare a apărut în timpul procesării șablonului.
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> 

CE SPUN CLIENȚII NOȘTRI

Cepsa

Noul depozit automatizat este una dintre cele mai mari investiții făcute de către divizia de lubrifianți Cepsa . Cu Mecalux am găsit partenerul ideal, iar rezultatele a fost excelente. Astăzi, procesele noastre de fabricare, ambalare și expediere sunt integrate într-o singură unitate de producție.

Stéphane Barthélémy Manager de Operațiuni
Cepsa
Heidelberg

Cu Easy WMS am îmbunătățit timpii de răspuns, locația produselor și controalele de calitate ale produselor. Datorită noului software al Mecalux am simplificat gestiunea de stocuri.

Sonia Ros Manager de logistică
Heildelberg
Adidas

Soluția instalată de Mecalux ne-a permis să atingem obiectivul principal al acestui depozit: pregătirea comenzilor și trimiterea acestora către clienți în cel mai scurt timp posibil. De asemenea , ne-am optimizat spațiul de depozitare pentru a extinde capacitatea.

Felix Felder Director de operațiuni
Adidas
Decathlon

Calitatea ridicată a rafturilor și distribuția acestora ne-au ajutat să mărim productivitatea semnificativ pentru sarcinile de picking. Acum putem livra mai rapid pentru clienții online și pentru toate magazinele Decathlon din Marea Britanie.

Zsolt Kabai Manager de proiect
Decathlon UK
Michelin

Am ales Mecalux ca furnizor pentru depozitul nostru de anvelope după ce am luat în considerare propunerile altor 5 companii. Alegerea s-a datorat experienței Mecalux în construirea de rafturi autoportante și produselor sale de înaltă calitate.

Antonio J. García-Montalvo Manager de proiect - Depozit Automatizat
Michelin