### Install @daffodil/design with Yarn Source: https://next.daff.io/docs/design/getting-started Command to install the @daffodil/design library using Yarn. This is an alternative to npm for managing project dependencies. ```bash yarn add @daffodil/design ``` -------------------------------- ### Install Daffodil Commerce Package Source: https://next.daff.io/docs/guides/getting-started Installs the core Daffodil commerce package into an Angular application. This package provides the necessary components to start building storefronts without backend dependencies. ```bash npx ng add @daffodil/commerce ``` -------------------------------- ### Install @daffodil/design with npm Source: https://next.daff.io/docs/design/getting-started Command to install the @daffodil/design library using npm. This is a prerequisite for using the library in your Angular project. ```bash npm install @daffodil/design --save ``` -------------------------------- ### Run Angular Development Server Source: https://next.daff.io/docs/guides/getting-started Starts the local development server for the Angular project. This command builds the application and makes it accessible at a local URL. ```bash npm start ``` -------------------------------- ### Daffodil Hero Component Template Example Source: https://next.daff.io/docs/design/getting-started HTML template snippet showing how to use the `` component with its associated directives like `daffHeroTagline`, `daffHeroTitle`, and `daffHeroSubtitle`. ```html
Frontend framework for ecommerce PWAs

Daffodil: The next great leap in ecommerce.

Daffodil provides everything you need to create powerful and flexible ecommerce experiences.

