**Angular2Presta** library will help developers writing **Angular** and **Ionic** applications using **Prestashop Webservice**.
npm install angular2-prestaAngular2Presta library will help developers writing Angular and Ionic applications using Prestashop Webservice.
To install this library, run:
``bash`
$ npm install angular2-presta --save
If you are woring on Ionic mobile application or if you are working on angular or ionic application and you are using localhost to test you will need to enable CORS on your prestashop webservice by adding required headers in your dispatcher.php file.
Please check video guide I made on youtube:
Modify your .htaccess file:
`bash
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Headers "Content-Type, Authorization, Io-Format, Accept"
Header always set Access-Control-Allow-Methods "GET,POST,HEAD,DELETE,PUT,OPTIONS"
# Added a rewrite to respond with a 200 SUCCESS on every OPTIONS request
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
`
Thanx @amoncusir for contributing this example.
Latest version of angular2-presta library is updated to work with Angular versions from Angular 6. Ionic 3 is using Angular 5.2.11 at time of this release. If your project is using Ionic 3 you have to use older version of angular2-presta which supports Angular 5. Ionic 4 applications will work fine with latest version of angular2-presta library.
To install angular2-presta 0.1.14:
`bash`
npm install angular2-presta@0.1.14 --save
You can find documentation for this version on NPM
I made short video how to use angular2-presta with Ionic :
Import Angular2PrestaModule and Angular2PrestaConfiguration into your app.module.ts file:
`typescript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import {
Angular2PrestaModule,
Angular2PrestaConfiguration,
} from "angular2-presta";
import { AppComponent } from "./app.component";
const a2pConfig: Angular2PrestaConfiguration = {
apiKey: "YOUR_PRESTA_API_KEY",
imageApiKey: "OPTIONAL_IMAGE_API_KEY",
shopUrl: "https://yourshop.com/api/",
};
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, Angular2PrestaModule.forRoot(a2pConfig)],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
`
To connect your application with your prestashop website you need to provide Angular2PrestaService with configuration. This is done by defining Angular2PrestaConfiguration object and passing this object to Angular2PrestaModule in imports array.
`typescript`
const a2pConfig: Angular2PrestaConfiguration = {
apiKey: "YOUR_PRESTA_API_KEY", // prestashop webservice API key
imageApiKey: "OPTIONAL_IMAGE_API_KEY", // images API key
shopUrl: "https://yourshop.com/api/", // url of your shop : please use https
};
Angular2Presta is actually service library providing methods to call prestashop webservice and return resources based on your query. You can say it is HTTP client for prestaahop webservice.
`typescript
import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs";
// import service and query
import { Angular2PrestaService, Angular2PrestaQuery } from "angular2-presta";
@Component({
selector: "app-root",
template:
{{ product.price | currency }}
,
styles: [],
})
export class AppComponent implements OnInit {
// products observable
product$: Observable; query: Angular2PrestaQuery = {
// define resource products, categories ...
// check full list http://doc.prestashop.com/display/PS16/Web+service+reference
resource: "products",
// return only fields you need
display: "id,id_default_image,name,price,description_short,condition",
// filter results
filter: {
name: "blouse",
condition: "new",
},
// sort results
sort: "name_ASC",
// limit number of results or define range
limit: "1",
};
// Inject Angular2PrestaService
constructor(private _service: Angular2PrestaService) {}
ngOnInit() {
// Use get function provided by Angular2PrestaService
this.product$ = this._service.get(this.query);
}
}
`Constructing Angular2PrestaQuery
For now only GET method is supported, no posting or updating data is available.
| Option | Type | Description |
| ------------ | ------ | ---------------------------------------------------------------------------------------------- |
| resource | string | Select type of results: products, categories, customers ... |
| display | string | Allows you to limit result fields to only those you need, by default it will return all fields |
| filter | Object | object defining fields and values to filter results by |
| sort | string | sort results by: 'id_ASC', 'id_DESC', 'name_ASC', 'name_DESC' ... |
| limit | string | limit number of results, or define range of results '5', '9,5' |
| search | string | search term to use for presta web service search |
$3
typescript
query: Angular2PrestaQuery = {
resource: "categories",
};
`$3
typescript
query: Angular2PrestaQuery = {
resource: "products",
filter: {
id_category_default: "11",
},
};
`$3
typescript
query: Angular2PrestaQuery = {
resource: "products",
filter: {
id: "1",
},
};
`Using search
Search Query can accept search and resource fields. By default search will return list of products if no other resource is defined.
typescript
import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs";// import service and query
import { Angular2PrestaService, Angular2PrestaQuery } from "angular2-presta";
@Component({
selector: "app-root",
template:
{{ product.price | currency }}
,
styles: [],
})
export class AppComponent implements OnInit {
// products observable
product$: Observable; // Search products for dress
query: Angular2PrestaQuery = {
resource: "products",
search: "dress",
};
// Inject Angular2PrestaService
constructor(private _service: Angular2PrestaService) {}
ngOnInit() {
// Use search function provided by Angular2PrestaService
this.product$ = this._service.search(this.query);
}
}
`$3
typescript
query: Angular2PrestaQuery = {
resource: 'categories'
search: 'dresses'
};
`Outputing data
Some of prestashop webservice results come with html tags included to remove tags you can use innerHtml directive.
html
{{ product.price | currency }}
`Working with images
Before you try to use images you should generate one special API KEY, only with one permission to GET images. This is most secure method, because your API KEY will be included in every call to fetch image so it could be easily obtained by a third person.
Include your images API KEY into Angular2PrestaConfiguration object in your app.module.ts file:
typescript
// Add your presta web service api key and shop url
const a2pConfig: Angular2PrestaConfiguration = {
apiKey: "YOUR_PRESTA_API_KEY",
imageApiKey: "YOUR_PRESTA_API_KEY", // ApiKey only with images GET permissions for security reasons
shopUrl: "https://yourshop.com/api/", // Please use https
};
`You can use a2p-image component to output product images. Angular2PrestaImageComponent has few inputs. It will use data from them to construct image url to fetch images and display them in your application.
Angular2PrestaImageComponent
@Inputs
- resource: string -> for which you want to get image available are
- general : General shop images
- products : Product images
- categories : Category images
- customizations : Customization images
- manufacturers : Manufacturer images
- suppliers : Supplier images
- stores : Store images
- resourceID: number -> unique resource ID for example product or category ID
- imageID: number -> image ID is required for product images because products have more then one image for other resource images you don't need to define it
- size string -> define one of available image sizes ( cart, small, medium, large,thickbox, home, category). Size is optional and if you leave it undefined component will display large images by default.
Get product images in your html template using a2p-image component:
html
[resourceID]="product.id"
[imageID]="product.id_default_image"
[size]="'medium'"
>
{{ product.price | currency }}
[resourceID]="product.id"
[imageID]="product.id"
[size]="'small'"
>
`Get images for other resources using presta-image component
html
`Delete resource
typescript
export class AppComponent implements OnInit {
// Inject Angular2PrestaService
constructor(private _service: Angular2PrestaService) {} deleteProduct(productId: number) {
// Delete resource
this._service.delete("products", productId).subscribe();
}
}
``- [x] GET requests, filtering, sorting
- [x] SEARCH support
- [x] IMAGES support
- [ ] POST requests
- [ ] UPDATE requests
- [x] DELETE requests
- Updated to Angular 15
- Security fixes for packages
- Updated to Angular 12
- Security fixes for packages
- Updated NPM dependencies
- Security fixes
- Delete added to angular2-presta service, now you can delete resources by passing resource name and resource id
- Updated NPM dependencies
- Security fixes
- Security update
- Updated dependencies to support Angular 8
- Updated documentation
- Updated dependencies to latest version
- Fixed few security issuess reported by npm audit
- Updated documentation with directions for Ionic and Angular 5 users
- More examples added
- Fixed incorrect description on npm website
- Renamed service, components and interfaces to match Angular naming conventions
- Added catchError support in service
- Updated and fixed documentation
- Fixed few security issues
- Upgraded to support Angular 6
- Updated readme examples
- Added presta prefix to interfaces, enums etc.
- Presta Service is using new HttpClient from now
- Fixed bugs with presta-image component making it faster and more reliable
- Updated readme with new examples
- Upadated presta-img component for better image loading
- presta-img now requires image size to be defined using ImageSize enum values to reduce errors
- All packages updated
- Better error catching
- Tested with Prestashop 1.7
- Fixed module exports
- Documentation improved
- Added images support by new PrestaImage component
- Fixed limit not working
- Updated documentation
- Added support for search, code optimized, many fixes
- Added support for more then one filter
- Presta Shop web service: Documentation
- Presta Shop web service: Tutorial
- Presta Shop web service: Advanced usage
- Presta Shop web service: Image management
- Presta Shop web service: Reference
MIT © Samir Kahvedzic