@believablecreations/ngx-shopify

@believablecreations/ngx-shopify is an Angular library designed to integrate Shopify's headless capabilities seamlessly into your Angular application. By leveraging Shopify's Storefront API, this plugin enables you to build modern, scalable, and fully customizable e-commerce frontends.

Features

• Headless Shopify Integration: Build your storefront using Angular and Shopify's Storefront API.
• Data Flexibility: Fetch and display Shopify data types, such as products, collections, and more.
• Secure Key Management: Securely connect to Shopify with your private API key.
• Modular Design: Designed for flexibility and extensibility.

Installation

To install the library, run the following command:

npm install @believablecreations/ngx-shopify

Prerequisites

1. Enable Headless on Shopify:
   • Install the Headless app from the Shopify App Store.
   • Go to your Shopify admin and select Sales channels.
   • Click Headless.
   • Click Add storefront.
   • Create a private app and select the data types you want to expose.
   • Obtain your public and private API keys.
2. Choose a Frontend Technology: This library supports Angular as the frontend framework.
3. API Key Management: Keep your private key secure. Do not expose it in the client-side code.

Setup

1. Import the Module:

   Add NgxShopifyModule to your Angular application's module:

   <!-- HTML-safe code -->
   import { NgxShopifyModule } from '@believablecreations/ngx-shopify';
   
   @NgModule({
     declarations: [
       // Your components
     ],
     imports: [
       BrowserModule,
       NgxShopifyModule.forRoot({
         privateKey: 'your-private-key', // Use a secure way to manage keys
         publicKey: 'your-public-key',
         storefrontUrl: 'https://your-storefront.myshopify.com',
       }),
     ],
     providers: [],
     bootstrap: [AppComponent],
   })
   export class AppModule {}
   

2. Make API Calls:

   Use the ShopifyService provided by the library to interact with Shopify's Storefront API.

   Example:

   <!-- HTML-safe code -->
   import { Component, OnInit } from '@angular/core';
   import { ShopifyService } from '@believablecreations/ngx-shopify';
   
   @Component({
     selector: 'app-products',
     template: `
       <div *ngFor="let product of products">
         <h3>{{ product.title }}</h3>
         <p>{{ product.description }}</p>
         <img [src]="product.image" alt="{{ product.title }}">
       </div>
     `,
   })
   export class ProductsComponent implements OnInit {
     products: any[] = [];
   
     constructor(private shopifyService: ShopifyService) {}
   
     ngOnInit(): void {
       this.shopifyService.getProducts().subscribe((data) => {
         this.products = data;
       });
     }
   }
   

Available Methods:

The ShopifyService exposes the following methods:

• getProducts(): Observable<any[]>: Fetch a list of products.
• getProductById(id: string): Observable<any>: Fetch details of a single product.
• getCollections(): Observable<any[]>: Fetch collections.
• Additional methods for handling Shopify data as needed.

Usage

This library simplifies the process of connecting your Angular app to Shopify's headless capabilities. Use the provided services to query and display Shopify data within your Angular components.

Security

• Keep your private key private: Use environment variables or other secure methods to manage your private key.
• Avoid exposing sensitive credentials in client-side code.

Contributing

Contributions are welcome! If you encounter bugs or have feature requests, please create an issue or submit a pull request.

License

MIT

---

Start building your custom Shopify-powered storefront with @believablecreations/ngx-shopify today!