This Angular schematic adds Daffodil's ecommerce capabilities to existing Angular projects.
ng add @daffodil/ecommerce
The schematic will prompt you to configure:
You can also run the schematic with specific options:
ng add @daffodil/ecommerce --backend=magento --features=cart,product-catalog,design-system
--project
: Target project name (defaults to default project)--backend
: Backend type (magento
| in-memory
| custom
)--features
: Comma-separated list of features--routing
: Enable routing setup (default: true
)--skip-package-json
: Skip updating package.json dependenciescart
: Shopping cart functionality with state managementproduct-catalog
: Product listing and details with state managementcustomer-auth
: Customer authentication and account managementsearch
: Product search capabilitiescheckout
: Checkout process and order managementdesign-system
: Daffodil UI components (buttons, cards, etc.)This schematic will:
After running ng add @daffodil/ecommerce
with cart and product-catalog features:
@daffodil/cart
, @daffodil/product
, and @ngrx/store
will be addedapp-module.ts
will import DaffCartStateModule
and DaffProductStateModule
ProductListComponent
will be generatedIf you choose Magento backend, update your environment.ts
with your Magento GraphQL endpoint:
export const environment = {
production: false,
apiUrl: 'https://your-magento-store.com/graphql'
};
The in-memory backend is great for development and testing. No additional configuration needed.
If you choose custom backend, you'll need to implement the necessary driver services for your API.
To build this schematic package:
npm run build:schematics
To test locally:
npm link
ng new test-app
cd test-app
ng add @daffodil/ecommerce