With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.

 ``` -------------------------------- ### Create New Angular Project Source: https://next.daff.io/docs/guides/getting-started Scaffolds a new Angular project with SCSS styling and routing enabled. This is the initial step for developing a storefront locally. ```bash npx @angular/cli@20 new my-project --style=scss --routing=true ``` -------------------------------- ### Install @daffodil/paypal with npm Source: https://next.daff.io/docs/packages/paypal Installs the `@daffodil/paypal` package using npm. This is a standard package installation command. ```bash npm install @daffodil/paypal --save ``` -------------------------------- ### Install Daffodil Ecommerce Schematic with Options Source: https://next.daff.io/docs/packages/schematics Install the Daffodil Ecommerce Schematic with specific backend and feature options. This allows for a customized setup, for example, choosing Magento as the backend and including cart, product catalog, and design system features. ```bash ng add @daffodil/ecommerce --backend=magento --features=cart,product-catalog,design-system ``` -------------------------------- ### Install @daffodil/search-product with yarn Source: https://next.daff.io/docs/packages/search-product Installs the @daffodil/search-product package using yarn. This command adds the package as a dependency to your project. ```bash yarn add @daffodil/search-product ``` -------------------------------- ### Install @daffodil/paypal with yarn Source: https://next.daff.io/docs/packages/paypal Installs the `@daffodil/paypal` package using yarn. This is an alternative package installation command. ```bash yarn add @daffodil/paypal ``` -------------------------------- ### Install @daffodil/navigation with npm Source: https://next.daff.io/docs/packages/navigation Installs the @daffodil/navigation package using npm. This is a standard package installation command. ```bash npm install @daffodil/navigation --save ``` -------------------------------- ### Install @daffodil/search-product with npm Source: https://next.daff.io/docs/packages/search-product Installs the @daffodil/search-product package using npm. This command adds the package as a dependency to your project. ```bash npm install @daffodil/search-product --save ``` -------------------------------- ### Install @daffodil/navigation with yarn Source: https://next.daff.io/docs/packages/navigation Installs the @daffodil/navigation package using yarn. This is an alternative package installation command. ```bash yarn add @daffodil/navigation ``` -------------------------------- ### Install @daffodil/product-configurable with npm Source: https://next.daff.io/docs/packages/product-configurable Installs the @daffodil/product-configurable package and its dependencies using npm. This is the standard way to add the package to your project. ```bash npm install @daffodil/product-configurable --save ``` -------------------------------- ### Install @daffodil/reviews with yarn Source: https://next.daff.io/docs/packages/reviews Installs the @daffodil/reviews package using yarn. This command adds the package as a dependency to your project. ```bash yarn add @daffodil/reviews ``` -------------------------------- ### Install @daffodil/customer-auth with npm Source: https://next.daff.io/docs/packages/customer-auth Installs the @daffodil/customer-auth package using npm. This command adds the package as a dependency to your project. ```bash npm install @daffodil/customer-auth --save ``` -------------------------------- ### Include Global Styles in styles.scss Source: https://next.daff.io/docs/design/getting-started SCSS code to include the minimal required global styles for the Daffodil Design System. This ensures consistent behavior across all supported browsers. ```scss @forward '@daffodil/design/scss/global'; ``` -------------------------------- ### Install @daffodil/customer-auth with Yarn Source: https://next.daff.io/docs/packages/customer-auth Installs the @daffodil/customer-auth package using Yarn. This command adds the package as a dependency to your project. ```bash yarn add @daffodil/customer-auth ``` -------------------------------- ### Apply Daffodil Theme using SCSS Source: https://next.daff.io/docs/design/getting-started SCSS code to apply the Daffodil component themes. It uses the `daff-component-themes` mixin and the default theme variable, applied to the `html` selector for global coverage. ```scss @use '@daffodil/design/scss/theme' as daff-theme; html { @include daff-theme.daff-component-themes(daff-theme.$theme); } ``` -------------------------------- ### Install @daffodil/contact with yarn Source: https://next.daff.io/docs/packages/contact Installs the @daffodil/contact package using yarn. This is an alternative to npm for package installation. ```bash yarn add @daffodil/contact ``` -------------------------------- ### Install @daffodil/reviews with npm Source: https://next.daff.io/docs/packages/reviews Installs the @daffodil/reviews package using npm. This command adds the package as a dependency to your project. ```bash npm install @daffodil/reviews --save ``` -------------------------------- ### Install @daffodil/customer-order with yarn Source: https://next.daff.io/docs/packages/customer-order Installs the @daffodil/customer-order package using yarn. This command adds the package as a dependency to your project, ensuring it's available for use. ```bash yarn add @daffodil/customer-order ``` -------------------------------- ### Install @daffodil/product-composite with yarn Source: https://next.daff.io/docs/packages/product-composite Installs the @daffodil/product-composite package using yarn. This command adds the package as a dependency to your project. ```bash yarn add @daffodil/product-composite ``` -------------------------------- ### Install @daffodil/seo with npm Source: https://next.daff.io/docs/packages/seo Installs the @daffodil/seo package using npm. This is a common package manager for JavaScript projects. ```bash npm install @daffodil/seo --save ``` -------------------------------- ### Install @daffodil/payment with yarn Source: https://next.daff.io/docs/packages/payment This snippet demonstrates how to install the @daffodil/payment package using yarn, an alternative package manager. It adds the package as a dependency to your project, similar to the npm installation. ```bash yarn add @daffodil/payment ``` -------------------------------- ### Install @daffodil/seo with yarn Source: https://next.daff.io/docs/packages/seo Installs the @daffodil/seo package using yarn. This is an alternative package manager for JavaScript projects. ```bash yarn add @daffodil/seo ``` -------------------------------- ### Install @daffodil/product-composite with npm Source: https://next.daff.io/docs/packages/product-composite Installs the @daffodil/product-composite package using npm. This command adds the package as a dependency to your project. ```bash npm install @daffodil/product-composite --save ``` -------------------------------- ### Install @daffodil/product-configurable with yarn Source: https://next.daff.io/docs/packages/product-configurable Installs the @daffodil/product-configurable package and its dependencies using yarn. This is an alternative package manager for adding the package to your project. ```bash yarn add @daffodil/product-configurable ``` -------------------------------- ### Install @daffodil/related-products with npm Source: https://next.daff.io/docs/packages/related-products Installs the @daffodil/related-products package using npm. This package adds related products functionality to @daffodil/product. Ensure you have npm installed and configured. ```bash npm install @daffodil/related-products --save ``` -------------------------------- ### Install @daffodil/category with yarn Source: https://next.daff.io/docs/packages/category Installs the @daffodil/category package using yarn. This command achieves the same outcome as the npm installation but uses the yarn package manager. ```bash yarn add @daffodil/category ``` -------------------------------- ### Install @daffodil/customer-order with npm Source: https://next.daff.io/docs/packages/customer-order Installs the @daffodil/customer-order package using npm. This command adds the package as a dependency to your project, ensuring it's available for use. ```bash npm install @daffodil/customer-order --save ``` -------------------------------- ### Install @daffodil/router-store Source: https://next.daff.io/docs/packages/router-store Installs the @daffodil/router-store package using npm. This package provides router state utilities for Daffodil applications. ```bash npm install --save @daffodil/router-store ``` -------------------------------- ### Install @daffodil/related-products with yarn Source: https://next.daff.io/docs/packages/related-products Installs the @daffodil/related-products package using yarn. This package adds related products functionality to @daffodil/product. Ensure you have yarn installed and configured. ```bash yarn add @daffodil/related-products ``` -------------------------------- ### Install @daffodil/search-category with yarn Source: https://next.daff.io/docs/packages/search-category Installs the @daffodil/search-category package using yarn. This command-line instruction adds the package as a dependency to your project. ```bash yarn add @daffodil/search-category ``` -------------------------------- ### Install @daffodil/customer with yarn Source: https://next.daff.io/docs/packages/customer Installs the @daffodil/customer package using yarn. This command adds the package as a dependency to your project. ```bash yarn add @daffodil/customer ``` -------------------------------- ### Install @daffodil/customer with npm Source: https://next.daff.io/docs/packages/customer Installs the @daffodil/customer package using npm. This command adds the package as a dependency to your project. ```bash npm install @daffodil/customer --save ``` -------------------------------- ### Install @daffodil/authorizenet with yarn Source: https://next.daff.io/docs/packages/authorizenet Installs the @daffodil/authorizenet package using yarn. This command adds the package as a dependency to your project. ```bash yarn add @daffodil/authorizenet ``` -------------------------------- ### Install @daffodil/auth with npm Source: https://next.daff.io/docs/packages/auth Installs the @daffodil/auth package using npm. This command adds the package as a dependency to your project. ```bash npm install @daffodil/auth --save ``` -------------------------------- ### Install @daffodil/authorizenet with npm Source: https://next.daff.io/docs/packages/authorizenet Installs the @daffodil/authorizenet package using npm. This command adds the package as a dependency to your project. ```bash npm install @daffodil/authorizenet --save ``` -------------------------------- ### Install @daffodil/search-category with npm Source: https://next.daff.io/docs/packages/search-category Installs the @daffodil/search-category package using npm. This is a prerequisite for using category search functionality. ```bash npm install @daffodil/search-category --save ``` -------------------------------- ### Install @daffodil/content with npm Source: https://next.daff.io/docs/packages/content Installs the @daffodil/content package using npm. This is a common method for adding project dependencies in Node.js environments. ```bash npm install @daffodil/content --save ``` -------------------------------- ### Install @daffodil/dev-tools Source: https://next.daff.io/docs/packages/dev-tools Installs the @daffodil/dev-tools package using npm. This is the first step to integrating developer tools into your Daffodil application. ```bash npm install @daffodil/dev-tools ``` -------------------------------- ### Install @daffodil/contact with npm Source: https://next.daff.io/docs/packages/contact Installs the @daffodil/contact package using npm. This is a prerequisite for using the contact form features. ```bash npm install @daffodil/contact --save ``` -------------------------------- ### Install @daffodil/cart-store-credit with npm Source: https://next.daff.io/docs/packages/cart-store-credit This snippet shows how to install the @daffodil/cart-store-credit package using npm. This is the primary method for adding the package to an Angular project. ```bash npm install @daffodil/cart-store-credit --save ``` -------------------------------- ### Import and Use Daffodil Hero Component in Angular Source: https://next.daff.io/docs/design/getting-started Angular component code demonstrating how to import the `DAFF_HERO_COMPONENTS` and use the `` tag in the template. This is an example of integrating a Daffodil component into an Angular application. ```typescript import { DAFF_HERO_COMPONENTS } from '@daffodil/design/hero'; @Component({ standalone: true, selector: 'custom-component', templateUrl: './custom-component.component.html', imports: [ DAFF_HERO_COMPONENTS, ], }) export class CustomComponent {} ``` -------------------------------- ### Provide DaffToast Example (Angular Module) Source: https://next.daff.io/docs/design/components/toast_tab=api-tab Example of registering the DaffToastService within an Angular module using provideDaffToast. This setup configures the default toast position. ```typescript import { provideDaffToast } from '@daffodil/design/toast'; @NgModule({ providers: [ provideDaffToast({ position: { vertical: 'bottom', horizontal: 'left', }, }), ] }) export class AppModule {} ``` -------------------------------- ### DaffUpsellProductsStateTestingModule Module Definition Source: https://next.daff.io/docs/api/upsell-products/state/testing/DaffUpsellProductsStateTestingModule Provides a basic example of how DaffUpsellProductsStateTestingModule might be defined as an NgModule. This is a placeholder and would typically be integrated into a larger testing module setup. ```typescript @NgModule() class DaffUpsellProductsStateTestingModule {} ``` -------------------------------- ### DaffInMemoryBackendCartBillingAddressService Source: https://next.daff.io/docs/api/cart/driver/in-memory/DaffInMemoryBackendCartBillingAddressService Provides an in-memory backend implementation for cart billing address operations. It handles GET and PUT requests for the 'cart-billing-address' collection. ```APIDOC ## DaffInMemoryBackendCartBillingAddressService ### Description This service implements the `DaffInMemorySingleRouteableBackend` interface for managing cart billing addresses in memory. It defines the collection name and handles GET and PUT requests. ### Method GET ### Endpoint `/cart-billing-address` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```json { "example": "GET /cart-billing-address" } ``` ### Response #### Success Response (200) - **any** - The response structure depends on the specific request, but it will relate to cart billing address data. #### Response Example ```json { "example": "[Billing Address Data]" } ``` --- ## DaffInMemoryBackendCartBillingAddressService ### Description This service implements the `DaffInMemorySingleRouteableBackend` interface for managing cart billing addresses in memory. It defines the collection name and handles GET and PUT requests. ### Method PUT ### Endpoint `/cart-billing-address` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **any** - The request body should contain the billing address data to be updated. ### Request Example ```json { "example": "PUT /cart-billing-address", "body": { "street": "123 Main St", "city": "Anytown", "state": "CA", "postcode": "90210", "country": "USA" } } ``` ### Response #### Success Response (200) - **any** - The response structure depends on the specific request, but it will relate to cart billing address data. #### Response Example ```json { "example": "[Updated Billing Address Data]" } ``` ``` -------------------------------- ### DaffInMemoryBackendPaypalService Methods Source: https://next.daff.io/docs/api/paypal/driver/in-memory/DaffInMemoryBackendPaypalService Details the methods available in the DaffInMemoryBackendPaypalService. These include parseRequestUrl for parsing incoming request URLs, createDb for initializing the in-memory database, and get for handling GET requests. ```typescript parseRequestUrl( url: string, utils: RequestInfoUtilities ): ParsedRequestUrl createDb(): any get(reqInfo: any): any ``` -------------------------------- ### Configure Angular Stylesheet in angular.json Source: https://next.daff.io/docs/design/getting-started Configuration snippet for angular.json to include the primary SCSS stylesheet for the Angular application. This is necessary for global styles to be applied. ```json { "projects": { "app-name": { "architect": { "build": { "options": { "styles": [ "src/styles.scss" ], } } } } } } ``` -------------------------------- ### Configure App with Daffodil Navigation In-Memory Driver Source: https://next.daff.io/docs/api/navigation/driver/in-memory/provideDaffNavigationInMemoryDriver This example demonstrates how to configure your application using `app.config` to include the `provideDaffNavigationInMemoryDriver`. This setup is essential for enabling in-memory navigation functionality within your Daffodil application. It assumes the presence of `routes`, `provideRouter`, `provideHttpClient`, and `provideDaffInMemoryDriver`. ```typescript import { provideRouter } from '@angular/router'; import { provideHttpClient } from '@angular/common/http'; import { ApplicationConfig } from '@angular/core'; import { provideDaffInMemoryDriver } from '@daffodil/driver/testing'; import { provideDaffNavigationInMemoryDriver } from '@daffodil/navigation/driver/in-memory'; const routes = []; // Assume routes are defined elsewhere const myConfig = {}; // Assume myConfig is defined elsewhere export const appConfig: ApplicationConfig = { providers: [ provideRouter(routes), provideHttpClient(), provideDaffInMemoryDriver(myConfig), provideDaffNavigationInMemoryDriver(), ] }; ``` -------------------------------- ### Import Magento Content Get Blocks Query Name (TypeScript) Source: https://next.daff.io/docs/api/content/driver/magento/MAGENTO_CONTENT_GET_BLOCKS_QUERY_NAME This snippet shows how to import the MAGENTO_CONTENT_GET_BLOCKS_QUERY_NAME constant from the Daffodil content driver for Magento. This constant is used to reference a specific GraphQL query for fetching content blocks from a Magento backend. ```typescript import { MAGENTO_CONTENT_GET_BLOCKS_QUERY_NAME } from '@daffodil/content/driver/magento' const MAGENTO_CONTENT_GET_BLOCKS_QUERY_NAME: "MagentoContentGetBlocks" ``` -------------------------------- ### Import Daffodil Cart Reducer Initial State Source: https://next.daff.io/docs/api/cart/state/daffCartReducerInitialState Demonstrates how to import the `daffCartReducerInitialState` from the `@daffodil/cart/state` package. This constant is used to define the default state for the cart reducer in your Redux or similar state management setup. It requires the `@daffodil/cart/state` package to be installed. ```typescript import { daffCartReducerInitialState } from '@daffodil/cart/state' const daffCartReducerInitialState: DaffCartReducerState ``` -------------------------------- ### Get Guest Orders with Daffodil Magento 2.4.1 Driver Source: https://next.daff.io/docs/api/order/driver/magento/2-4-1/getGuestOrders This snippet demonstrates how to import and use the `getGuestOrders` function from the Daffodil Magento 2.4.1 driver. It includes the necessary import statement and the TypeScript type definition for the function, which can optionally accept additional order fragments. ```typescript import { getGuestOrders } from '@daffodil/order/driver/magento/2-4-1' const getGuestOrders: (extraOrderFragments?: any[]) => TypedDocumentNode ``` -------------------------------- ### DaffInMemoryBackendNavigationService Methods Overview Source: https://next.daff.io/docs/api/navigation/driver/in-memory/DaffInMemoryBackendNavigationService This section provides a brief overview of the methods available in the DaffInMemoryBackendNavigationService. It includes details on the return types and parameters for `parseRequestUrl` and `get` methods. ```typescript parseRequestUrl `ParsedRequestUrl` Parameter| `url: string` Parameter| `utils: RequestInfoUtilities` createDb `any` get `any` Parameter| `reqInfo: any` ``` -------------------------------- ### Initialize Daffodil Search Product Composite Reducers Source: https://next.daff.io/docs/api/search-product-composite/state/daffSearchProductCompositeReducers Initializes the Daffodil search product composite reducers, which are responsible for managing the state of the entire search feature. This includes actions related to searching for composite products. No external dependencies are required for this initialization. ```typescript import { daffSearchProductCompositeReducers } from '@daffodil/search-product-composite/state'; const daffSearchProductCompositeReducers: ActionReducerMap>; ``` -------------------------------- ### Install @daffodil/forms with yarn Source: https://next.daff.io/docs/packages/forms Installs the @daffodil/forms package using yarn. This command adds the package as a project dependency, similar to the npm install command. ```bash yarn add @daffodil/forms ``` -------------------------------- ### DaffPaymentInMemoryBackendService Initialization and Get Method Source: https://next.daff.io/docs/api/payment/driver/in-memory/DaffPaymentInMemoryBackendService This snippet shows the import statement and the basic structure of the DaffPaymentInMemoryBackendService class. It includes the import for the service itself and highlights the 'get' method, which is responsible for handling payment requests by delegating them to configured backends. ```typescript import { DaffPaymentInMemoryBackendService } from '@daffodil/payment/driver/in-memory'; @Injectable() class DaffPaymentInMemoryBackendService implements InMemoryDbService, DaffInMemorySingleRouteableBackend { readonly collectionName: "payment" = DAFF_PAYMENT_IN_MEMORY_COLLECTION_NAME; get(reqInfo: RequestInfo): any { // Implementation details for handling payment requests } } ``` -------------------------------- ### DaffInMemoryBackendCartBillingAddressService Implementation (TypeScript) Source: https://next.daff.io/docs/api/cart/driver/in-memory/DaffInMemoryBackendCartBillingAddressService This code snippet shows the implementation of the DaffInMemoryBackendCartBillingAddressService in TypeScript. It extends DaffInMemorySingleRouteableBackend and defines the collection name for cart billing addresses. It includes placeholder methods for 'get' and 'put' operations, which would typically handle requests related to cart billing addresses in an in-memory environment. Dependencies include `@daffodil/cart/driver/in-memory`. ```typescript import { Injectable } from '@angular/core'; import { DaffInMemorySingleRouteableBackend } from '@daffodil/core/testing'; import { RequestInfo } from 'angular-in-memory-web-api'; import { DAFF_CART_IN_MEMORY_CART_BILLING_ADDRESS_COLLECTION_NAME } from '@daffodil/cart/driver/in-memory'; @Injectable() class DaffInMemoryBackendCartBillingAddressService implements DaffInMemorySingleRouteableBackend { readonly collectionName: "cart-billing-address" = DAFF_CART_IN_MEMORY_CART_BILLING_ADDRESS_COLLECTION_NAME; get(reqInfo: RequestInfo): any { // Implementation for GET request } put(reqInfo: RequestInfo): any { // Implementation for PUT request } } ``` -------------------------------- ### DaffProductInMemoryDriverModule Setup Source: https://next.daff.io/docs/api/product/driver/in-memory/DaffProductInMemoryDriverModule This snippet shows how to import and configure the DaffProductInMemoryDriverModule, which provides an in-memory implementation for the Daffodil product service. This is useful for testing or development environments where a real backend is not required. ```typescript import { DaffProductInMemoryDriverModule } from '@daffodil/product/driver/in-memory' @NgModule() class DaffProductInMemoryDriverModule {} ``` -------------------------------- ### Install @daffodil/core with yarn Source: https://next.daff.io/docs/packages/core Installs the @daffodil/core package using yarn. This command adds the package as a dependency to your project, enabling its use in your frontend ecommerce store. ```bash yarn add @daffodil/core ``` -------------------------------- ### Customer Store Credit Get Method Source: https://next.daff.io/docs/api/customer-store-credit/driver/in-memory/DaffCustomerStoreCreditInMemoryBackendService This snippet defines the 'get' method within the DaffCustomerStoreCreditInMemoryBackendService. This method is responsible for handling incoming HTTP GET requests related to customer store credit, processing the RequestInfo object. ```typescript get(reqInfo: RequestInfo): any { // Implementation details for fetching customer store credit based on reqInfo } ``` -------------------------------- ### Fetch Product by URL Source: https://next.daff.io/docs/api/driver Retrieves details for a specific product using its unique URL handle. This is useful for direct product page lookups. ```APIDOC ## GET /api/shopify/products/url/{handle} ### Description Retrieves details for a specific product using its URL-friendly handle. ### Method GET ### Endpoint /api/shopify/products/url/{handle} ### Parameters #### Path Parameters - **handle** (String) - Required - The URL-specific handle of the product. ### Request Example ``` GET /api/shopify/products/url/awesome-t-shirt ``` ### Response #### Success Response (200) - **id** (ID) - The unique identifier for the product. - **title** (String) - The name of the product. - **handle** (String) - The URL-friendly handle of the product. - **descriptionHtml** (String) - The product description in HTML format. - **images** (Object) - A connection object for product images. - **edges** (Array) - An array of image edges. - **node** (Object) - The image node. - **url** (URL) - The URL of the image. - **altText** (String) - The alternative text for the image. #### Response Example ```json { "id": "gid://shopify/Product/1234567890", "title": "Awesome T-Shirt", "handle": "awesome-t-shirt", "descriptionHtml": "

