Dokumentacja zmian plików graficznych: rwd shoper Wersja zmian: 5.8.32-5.8.33 Pliki.tpl scripts/search.tpl - 1 <form data-search-promotions-route="{route key="promotions"}" data-base-dir="{basedir}" class="js search search" action="{route key='s earch'}" method="post"> + 1 + 2 <form data-product-view-type="{$view escape}" data-search-promotions-route="{route key="promotions"}" data-base-dir="{basedir}" class=" js search search" action="{route key='search'}" method="post"> 3 {include file="formantispam.tpl"} 4 <div class="search input-area r--l-flex r--l-flex-vcenter"> 5 <div class="search input-area-item"> - 6 <span class="js search-clear-btn search btn icon icon-close search icon none"></span> - 7 <img class="search loader none" src="{basedir}/public/admin/{$admin_skin}/images/loader.svg"> + 5 <span class="js search-clear-btn search btn icon icon-close search icon none" role="button" aria-label="clear search inp ut"></span> + 6 <img class="search loader none" src="{basedir}/public/images/loader.svg"> 7 </div> 8 9 <div class="search input-area-item search input-area-item_grow"> 12 </div> 13 14 <div class="search input-area-item"> - 15 <span class="js search-close-btn icon icon-back"></span> + 15 <span class="js search-close-btn icon icon-back" role="button" aria-label="close search"></span> 16 <button type="button" class="js search-submit-btn search input-area-item btn btn-red search btn-search r--l-flex r--l-fl ex-vcenter r--l-flex-hcenter"> - 17 <span class="fas fa-search search icon"></span> + 17 <span class="fa fa-search search icon_size-l"></span> 18 </button> 19 </div> 20 </div> Pliki.css Pliki.less Copyright 2018 Shoper. All rights reserved. Strona 1/12
styles/_modules.less 308 309.search { 310.btn { - 311 width: auto; - 312 padding: 14px; + 311 width: 40px; + 312 padding: 0; 313 314 &::before { 315 content: none; styles/_search.less 1 @headlinebgcolor: #ececec; - 2 @headbgcolor: #ffffff; - 3 @headcolor: #5c657e; 4-5 @searchfontcolor: #2a3445; 6 @searchbasespacing: 15px; 7 8 @searcherrormessagecolor: @alerterrorcolor; 9 @searchinfomessagecolor: @alertbginfo; 10-11 @searchdetailsfontcolor: #565454; - 12-13 @searchiconcolor: #3366cc; - 14 15.search { 16 position: relative; - 17 color: @searchfontcolor; + 10 color: @fontbasiccolor; + 11 + 12 button { + 13 font-family: 'Open Sans', sans-serif; + 14 } 15 16 *, *::after, *::before { 17 box-sizing: border-box; 20 &_open { 21.search content { 22 display: block; - 23 animation: searchshow 200ms ease-out; - 24 animation-delay: 100ms; - 25 animation-fill-mode: both; Copyright 2018 Shoper. All rights reserved. Strona 2/12
26 } 27 } 28 52.search input-area { 53 border-color: rgba(240,220,100,0.8); 54 outline: thin rgba(240,220,100,0.8); + 55 + 56 -webkit-box-shadow: inset 0 1px 1px rgba(240,220,100,0.1), 0 0 8px rgba(240,220,100,0.6); 57 box-shadow: inset 0 1px 1px rgba(240,220,100,0.1), 0 0 8px rgba(240,220,100,0.6); 58 } 59 } 67 appearance: none; 68 border: none; 69 background: none; + 70 + 71 -webkit-box-shadow: none; 72 box-shadow: none; + 73 74 padding: @searchbasespacing; 75 margin: 0; 76 min-height: 100%; 77 width: 100%; - 78 color: @searchfontcolor; + 75 color: @fontbasiccolor; 76 77 &::-webkit-search-decoration, 78 &::-webkit-search-cancel-button, 87 &:focus { 88 outline: none; 89 border: none; + 90 -webkit-box-shadow: none; 91 box-shadow: none; 92 } 93 } 94 95 &-area { - 96 background-color: #ffffff; + 95 background-color: @bgcolor; 96 padding: 0; 97 padding-left: @searchbasespacing * 0.5; - 98 border: 1px solid #D8D8D8; + 98 border: 1px solid @bordercolor; 99 border-right: none; 100 101 &_error { Copyright 2018 Shoper. All rights reserved. Strona 3/12
137 138 -webkit-box-align: center; 139 -ms-flex-align: center; - 140 align-items: center; 141 + 142 align-items: center; 143 padding: @searchbasespacing * 0.5 @searchbasespacing * 0.75 @searchbasespacing * 0.5 @searchbasespacing * 0.1; 144 cursor: pointer; 145 146 margin: 0; 147 } 148-149 &_active { - 150 background-color: #f5f7ff; + 149 &_active, &:hover { + 150 background-color: @searchlistitembgcolor; + 151 } + 152 + 153 &-action-btn { + 154 margin-left: @searchbasespacing * 0.5; 155 } 156 } 157 } 163 min-width: 410px; 164 width: 100%; 165 overflow: hidden; + 166 + 167 -webkit-box-shadow: 0 2px 9px 0 rgba(16, 47, 102, 0.16); 168 box-shadow: 0 2px 9px 0 rgba(16, 47, 102, 0.16); - 169 background-color: #ffffff; + 167 + 168 background-color: @bgcolor; 169 z-index: 20; 170 } 171 177 } 178 } 179-180 & btn-clear { - 181 cursor: pointer; + 180 & btn { + 181 &-clear { + 182 cursor: pointer; Copyright 2018 Shoper. All rights reserved. Strona 4/12
+ 183 } + 184 + 185 &_link { + 186 font-size: inherit; + 187 vertical-align: unset; + 188 } 189 } 190 191 & item { 198 padding-right: @searchbasespacing; 199 margin: @searchbasespacing; 200 } + 201 + 202 &-container { + 203 width: 100%; + 204 } 205 } 206 207 & loader { 210 211 & icon { 212 font-size: 1em; - 213 color: #333333; + 213 color: @linkbasiccolor; 214-215 &_blue { - 216 color: @searchiconcolor; + 215 &_size-l { + 216 font-size: 1.3em; + 217 line-height: 1em; + 218 } + 219 + 220 &_main-color { + 221 color: @maincolor; 222 } 223 224 &_size-xl { 232 233 & message { 234 padding: @searchbasespacing * 0.5; + 235 word-break: break-word; 236 237 &_error { 238 color: @alerterrorcolor; Copyright 2018 Shoper. All rights reserved. Strona 5/12
247 &-head { 248 font-size: 0.9em; 249 margin: 0; - 250 background-color: @headbgcolor; + 250 background-color: @bgcolor; 251 252 &_sticky { 253 position: sticky; 262 263 -webkit-box-align: center; 264 -ms-flex-align: center; - 265 align-items: center; 266 + 267 align-items: center; 268 text-transform: uppercase; - 269 color: @headcolor; + 267 color: @fontlightcolor; 268 269 &::after { 270 content: ''; - 271 272 flex: 1 1 auto; 273 height: 1px; 274 background-color: @headlinebgcolor; 291 } 292 293 &-note { - 294 font-size: 0.9em; + 294 font-size: 0.96em; 295 296 &-item { + 297 color: @greyfont; + 298 299 &:not(:last-child) { 300 margin-right: @searchbasespacing * 0.5; 301 } 302 } 303 } 304 + 305 &-category-title { + 306 font-size: 0.8em; + 307 font-weight: 300; + 308 color: @greyfont; + 309 margin-left: @searchbasespacing * 0.4; + 310 } + 311 Copyright 2018 Shoper. All rights reserved. Strona 6/12
312 &-title-item { 313 margin: 0; 314 display: inline; 331 width: 100%; 332 333 &:hover { - 334 color: @searchfontcolor; + 334 color: @fontbasiccolor; 335 } 336 } 337 347 348 &_inactive { 349 text-decoration: line-through; - 350 color: @greyfont; + 350 color: @fontlightcolor; 351 } 352 } 353 355 font-weight: bold; 356 } 357 + 358 &_regular { + 359 font-weight: normal; + 360 } + 361 362 &_match { 363 font-weight: normal; 364 } 369 display: -webkit-box; 370 display: -ms-flexbox; 371 display: flex; + 372 373 -webkit-box-align: center; 374 -ms-flex-align: center; + 375 376 align-items: center; 377 width: 100%; 378 392 bottom: 50px; 393 right: 50px; Copyright 2018 Shoper. All rights reserved. Strona 7/12
394 border-radius: 50%; - 395 padding: 0.7em; + 395 padding: 0.45em 0.85em; 396 font-size: 1em; 397 cursor: pointer; 398 399 &_open { 400 display: block; + 401 will-change: transform; + 402 -webkit-animation: show-mobile-btn 0.2s ease-out both; + 403 animation: show-mobile-btn 0.2s ease-out both; 404 } 405 406 &_close { 407 display: none; 408 } + 409 + 410 &_closing { + 411 will-change: transform; + 412 -webkit-animation: hide-mobile-btn 0.2s ease-out both; + 413 animation: hide-mobile-btn 0.2s ease-out both; + 414 } 415 } 416 417.message { 427 display: flex; 428 429 li { - 430 color: @searchdetailsfontcolor; + 430 color: @greyfont; 431 } 432 433 > li, li:not(:last-child) { 458 display: none; 459 } 460-461 a { + 461 a,.link { + 462 color: @acolor; + 463 text-decoration: none; 464 cursor: pointer; + 465 + 466 &:hover { + 467 color: @maincolor; + 468 + 469 img { Copyright 2018 Shoper. All rights reserved. Strona 8/12
+ 470 text-decoration: none; + 471 } + 472 } 473 } 474 } 475 + 476 @keyframes hide-mobile-btn { + 477 0% { + 478 transform: translatey(0); + 479 opacity: 1; + 480 } 481-482 @keyframes searchshow { - 483 from { + 467 100% { 468 opacity: 0; - 469 } to { - 470 opacity: 1; + 469 transform: translatey(15px); 470 } 471 } 472 + 473 @keyframes show-mobile-btn { + 474 0% { + 475 transform: translatey(15px); + 476 opacity: 0; + 477 } + 478 + 479 100% { + 480 opacity: 1; + 481 transform: translatey(0); + 482 } + 483 } 484 485 @keyframes loader-spin { 486 0% { 487 -webkit-transform: rotate(0deg); 488 transform: rotate(0deg); 489 } - 490 100% { + 479 + 480 100% { 481 -webkit-transform: rotate(359deg); 482 transform: rotate(359deg); 483 } styles/_searchresponsive.less 59 right: 0; Copyright 2018 Shoper. All rights reserved. Strona 9/12
60 bottom: 0; 61 margin: 0; - 62 z-index: 90001; + 62 z-index: 20; 63 overflow: auto; 64 max-width: inherit; 65 66.search item { 67 &_content { - 68 max-height: inherit; + 68 max-height: unset; 69 } 70 } 71 94 } 95 } 96 } + 97 + 98 &-empty { + 99.search content { + 100 opacity: 0.7; + 101 } + 102 } + 103 } + 104 + 105 & content { + 106 min-width: 100%; + 107 max-width: inherit; + 108 + 109 min-height: 100%; + 110 max-height: inherit; 111 } 112 } 113 styles/_variables.less 58 @customscrollbarwidth: 10px; 59 @customscrollbarradius: 10px; 60 @customscrollbarbgcolor: #f3f4f8; - 61 @customscrollbarthumbcolor: #79829c; + 61 @customscrollbarthumbcolor: @maincolor; + 62 + 63 /* Search */ + 64 @searchlistitembgcolor: #f5f7ff; Copyright 2018 Shoper. All rights reserved. Strona 10/12
Pliki.js js/main.js 1017 var queryobject; 1018 var searchprase; 1019 + 1020 if (window.shoplayer) { + 1021 shoplayer.push({ + 1022 'FrontSearchType': 0 + 1023 }); + 1024 } + 1025 1026 if (window.location.search) { 1027 queryobject = Shop.fn.encodeQueryString(window.location.search); 1028 1077 if (this.innerwidth < 768) { 1078 if (!search.objects.view.isopen()) { 1079 $el.addclass('none'); - 1080 } else { - 1081 search.objects.view.showmask(); 1082 } 1083 1084 $searchbutton.off('click').on('click', function (e) { 1086 } else { 1087 $searchbutton.off('click'); 1088 $el.removeclass('none'); - 1089 search.objects.view.hidemask(); 1090 } 1091 }, 100)); 1092 } 1551 1552 window.addeventlistener('beforeinstallprompt', function (ev) { 1553 ev.userchoice.then(function (choiceresult) { - 1554 if (window.ga) { + 1554 if (window.shoplayer) { 1555 ga('client.send', 'event', 'PWA', choiceresult.outcome); - 1556 ga('send', 'event', 'PWA', choiceresult.outcome); + 1556 + 1557 shoplayer.push({ + 1558 event: 'PWA', + 1559 category: 'PWA', + 1560 result: choiceresult.outcome + 1561 }); Copyright 2018 Shoper. All rights reserved. Strona 11/12
1562 } 1563 }); 1564 }); Copyright 2018 Shoper. All rights reserved. Strona 12/12