@yumpii/ngx-webview-lib

Angular library for building commerce webviews powered by the Yumpii data structure. Provides a complete set of UI components, services, and models to render product catalogs, manage shopping carts, handle payments, and track analytics — all configurable through a remote JSON configuration.

Installation

npm install @yumpii/ngx-webview-lib

Peer Dependencies

npm install ngx-owl-carousel-o@^19.0.0 ngx-infinite-scroll@^19.0.0 ng-click-outside @migopayments/sdk@^2.3.0 angular-google-tag-manager@^1.11.0 handlebars@^4.7.8 localstorage-slim@^2.7.1

Quick Start

1. Import Modules

import {
  YumpiiGenericViewsModule,
  YumpiiCategorizedModeModule,
  YumpiiLoaderInterceptor,
} from '@yumpii/ngx-webview-lib';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    YumpiiGenericViewsModule,
    YumpiiCategorizedModeModule,
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: YumpiiLoaderInterceptor, multi: true },
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideAnimations(),
    provideHttpClient(withInterceptorsFromDi()),
  ],
})
export class AppModule {}

2. Set Up Routing

import {
  YumpiiMainContainerComponent,
  YumpiiCartContainerComponent,
  YumpiiProductContainerComponent,
  YumpiiPaymentContainerComponent,
  // ... other components
} from '@yumpii/ngx-webview-lib';

const routes: Routes = [
  {
    path: ':slug',
    component: YumpiiMainContainerComponent,
    children: [
      { path: 'product/:id', component: YumpiiProductContainerComponent },
      { path: 'cart', component: YumpiiCartContainerComponent },
      { path: 'payment', component: YumpiiPaymentContainerComponent },
      // ... see full routing in documentation
    ],
  },
];

3. Access the Webview

http://localhost:4200/{slug}?orderId=12345&userId=user-001

What's Included

| Category | Count | |---|---| | NgModules | 3 (YumpiiSharedModule, YumpiiGenericViewsModule, YumpiiCategorizedModeModule) | | Standalone Entry Point | 1 (YumpiiMainContainerComponent) | | Components & Containers | 40+ | | Services | 21 | | Model Classes & Interfaces | 21 | | Pipes & Directives | 2 |

Key Features

• Product Catalog — Category navigation, product listing, search, featured items
• Shopping Cart — Add/remove products, quantity management, customizations, coupons
• Payment Flow — Card payment form, payment validation polling, success/error screens
• Theming — Full visual customization via CSS custom properties
• Analytics — Google Tag Manager and Meta Pixel integration
• Loyalty/Rewards — Points display, redemption slider, progress tracking
• Internationalization — 48+ translatable text keys with Spanish defaults
• Customization — Extend any component for custom behavior and templates

Customization

Extend library components in your wrapper project:

import { YumpiiCartComponent } from '@yumpii/ngx-webview-lib';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
})
export class CustomCartComponent extends YumpiiCartComponent {
  // Override or add methods as needed
}

Requirements

| Requirement | Version | |---|---| | Angular | ^19.1.0 | | Angular Material | ^19.1.1 | | RxJS | ~7.8.0 | | TypeScript | ~5.7.2 |

License

Proprietary — Copyright 2025 Yumpii Team. All rights reserved.