CheckoutButton

Features

• Integrated Components: Combines IconButtonComponent and DiscountInfoComponent for seamless user interaction and promotional display.
• Flexible Layout: Supports a centered layout using the center class.
• Dynamic Button: Provides a customizable button that emits events for interactions.
• Promotional Messaging: Displays a discount or promotional offer below the button.

Usage

Step 1: Import the Component

Add the CheckoutButtonComponent to your Angular project by including it in your module or component imports array.

import { CheckoutButtonComponent } from "src/app/components/checkout-button/checkout-button.component";
 
@Component({
  ...
  imports: [..., CheckoutButtonComponent],
  ...
})

Step 2: Add the Template

Include the component in your template:

<checkout-button></checkout-button>

Configuration

Default Layout

The component includes a button and promotional message, arranged vertically. Add it to your page as follows:

<checkout-button></checkout-button>

Centered Layout

To center-align the button and promotional content, use the center class:

<checkout-button class="center"></checkout-button>

This will align the content in a column layout with centralized positioning.

Component Structure

HTML Template

The CheckoutButtonComponent includes the following:

• Button: Customizable via IconButtonComponent for text, icon size, and event handling.
• Promotional Info: Displays discount offers using DiscountInfoComponent.

Example

<div class="button-wrapper text-center xl:text-left">
  <icon-button
    class="mt-4"
    [iconSize]="20"
    [buttonText]="'Get DevRocket'"
    (buttonClicked)="onButtonClick()"
  ></icon-button>
  <discount-info></discount-info>
</div>

Styling

Customize the layout by overriding styles in your global or component-specific stylesheets.

Centered Layout Styling

The center class applies the following styles to center-align content:

:host.center {
  .button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}

Example

Display a checkout button with promotional information:

<checkout-button></checkout-button>

Center the layout for focused engagement:

<checkout-button class="center"></checkout-button>

Button Interaction

The IconButtonComponent triggers the onButtonClick method, which you can customize for various interactions, such as opening an external link:

onButtonClick(): void {
  window.open('https://www.google.com', '_blank');
}