Start Digital | DBS Digital Solutions | DBS SME Banking
- Home
- Start Digital Pack
- Start Digital Form 2.0 Solutions
Start Digital
Enjoy 6 Months Free Subscription to Digital Solutions!
- Home
- Start Digital Pack
- Start Digital Form 2.0 Solutions
Start Digital
Enjoy 6 Months Free Subscription to Digital Solutions!
An error occurred while processing the template.
?sort_by(...) failed at sequence index 0: The "ProductCategory" subvariable was null or missing.
----
FTL stack trace ("~" means nesting-related):
- Failed at: #list ProductItem.getSiblings()?sort_... [in template "20100#20136#1636260" at line 953, column 97]
---- 1<style> 2.smecardtemplate .liferay-ddm-form-field-checkbox-multiple .custom-control { 3 display: flex; 4} 5 6.smecardtemplate .portlet-forms form label { 7 display: flex; 8} 9 10.smecardtemplate .portlet-forms form .tick { 11 z-index: 98; 12 left: 3px; 13 top: 7px; 14 position: absolute; 15} 16 17.smecardtemplate .portlet-forms form .custom-control-label-text { 18 display: flex; 19} 20 21.smecardtemplate .row .col-md-1.col-sm-1.col-2 { 22 max-width: 10%; 23} 24 25.portlet-content, .portlet-minimized .portlet-content-container { 26 padding: 0; 27} 28 29.portlet-forms { 30 padding: 0 16px; 31} 32 33/*** Main ***/ 34 35.sme-academy { 36 overflow: auto; 37 margin-top: 50px; 38} 39.sme-academy h2.sme-academy__title { 40 margin: 0 auto; 41 max-width: 992px; 42 font-weight: 700; 43 font-size: 32px; 44 color: #2e2e2e; 45 margin-bottom: 10px; 46} 47.sme-academy p.sme-academy__description { 48 margin: 0 auto; 49 max-width: 992px; 50 font-size: 14px; 51 color: #909090; 52 margin-bottom: 16px; 53} 54.sme-academy *, .sme-academy *:before, .sme-academy *:after { 55 margin: 0; 56 padding: 0; 57 box-sizing: border-box; 58} 59.sme-academy .sme-academy-tab-main { 60 margin: 0 auto; 61 text-align: center; 62} 63.sme-academy .sme-academy-tab-main .sme-academy-content { 64 background: #fff; 65 color: #373737; 66} 67.sme-academy .sme-academy-tab-main .sme-academy-content > div { 68 display: block; 69} 70.sme-academy .sme-academy-tab-main input { 71 display: none; 72} 73.sme-academy .sme-academy-tab-main input:checked + label { 74 background: #f33; 75 color: #fff; 76} 77 .sme-academy .sme-academy-tab-main > label { 78 display: inline-block; 79 padding: 15px 25px; 80 font-weight: 600; 81 text-align: center; 82 margin-bottom: 50px; 83 border: 1px solid #f33; 84} 85 .sme-academy .sme-academy-tab-main label:hover { 86 color: #909090; 87 cursor: pointer; 88} 89 .sme-academy #sme-academy-tab1:checked ~ .sme-academy-content #sme-academy-content1, .sme-academy #sme-academy-tab2:checked ~ .sme-academy-content #sme-academy-content2 { 90 display: block; 91} 92 93.move-top-to-card-container { 94 display: flex !important; 95 justify-content: flex-end; 96 padding-bottom: 8px; 97 padding-right: 40px; 98 padding-top: 5px; 99} 100 101.at_flat_counter { 102 margin: 0 5px !important; 103 padding: 0 6px !important; 104} 105 106/*** Single Select ***/ 107 108.product-card-single-select-layout { 109 max-width: 992px; 110 margin: 0 auto; 111 overflow: hidden; 112} 113.product-card-single-select-layout .product-card-tabs { 114 max-width: 992px; 115 text-align: left; 116} 117/* .product-card-single-select-layout .product-card-tabs .product-card-content > div { 118 display: none; 119} */ 120.product-card-single-select-layout .product-card-tabs input { 121 display: none; 122} 123.product-card-single-select-layout .product-card-tabs label { 124 display: inline-block; 125 border-radius: 4px 4px 0 0; 126 height: 50px; 127 width: 160px; 128 font-weight: 600; 129 text-align: center; 130 padding-top: 14px; 131 padding-bottom: 0; 132 margin: 0; 133} 134.product-card-single-select-layout .product-card-tabs label:hover { 135 color: #e5e5e5; 136 cursor: pointer; 137} 138.product-card-single-select-layout .product-card-tabs__separator { 139 padding: 0; 140 margin-top: 0; 141 margin-bottom: 50px; 142 border: 1px solid #e5e5e5; 143} 144.product-card-single-select-layout #product-card-tab1:checked ~ .product-card-content #product-card-content1, .product-card-single-select-layout #product-card-tab2:checked ~ .product-card-content #product-card-content2 { 145 display: block; 146} 147.product-card-single-select-layout .product-card-layout { 148 text-align: left; 149 list-style: none; 150 margin: 0 auto; 151 padding: 0; 152 max-width: 992px; 153 overflow: auto; 154 display: flex; 155 flex-wrap: wrap; 156 margin-bottom: 100px; 157} 158.product-card-single-select-layout .product-card-layout li:nth-of-type(3n-1) { 159 margin-left: 22px; 160 margin-right: 22px; 161} 162 163.product-card-single-select-layout .product-card-layout .product-card-content__modal-body li { 164 margin-left: 0px; 165 margin-right: 0px; 166} 167 168.product-card-multi-select-layout .product-card-layout .product-card-content__modal-body li { 169 margin-left: 0px; 170 margin-right: 0px; 171} 172.product-card-single-select-layout .product-card-layout .product-card-checkbox { 173 display: none; 174 width: 300px; 175 height: 500px; 176 background: #fff; 177 border: 1px solid #dcdcdc; 178 border-radius: 4px; 179 margin-bottom: 22px; 180 position:relative; 181} 182.product-card-single-select-layout .product-card-layout .product-card-checkbox__image { 183 border-radius: 4px 4px 0 0; 184 width: 300px; 185 height: 144px; 186 object-fit: cover; 187 background-color: #dcdcdc; 188} 189.product-card-single-select-layout .product-card-layout .product-card-checkbox .product-card-content { 190 margin-left: 24px; 191 margin-right: 24px; 192 margin-top: 16px; 193 margin: bottom: 0px; 194} 195.product-card-single-select-layout .product-card-layout .product-card-checkbox .product-card-content__title { 196 font-weight: 700; 197 font-size: 20px; 198 color: #333; 199 /*Restrict 3 lines, 42 characters*/ 200 overflow: hidden; 201 text-overflow: ellipsis; 202 display: -webkit-box; 203 line-height: 25px; 204 max-height: 75px; 205 -webkit-line-clamp: 3; 206 -webkit-box-orient: vertical; 207} 208.product-card-single-select-layout .product-card-layout .product-card-checkbox .product-card-content__subtitle { 209 margin-top: 8px; 210 font-size: 14px; 211 color: #909090; 212} 213.product-card-single-select-layout .product-card-layout .product-card-checkbox .product-card-content__time { 214 font-size: 14px; 215 color: #909090; 216 margin-top: 8px; 217 margin-bottom: 8px; 218} 219.product-card-single-select-layout .product-card-layout .product-card-checkbox .product-card-content__description { 220 margin-top: 16px; 221 width: 250px; 222 height: 90px; 223 font-size: 14px; 224 line-height: 17px; 225} 226.product-card-single-select-layout .product-card-layout .product-card-checkbox .product-card-content__btn-info, 227.product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-content__btn-info 228{ 229 width: 93%; 230 height: 24px; 231 color: #909090; 232 display: block; 233 border: none; 234 font-size: 14px; 235 text-align: left; 236 padding-top: 0; 237 cursor: pointer; 238 margin-left:24px; 239 margin-top: 8px; 240 margin-bottom: 16px; 241 display: flex; 242 align-items: center; 243} 244.product-card-single-select-layout .product-card-layout .product-card-checkbox .product-card-content__btn-info:hover, 245.product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-content__btn-info:hover { 246 color: #000; 247 text-decoration: underline; 248} 249 .product-card-layout .product-card-checkbox .product-card-content__modal { 250 display: none; 251 position: fixed; 252 z-index: 1001; 253 padding-top: 0; 254 left: 0; 255 top: 0; 256 width: 100%; 257 height: 100%; 258 overflow: hidden; 259 background-color: rgba(0, 0, 0, 0.5); 260} 261 .product-card-layout .product-card-checkbox .product-card-content__modal.active { 262 display: block; 263} 264.product-card-layout .product-card-checkbox .product-card-content__modal-content { 265 top: 50vh; 266 background-color: #fff; 267 margin: 0 auto; 268 position: relative; 269 margin-top: -210px; 270 max-width: 640px; 271 max-height: 420px; 272 border-radius: 4px; 273 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 274} 275.product-card-layout .product-card-checkbox .product-card-content__modal-content.active { 276 -webkit-animation-name: comedown; 277 -webkit-animation-duration: 0.4s; 278 animation-name: comedown; 279 animation-duration: 0.4s; 280} 281@-webkit-keyframes comedown { 282 from { 283 top: -300px; 284 opacity: 0; 285 } 286 to { 287 top: 50vh; 288 opacity: 1; 289 } 290} 291@keyframes comedown { 292 from { 293 top: -300px; 294 opacity: 0; 295 } 296 to { 297 top: 50vh; 298 opacity: 1; 299 } 300} 301.product-card-layout .product-card-checkbox .product-card-content__modal-header { 302 height: 70px; 303 padding: 2px 16px; 304 text-align: center; 305 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.01); 306} 307.product-card-layout .product-card-checkbox .product-card-content__modal-header .product-card-content_modal-close { 308 color: black; 309 font-size: 32px; 310 cursor: pointer; 311 position: absolute; 312 left: 20px; 313 top: 12px; 314} 315.product-card-layout .product-card-checkbox .product-card-content__modal-header .product-card-content_modal-download { 316 color: black; 317 font-size: 24px; 318 cursor: pointer; 319 position: absolute; 320 right: 20px; 321 top: 16px; 322} 323.product-card-layout .product-card-checkbox .product-card-content__btn-info .ico-information-line{ 324 color: #909090; 325 font-size: 18px; 326 margin-right: 5px; 327} 328.product-card-layout .product-card-checkbox .product-card-content__modal-header .product-card-content_modal-close:hover { 329 color: black; 330 text-decoration: none; 331} 332.product-card-layout .product-card-checkbox .product-card-content__modal-header h2 { 333 font-size: 16px; 334 font-weight: bold; 335 margin-top: 24px; 336} 337.product-card-layout .product-card-checkbox .product-card-content__modal-body { 338 padding: 12px 24px; 339 overflow: auto; 340 height: 270px; 341 font-size: 14px; 342 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.01); 343 -ms-overflow-style: none; 344 scrollbar-width: none; 345} 346.product-card-single-select-layout .product-card-layout .product-card-checkbox .product-card-content__modal-body::-webkit-scrollbar { 347 display: none; 348} 349 .product-card-layout .product-card-checkbox .product-card-content__modal-footer { 350 text-align: center; 351 height: 100px; 352} 353.product-card-layout .product-card-checkbox .product-card-content__modal-btn-cta { 354 margin-top: 20px; 355 background-color: #f33333; 356 color: #fff; 357 border: 1px solid #ee1818; 358 border-radius: 4px; 359 height: 40px; 360 width: 160px; 361 cursor: pointer; 362} 363.product-card-layout .product-card-checkbox .product-card-content__modal-btn-cta:hover { 364 background-color: #ee1818; 365} 366 367.product-card-layout .product-card-checkbox .product-card-footer { 368 position: absolute; 369 bottom: 0px; 370 width: 100%; 371 left: 0px; 372} 373.product-card-single-select-layout .product-card-layout .product-card-checkbox .product-card-separator { 374 /*margin-left: 24px; 375 margin-right: 24px;*/ 376 margin-top: 16px; 377 margin-bottom: 16px; 378} 379.product-card-single-select-layout .product-card-layout .product-card-checkbox .product-card-group { 380 cursor: pointer; 381} 382.product-card-single-select-layout .product-card-layout .product-card-checkbox .product-card-group__btn { 383 margin: 0 auto; 384 text-align: center; 385 display: block; 386 font-size: 14px; 387 background-color: #fff; 388 color: #ee1818; 389 border: 1px solid #ee1818; 390 border-radius: 4px; 391 height: 30px; 392 width: 140px; 393 cursor: pointer; 394} 395.product-card-single-select-layout .product-card-layout .product-card-checkbox .product-card-group__btn:hover { 396 background-color: #ee1818; 397 color: #fff; 398 text-decoration: none; 399} 400@media (max-width: 991px) and (min-width: 769px) { 401 .product-card-single-select-layout { 402 max-width: 622px; 403 } 404 .product-card-single-select-layout .product-card-layout { 405 margin-left: 0px; 406 } 407 .product-card-single-select-layout .product-card-layout li:nth-of-type(3n-1) { 408 margin-left: 0px; 409 margin-right: 0px; 410 } 411 .product-card-single-select-layout .product-card-layout li:nth-of-type(2n-1) { 412 margin-right: 22px; 413 } 414} 415 @media (max-width: 767px) { 416 417 .sme-academy h2.sme-academy__title { 418 padding:0px 24px 0px 24px; 419 } 420 421 .sme-academy p.sme-academy__description { 422 padding:0px 24px 0px 24px; 423 } 424 425 .product-card-single-select-layout .product-card-layout { 426 scroll-snap-type: x mandatory; 427 overflow-x: auto; 428 overflow-y: hidden; 429 height: 576px; 430 flex-wrap: inherit; 431 margin-right: 24px; 432 margin-left:24px; 433 } 434 435 .product-card-single-select-layout .product-card-layout::-webkit-scrollbar{ 436 display: none; 437 width: 0px !important; 438 } 439 .product-card-single-select-layout .product-card-layout li:nth-of-type(3n-1) { 440 margin-left: 0px; 441 margin-right: 22px; 442 } 443 .product-card-single-select-layout .product-card-layout .product-card-checkbox { 444 scroll-snap-align: center; 445 margin: 0px; 446 margin-right: 22px; 447 } 448 449 p.tag-description { 450 margin-left: 25px; 451 } 452} 453 454/*** Multi Select ***/ 455 456.product-card-multi-select-layout { 457 max-width: 992px; 458 margin: 0 auto; 459 overflow: hidden; 460} 461 .product-card-multi-select-layout .product-card-tabs { 462 max-width: 992px; 463 text-align: left; 464} 465/* .product-card-multi-select-layout .product-card-tabs .product-card-content > div { 466 display: none; 467} */ 468 .product-card-multi-select-layout .product-card-tabs__tab { 469 display: none; 470} 471 .product-card-multi-select-layout .product-card-tabs__tab:checked + label { 472 background: #e5e5e5; 473 color: black; 474} 475 .product-card-multi-select-layout .product-card-tabs__label { 476 display: inline-block; 477 border-radius: 4px 4px 0 0; 478 height: 50px; 479 width: 160px; 480 font-weight: 600; 481 text-align: center; 482 padding-top: 14px; 483 padding-bottom: 0; 484 margin: 0; 485} 486 .product-card-multi-select-layout .product-card-tabs__label:hover { 487 color: #e5e5e5; 488 cursor: pointer; 489} 490 .product-card-multi-select-layout .product-card-tabs__separator { 491 padding: 0; 492 margin-top: 0; 493 margin-bottom: 50px; 494 border: 1px solid #e5e5e5; 495} 496.product-card-tabs input[type="radio"][data-tag="All"]:checked ~.product-card-content li.product-card-checkbox, 497.product-card-tabs input[type="radio"][data-tag="accounting"]:checked ~ .product-card-content li.product-card-checkbox[data-tag="accounting"], 498.product-card-tabs input[type="radio"][data-tag="humanresources"]:checked ~ .product-card-content li.product-card-checkbox[data-tag="humanresources"], 499.product-card-tabs input[type="radio"][data-tag="it"]:checked ~ .product-card-content li.product-card-checkbox[data-tag="it"] { 500 display: block; 501} 502 .product-card-multi-select-layout .product-card-layout { 503 text-align: left; 504 list-style: none; 505 padding: 0; 506 overflow: auto; 507 display: flex; 508 flex-wrap: wrap; 509 margin-bottom: 24px; 510} 511.product-card-multi-select-layout .product-card-layout li:nth-of-type(3n-1) { 512 margin-left: 22px; 513 margin-right: 22px; 514} 515.product-card-multi-select-layout .product-card-layout .product-card-content__modal-body li { 516 margin-left: 0px; 517 margin-right: 0px; 518} 519.product-card-multi-select-layout .product-card-layout .product-card-checkbox { 520 display: none; 521 width: 304px; 522 height: 576px; 523 background: #fff; 524 border: 1px solid #dcdcdc; 525 border-radius: 4px; 526 margin-bottom: 22px; 527 position:relative; 528} 529.product-card-multi-select-layout .product-card-layout .product-card-checkbox__image { 530 border-radius: 4px 4px 0 0; 531 width: 302px; 532 height: 144px; 533 object-fit: cover; 534 background-color: #dcdcdc; 535} 536.product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-content { 537 margin-left: 24px; 538 margin-right: 24px; 539 margin-top: 16px; 540 margin-bottom: 8px; 541} 542.product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-content__title { 543 font-weight: 700; 544 font-size: 20px; 545 color: #333; 546 /*Restrict 3 lines, 42 characters*/ 547 overflow: hidden; 548 text-overflow: ellipsis; 549 display: -webkit-box; 550 line-height: 25px; 551 max-height: 75px; 552 -webkit-line-clamp: 3; 553 -webkit-box-orient: vertical; 554} 555.product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-content__subtitle { 556 margin-top: 8px; 557 font-size: 14px; 558 color: #909090; 559} 560.product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-content__time { 561 font-size: 14px; 562 color: #909090; 563 magin-top: 8px; 564 margin-bottom: 8px; 565} 566 .product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-content__description { 567 margin-top: 16px; 568 width: 250px; 569 height: 90px; 570 font-size: 14px; 571 line-height: 17px; 572} 573.product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-separator { 574 /*margin-left: 24px; 575 margin-right: 24px;*/ 576 margin-top: 16px; 577 margin-bottom: 0px; 578} 579 .product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-check-group { 580 margin-left: 24px; 581 margin-right: 24px; 582 cursor: pointer; 583 height: 64px; 584 display: flex; 585 align-items: center; 586} 587 .product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-check-group__label { 588 -webkit-user-select: none; 589 -moz-user-select: none; 590 -ms-user-select: none; 591 user-select: none; 592 display: block; 593 position: relative; 594 padding-left: 32px; 595 cursor: pointer; 596} 597 .product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-check-group__label:hover input[type="checkbox"] ~ .product-card-check-group__checkmark { 598 /* background-color: #dcdcdc; */ 599 border: 1px solid #03c58b; 600} 601 .product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-check-group__label input[type="checkbox"] { 602 position: absolute; 603 opacity: 0; 604 cursor: pointer; 605 height: 0; 606 width: 0; 607} 608.product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-check-group__label input[type="checkbox"]:checked ~ .product-card-check-group__checkmark { 609 background-color: #03c58b; 610 border: 3px solid #03c58b; 611} 612.product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-check-group__label input[type="checkbox"]:checked ~ .product-card-check-group__checkmark:after { 613 display: block; 614} 615.product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-check-group__label .product-card-check-group__checkmark { 616 position: absolute; 617 top: 0; 618 left: 0; 619 height: 24px; 620 width: 24px; 621 background-color: #fff; 622 border: 1px solid #dcdcdc; 623 border-radius: 5px; 624} 625.product-card-multi-select-layout .product-card-layout .product-card-checkbox .product-card-check-group__label .product-card-check-group__checkmark:after { 626 content: ""; 627 position: absolute; 628 display: none; 629 left: 5px; 630 top: 0; 631 width: 8px; 632 height: 15px; 633 border: solid white; 634 border-width: 0 2px 2px 0; 635 border-radius: 2px; 636 -webkit-transform: rotate(45deg); 637 -ms-transform: rotate(45deg); 638 transform: rotate(45deg); 639} 640.product-card-multi-select-layout .products-selected-footer { 641 display: default; 642 position: fixed; 643 bottom: 0; 644 left: 0; 645 width: 100%; 646 height: 80px; 647 margin: 0 auto; 648 background-color: #f7f7f7; 649 border-bottom: 2px solid #f33; 650 z-index: 1001; 651} 652.products-selected-header { 653 display: default; 654 width: 100%; 655 height: 80px; 656 margin: 0 auto; 657 background-color: #f7f7f7; 658 border-bottom: 2px solid #f33; 659 z-index: 1001; 660} 661.product-card-multi-select-layout .products-selected-footer__container, 662.products-selected-header__container { 663 width: 992px; 664 height: 100%; 665 margin: 0 auto; 666} 667.product-card-multi-select-layout .products-selected-footer__container{ 668 display: flex; 669 align-items: center; 670 justify-content: flex-end; 671 margin-right: 0px; 672} 673.product-card-multi-select-layout .products-selected-footer__text, 674.products-selected-header__text { 675 font-weight: 650; 676 font-size: 20px; 677 color: #333; 678 margin-top: 26px; 679 margin-left: 120px; 680 float: left; 681} 682.product-card-multi-select-layout .products-selected-footer__text{ 683 margin-left: 0px; 684 margin-right: 24px; 685 margin-top: 0px; 686} 687.product-card-multi-select-layout .products-selected-footer__btn-cta { 688 margin-right: 52px; 689 position: relative; 690 float: right; 691 background-color: #f33333; 692 color: #fff; 693 border: 1px solid #ee1818; 694 border-radius: 4px; 695 height: 40px; 696 width: 160px; 697 cursor: pointer; 698} 699.product-card-multi-select-layout .products-selected-footer__btn-cta:hover { 700 background-color: #ee1818; 701} 702.products-back-to-selection__btn-cta{ 703 margin-top: 20px; 704 margin-right: 160px; 705 position: relative; 706 float: right; 707 background-color: #fff; 708 color: #f33333; 709 border: 1px solid #ee1818; 710 border-radius: 4px; 711 height: 40px; 712 width: 160px; 713 cursor: pointer; 714} 715.products-back-to-selection__btn-cta:hover{ 716 color: #ee1818; 717} 718 .product-card-multi-select-layout .hidden-footer { 719 display: none; 720} 721 @media (max-width: 991px) and (min-width: 768px) { 722 .product-card-multi-select-layout { 723 max-width: 622px; 724 } 725 .product-card-multi-select-layout .product-card-layout { 726 margin-left: 0px; 727 } 728 .product-card-multi-select-layout .product-card-layout li:nth-of-type(3n-1) { 729 margin-left: 0px; 730 margin-right: 0px; 731 } 732 .product-card-multi-select-layout .product-card-layout li:nth-of-type(2n-1) { 733 margin-right: 22px; 734 } 735} 736@media (max-width: 767px) { 737 .product-card-multi-select-layout .product-card-layout { 738 scroll-snap-type: x mandatory; 739 overflow-x: auto; 740 overflow-y: hidden; 741 height: 576px; 742 flex-wrap: inherit; 743 margin-right: 24px; 744 margin-left:24px; 745 } 746 .product-card-multi-select-layout .product-card-layout::-webkit-scrollbar{ 747 display: none; 748 width: 0px !important; 749 } 750 .product-card-multi-select-layout .product-card-layout li:nth-of-type(3n-1) { 751 margin-left: 0px; 752 margin-right: 22px; 753 } 754 .product-card-multi-select-layout .product-card-layout .product-card-checkbox { 755 scroll-snap-align: center; 756 margin: 0px; 757 margin-right: 22px; 758 } 759 .product-card-multi-select-layout .products-selected-footer__container, 760 .products-selected-header__container { 761 width: 100%; 762 margin: 0 0; 763 } 764 .product-card-multi-select-layout .products-selected-footer__text, 765 .products-selected-header__text { 766 font-size: 16px; 767 margin-left: 10px; 768 margin-right: 16px; 769 } 770 .product-card-multi-select-layout .products-selected-footer__btn-cta, 771 .products-back-to-selection__btn-cta { 772 margin-left: 0; 773 margin-right: 10px; 774 min-width: 160px !important; 775 height: 40px; 776 font-size: 14px; 777 } 778 .product-card-tabs .dbs-dropdown { 779 margin: 0 25px; 780 } 781 782 p.tag-description { 783 margin-left: 25px; 784 } 785} 786 787.dbs-dropdown { 788 position: relative; 789} 790/* this is due to the filter by category text on top of the dropdown*/ 791.sme-academy .dbs-dropdown i.icon { 792 top: 36px; 793} 794.dbs-dropdown .icon.ico-arrowdown1 { 795 position: absolute; 796 right: 8px; 797 top: 10px; 798} 799.dbs-dropdown select { 800 font-family: sans-serif; 801 color: #2e2e2e; 802 border-width: 1px; 803 border-style: solid; 804 border-color: #c0c0c0; 805 border-image: initial; 806 width: 100%; 807 position: relative; 808 font-size: 16px; 809 z-index: 2; 810 letter-spacing: 0px; 811 -webkit-appearance: none; 812 height: 40px; 813 background: transparent; 814 border-radius: 4px; 815 padding: 8px 40px 8px 12px; 816} 817 818.dbs-dropdown select::-ms-expand{ 819 display:none; 820} 821 822.sme-academy .product-card-tabs .dbs-dropdown { 823 width: 300px; 824 margin-bottom: 16px; 825} 826 827p.tag-description{ 828 display: none; 829 margin-bottom: 16px; 830} 831 832.liferay-ddm-form-field-text[data-fieldname*='SelectedProducts']{ 833 display: none; 834} 835.smecardtemplate .portlet-forms-display { 836 display: block !important; 837} 838/*.smecardtemplate .ddm-user-view-content { 839 display: none; 840}*/ 841.smecardtemplate .ddm-form-builder-app { 842 display: none; 843} 844 845.product-card-layout .product-card-checkbox .tag { 846 font-size: 12px; 847 background: rgb(221,227,231); 848 color: black; 849 padding: 3px 15px; 850 margin: 8px 8px 0px 0px; 851} 852.product-card-layout .product-card-checkbox .tag.tag-round { 853 border-radius: 50px; 854 -moz-border-radius: 50px; 855 -webkit-border-radius: 50px; 856 -khtml-border-radius: 50px; 857} 858 859 860.product-card-content__modal-body ul { 861 margin-left: 24px; 862} 863@media (max-width: 385px) { 864 .product-card-layout{ 865 margin-right: 0px !important; 866 margin-left: 0px !important; 867 } 868} 869 870.carousel-left-icon { 871 cursor: pointer; 872 position: relative; 873 top: 230px; 874 left: 15px; 875 z-index: 1; 876 color: white; 877 border: 1px solid transparent; 878 border-radius: 46px; 879 padding: 8px 5px 5px 6px !important; 880 height: 25px; 881 width: 25px; 882 font-size: 9px; 883 background-color: darkgray; 884} 885 886.carousel-right-icon { 887 cursor: pointer; 888 position: relative; 889 top: 230px; 890 left: calc(100% - 40px); 891 z-index: 1; 892 color: white; 893 border: 1px solid transparent; 894 border-radius: 46px; 895 padding: 8px 5px 5px 7px !important; 896 height: 25px; 897 width: 25px; 898 font-size: 9px; 899 background-color: darkgray; 900} 901 902@media (max-width: 575px) and (min-width: 350px){ 903.carousel-right-icon { 904 top: 230px; 905 left: calc(100% - 65px) !important; 906} 907} 908</style> 909 910<div class="hide content-id">${.vars['reserved-article-id'].data}</div> 911<div class="sme-academy group-header"> 912 <h2 class="sme-academy__title">${CardDesignPageDescription.PageTitle.getData()}</h2> 913 <p class="sme-academy__description"> 914 ${CardDesignPageDescription.PageSubtitle.getData()} 915 </p> 916 917 <div class="sme-academy-tab-main"> 918 <div class="sme-academy-content"> 919 <#if CardDesignPageDescription.DisplayType.getData()=="multi"> 920 <div id="sme-academy-content1"> 921 <div class="product-card-multi-select-layout"> 922 <div class="product-card-tabs"> 923 <#if CategoryDescription.CategoryTags.getData()!=""> 924 <div class="dbs-dropdown"> 925 <p>${OtherLanguageLabel.CategoryLabel.getData()}</p> 926 <i class="icon ico-arrowdown1"></i> 927 <select id="card-selector" name="category"> 928 <#list CategoryDescription.CategoryTags.getData()?split("\n") as category> 929 <#if category?keep_before("=") == "All" && OtherLanguageLabel.CategoryAll??> 930 <option value="${category?keep_before("=")}">${ OtherLanguageLabel.CategoryAll.getData()}</option> 931 <#else> 932 <option value="${category?keep_before("=")}">${category?keep_before("=")}</option> 933 </#if> 934 </#list> 935 </select> 936 </div> 937 </#if> 938 939 <#list CategoryDescription.CategoryTags.getData()?split("\n") as category> 940 <p class="tag-description" data-tag="${category?keep_before("=")}">${category?keep_after("=")}</p> 941 </#list> 942 943 944 <div class="product-card-content"> 945 <div id="product-card-content1-m"> 946 <i class="icon ico-arrowleft1 carousel-left-icon d-xs-block d-sm-block d-md-none"></i> 947 <i class="icon ico-arrowright1 carousel-right-icon d-xs-block d-sm-block d-md-none"></i> 948 <ul class="product-card-layout" id="product-card-layout"> 949 <#if ProductItem.getSiblings()?has_content> 950 <#assign BadgeList = []> 951 <#assign NonBadgeList = []> 952 <#if CardDesignPageDescription.Subtitle.getData() == "Category"> 953 <#list ProductItem.getSiblings()?sort_by(["ProductCategory", "data"]) as cur_ProdContent> 954 <#if cur_ProdContent.BadgeDisplay.getData() == "yes" && cur_ProdContent.BadgeTitle.getData() != ""> 955 <#assign BadgeList += [cur_ProdContent]> 956 <#else> 957 <#assign NonBadgeList += [cur_ProdContent]> 958 </#if> 959 </#list> 960 <#else> 961 <#list ProductItem.getSiblings()?sort_by(["CardDateTime", "data"]) as cur_ProdContent> 962 <#assign cardDate = cur_ProdContent.Date.getData() + " " + cur_ProdContent.Time.getData()> 963 <#if cur_ProdContent.BadgeDisplay.getData() == "yes" && cur_ProdContent.BadgeTitle.getData() != ""> 964 <#assign BadgeList += [cur_ProdContent]> 965 <#else> 966 <#assign NonBadgeList += [cur_ProdContent]> 967 </#if> 968 </#list> 969 </#if> 970 971 <#assign CombinedBadgeList = BadgeList + NonBadgeList> 972 <#assign modalCounter=1> 973 974 <#list CombinedBadgeList as cur_ProdContent> 975 <li class="product-card-checkbox" id="${cur_ProdContent.CardUUID.getData()}" data-uuid="${cur_ProdContent.CardUUID.getData()}" data-spltc="<#if cur_ProdContent.SpecialTC?? && cur_ProdContent.SpecialTC.getData() !="">${cur_ProdContent.SpecialTC.getData()}<#else>undefined</#if>" data-tag="<#if cur_ProdContent.ProductCategory?? && cur_ProdContent.ProductCategory.getData() !="">${cur_ProdContent.ProductCategory.getData()}<#else>undefined</#if>"> 976 <#if cur_ProdContent.ProductImage.getData()?? && cur_ProdContent.ProductImage.getData() != ""> 977 <img class="product-card-checkbox__image" 978 alt="${cur_ProdContent.ProductImage.getAttribute("alt")}" 979 data-fileentryid="${cur_ProdContent.ProductImage.getAttribute("fileEntryId")}" 980 src="${cur_ProdContent.ProductImage.getData()}" /> 981 </#if> 982 <div class="product-card-content"> 983 <#-- <p>${cur_ProdContent.CardDateTime.getData()}</p> --> 984 <h2 class="product-card-content__title"> 985 ${cur_ProdContent.ProductTitle.getData()} 986 </h2> 987 <p class="product-card-content__subtitle"> 988 <#if CardDesignPageDescription.Subtitle.getData() == "Category"> 989 <#if cur_ProdContent.ProductCategory?? && cur_ProdContent.ProductCategory.getData() !="">${cur_ProdContent.ProductCategory.getData()}<#else>${""}</#if> 990 <#else> 991 <#assign cardDate = cur_ProdContent.Date.getData() + " " + cur_ProdContent.Time.getData()> 992 ${cur_ProdContent.Date.getData()?datetime("yyyy-MM-dd")?string('dd MMMM yyyy')} 993 </#if> 994 </p> 995 <p class="product-card-content__time"> 996 <#if CardDesignPageDescription.Subtitle.getData() != "Category"> 997 <#assign cardDate = cur_ProdContent.Date.getData() + " " + cur_ProdContent.Time.getData()> 998 ${cur_ProdContent.Time.getData()?datetime("hh:mm a")?string('hh:mm a')} 999 <#if cur_ProdContent.EndTime.getData()?? && cur_ProdContent.EndTime.getData() != ""> 1000 - ${cur_ProdContent.EndTime.getData()} 1001 </#if> 1002 </#if> 1003 </p> 1004 <#if cur_ProdContent.BadgeDisplay.getData() == "yes" && cur_ProdContent.BadgeTitle.getData() != ""> 1005 <span class="tag tag-round"> 1006 ${cur_ProdContent.BadgeTitle.getData()} 1007 </span> 1008 </#if> 1009 <p class="product-card-content__description"> 1010 ${cur_ProdContent.ProductDesc.getData()} 1011 </p> 1012 </div> 1013 <div class="product-card-footer"> 1014 <#assign modalId = "modal0" + modalCounter> 1015 <#assign modalCounter = modalCounter +1> 1016 <a class="product-card-content__btn-info" name="${modalId}"> 1017 <img src="/o/smeportal-theme/images/Info.svg" style="padding-right: 5px;">${ModalDescription.ModalLinkText.getData()} 1018 </a> 1019 <div class="product-card-content__modal" id="${modalId}"> 1020 <div class="product-card-content__modal-content" id="${modalId}"> 1021 <div class="product-card-content__modal-header"> 1022 <span class="product-card-content_modal-close">×</span> 1023 <#if cur_ProdContent.ModalDocumentsAndMedia.getData()?? && cur_ProdContent.ModalDocumentsAndMedia.getData() != ""> 1024 <a class="product-card-content_modal-download" href="${cur_ProdContent.ModalDocumentsAndMedia.getData()}"><i class="icon ico-download-1-line"></i></a> 1025 </#if> 1026 <h2>${ModalDescription.ModalLinkText.getData()}</h2> 1027 </div> 1028 <div class="product-card-content__modal-body"> 1029 <h2>${cur_ProdContent.ProductTitle.getData()}</h2> 1030 ${cur_ProdContent.ModalDescriptionHTML.getData()} 1031 </div> 1032 <div class="product-card-content__modal-footer"> 1033 <button class="product-card-content__modal-btn-cta"> 1034 ${ModalDescription.SelectButtonText.getData()} 1035 </button> 1036 </div> 1037 </div> 1038 </div> 1039 <hr class="product-card-separator" /> 1040 <div class="product-card-check-group"> 1041 <label class="product-card-check-group__label"> 1042 ${ModalDescription.SelectButtonText.getData()} 1043 <input class="product-card-check-group__input" type="checkbox" /> 1044 <span class="product-card-check-group__checkmark"></span> 1045 </label> 1046 </div> 1047 </div> 1048 </li> 1049 </#list> 1050 </#if> 1051 </ul> 1052 </div> 1053 </div> 1054 </div> 1055 <div class="products-selected-footer hidden-footer"> 1056 <div class="products-selected-footer__container"> 1057 <h2 class="products-selected-footer__text">0 ${OtherLanguageLabel.SelectedText.getData()}</h2> 1058 <button class="products-selected-footer__btn-cta">${OtherLanguageLabel.ContinueButtonText.getData()}</button> 1059 </div> 1060 </div> 1061 </div> 1062 </div> 1063 <#elseif CardDesignPageDescription.DisplayType.getData()=="single"> 1064 <div id="sme-academy-content2"> 1065 <div class="product-card-single-select-layout"> 1066 <div class="product-card-tabs"> 1067 <div class="dbs-dropdown"> 1068 <p>${OtherLanguageLabel.CategoryLabel.getData()}</p> 1069 <i class="icon ico-arrowdown1"></i> 1070 <select id="card-selector" name="category"> 1071 <#list CategoryDescription.CategoryTags.getData()?split("\n") as category> 1072 <#if category?keep_before("=") == "All" && OtherLanguageLabel.CategoryAll??> 1073 <option value="${category?keep_before("=")}">${ OtherLanguageLabel.CategoryAll.getData()}</option> 1074 <#else> 1075 <option value="${category?keep_before("=")}">${category?keep_before("=")}</option> 1076 </#if> 1077 </#list> 1078 </select> 1079 </div> 1080 1081 <#list CategoryDescription.CategoryTags.getData()?split("\n") as category> 1082 <p class="tag-description" data-tag="${category?keep_before("=")}">${category?keep_after("=")}</p> 1083 </#list> 1084 1085 <div class="product-card-content"> 1086 <div id="product-card-content1"> 1087 <ul class="product-card-layout" id="product-card-layout"> 1088 <#if ProductItem.getSiblings()?has_content> 1089 <#assign BadgeList = []> 1090 <#assign NonBadgeList = []> 1091 <#if CardDesignPageDescription.Subtitle.getData() == "Category"> 1092 <#list ProductItem.getSiblings()?sort_by(["ProductCategory", "data"]) as cur_ProdContent> 1093 <#if cur_ProdContent.BadgeDisplay.getData() == "yes" && cur_ProdContent.BadgeTitle.getData() != ""> 1094 <#assign BadgeList += [cur_ProdContent]> 1095 <#else> 1096 <#assign NonBadgeList += [cur_ProdContent]> 1097 </#if> 1098 </#list> 1099 <#else> 1100 <#list ProductItem.getSiblings()?sort_by(["CardDateTime", "data"]) as cur_ProdContent> 1101 <#assign cardDate = cur_ProdContent.Date.getData() + " " + cur_ProdContent.Time.getData()> 1102 <#if cur_ProdContent.BadgeDisplay.getData() == "yes" && cur_ProdContent.BadgeTitle.getData() != ""> 1103 <#assign BadgeList += [cur_ProdContent]> 1104 <#else> 1105 <#assign NonBadgeList += [cur_ProdContent]> 1106 </#if> 1107 </#list> 1108 </#if> 1109 1110 <#assign CombinedBadgeList = BadgeList + NonBadgeList> 1111 <#assign modalCounter=1> 1112 1113 <#list CombinedBadgeList as cur_ProdContent> 1114 <li class="product-card-checkbox" id="${cur_ProdContent.CardUUID.getData()}" data-uuid="${cur_ProdContent.CardUUID.getData()}" data-spltc="<#if cur_ProdContent.SpecialTC?? && cur_ProdContent.SpecialTC.getData() !="">${cur_ProdContent.SpecialTC.getData()}<#else>undefined</#if>" data-tag="<#if cur_ProdContent.ProductCategory?? && cur_ProdContent.ProductCategory.getData() !="">${cur_ProdContent.ProductCategory.getData()}<#else>undefined</#if>"> 1115 <#if cur_ProdContent.ProductImage.getData()?? && cur_ProdContent.ProductImage.getData() != ""> 1116 <img class="product-card-checkbox__image" 1117 alt="${cur_ProdContent.ProductImage.getAttribute("alt")}" 1118 data-fileentryid="${cur_ProdContent.ProductImage.getAttribute("fileEntryId")}" 1119 src="${cur_ProdContent.ProductImage.getData()}" /> 1120 </#if> 1121 <div class="product-card-content"> 1122 <#-- <p>${cur_ProdContent.CardDateTime.getData()}</p> --> 1123 <h2 class="product-card-content__title"> 1124 ${cur_ProdContent.ProductTitle.getData()} 1125 </h2> 1126 <p class="product-card-content__subtitle"> 1127 <#if CardDesignPageDescription.Subtitle.getData() == "Category"> 1128 <#if cur_ProdContent.ProductCategory?? && cur_ProdContent.ProductCategory.getData() !="">${cur_ProdContent.ProductCategory.getData()}<#else>${""}</#if> 1129 <#else> 1130 <#assign cardDate = cur_ProdContent.Date.getData() + " " + cur_ProdContent.Time.getData()> 1131 ${cur_ProdContent.Date.getData()?datetime("yyyy-MM-dd")?string('dd MMMM yyyy')} 1132 </#if> 1133 </p> 1134 <p class="product-card-content__time"> 1135 <#if CardDesignPageDescription.Subtitle.getData() != "Category"> 1136 <#assign cardDate = cur_ProdContent.Date.getData() + " " + cur_ProdContent.Time.getData()> 1137 ${cur_ProdContent.Time.getData()?datetime("hh:mm a")?string('hh:mm a')} 1138 <#if cur_ProdContent.EndTime.getData()?? && cur_ProdContent.EndTime.getData() != ""> 1139 - ${cur_ProdContent.EndTime.getData()} 1140 </#if> 1141 </#if> 1142 </p> 1143 <#if cur_ProdContent.BadgeDisplay.getData() == "yes" && cur_ProdContent.BadgeTitle.getData() != ""> 1144 <span class="tag tag-round"> 1145 ${cur_ProdContent.BadgeTitle.getData()} 1146 </span> 1147 </#if> 1148 <p class="product-card-content__description"> 1149 ${cur_ProdContent.ProductDesc.getData()} 1150 </p> 1151 </div> 1152 <div class="product-card-footer"> 1153 <#assign modalId = "modal0" + modalCounter> 1154 <#assign modalCounter = modalCounter +1> 1155 <a class="product-card-content__btn-info" name="${modalId}"> 1156 <img src="/o/smeportal-theme/images/Info.svg" style="padding-right: 5px;">${ModalDescription.ModalLinkText.getData()} 1157 </a> 1158 <div class="product-card-content__modal" id="${modalId}"> 1159 <div class="product-card-content__modal-content" id="${modalId}"> 1160 <div class="product-card-content__modal-header"> 1161 <span class="product-card-content_modal-close">×</span> 1162 <#if cur_ProdContent.ModalDocumentsAndMedia.getData()?? && cur_ProdContent.ModalDocumentsAndMedia.getData() != ""> 1163 <a class="product-card-content_modal-download" href="${cur_ProdContent.ModalDocumentsAndMedia.getData()}"><i class="icon ico-download-1-line"></i></a> 1164 </#if> 1165 <h2>${ModalDescription.ModalLinkText.getData()}</h2> 1166 </div> 1167 <div class="product-card-content__modal-body"> 1168 <h2>${cur_ProdContent.ProductTitle.getData()}</h2> 1169 ${cur_ProdContent.ModalDescriptionHTML.getData()} 1170 </div> 1171 <div class="product-card-content__modal-footer"> 1172 <button class="product-card-content__modal-btn-cta"> 1173 ${ModalDescription.SelectButtonText.getData()} 1174 </button> 1175 </div> 1176 </div> 1177 </div> 1178 <hr class="product-card-separator" /> 1179 <div class="product-card-group"> 1180 <button class="product-card-group__btn"> 1181 ${ModalDescription.SelectButtonText.getData()} 1182 </button> 1183 </div> 1184 </div> 1185 </li> 1186 </#list> 1187 </#if> 1188 </ul> 1189 </div> 1190 </div> 1191 </div> 1192 </div> 1193 </div> 1194 </#if> 1195 </div> 1196 </div> 1197</div> 1198 1199<script type="text/javascript"> 1200var selectedProductsUUID = []; 1201var selectedProductsTerms = []; 1202var cardContainer; 1203var cardScrollerContainer; 1204var cardItemSize; 1205 1206function undergoReactMutation(inputSelector, value) { 1207 try { 1208 const element = document.querySelector(inputSelector); 1209 if (element) { 1210 element.dispatchEvent(new Event('focus', { bubbles: true })); 1211 element.value = value; 1212 element.dispatchEvent(new Event('input', { bubbles: true })); 1213 element.dispatchEvent(new Event('blur', { bubbles: true })); 1214 } 1215 } catch (error) { 1216 console.error('Error updating input state:', error); 1217 } 1218} 1219 1220<#if CardDesignPageDescription.MaximumDealLimit.getData()?? && CardDesignPageDescription.MaximumDealLimit.getData() != ""> 1221 var maxSelect = ${CardDesignPageDescription.MaximumDealLimit.getData()}; 1222<#else> 1223 var maxSelect = 0; 1224</#if> 1225$(window).on("load", function() { 1226 // $(".at-share-btn-elements").hide(); 1227 $(".at-share-btn-elements").addClass("move-top-to-card-container"); 1228 $($(".at-share-btn-elements").closest(".portlet-content-container")).prependTo("#product-card-content1-m"); 1229 // $(".at-share-btn-elements").show(); 1230}); 1231$(document).ready(function() { 1232 1233 bindCardNavigation(); 1234 1235 $(".at-share-btn-elements").hide(); 1236 if($(".sme-academy").length>0) { 1237 $(".product-card-checkbox").css("display","block"); 1238 } 1239 1240 $("#card-selector option").each(function(){ 1241 if($(this).attr("value")=="All") 1242 return; 1243 if($(".product-card-checkbox[data-tag='"+$(this).attr("value")+"']").length <=0) { 1244 $(this).remove(); 1245 } 1246 1247 // Load "All" Description 1248 $(".product-card-checkbox").replaceWith(function() { 1249 return "<li class='product-card-checkbox' id="+$(this).attr("id")+" data-uuid="+$(this).attr("data-uuid")+" data-spltc="+$(this).attr("data-spltc")+" data-tag='"+$(this).attr("data-tag")+"'>" + this.innerHTML + "</li>"; 1250 }); 1251 $(".product-card-checkbox").css("display","block"); 1252 $("p.tag-description[data-tag="+"All"+"]").css("display","block"); 1253 }); 1254 1255 $(".sme-academy").on("click","a.product-card-content__btn-info", function(){ 1256 var modalID ="#"+$(this).attr("name"); 1257 $(modalID).addClass("active"); 1258 $(modalID+":first-child").addClass("active"); 1259 }); 1260 1261 $(".sme-academy").on("click","span.product-card-content_modal-close", function() { 1262 $(".product-card-content__modal-content.active").removeClass("active"); 1263 $(".product-card-content__modal.active").removeClass("active"); 1264 }); 1265 1266 window.addEventListener("click", function(event) { 1267 var modal = document.getElementsByClassName("product-card-content__modal active")[0]; 1268 if (event.target == modal) { 1269 modal.classList.remove("active"); 1270 } 1271 }); 1272 1273 $(".sme-academy").on("change",".dbs-dropdown select", function() { 1274 var optionSelected = $(this).find("option:selected").attr('value'); 1275 $(".product-card-checkbox").css("display","none"); 1276 $("p.tag-description").css("display","none"); 1277 $(".product-card-checkbox").replaceWith(function() { 1278 return "<span class='product-card-checkbox' id="+$(this).attr("id")+" data-uuid="+$(this).attr("data-uuid")+" data-spltc="+$(this).attr("data-spltc")+" data-tag='"+$(this).attr("data-tag")+"'>" + this.innerHTML + "</span>"; 1279 }); 1280 1281 if(optionSelected=="All") { 1282 $(".product-card-checkbox").replaceWith(function() { 1283 return "<li class='product-card-checkbox' id="+$(this).attr("id")+" data-uuid="+$(this).attr("data-uuid")+" data-spltc="+$(this).attr("data-spltc")+" data-tag='"+$(this).attr("data-tag")+"'>" + this.innerHTML + "</li>"; 1284 }); 1285 $(".product-card-checkbox").css("display","block"); 1286 $("p.tag-description[data-tag='"+optionSelected+"']").css("display","block"); 1287 }else { 1288 $(".product-card-checkbox[data-tag='"+optionSelected+"']").replaceWith(function() { 1289 return "<li class='product-card-checkbox' id="+$(this).attr("id")+" data-uuid="+$(this).attr("data-uuid")+" data-spltc="+$(this).attr("data-spltc")+" data-tag='"+$(this).attr("data-tag")+"'>" + this.innerHTML + "</li>"; 1290 }); 1291 $(".product-card-checkbox[data-tag='"+optionSelected+"']").css("display","block"); 1292 $("p.tag-description[data-tag='"+optionSelected+"']").css("display","block"); 1293 } 1294 1295 showArrowsIfNeeded(false); 1296 1297 $(".product-card-check-group__input").each(function(){ 1298 if($(this).attr("data-checked") =="true") { 1299 $(this).prop("checked",true); 1300 } 1301 }); 1302 }); 1303}); 1304 1305// Multi Select 1306<#if CardDesignPageDescription.DisplayType.getData()=="multi"> 1307 $(document).ready(function() { 1308 $(".sme-academy").on("click",'.product-card-check-group__label input[type="checkbox"]', function() { 1309 var count = $('.product-card-check-group__label input[type="checkbox"]:checked').length; 1310 var productTitle = $(this).closest("li.product-card-checkbox").find(".product-card-content .product-card-content__title").text().trim(); 1311 var productSubTitle = $(this).closest("li.product-card-checkbox").find(".product-card-content .product-card-content__subtitle").text().trim(); 1312 var productUUID = $(this).closest("li.product-card-checkbox").attr("data-uuid"); 1313 var productTerm = $(this).closest("li.product-card-checkbox").attr("data-spltc"); 1314 console.log("removed productTerm here" + productTerm); 1315 if($(this).is(":checked")) { 1316 selectedProductsUUID.push(productUUID); 1317 if (productTerm !== "undefined") { 1318 selectedProductsTerms.push(productTerm); 1319 } 1320 } else { 1321 selectedProductsUUID = selectedProductsUUID.filter(function(e){ 1322 return e !== productUUID; 1323 }); 1324 if (productTerm !== "undefined") { 1325 selectedProductsTerms.splice(selectedProductsTerms.indexOf(productTerm),1); 1326 } 1327 console.log("products after removing " + selectedProductsTerms); 1328 } 1329 $(".lfr-ddm-form-pages .lfr-ddm-form-page .row .liferay-ddm-form-field-checkbox-multiple[data-fieldname*=SplTermsAndCondition]").closest(".row").hide(); 1330 if (selectedProductsTerms.length > 0) { 1331 selectedProductsTerms.forEach(function(term) { 1332 $(".lfr-ddm-form-pages .lfr-ddm-form-page .row .liferay-ddm-form-field-checkbox-multiple").each(function() { 1333 if ($(this).attr("data-fieldname").indexOf(term) > -1) { 1334 $(this).closest(".row").show(); 1335 } 1336 }); 1337 }); 1338 } 1339 1340 1341 if(count > maxSelect && maxSelect > 0) { 1342 var removedProductUUID = selectedProductsUUID.shift(); 1343 var removedProductTerm = selectedProductsTerms.shift(); 1344 1345 $(".product-card-checkbox").each(function(){ 1346 if($(this).attr("data-uuid") == removedProductUUID) { 1347 console.log("clicked"); 1348 $(this).find('.product-card-check-group__label input[type="checkbox"]').click(); 1349 } 1350 }); 1351 1352 count = $('.product-card-check-group__label input[type="checkbox"]:checked').length; 1353 console.log("showing only" + selectedProductsTerms); 1354 $(".lfr-ddm-form-pages .lfr-ddm-form-page .row .liferay-ddm-form-field-checkbox-multiple[data-fieldname*=SplTermsAndCondition]").closest(".row").hide(); 1355 1356 if (selectedProductsTerms.length > 0) { 1357 selectedProductsTerms.forEach(function(term) { 1358 $(".lfr-ddm-form-pages .lfr-ddm-form-page .row .liferay-ddm-form-field-checkbox-multiple").each(function() { 1359 if ($(this).attr("data-fieldname").indexOf(term) > -1) { 1360 $(this).closest(".row").show(); 1361 } 1362 }); 1363 }); 1364 } 1365 } 1366 1367 if (count > 0) { 1368 $('.products-selected-footer').css("display", "block"); 1369 if (count == maxSelect && maxSelect > 0) { 1370 $('.products-selected-footer__text').text(count + " ${OtherLanguageLabel.SelectedText.getData()} (MAX)"); 1371 } else { 1372 $('.products-selected-footer__text').text(count + " ${OtherLanguageLabel.SelectedText.getData()}"); 1373 } 1374 } else { 1375 $('.products-selected-footer').css("display", "none"); 1376 } 1377 }); 1378 1379 $(".sme-academy").on("change",".product-card-tabs input[type='radio']", function() { 1380 if($(this).is(':checked')){ 1381 $(".sme-academy .product-card-checkbox").css("display",""); 1382 $(".product-card-checkbox").replaceWith(function() { 1383 return "<span class='product-card-checkbox' id="+$(this).attr("id")+" data-uuid="+$(this).attr("data-uuid")+" data-spltc="+$(this).attr("data-spltc")+" data-tag='"+$(this).attr("data-tag")+"'>" + this.innerHTML + "</span>"; 1384 }); 1385 if($(this).attr("data-tag")=="All") { 1386 $(".product-card-checkbox").replaceWith(function() { 1387 return "<li class='product-card-checkbox' id="+$(this).attr("id")+" data-uuid="+$(this).attr("data-uuid")+" data-spltc="+$(this).attr("data-spltc")+" data-tag='"+$(this).attr("data-tag")+"'>" + this.innerHTML + "</li>"; 1388 }); 1389 }else { 1390 $(".product-card-checkbox[data-tag='"+$(this).attr("data-tag")+"']").replaceWith(function() { 1391 return "<li class='product-card-checkbox' id="+$(this).attr("id")+" data-uuid="+$(this).attr("data-uuid")+" data-spltc="+$(this).attr("data-spltc")+" data-tag='"+$(this).attr("data-tag")+"'>" + this.innerHTML + "</li>"; 1392 }); 1393 } 1394 $(".product-card-check-group__input").each(function() { 1395 if($(this).attr("data-checked") =="true") { 1396 $(this).prop("checked",true); 1397 } 1398 }); 1399 } 1400 }); 1401 1402 $(".sme-academy").on("change",".product-card-check-group__input", function() { 1403 if($(this).is(":checked")) { 1404 $(this).attr("data-checked","true"); 1405 }else { 1406 console.log("unchecked"); 1407 $(this).attr("data-checked","false"); 1408 } 1409 }); 1410 1411 $(".sme-academy").on("click", ".product-card-content__modal-btn-cta", function() { 1412 var checkbox = $(this).closest('.product-card-checkbox').find('.product-card-check-group input.product-card-check-group__input'); 1413 if(!checkbox.is(':checked')) { 1414 checkbox.attr("data-checked","true"); 1415 checkbox.click(); 1416 } 1417 1418 console.log("select product-multi"); 1419 1420 $(".product-card-content__modal-content.active").removeClass("active"); 1421 $(".product-card-content__modal.active").removeClass("active"); 1422 }); 1423 1424 $(".products-selected-footer__btn-cta").click(function() { 1425 $(this).hide(); 1426 $(".form-selected-products").remove(); 1427 var title = $(".liferay-ddm-form-field-text[data-fieldname*='SelectedProducts'] label").text().trim(); 1428 var selectedCoursesHTML = "<div class='form-selected-products'><h2>"+title+"</h2></div>"; 1429 $(".liferay-ddm-form-field-text[data-fieldname*='SelectedProducts']").after(selectedCoursesHTML); 1430 $(".sme-academy").closest(".portlet-boundary").nextAll(".portlet-boundary").hide(); 1431 $(".ddm-form-builder-app").show(); 1432 $(".sme-academy").hide(); 1433 $(".slide-share .carousel").hide(); 1434 1435 $(".lfr-ddm-form-pages .lfr-ddm-form-page .row .liferay-ddm-form-field-checkbox-multiple[data-fieldname*=SplTermsAndCondition]").closest(".row").hide(); 1436 1437 if (selectedProductsTerms.length > 0) { 1438 selectedProductsTerms.forEach(function(term) { 1439 $(".lfr-ddm-form-pages .lfr-ddm-form-page .row .liferay-ddm-form-field-checkbox-multiple").each(function() { 1440 if ($(this).attr("data-fieldname").indexOf(term) > -1) { 1441 $(this).closest(".row").show(); 1442 } 1443 }); 1444 }); 1445 } 1446 let cardTitlesAgg = ""; 1447 selectedProductsUUID.forEach(function(uuid) { 1448 var cardTitle = $(".product-card-checkbox[data-uuid="+uuid+"]").find(".product-card-content__title").text(); 1449 var cardSubTitle = $(".product-card-checkbox[data-uuid="+uuid+"]").find(".product-card-content__subtitle").text(); 1450 var cardTime = $(".product-card-checkbox[data-uuid="+uuid+"]").find(".product-card-content__time").text(); 1451 var spltc = $(".product-card-checkbox[data-uuid="+uuid+"]").attr("data-spltc"); 1452 console.log("card title --->"+cardTitle); 1453 if(!cardTitlesAgg){cardTitlesAgg=cardTitle;} 1454 else{cardTitlesAgg = cardTitlesAgg + ", "+cardTitle;} 1455 1456 $(".form-selected-products").append("<div class='form-selected-course' data-uuid='"+uuid+"' data-spltc='"+spltc+"'><p class='title'>"+cardTitle+"</p><p class='date'>"+cardSubTitle + " " + cardTime +"</p><span class='remove-course'>X</span><hr/></div>"); 1457 }); 1458 console.log("These products are selected now."+$(".content-id").text().trim()+"="+selectedProductsUUID.toString()); 1459 console.log("Card Titles :: "+cardTitlesAgg); 1460 1461 $(".liferay-ddm-form-field-text[data-fieldname*='SelectedProducts'] input").val($(".content-id").text().trim()+"="+selectedProductsUUID.toString()); 1462 console.log("React mutation no 2.") 1463 undergoReactMutation("div[data-field-reference*='SelectedProducts'] input[type='text']",cardTitlesAgg); 1464 $("#nav-bar").append('<div class="products-selected-header"><div class="products-selected-header__container"><h2 class="products-selected-header__text">'+selectedProductsUUID.length+' ${OtherLanguageLabel.SelectedText.getData()}</h2><button class="products-back-to-selection__btn-cta">${OtherLanguageLabel.ReturnButtonText.getData()}</button></div></div>'); 1465 $(".products-selected-header").get(0).scrollIntoView(); 1466 1467 window.scrollTo({ top: 0, behavior: 'smooth' }); 1468 // Add warning message context first 1469 $(".form-selected-products").append('<div class="no-product-selected-msg"><div class="alert alert-danger" style="display: none; border: 1px solid red; border-left: 4px solid red; background-color:transparent;"><span class="icon ico-exclamation" style="display: table-cell; margin-right: 10px; font-size:21px"></span><div style=" display: inline-block; font-weight: 500; color: black; vertical-align: middle; margin-left: 8px;">'+"${FormDescription.WarningMessage.getData()}"+'</div></div><button class="back-to-selection cta-btn-inline dbswhite" type="button" style="margin-left: 0px; box-shadow:none;">'+"${FormDescription.SelectMoreButtonText.getData()}"+'</button></div>'); 1470 1471 var selectedProductsCount = $('.product-card-check-group__label input[type="checkbox"]:checked').length; 1472 if(maxSelect == selectedProductsCount) { 1473 $(".form-selected-products .back-to-selection").hide(); 1474 $(".products-selected-header__text").text($(".products-selected-header__text").text()+" (MAX)"); 1475 } 1476 }); 1477 1478 $(document).on("click",".remove-course",function() { 1479 $(".form-selected-products .back-to-selection").show(); 1480 var currentProductUUID = $(this).parent().attr("data-uuid"); 1481 var currentProductTerm = $(this).parent().attr("data-spltc"); 1482 selectedProductsUUID = selectedProductsUUID.filter(function(e){ 1483 return e !== currentProductUUID; 1484 }); 1485 1486 console.log("selected Courses After removal " + selectedProductsTerms); 1487 $(this).parent().remove(); 1488 1489 $(".products-selected-header .products-selected-header__text").text(selectedProductsUUID.length + " ${OtherLanguageLabel.SelectedText.getData()}"); 1490 $(".liferay-ddm-form-field-text[data-fieldname*='SelectedProducts'] input").val($(".content-id").text().trim()+"="+selectedProductsUUID.toString()); 1491 console.log("React mutation no 3.") 1492 undergoReactMutation("input[name*='SelectedProducts'][type='text']",$(".content-id").text().trim()+"="+selectedProductsUUID.toString()); 1493 1494 $(".product-card-checkbox").each(function() { 1495 if($(this).attr("data-uuid") == currentProductUUID) { 1496 $(this).find('.product-card-check-group__label input[type="checkbox"]').click(); 1497 console.log("clicked2"); 1498 } 1499 }); 1500 1501 if(selectedProductsUUID.length < 1) { 1502 $(".lfr-ddm-form-pagination-controls .lfr-ddm-form-submit").attr("disabled", true); 1503 $(".products-selected-header").remove(); 1504 $(".no-product-selected-msg .alert-danger").css("display", "table"); 1505 } 1506 }); 1507 1508 $(document).on("click",".products-back-to-selection__btn-cta", function() { 1509 if(selectedProductsUUID.length < 1) { 1510 BackToSelection(true); 1511 } else { 1512 BackToSelection(false); 1513 } 1514 }); 1515 1516 $(document).on("click",".no-product-selected-msg .back-to-selection", function() { 1517 $(".lfr-ddm-form-pagination-controls .lfr-ddm-form-submit").attr("disabled", false); 1518 if(selectedProductsUUID.length < 1) { 1519 BackToSelection(true); 1520 } else { 1521 BackToSelection(false); 1522 } 1523 }); 1524 1525 function BackToSelection(bool) { 1526 if (bool) { 1527 selectedProductsUUID = []; 1528 selectedProductsTerms = []; 1529 } 1530 $(".products-selected-header").remove(); 1531 $(".form-selected-products").remove(); 1532 $(".sme-academy").show(); 1533 $(".sme-academy").closest(".portlet-boundary").nextAll(".portlet-boundary").show(); 1534 $(".slide-share .carousel").show(); 1535 $(".ddm-form-builder-app").hide(); 1536 $(".products-selected-footer__btn-cta").show(); 1537 $(".sme-academy")[0].scrollIntoView(); 1538 } 1539 1540 // Set Max Select to number of cards if user haven't set 1541 if(maxSelect < 1) { 1542 maxSelect = $(".product-card-checkbox").length; 1543 } 1544 }); 1545// Single Select 1546<#elseif CardDesignPageDescription.DisplayType.getData()=="single"> 1547 $(document).ready(function() { 1548 $(".sme-academy").on("click", ".product-card-group__btn", function() { 1549 SelectProduct($(this)); 1550 }); 1551 1552 $(".sme-academy").on("click", ".product-card-content__modal-btn-cta", function() { 1553 $(".product-card-content__modal-content.active").removeClass("active"); 1554 $(".product-card-content__modal.active").removeClass("active"); 1555 1556 SelectProduct($(this)); 1557 }); 1558 1559 $(".sme-academy").on("click", ".product-card-content__modal-btn-cta", function() { 1560 var checkbox = $(this).closest('.product-card-checkbox').find('.product-card-check-group input.product-card-check-group__input'); 1561 if(!checkbox.is(':checked')) { 1562 checkbox.click(); 1563 } 1564 1565 $(".product-card-content__modal-content.active").removeClass("active"); 1566 $(".product-card-content__modal.active").removeClass("active"); 1567 }); 1568 1569 $(document).on("click",".products-back-to-selection__btn-cta", function() { 1570 BackToSelection(); 1571 }); 1572 1573 $(document).on("click",".remove-course", function(){ 1574 $(this).parent().remove(); 1575 1576 $(".products-selected-header .products-selected-header__text").text("0 ${OtherLanguageLabel.SelectedText.getData()}"); 1577 $(".liferay-ddm-form-field-text[data-fieldname*='SelectedProducts'] input").val(""); 1578 console.log("React mutation no 4.") 1579 undergoReactMutation("input[name*='SelectedProducts'][type='text']",""); 1580 1581 $(".lfr-ddm-form-pagination-controls .lfr-ddm-form-submit").attr("disabled", true); 1582 $(".products-selected-header").remove(); 1583 $(".form-selected-products").append('<div class="no-product-selected-msg"><div class="alert alert-danger" style="display: table;border: 1px solid red;border-left: 4px solid red;background-color:transparent;"><span class="icon ico-exclamation" style="display: table-cell;margin-right: 10px; font-size:21px"></span><div style=" display: inline-block;font-weight: 500;color: black;vertical-align: middle;margin-left: 8px;">'+"${FormDescription.WarningMessage.getData()}"+'</div></div><button class="back-to-selection cta-btn-inline dbswhite" type="button" style="margin-left: 0px; box-shadow:none;">'+"${FormDescription.SelectMoreButtonText.getData()}"+'</button></div>'); 1584 }); 1585 1586 $(document).on("click",".no-product-selected-msg .back-to-selection", function() { 1587 $(".lfr-ddm-form-pagination-controls .lfr-ddm-form-submit").attr("disabled", false); 1588 BackToSelection(); 1589 }); 1590 1591 function BackToSelection() { 1592 $(".products-selected-header").remove(); 1593 $(".form-selected-products").remove(); 1594 $(".sme-academy").show(); 1595 $(".sme-academy").closest(".portlet-boundary").nextAll(".portlet-boundary").show(); 1596 $(".slide-share .carousel").show(); 1597 $(".ddm-form-builder-app").hide(); 1598 $(".products-selected-footer__btn-cta").show(); 1599 $(".sme-academy")[0].scrollIntoView(); 1600 } 1601 1602 function SelectProduct(myClass) { 1603 var productUUID = $(myClass).closest("li.product-card-checkbox").attr("data-uuid"); 1604 var productTitle = $(myClass).closest("li.product-card-checkbox").find(".product-card-content .product-card-content__title").text().trim(); 1605 var productSubTitle = $(myClass).closest("li.product-card-checkbox").find(".product-card-content .product-card-content__subtitle").text().trim(); 1606 1607 $(".form-selected-products").remove(); 1608 var title = $(".liferay-ddm-form-field-text[data-fieldname*='SelectedProducts'] label").text().trim(); 1609 var selectedCoursesHTML = "<div class='form-selected-products'><h2>"+title+"</h2></div>"; 1610 $(".liferay-ddm-form-field-text[data-fieldname*='SelectedProducts']").after(selectedCoursesHTML); 1611 $(".ddm-form-builder-app").show(); 1612 $(".sme-academy").hide(); 1613 $(".slide-share .carousel").hide(); 1614 1615 $(".form-selected-products").append("<div class='form-selected-course'><p class='title'>"+productTitle+"</p><p class='date'>"+productSubTitle+"</p><span class='remove-course'>X</span><hr/></div>"); 1616 $(".liferay-ddm-form-field-text[data-fieldname*='SelectedProducts'] input").val($(".content-id").text().trim()+"="+productUUID); 1617 console.log("React mutation no 5.") 1618 undergoReactMutation("input[name*='SelectedProducts'][type='text']",$(".content-id").text().trim()+"="+productTitle); 1619 $("#nav-bar").append('<div class="products-selected-header"><div class="products-selected-header__container"><h2 class="products-selected-header__text">1 ${OtherLanguageLabel.SelectedText.getData()}</h2><button class="products-back-to-selection__btn-cta">${OtherLanguageLabel.ReturnButtonText.getData()}</button></div></div>'); 1620 $(".products-selected-header").get(0).scrollIntoView(); 1621 window.scrollTo({ top: 0, behavior: 'smooth' }); 1622 } 1623 }); 1624</#if> 1625 1626$(document).ready(function(){ 1627 if(window.location.href.indexOf("#")>-1) { 1628 var idOfAnchor = window.location.href.substring(window.location.href.indexOf("#")); 1629 if(idOfAnchor.length>1) 1630 { 1631 var x = $(idOfAnchor); 1632 $(window).scrollTop(x.offset().top-document.getElementById("header-wrapper").getBoundingClientRect().height); 1633 //document.getElementById(idOfAnchor).scrollIntoView(); 1634 } 1635 } 1636}); 1637 1638function bindCardNavigation() { 1639 cardScrollerContainer = document.querySelector('#product-card-layout'); 1640 cardItemSize = $(".product-card-checkbox:first").width(); 1641 1642 $(".product-card-layout").scroll(scrollEventHandler); 1643 $(".ico-arrowright1").click(scrollToNextEventHandler); 1644 $(".ico-arrowleft1").click(scrollToPrevEventHandler); 1645 1646 showArrowsIfNeeded(true); 1647} 1648 1649function scrollToNextEventHandler() { 1650 console.log("Right"); 1651 cardScrollerContainer.scrollBy(cardItemSize, 0); 1652} 1653 1654function scrollToPrevEventHandler() { 1655 console.log("Left"); 1656 cardScrollerContainer.scrollBy(-cardItemSize, 0); 1657} 1658 1659function scrollEventHandler(event) { 1660 var $width = $(this).outerWidth(); 1661 var $scrollWidth = $(this)[0].scrollWidth; 1662 var $scrollLeft = $(this).scrollLeft(); 1663 1664 if ($scrollWidth - $width === $scrollLeft) { 1665 $('.ico-arrowright1').css('opacity','0'); 1666 $('.ico-arrowleft1').css('opacity','1'); 1667 } else if (($scrollWidth - $width) > $scrollLeft) { 1668 $('.ico-arrowright1').css('opacity','1'); 1669 } 1670 1671 if ($scrollLeft === 0) { 1672 $('.ico-arrowright1').css('opacity','1'); 1673 $('.ico-arrowleft1').css('opacity','0'); 1674 } else if ($scrollLeft > 0) { 1675 $('.ico-arrowleft1').css('opacity','1'); 1676 } 1677 1678 if ($scrollLeft === 0 && ($scrollWidth - $width) === 0) { 1679 $('.ico-arrowright1').css('opacity','0'); 1680 $('.ico-arrowleft1').css('opacity','0'); 1681 } 1682} 1683 1684function showArrowsIfNeeded(isOnLoad) { 1685 var visibleCards; 1686 1687 if (isOnLoad) { 1688 visibleCards = $(".product-card-checkbox"); 1689 } else { 1690 visibleCards = $(".product-card-checkbox").filter(function() { 1691 return $(this).css("display") === "block"; 1692 }); 1693 } 1694 1695 console.log("Visible Cards", visibleCards.length); 1696 1697 if (visibleCards.length > 1) { 1698 $('.ico-arrowright1').css('opacity','1'); 1699 $('.ico-arrowleft1').css('opacity','0'); 1700 } else { 1701 $('.ico-arrowright1').css('opacity','0'); 1702 $('.ico-arrowleft1').css('opacity','0'); 1703 } 1704} 1705</script> 