GhCart

This library for interacting with app state. Contains:

1. cart

To use the gh-cart library in your Angular project, follow these steps:

Installation

Install the gh-cart library by running the following command npm install --save @a15-ghm/gh-cart

Importing

import { StoreModule } from '@ngrx/store';
import { GhCartModule } from '@a15-ghm/gh-cart';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, StoreModule.forRoot({}), GhCartModule],
  providers: [],
  bootstrap: [AppComponent],
})

Pass env variables to the a15-ghm/gh-utils library. This is necessary to add a products

import Environment from '@a15-ghm/gh-utils/environment';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  public ngOnInit() {
    Environment.setEnvVariables(environment);
  }
}

Using

Use getCart method to get cart state

import { GhCartService } from '@a15-ghm/gh-cart';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  private cart;

  constructor(private ghCartService: GhCartService) {}
  //or
  private ghCartService: GhCartService = inject(GhCartService);

  public ngOnInit() {
    this.ghCartService.getCart().subscribe((cart) => {
      this.cart = cart;
    });
  }
}

Use addUrlProducts method to add products

Note that you need to pass a method that shows an error to the user when adding a product, and parameters for this method if needed

@Component({
  selector: 'page-cart',
  templateUrl: './cart.html',
  styleUrls: ['./cart.scss'],
})
export class CartPageComponent {
  constructor(private ghCartService: GhCartService) {}
  //or
  private ghCartService: GhCartService = inject(GhCartService);

  ngOnInit(): void {
    this.ghCartService.addUrlProducts(
      this.toastService.pop.bind(this.toastService, 'something went wrong', SnackbarType.error, 5, SnackbarPosition.topCenter)
    );
  }
}

Use removeProduct method to remove product

@Component({
  selector: 'page-cart',
  templateUrl: './cart.html',
  styleUrls: ['./cart.scss'],
})
export class CartPageComponent {
  constructor(private ghCartService: GhCartService) {}
  //or
  private ghCartService: GhCartService = inject(GhCartService);

  removeProduct(productId: string): void {
    this.ghCartService.removeProduct(productId);
  }
}

Use incrementProductCount method to increment product

@Component({
  selector: 'page-cart',
  templateUrl: './cart.html',
  styleUrls: ['./cart.scss'],
})
export class CartPageComponent {
  constructor(private ghCartService: GhCartService) {}
  //or
  private ghCartService: GhCartService = inject(GhCartService);

  incrementProductCount(sfid: string): void {
    this.ghCartService.incrementProductCount(sfid);
  }
}

Use decrementProductCount method to decrement product

@Component({
  selector: 'page-cart',
  templateUrl: './cart.html',
  styleUrls: ['./cart.scss'],
})
export class CartPageComponent {
  constructor(private ghCartService: GhCartService) {}
  //or
  private ghCartService: GhCartService = inject(GhCartService);

  decrementProductCount(sfid: string): void {
    this.ghCartService.decrementProductCount(sfid);
  }
}

Use getCartProductsCount method to get products count

@Component({
  selector: 'page-cart',
  templateUrl: './cart.html',
  styleUrls: ['./cart.scss'],
})
export class CartPageComponent {
  private cartProductsCount;

  constructor(private ghCartService: GhCartService) {}
  //or
  private ghCartService: GhCartService = inject(GhCartService);

  getCartProductsCount(): void {
    this.ghCartService.getCartProductsCount().subscribe((cartProductsCount) => {
      this.cartProductsCount = cartProductsCount;
    });
  }
}

Use getCartSubtotalBeforeDiscount method to get cart subtotal before discount

@Component({
  selector: 'page-cart',
  templateUrl: './cart.html',
  styleUrls: ['./cart.scss'],
})
export class CartPageComponent {
  private cartSubtotalBeforeDiscount;

  constructor(private ghCartService: GhCartService) {}
  //or
  private ghCartService: GhCartService = inject(GhCartService);

  getCartSubtotalBeforeDiscount(): void {
    this.ghCartService.getCartSubtotalBeforeDiscount().subscribe((cartSubtotalBeforeDiscount) => {
      this.cartSubtotalBeforeDiscount = cartSubtotalBeforeDiscount;
    });
  }
}

Use getCartSubtotal method to get cart subtotal

@Component({
  selector: 'page-cart',
  templateUrl: './cart.html',
  styleUrls: ['./cart.scss'],
})
export class CartPageComponent {
  private cartSubtotal;

  constructor(private ghCartService: GhCartService) {}
  //or
  private ghCartService: GhCartService = inject(GhCartService);

  getCartSubtotal(): void {
    this.ghCartService.getCartSubtotal().subscribe((cartSubtotal) => {
      this.cartSubtotal = cartSubtotal;
    });
  }
}

Use getCartTotalAmount method to get cart total amount

@Component({
  selector: 'page-cart',
  templateUrl: './cart.html',
  styleUrls: ['./cart.scss'],
})
export class CartPageComponent {
  private cartTotalAmount;

  constructor(private ghCartService: GhCartService) {}
  //or
  private ghCartService: GhCartService = inject(GhCartService);

  getCartTotalAmount(): void {
    this.ghCartService.getCartTotalAmount().subscribe((cartTotalAmount) => {
      this.cartTotalAmount = cartTotalAmount;
    });
  }
}

Use clearCart method to remove all products and variants

@Component({
  selector: 'page-cart',
  templateUrl: './cart.html',
  styleUrls: ['./cart.scss'],
})
export class CartPageComponent {
  constructor(private ghCartService: GhCartService) {}
  //or
  private ghCartService: GhCartService = inject(GhCartService);

  clearCart(): void {
    this.ghCartService.clearCart();
  }
}

Use getCartProducts method to get cart products and variants

@Component({
  selector: 'page-cart',
  templateUrl: './cart.html',
  styleUrls: ['./cart.scss'],
})
export class CartPageComponent {
  private productsAndVariants;

  constructor(private ghCartService: GhCartService) {}
  //or
  private ghCartService: GhCartService = inject(GhCartService);

  getCartProducts(): void {
    this.ghCartService.getCartProducts().subscribe((productsAndVariants) => {
      this.productsAndVariants = productsAndVariants;
    });
  }
}

Use getCartProductIds method to get cart product IDs

@Component({
  selector: 'page-cart',
  templateUrl: './cart.html',
  styleUrls: ['./cart.scss'],
})
export class CartPageComponent {
  private cartProductIds;

  constructor(private ghCartService: GhCartService) {}
  //or
  private ghCartService: GhCartService = inject(GhCartService);

  getCartProductIds(): void {
    this.ghCartService.getCartProductIds().subscribe((cartProductIds) => {
      this.cartProductIds = cartProductIds;
    });
  }
}