Cart: Default

Same as 2018

HTML
View
Context
Assets
Info
Notes


        
        <div class="block-desktop-cart">
    <div class="c-cart">

        <div class="c-cart__header">
            <p class="c-cart__title">Il tuo carrello</p>
        </div>

        <div class="c-cart__body">
            <div class="c-cart__items">
                <div class="c-cart__item">
                    <div class="c-cart-item">

                        <div class="c-cart-item__block">
                            <div class="c-cart-item__img-container">
                                <img src="/images/svgs/p1.svg" alt="Parcheggio P1" class="c-cart-item__img">
                            </div>
                            <div class="c-cart-item__body">
                                <p class="c-cart-item__name">P1 Terminal</p>
                                <div class="c-cart-item__info">
                                    <p class="start-date">10/03/2025</p>
                                    <p class="end-date">15/03/2025</p>
                                    <p class="qty">x2</p>
                                </div>
                            </div>
                        </div>

                        <div class="c-cart-item__block">
                            <p class="c-cart-item__price">15 €</p>
                            <div class="c-cart-item__cta">
                                <button type="button" class="c-cart-item__btn-delete js-fr-dialogmodal-open" aria-label="Elimina parcheggio" aria-controls="dialog-parking-item-deletion">
                                    <svg class="c-icon c-icon--24">
                                        <use xlink:href="#ic-trash"></use>
                                    </svg> </button>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="c-cart__item">
                    <div class="c-cart-item">

                        <div class="c-cart-item__block">
                            <div class="c-cart-item__img-container">
                                <img src="/images/svgs/p2.svg" alt="Parcheggio P2" class="c-cart-item__img">
                            </div>
                            <div class="c-cart-item__body">
                                <p class="c-cart-item__name">P2 Terminal</p>
                                <div class="c-cart-item__info">
                                    <p class="start-date">16/03/2025</p>
                                    <p class="end-date">20/03/2025</p>
                                    <p class="qty">x2</p>
                                </div>
                            </div>
                        </div>

                        <div class="c-cart-item__block">
                            <p class="c-cart-item__price">15 €</p>
                            <div class="c-cart-item__cta">
                                <button type="button" class="c-cart-item__btn-delete js-fr-dialogmodal-open" aria-label="Elimina parcheggio" aria-controls="dialog-parking-item-deletion">
                                    <svg class="c-icon c-icon--24">
                                        <use xlink:href="#ic-trash"></use>
                                    </svg> </button>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="c-cart__item">
                    <div class="c-cart-item">

                        <div class="c-cart-item__block">
                            <div class="c-cart-item__img-container">
                                <img src="/images/svgs/p3.svg" alt="Parcheggio P3" class="c-cart-item__img">
                            </div>
                            <div class="c-cart-item__body">
                                <p class="c-cart-item__name">P3 Terminal</p>
                                <div class="c-cart-item__info">
                                    <p class="start-date">21/03/2025</p>
                                    <p class="end-date">25/03/2025</p>
                                    <p class="qty">x2</p>
                                </div>
                            </div>
                        </div>

                        <div class="c-cart-item__block">
                            <p class="c-cart-item__price">15 €</p>
                            <div class="c-cart-item__cta">
                                <button type="button" class="c-cart-item__btn-delete js-fr-dialogmodal-open" aria-label="Elimina parcheggio" aria-controls="dialog-parking-item-deletion">
                                    <svg class="c-icon c-icon--24">
                                        <use xlink:href="#ic-trash"></use>
                                    </svg> </button>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="c-cart__item">
                    <div class="c-cart-item">

                        <div class="c-cart-item__block">
                            <div class="c-cart-item__img-container">
                                <img src="/images/svgs/p4.svg" alt="Parcheggio P4" class="c-cart-item__img">
                            </div>
                            <div class="c-cart-item__body">
                                <p class="c-cart-item__name">P4 Terminal</p>
                                <div class="c-cart-item__info">
                                    <p class="start-date">26/03/2025</p>
                                    <p class="end-date">30/03/2025</p>
                                    <p class="qty">x2</p>
                                </div>
                            </div>
                        </div>

                        <div class="c-cart-item__block">
                            <p class="c-cart-item__price">15 €</p>
                            <div class="c-cart-item__cta">
                                <button type="button" class="c-cart-item__btn-delete js-fr-dialogmodal-open" aria-label="Elimina parcheggio" aria-controls="dialog-parking-item-deletion">
                                    <svg class="c-icon c-icon--24">
                                        <use xlink:href="#ic-trash"></use>
                                    </svg> </button>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="c-cart__item">
                    <div class="c-cart-item">

                        <div class="c-cart-item__block">
                            <div class="c-cart-item__img-container">
                                <img src="/images/svgs/p5.svg" alt="Parcheggio P5" class="c-cart-item__img">
                            </div>
                            <div class="c-cart-item__body">
                                <p class="c-cart-item__name">P5 Terminal</p>
                                <div class="c-cart-item__info">
                                    <p class="start-date">31/03/2025</p>
                                    <p class="end-date">05/04/2025</p>
                                    <p class="qty">x2</p>
                                </div>
                            </div>
                        </div>

                        <div class="c-cart-item__block">
                            <p class="c-cart-item__price">15 €</p>
                            <div class="c-cart-item__cta">
                                <button type="button" class="c-cart-item__btn-delete js-fr-dialogmodal-open" aria-label="Elimina parcheggio" aria-controls="dialog-parking-item-deletion">
                                    <svg class="c-icon c-icon--24">
                                        <use xlink:href="#ic-trash"></use>
                                    </svg> </button>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="c-cart__item">
                    <div class="c-cart-item">

                        <div class="c-cart-item__block">
                            <div class="c-cart-item__img-container">
                                <img src="/images/svgs/p6.svg" alt="Parcheggio P6" class="c-cart-item__img">
                            </div>
                            <div class="c-cart-item__body">
                                <p class="c-cart-item__name">P6 Terminal</p>
                                <div class="c-cart-item__info">
                                    <p class="start-date">04/05/2025</p>
                                    <p class="end-date">07/05/2025</p>
                                    <p class="qty">x2</p>
                                </div>
                            </div>
                        </div>

                        <div class="c-cart-item__block">
                            <p class="c-cart-item__price">15 €</p>
                            <div class="c-cart-item__cta">
                                <button type="button" class="c-cart-item__btn-delete js-fr-dialogmodal-open" aria-label="Elimina parcheggio" aria-controls="dialog-parking-item-deletion">
                                    <svg class="c-icon c-icon--24">
                                        <use xlink:href="#ic-trash"></use>
                                    </svg> </button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="c-cart__vouchers">
                <div class="c-cart__vouchers-disclosure">
                    <div class="c-collapsible o-collapsible o-collapsible--raw o-collapsible--raw">
                        <p class="c-collapsible__title o-collapsible__title js-collapsible-title" id="">Voucher x3</p>
                        <div class="c-cart__voucher-items">
                            <div class="c-cart__voucher-item">
                                <div>
                                    <span class="recap-label">Voucher TYPE8567MH</span>
                                </div>
                                <div>
                                    <span class="final">- 20,99 €</span>
                                </div>
                            </div>
                            <div class="c-cart__voucher-item">
                                <div>
                                    <span class="recap-label">Voucher TYPE1234KL</span>
                                </div>
                                <div>
                                    <span class="final">- 40,00 €</span>
                                </div>
                            </div>
                            <div class="c-cart__voucher-item">
                                <div>
                                    <span class="recap-label">Voucher TYPE9964IT</span>
                                </div>
                                <div>
                                    <span class="final">- 20,40 €</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div><span class="c-cart__vouchers-total">- 80,99 €</span></div>
            </div>

        </div>

        <div class="c-cart__footer">
            <div class="c-cart__total">
                <p class="c-cart__total-label">Totale ordine</p>
                <div class="c-cart__total-price">
                    <p class="initial-price">40,00 €</p>
                    <p class="final-price">20,00 €</p>
                </div>
            </div>
            <div class="c-cart__cta">
                <button type="submit" class="c-button c-button--submit">

                    Procedi

                </button>
            </div>
            <p class="cta-secondary-text">Oppure fai una <button type="button" class="c-button c-button--as-link">

                    nuova ricerca

                </button></p>
        </div>

    </div>