This is an awesome t-shirt!

", "images": { "edges": [ { "node": { "url": "https://cdn.shopify.com/s/files/1/0001/0001/products/tshirt.jpg", "altText": "Front view of the t-shirt" } } ] } } ``` ``` -------------------------------- ### Install @daffodil/router with yarn Source: https://next.daff.io/docs/packages/router Installs the @daffodil/router package using yarn. This is an alternative package manager for Node.js projects. ```bash yarn add @daffodil/router ``` -------------------------------- ### Install @daffodil/auth with yarn Source: https://next.daff.io/docs/packages/auth Installs the @daffodil/auth package using yarn. This command adds the package as a dependency to your project. ```bash yarn add @daffodil/auth ``` -------------------------------- ### Install @daffodil/core with npm Source: https://next.daff.io/docs/packages/core Installs the @daffodil/core package using npm. This command adds the package as a dependency to your project, enabling its use in your frontend ecommerce store. ```bash npm install @daffodil/core --save ``` -------------------------------- ### ShopifyGetAProductGQL Class Source: https://next.daff.io/docs/api/driver/shopify/ShopifyGetAProductGQL The ShopifyGetAProductGQL class allows you to fetch a single product using GraphQL. It provides methods for watching and fetching product data. ```APIDOC ## ShopifyGetAProductGQL ### Description Provides methods to fetch a single product's data from Shopify using GraphQL. It supports both watching for real-time updates and fetching data once. ### Class `ShopifyGetAProductGQL` from `@daffodil/driver/shopify` ### Methods #### `watch(variables?: V, options?: WatchQueryOptionsAlone): QueryRef` * **Description**: Observes changes to a product's data. Returns a `QueryRef` that can be subscribed to for real-time updates. * **Parameters**: * `variables` (V) - Optional - The variables to pass to the GraphQL query. * `options` (WatchQueryOptionsAlone) - Optional - Options for the watch query. #### `fetch(variables?: V, options?: QueryOptionsAlone): Observable>` * **Description**: Fetches a product's data once. Returns an `Observable` that emits the query result. * **Parameters**: * `variables` (V) - Optional - The variables to pass to the GraphQL query. * `options` (QueryOptionsAlone) - Optional - Options for the fetch query. ### Request Example (Conceptual) ```json { "query": "\n query GetProduct($productId: ID!) {\n product(id: $productId) {\n id\n title\n descriptionHtml\n handle\n images(first: 10) {\n edges {\n node {\n url\n altText\n }\n }\n }\n }\n }\n", "variables": { "productId": "gid://shopify/Product/1234567890" } } ``` ### Response Example (Conceptual) ```json { "data": { "product": { "id": "gid://shopify/Product/1234567890", "title": "Example Product", "descriptionHtml": "

