rogerioromao.dev / purrform-frontend
The repo for Purrform's main BigCommerce store.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

62 mini cart preview (#63)

Co-authored-by: Copilot <copilot@github.com>

authored by

Rogerio Romao
Copilot and committed by
GitHub 9e38b859 e9f5a1fe

+297 -248
+35 -219
assets/scss/custom.scss
··· 349 349 } 350 350 } 351 351 352 - /************************ Header navUser ****************************/ 353 - 354 - .navUser { 355 - border-bottom: 4px solid $green-light; 356 - 357 - .navUser-item--account { 358 - display: block !important; 359 - border-right: 1px solid $white-color; 360 - 361 - svg { 362 - display: block !important; 363 - } 364 - } 365 - } 352 + /************************ Header navUser — see assets/scss/custom/components/_navigation.scss ****************************/ 366 353 367 - .navUser, 368 354 .navPages { 369 355 background-color: $headingColor; 370 356 position: static; ··· 399 385 } 400 386 } 401 387 402 - .navUser-section, 403 388 .navPages-list { 404 389 display: flex; 405 390 justify-content: right; 406 391 align-items: center; 392 + gap: clamp(0.25rem, 2vw, 2rem); 407 393 408 - .navUser-item, 409 394 .navPages-item { 410 395 @include breakpoint('medium') { 411 396 padding-left: 34px; 412 - margin-left: 2rem; 413 397 } 414 398 415 399 color: $white-color; 416 - 417 - &.navUser-item--contact { 418 - background: url('https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/need-help.png') 419 - left center no-repeat; 420 - padding: 1rem 0 1rem 34px; 421 - 422 - @include breakpoint('medium') { 423 - padding-bottom: 0; 424 - padding-top: 0; 425 - } 426 - 427 - span { 428 - font-weight: 400; 429 - } 430 - 431 - .navUser-action { 432 - display: inline-block; 433 - font-weight: 700; 434 - color: $secondary-color; 435 - } 436 - } 437 - 438 - &.navUser-item--search { 439 - background: url('https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/search.png') 440 - left center no-repeat; 441 - } 442 - 443 - &.navUser-item--account { 444 - display: block !important; 445 - z-index: 9; 446 - padding: 1rem 1rem 0.5rem 34px; 447 - height: 100%; 448 - 449 - a, 450 - .navUser-or { 451 - display: none; 452 - 453 - &.icon-container { 454 - position: fixed; 455 - display: inline-block; 456 - 457 - svg { 458 - position: relative; 459 - right: 20px; 460 - } 461 - } 462 - } 463 - 464 - @include breakpoint('medium') { 465 - border-right: none; 466 - padding: 0 0 10px 34px; 467 - 468 - a, 469 - .navUser-or { 470 - display: inline-block; 471 - 472 - &.icon-container { 473 - position: relative; 474 - top: 7px; 475 - left: 15px; 476 - } 477 - } 478 - 479 - .logout-icon { 480 - margin-left: 2rem; 481 - position: relative; 482 - top: 4px; 483 - right: 5px; 484 - } 485 - } 486 - } 487 - 488 - .navUser-action { 489 - color: $white-color; 490 - text-transform: none; 491 - font-weight: 700; 492 - padding: 0; 493 - 494 - svg { 495 - fill: none; 496 - stroke: none; 497 - } 498 - 499 - @include breakpoint('medium') { 500 - font-weight: 400; 501 - } 502 - } 503 - 504 - .navUser-or { 505 - color: $white-color; 506 - margin: -0.25rem; 507 - } 508 - 509 - &.navUser-item--cart { 510 - display: flex; 511 - align-items: center; 512 - width: 65px; 513 - 514 - @include breakpoint('medium') { 515 - width: auto; 516 - } 517 - 518 - * { 519 - font-size: 16px; 520 - font-weight: 400; 521 - } 522 - 523 - p { 524 - margin-bottom: 0; 525 - margin-top: 0; 526 - } 527 - 528 - a { 529 - background-color: transparent; 530 - border-radius: 30px; 531 - padding: 0.5rem 1rem; 532 - display: flex; 533 - position: relative; 534 - z-index: 999; 535 - align-items: center; 536 - color: $text-color; 537 - 538 - @include breakpoint('medium') { 539 - background-color: $white-color; 540 - display: flex; 541 - } 542 - 543 - span { 544 - padding: 0 0.2rem; 545 - } 546 - 547 - .countPill { 548 - background-color: $secondary-color; 549 - color: $text-color; 550 - display: none; 551 - font-size: 12px; 552 - position: relative; 553 - bottom: 10px; 554 - right: 5px; 555 - 556 - @include breakpoint('medium') { 557 - background-color: transparent; 558 - display: inline-block; 559 - position: static; 560 - font-size: 16px; 561 - } 562 - } 563 - 564 - .countPill--positive { 565 - display: inline-block; 566 - } 567 - 568 - svg { 569 - width: 20px; 570 - height: 18px; 571 - stroke: $white-color; 572 - overflow: visible; 573 - 574 - @include breakpoint('medium') { 575 - stroke: none; 576 - } 577 - } 578 - 579 - .cart-contents { 580 - display: none; 581 - 582 - @include breakpoint('medium') { 583 - display: inline; 584 - } 585 - } 586 - } 587 - 588 - #cart-preview-dropdown { 589 - top: 64px !important; 590 - } 591 - } 592 - } 593 - } 594 - 595 - .dropdown--quickSearch { 596 - @include breakpoint('medium') { 597 - top: 74px !important; 598 - background-color: $light-BgColor; 599 - } 600 - 601 - .form { 602 - width: auto; 603 - } 604 - 605 - .form-input { 606 - border-radius: 30px; 607 - border: 1px solid $input-field; 608 - font-size: 1rem; 609 - max-width: 560px; 610 - padding-left: 2.5rem; 611 - background: $white-color 612 - url('https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/drop-search-icon.png?') 613 - 15px center no-repeat; 614 - color: $input-field-text; 615 400 } 616 401 } 617 402 } ··· 805 590 } 806 591 807 592 &.navUser-item--account { 808 - display: block !important; 593 + display: flex !important; 594 + align-items: center; 595 + gap: 0.25rem; 809 596 z-index: 999; 810 - padding-left: 40px; 597 + padding: 1rem 1rem 1rem 40px; 811 598 background: url('https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/account.png') 812 599 10px center no-repeat; 813 600 814 601 a, 815 602 .navUser-or { 816 603 display: inline-block; 604 + color: $white-color; 605 + } 606 + 607 + .navUser-or { 608 + margin: 0 4px; 817 609 } 818 610 819 611 a { 612 + text-transform: none; 613 + padding: 0; 614 + 820 615 &::after { 821 616 display: none; 822 617 } 618 + } 619 + } 620 + 621 + &.navUser-item--contact { 622 + display: flex; 623 + align-items: center; 624 + gap: 0.25rem; 625 + padding: 1rem 1rem 1rem 40px; 626 + background: url('https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/need-help.png') 627 + left center no-repeat; 628 + 629 + span { 630 + color: $white-color; 631 + font-weight: 700; 632 + } 633 + 634 + a.navUser-action { 635 + text-transform: none; 636 + padding: 0; 637 + color: $secondary-color; 638 + font-weight: 700; 823 639 } 824 640 } 825 641
+230
assets/scss/custom/components/_navigation.scss
··· 1 + // Styles for templates/components/common/navigation.html 2 + // (the top-of-page user nav: search, login/register, cart pill) 3 + 4 + .navUser { 5 + background-color: $headingColor; 6 + border-bottom: 4px solid $green-light; 7 + position: static; 8 + transform: none; 9 + 10 + @include breakpoint('medium') { 11 + padding: 1rem 3px 1rem 15px; 12 + } 13 + 14 + .container { 15 + padding: 0; 16 + } 17 + 18 + .grid { 19 + grid-template-columns: 1fr 3fr 1fr; 20 + 21 + @include breakpoint('medium') { 22 + grid-template-columns: 1fr 3fr; 23 + } 24 + } 25 + 26 + .header-logo { 27 + margin: 0; 28 + max-height: 42px; 29 + 30 + .header-logo__link { 31 + width: 100%; 32 + 33 + @include breakpoint('medium') { 34 + width: auto; 35 + } 36 + } 37 + } 38 + 39 + // Right-side flex row — gap controls all spacing between items 40 + .navUser-section { 41 + display: flex; 42 + justify-content: flex-end; 43 + align-items: center; 44 + gap: clamp(0.5rem, 2vw, 2rem); 45 + 46 + .navUser-item { 47 + color: $white-color; 48 + display: none; 49 + 50 + @include breakpoint('medium') { 51 + display: flex; 52 + align-items: center; 53 + } 54 + 55 + // Search: inline SVG icon + text link 56 + &.navUser-item--search { 57 + gap: 0.5rem; 58 + 59 + a.navUser-action--quickSearch { 60 + display: flex; 61 + align-items: center; 62 + gap: 0.5rem; 63 + } 64 + } 65 + 66 + // Account: icon-container SVG + text links — uniform flex+gap 67 + &.navUser-item--account { 68 + gap: 0.5rem; 69 + z-index: 9; 70 + border-right: 1px solid $white-color; 71 + 72 + @include breakpoint('medium') { 73 + border-right: none; 74 + } 75 + 76 + // Hide text links on mobile, show on desktop 77 + a, 78 + .navUser-or { 79 + display: none; 80 + 81 + @include breakpoint('medium') { 82 + display: inline-flex; 83 + align-items: center; 84 + } 85 + } 86 + 87 + // Icon always visible as flex child 88 + a.icon-container { 89 + display: flex; 90 + align-items: center; 91 + 92 + @include breakpoint('medium') { 93 + position: relative; 94 + } 95 + } 96 + 97 + .logout-icon { 98 + @include breakpoint('medium') { 99 + display: inline-flex; 100 + align-items: center; 101 + } 102 + } 103 + 104 + @media (min-width: 801px) and (max-width: 900px) { 105 + a:not(.icon-container), 106 + .navUser-or { 107 + display: none; 108 + } 109 + } 110 + } 111 + 112 + // Cart: white pill wrapping icon + text 113 + &.navUser-item--cart { 114 + display: flex; 115 + 116 + p { 117 + margin: 0; 118 + } 119 + 120 + * { 121 + font-size: 16px; 122 + font-weight: 400; 123 + } 124 + 125 + a { 126 + display: flex; 127 + align-items: center; 128 + gap: 0.5rem; 129 + padding: 0.5rem 0.75rem; 130 + border-radius: 30px; 131 + color: $text-color; 132 + background-color: transparent; 133 + position: relative; 134 + z-index: 999; 135 + 136 + @include breakpoint('medium') { 137 + background-color: $white-color; 138 + } 139 + 140 + svg { 141 + width: 20px; 142 + height: 18px; 143 + flex-shrink: 0; 144 + stroke: $white-color; 145 + overflow: visible; 146 + 147 + @include breakpoint('medium') { 148 + stroke: none; 149 + } 150 + } 151 + 152 + .countPill { 153 + display: none; 154 + font-size: 16px; 155 + background-color: transparent; 156 + color: $text-color; 157 + 158 + @include breakpoint('medium') { 159 + display: inline-block; 160 + } 161 + } 162 + 163 + .countPill--positive { 164 + display: inline-block; 165 + } 166 + 167 + .cart-contents { 168 + display: none; 169 + 170 + @include breakpoint('medium') { 171 + display: inline; 172 + } 173 + } 174 + 175 + .navUser-item-cartLabel { 176 + display: none; 177 + 178 + @include breakpoint('medium') { 179 + display: inline; 180 + } 181 + } 182 + } 183 + 184 + #cart-preview-dropdown { 185 + top: 64px !important; 186 + } 187 + } 188 + 189 + .navUser-action { 190 + color: $white-color; 191 + text-transform: none; 192 + font-weight: 400; 193 + padding: 0; 194 + 195 + svg { 196 + fill: none; 197 + stroke: none; 198 + } 199 + } 200 + 201 + .navUser-or { 202 + color: $white-color; 203 + margin: 0; 204 + } 205 + } 206 + } 207 + 208 + .dropdown--quickSearch { 209 + @include breakpoint('medium') { 210 + top: 74px !important; 211 + background-color: $light-BgColor; 212 + } 213 + 214 + .form { 215 + width: auto; 216 + } 217 + 218 + .form-input { 219 + border-radius: 30px; 220 + border: 1px solid $input-field; 221 + font-size: 1rem; 222 + max-width: 560px; 223 + padding-left: 2.5rem; 224 + background: $white-color 225 + url('https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/drop-search-icon.png?') 226 + 15px center no-repeat; 227 + color: $input-field-text; 228 + } 229 + } 230 + }
+1 -4
assets/scss/custom/main.scss
··· 10 10 @import 'pages/account'; 11 11 12 12 /* Components */ 13 + @import 'components/navigation'; 13 14 @import 'components/widgets/homepage_carousel'; 14 15 @import 'components/accountsReward'; 15 16 @import 'components/widgets/3-column'; ··· 20 21 21 22 /* Layouts */ 22 23 @import 'layouts/footer'; 23 - 24 - .previewCartCheckout .previewCartCheckout-additionalCheckoutButtons { 25 - display: none !important; 26 - }
+1 -1
config.json
··· 1 1 { 2 - "name": "calculator pages redone", 2 + "name": "mini cart preview", 3 3 "version": "6.10.0", 4 4 "template_engine": "handlebars_v4", 5 5 "meta": {
+30 -24
templates/components/common/navigation.html
··· 52 52 </li> 53 53 <li class="navUser-item navUser-item--divider">|</li> 54 54 {{/if}} 55 - <li class="navUser-item navUser-item--contact"><span>{{lang 'common.need_help'}}</span> <a class="navUser-action" href="/contact-us/">{{lang 'common.contact'}}</a></li> 55 + 56 56 <li class="navUser-item navUser-item--search"> 57 - <button class="navUser-action navUser-action--quickSearch" 58 - type="button" 57 + <a class="navUser-action navUser-action--quickSearch" 58 + href="{{urls.search}}" 59 59 id="quick-search-expand" 60 60 data-search="quickSearch" 61 61 aria-controls="quickSearch" 62 62 aria-label="{{lang 'common.search'}}" 63 63 > 64 + <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 65 + <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1172 2C6.69893 2 3.11719 5.58172 3.11719 10C3.11719 14.4183 6.69893 18 11.1172 18C13.0071 18 14.7438 17.3349 16.1122 16.2271L20.4101 20.525C20.8006 20.9156 21.4338 20.9156 21.8243 20.525C22.2149 20.1345 22.2149 19.5013 21.8243 19.1108L17.5265 14.8129C18.6342 13.4445 19.2991 11.7078 19.2991 10C19.2991 5.58172 15.7354 2 11.1172 2ZM5.11719 10C5.11719 6.68629 7.80348 4 11.1172 4C14.4309 4 17.1172 6.68629 17.1172 10C17.1172 13.3137 14.4309 16 11.1172 16C7.80348 16 5.11719 13.3137 5.11719 10Z" fill="white"/> 66 + </svg> 64 67 {{lang 'common.search'}} 65 - </button> 68 + </a> 66 69 </li> 67 70 {{!--#if settings.gift_certificates_enabled}} 68 71 <li class="navUser-item"> ··· 149 152 150 153 <script> 151 154 async function getCartTotal() { 152 - const cartId = '{{ cart_id }}'; 155 + try { 156 + const cartsResponse = await fetch('/api/storefront/carts', { 157 + credentials: 'same-origin', 158 + headers: { Accept: 'application/json' }, 159 + }); 160 + if (!cartsResponse.ok) return ''; 161 + const carts = await cartsResponse.json(); 162 + const cartId = Array.isArray(carts) && carts.length ? carts[0].id : ''; 163 + if (!cartId) return ''; 153 164 154 - const query = ` 155 - query site { 156 - site { 157 - cart(entityId: "${cartId}") { 158 - entityId 159 - amountInDisplayCurrency { 160 - value 161 - currencyCode 162 - formattedV2 165 + const query = ` 166 + query site { 167 + site { 168 + cart(entityId: "${cartId}") { 169 + entityId 170 + amountInDisplayCurrency { 171 + value 172 + currencyCode 173 + formattedV2 174 + } 163 175 } 164 176 } 165 177 } 166 - } 167 - `; 178 + `; 168 179 169 - try { 170 180 const response = await fetch('/graphql', { 171 181 method: 'POST', 172 182 credentials: 'same-origin', 173 183 headers: { 174 184 'Content-Type': 'application/json', 175 - 'Authorization': `Bearer {{ settings.storefront_api.token }}` 185 + 'Authorization': `Bearer {{ settings.storefront_api.token }}`, 176 186 }, 177 - body: JSON.stringify({ 178 - query: query, 179 - variables: { cartId: cartId } 180 - }) 187 + body: JSON.stringify({ query }), 181 188 }); 182 189 183 190 const result = await response.json(); 184 - const formattedTotal = result.data.site.cart?.amountInDisplayCurrency?.formattedV2 || ''; 185 - return formattedTotal; 191 + return result.data.site.cart?.amountInDisplayCurrency?.formattedV2 || ''; 186 192 } catch (error) { 187 193 return null; 188 194 }