</div>

<div class="block-mobile-cart">
    <div class="c-cart c-cart--mobile">

        <div class="c-cart__mob-wrapper">
            <div class="c-cart__cta"><button type="submit" class="c-button c-button--submit">

                    Procedi

                </button></div>
            <div class="right-block">
                <a href="#" class="cart-link">Carrello</a>
                <div class="c-cart__total-price">
                    <p class="initial-price">40,00 €</p>
                    <p class="final-price">20,00 €</p>
                </div>
            </div>
        </div>

    </div>
</div>


        <div class="block-desktop-cart">
  <div class="c-cart{{#if modifier}} {{modifier}}{{/if}}">
  
    {{!-- HEADER --}}
    <div class="c-cart__header">
      <p class="c-cart__title">Il tuo carrello</p>
    </div>
    {{!-- END HEADER --}}
    
    {{!-- BODY --}}
    <div class="c-cart__body">
      <div class="c-cart__items">
        {{#each items}}
        <div class="c-cart__item">
          {{ render "@cart-item" cart-item merge=true }}
        </div>
        {{/each}}
      </div>
      
      {{!-- Vouchers --}}
      {{#if vouchers-disclosure }}
      <div class="c-cart__vouchers">
        <div class="c-cart__vouchers-disclosure">
          {{#> @collapsible--raw vouchers-disclosure }}
            <div class="c-cart__voucher-items">
              {{#each items}}
                <div class="c-cart__voucher-item">
                  <div>
                    <span class="recap-label">{{ name }}</span>
                  </div>
                  <div>
                    <span class="final">{{ price }}</span>
                  </div>
                </div>
              {{/each}}
            </div>
            {{/@collapsible--raw}}
        </div>
        <div><span class="c-cart__vouchers-total">- 80,99 €</span></div>
      </div>
      {{/if}}
      {{!-- End vouchers --}}
  
    </div>
    {{!-- END BODY --}}
  
    {{!-- FOOTER --}}
    <div class="c-cart__footer">
      <div class="c-cart__total">
        <p class="c-cart__total-label">{{ label-total }}</p>
        <div class="c-cart__total-price">
          <p class="initial-price">{{ price.initial }}</p>
          <p class="final-price">{{ price.final }}</p>
        </div>
      </div>
      <div class="c-cart__cta">
        {{> @button btn-pay }}
      </div>
      <p class="cta-secondary-text">Oppure fai una {{> @button btn-new-search }}</p>
    </div>
    {{!-- END FOOTER --}}
  
  </div>
</div>

<div class="block-mobile-cart">
  {{ render "@cart--mobile" }}
</div>


        
            
            {
  "items": [
    {
      "cart-item": {
        "item-info": {
          "img": {
            "src": "/images/svgs/p1.svg",
            "alt": "Parcheggio P1"
          },
          "name": "P1 Terminal",
          "start-date": "10/03/2025",
          "end-date": "15/03/2025",
          "qty": "x2",
          "price": "15"
        }
      }
    },
    {
      "cart-item": {
        "item-info": {
          "img": {
            "src": "/images/svgs/p2.svg",
            "alt": "Parcheggio P2"
          },
          "name": "P2 Terminal",
          "start-date": "16/03/2025",
          "end-date": "20/03/2025",
          "qty": "x2",
          "price": "15"
        }
      }
    },
    {
      "cart-item": {
        "item-info": {
          "img": {
            "src": "/images/svgs/p3.svg",
            "alt": "Parcheggio P3"
          },
          "name": "P3 Terminal",
          "start-date": "21/03/2025",
          "end-date": "25/03/2025",
          "qty": "x2",
          "price": "15"
        }
      }
    },
    {
      "cart-item": {
        "item-info": {
          "img": {
            "src": "/images/svgs/p4.svg",
            "alt": "Parcheggio P4"
          },
          "name": "P4 Terminal",
          "start-date": "26/03/2025",
          "end-date": "30/03/2025",
          "qty": "x2",
          "price": "15"
        }
      }
    },
    {
      "cart-item": {
        "item-info": {
          "img": {
            "src": "/images/svgs/p5.svg",
            "alt": "Parcheggio P5"
          },
          "name": "P5 Terminal",
          "start-date": "31/03/2025",
          "end-date": "05/04/2025",
          "qty": "x2",
          "price": "15"
        }
      }
    },
    {
      "cart-item": {
        "item-info": {
          "img": {
            "src": "/images/svgs/p6.svg",
            "alt": "Parcheggio P6"
          },
          "name": "P6 Terminal",
          "start-date": "04/05/2025",
          "end-date": "07/05/2025",
          "qty": "x2",
          "price": "15"
        }
      }
    }
  ],
  "vouchers-disclosure": {
    "modifier": "o-collapsible--raw",
    "title": "Voucher x3",
    "items": [
      {
        "name": "Voucher TYPE8567MH",
        "price": "- 20,99 €"
      },
      {
        "name": "Voucher TYPE1234KL",
        "price": "- 40,00 €"
      },
      {
        "name": "Voucher TYPE9964IT",
        "price": "- 20,40 €"
      }
    ]
  },
  "label-total": "Totale ordine",
  "price": {
    "initial": "40,00 €",
    "final": "20,00 €"
  },
  "btn-pay": {
    "type": "submit",
    "text": "Procedi",
    "modifier": "c-button--submit"
  },
  "btn-new-search": {
    "type": "button",
    "text": "nuova ricerca",
    "modifier": "c-button--as-link"
  }
}

File:

Content:


                                .c-cart {
  background-color: secondary(basic-white, 100);
  @include shadow(high);
  padding: remify(24px);
  border-radius: remify(16px);
  flex-direction: column;
  gap: remify(16px);
  display: flex;
  border: remify(1px) solid primary(night, 10);
}

.block-desktop-cart {
  display: none;

  @include min-screen(bp(tablet-p)) {
    display: block;
  }
}

.block-mobile-cart {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: $z-Index-mobile-sticky-cart;

  @include min-screen(bp(tablet-p)) {
    display: none;
  }

}

.c-cart__title {
  @include font-scale(level-3, bold);
  color: primary(night, 100);
}

.c-cart__body {
  display: flex;
  flex-direction: column;
  gap: remify(16px);
}

.c-cart__item {
  border-bottom: remify(1px) solid primary(night, 20);
}

.c-cart__footer {
  display: flex;
  flex-direction: column;
  gap: remify(12px);
  margin-top: remify(16px);
}

.c-cart__cta .c-button {
  width: 100%;
  margin-top: 0 !important; // Using !important to override margin-top from _form.scss to prevent style conflicts
}

.c-cart__footer .cta-secondary-text {
  @include font-scale(level-2);
  color: secondary(text, 100);
  text-align: center;
}

.c-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: remify(16px);
}

.c-cart__total-label {
  @include font-scale(level-2, bold);
  color: primary(night, 100);
}

.c-cart__total-price {
  display: flex;
  align-items: center;
  gap: remify(8px);

  .initial-price {
    @include font-scale(level-2);
    color: primary(night, 60);
    text-decoration: line-through;
  }

  .final-price {
    @include font-scale(level-4, bold);
    color: secondary(text, 100);
  }

}

.c-cart__vouchers {
  position: relative;
  // margin-block: remify(16px);

  .final {
    @include font-scale(level-1-5);
  }

}

.c-cart__vouchers-total {
  @include font-scale(level-2, bold);
  position: absolute;
  right: 0;
  top: 0;
  color: secondary(text, 100);
}

.c-cart__vouchers {

  .c-collapsible__button {
    @include font-scale(level-2);
    color: primary(night, 100);
    cursor: pointer;
  }

}

.c-cart__voucher-info {
  @include font-scale(level-2);
  color: secondary(text, 100);

  @include max-screen(bp(tablet-p)) {
    display: none;
  }
}

.c-cart__voucher-items {
  display: flex;
  flex-direction: column;
  gap: remify(8px);
  margin-top: remify(8px);
}

.c-cart__voucher-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  @include font-scale(level-1);
}

/*------------------------------------*\
  Modifier: c-cart--mobile
\*------------------------------------*/
.c-cart--mobile {
  border-radius: 0;
  padding: remify(16px);
  box-shadow: 0px -6px 15px -3px rgba(15, 47, 77, 0.2);

  .c-cart__mob-wrapper {
    display: flex;
    justify-content: space-between;
    gap: remify(16px);
  }

  .right-block {
    display: flex;
    align-items: flex-end;
    gap: remify(16px);
  }

  .cart-link {
    @include font-scale(level-2, semibold);
    color: primary(night, 100);
  }

  .c-cart__total-price {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }

  .c-cart__total-price .initial-price {
    @include font-scale(level-1);
  }

  .c-cart__total-price .final-price {
    @include font-scale(level-3, bold);
  }

}

URL: /components/raw/cart/_cart.scss
Filesystem Path: src/views/03-organisms/cart/_cart.scss
Size: 3.3 KB

Handle: @cart--default
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/cart/cart.hbs
References (4): @cart-item, @collapsible--raw, @button, @cart--mobile
Referenced by (20): @page-parking-results, @page-parking-results--hybrid, @page-parkings-insert-email, @page-parkings-signup-step-1, @page-parkings-signup-step-1--comeback-user, @page-parkings-signup-step-2, @page-parkings-signup-step-3, @page-parking-login-step-1, @page-parking-payment, @page-parking-edit-data, @page-agencies-signup-step-1, @page-agencies-signup-step-2, @page-agencies-signup-step-3, @page-agencies-signup-step-3b, @page-agencies-login-step-1, @page-agencies-login-step-2, @page-agencies-recap, @page-agencies-edit-data, @page-agencies-promo-codes, @page-agencies-promo-codes--multiple

No notes defined.