This is an example product.

", "handle": "example-product", "images": { "edges": [ { "node": { "url": "https://cdn.shopify.com/s/files/1/0001/0001/products/example.jpg", "altText": "Product Image" } } ] } } } } ``` ``` -------------------------------- ### General Queries Source: https://next.daff.io/docs/api/driver/shopify Endpoints for general queries such as fetching nodes, articles, blogs, and site-wide settings. ```APIDOC ## General Queries ### Description Endpoints for general data retrieval, including nodes, articles, blogs, and more. ### GET /query #### Query Parameters - **article** (QueryRootArticleArgs) - Optional - Arguments for fetching a single article. - **articles** (QueryRootArticlesArgs) - Optional - Arguments for fetching multiple articles. - **blog** (QueryRootBlogArgs) - Optional - Arguments for fetching a single blog. - **blogByHandle** (QueryRootBlogByHandleArgs) - Optional - Arguments for fetching a blog by its handle. - **blogs** (QueryRootBlogsArgs) - Optional - Arguments for fetching multiple blogs. - **cart** (QueryRootCartArgs) - Optional - Arguments for fetching a cart. - **cartCompletionAttempt** (QueryRootCartCompletionAttemptArgs) - Optional - Arguments for attempting to complete a cart. - **collection** (QueryRootCollectionArgs) - Optional - Arguments for fetching a single collection. - **collectionByHandle** (QueryRootCollectionByHandleArgs) - Optional - Arguments for fetching a collection by its handle. - **collections** (QueryRootCollectionsArgs) - Optional - Arguments for fetching multiple collections. - **customer** (QueryRootCustomerArgs) - Optional - Arguments for fetching a customer. - **locations** (QueryRootLocationsArgs) - Optional - Arguments for fetching locations. - **menu** (QueryRootMenuArgs) - Optional - Arguments for fetching a menu. - **metaobject** (QueryRootMetaobjectArgs) - Optional - Arguments for fetching a metaobject. - **metaobjects** (QueryRootMetaobjectsArgs) - Optional - Arguments for fetching multiple metaobjects. - **node** (QueryRootNodeArgs) - Optional - Arguments for fetching a node by ID. - **nodes** (QueryRootNodesArgs) - Optional - Arguments for fetching multiple nodes. - **page** (QueryRootPageArgs) - Optional - Arguments for fetching a single page. - **pageByHandle** (QueryRootPageByHandleArgs) - Optional - Arguments for fetching a page by its handle. - **pages** (QueryRootPagesArgs) - Optional - Arguments for fetching multiple pages. - **predictiveSearch** (QueryRootPredictiveSearchArgs) - Optional - Arguments for performing a predictive search. - **product** (QueryRootProductArgs) - Optional - Arguments for fetching a single product. - **productByHandle** (QueryRootProductByHandleArgs) - Optional - Arguments for fetching a product by its handle. ``` -------------------------------- ### Install @daffodil/router with npm Source: https://next.daff.io/docs/packages/router Installs the @daffodil/router package using npm. This is the standard method for adding Node.js-based packages to a project. ```bash npm install @daffodil/router --save ``` -------------------------------- ### ShopifyGetAllProductsGQL Class Definition Source: https://next.daff.io/docs/api/driver/shopify/ShopifyGetAllProductsGQL Defines the ShopifyGetAllProductsGQL class, which is injectable and uses Apollo for GraphQL operations. It holds the GraphQL document for fetching all products and provides methods for watching and fetching queries. Dependencies include @daffodil/driver/shopify and Apollo. ```typescript import { ShopifyGetAllProductsGQL } from '@daffodil/driver/shopify' @Injectable() class ShopifyGetAllProductsGQL { document: TypedDocumentNode = ShopifyGetAllProductsDocument protected readonly apollo: Apollo abstract readonly document: DocumentNode | TypedDocumentNode client: string watch( variables?: V, options?: WatchQueryOptionsAlone ): QueryRef fetch( variables?: V, options?: QueryOptionsAlone ): Observable> } ``` -------------------------------- ### Shopify Product Query Documents and GQL Classes Source: https://next.daff.io/docs/api/driver Defines constants and classes for fetching Shopify product data using GraphQL. Includes documents and GQL classes for getting all products, a product by URL, and a single product. ```typescript const ShopifyGetAllProductsDocument class ShopifyGetAllProductsGQL const ShopifyGetProductByUrlDocument class ShopifyGetProductByUrlGQL const ShopifyGetAProductDocument class ShopifyGetAProductGQL ``` -------------------------------- ### DaffSchemaService Overview Source: https://next.daff.io/docs/api/seo/DaffSchemaService Provides an overview of the DaffSchemaService, its purpose, and how it interacts with the DOM. ```APIDOC ## DaffSchemaService ### Description A service for managing JSON-LD schema tags in a document. There is only ever one schema tag per document; multiple schemas can be added by calling `upsert` with an array. The schema data can be found via a `script` tag with the `id` `daff-schema` in the document. ### Methods #### `getSchema()` - **Returns**: `string` - The string representation of the schema. WARNING: This content comes directly from the DOM. It could contain malicious content, be very careful with what you do with it. #### `upsert(schema: Schema)` - **Description**: Either creates a new schema tag in the document, or updates the existing schema tag in the document. - **Parameters**: - `schema` (Schema) - The schema object to upsert. #### `remove()` - **Description**: Removes the schema from the document. ### Properties #### `selector` - **Type**: `string` - **Default**: `'daff-schema'` - **Description**: The selector for the schema script tag. #### `scriptTag` - **Type**: `HTMLScriptElement` - **Description**: Memoized schema script tag. ``` -------------------------------- ### Mock Product Service with DaffTestingProductService Source: https://next.daff.io/docs/api/product/driver/testing/DaffTestingProductService The DaffTestingProductService provides mock implementations for product-related operations, allowing developers to test frontend components without a live backend. It adheres to the DaffProductServiceInterface and returns Observables of product data. ```typescript import { DaffTestingProductService } from '@daffodil/product/driver/testing'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { DaffProduct, DaffProductDriverResponse } from '@daffodil/product'; import { DaffProductServiceInterface } from '@daffodil/product/driver'; @Injectable() class DaffTestingProductService implements DaffProductServiceInterface { getAll(): Observable { // Mock implementation for getting all products return new Observable(); } get(productId: string): Observable { // Mock implementation for getting a product by ID return new Observable(); } getByUrl(url: string): Observable { // Mock implementation for getting a product by URL return new Observable(); } } ```