{"id":19335832,"url":"https://github.com/buttercms/buttercms-ionic","last_synced_at":"2025-07-14T08:14:17.875Z","repository":{"id":38577246,"uuid":"252195769","full_name":"ButterCMS/buttercms-ionic","owner":"ButterCMS","description":"Ionic starter project integrated with ButterCMS","archived":false,"fork":false,"pushed_at":"2023-03-01T02:39:01.000Z","size":2334,"stargazers_count":1,"open_issues_count":17,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-22T17:41:14.117Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ButterCMS.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-01T14:18:11.000Z","updated_at":"2022-02-11T17:13:25.000Z","dependencies_parsed_at":"2023-02-05T01:02:37.264Z","dependency_job_id":null,"html_url":"https://github.com/ButterCMS/buttercms-ionic","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fbuttercms-ionic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fbuttercms-ionic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fbuttercms-ionic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fbuttercms-ionic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ButterCMS","download_url":"https://codeload.github.com/ButterCMS/buttercms-ionic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240441868,"owners_count":19801791,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T03:09:03.888Z","updated_at":"2025-02-24T07:43:32.006Z","avatar_url":"https://github.com/ButterCMS.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# buttercms-ionic \nIonic starter project integrated with ButterCMS\n\n## Install\n\nAdd [ButterCMS NPM module](https://www.npmjs.com/package/buttercms) as a dependency to your existing Ionic project.\n\nIf you plan to use this project directly, simply execute below commands to get going:\n```bash\nnpm i\nionic serve\n```\nThese commands will install the required dependencies for the project and start the project on your browser. You can also run the project directly in your mobile device connected to your system. \n\nFor android, install the Java SDK, supporting Android SDKs and Emulator. Run the below command\n``` bash\nionic cordova run android --device\n```\n\n## Quickstart\nTo integrate ButterCMS in your ongoing project, create a service file.\n`services/buttercms.service.ts`\n```typescript\nimport Butter from 'buttercms';\n\nexport const butterService = Butter('\u003cyour api token\u003e');\n```\n\nImport ButterCMS client in your TS file:\n\n```javascript\nimport {butterCMS} from './services/buttercms.service'\n```\n\nYou can then test ButterCMS client by, for example, fetching all of your posts:\n```typescript\nbutterService.post.list({\n                page: 1,\n                page_size: 10\n            })\n            .then((res) =\u003e {\n                console.log('Content from ButterCMS');\n                console.log(res);\n                this.posts = res.data.data;\n            });\n```\nThis will fetch you upto 10 blog posts that you would have stored in your ButterCMS account\n\n## Pages\n\n### Get single page\n\nWith your homepage defined, the ButterCMS Pages API will return it in JSON format like this:\n```json\n{\n  \"data\":{\n    \"slug\": \"home\",\n    \"page_type\": null,\n    \"fields\": {\n      \"seo_title\": \"Marvellous Ionic page powered by ButterCMS\",\n      \"headline\": \"Marvellous Ionic page powered by ButterCMS\",\n      \"hero_image\": \"https://cdn.buttercms.com/WjJXN3B6ThWJpucfZM9P\",\n      \"call_to_action\": \"Know more\",\n      \"customer_logo\": \"https://cdn.buttercms.com/PTEqdDBReOq0X08W43sA\"\n    }\n  }\n}\n```\n\nTo integrate this into your app, simply make a call to ButterCMS APIs using the ButterCMS service. Place this call in the `ngOnInit` hook:\n`home/home.page.ts`\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport {butterService} from '../../services/buttercms.service';\n@Component({\n  selector: 'app-home',\n  templateUrl: './home.page.html',\n  styleUrls: ['./home.page.scss'],\n})\nexport class HomePage implements OnInit {\n  page: any;\n  constructor() { }\n\n  ngOnInit() {\n    butterService.page.retrieve('*', 'home-page')\n      .then((res) =\u003e {\n        console.log(res.data.data);\n        this.page = res.data.data;\n      }).catch((res) =\u003e {\n      console.log(res);\n    });\n  }\n\n}\n\n```\nTo render the data, create the ionic page as below:\n`home/home.page.html`\n```html\n\u003cion-header\u003e\n  \u003cion-toolbar\u003e\n    \u003cion-title\u003eHome\u003c/ion-title\u003e\n  \u003c/ion-toolbar\u003e\n\u003c/ion-header\u003e\n\n\u003cion-content\u003e\n\u003cion-card *ngIf=\"page\"\u003e\n  \u003cion-card-header \u003e\n  \t\u003cimg src=\"{{page.fields.featured_image}}\" height=\"200px\"/\u003e\n    \u003cion-card-subtitle\u003e{{page.fields.subtitle}}\u003c/ion-card-subtitle\u003e\n    \u003cion-card-title\u003e{{page.fields.title}}\u003c/ion-card-title\u003e\n  \u003c/ion-card-header\u003e\n\n  \u003cion-card-content\u003e\n   \u003cdiv [innerHTML]=\"page.fields.description\"\u003e\u003c/div\u003e\n  \u003c/ion-card-content\u003e\n\u003c/ion-card\u003e\n\u003cion-button href=\"/posts\"\u003eView Posts\u003c/ion-button\u003e \u003cion-button href=\"/customers\"\u003eView Customers\u003c/ion-button\u003e\n\u003c/ion-content\u003e\n```\n\n##Get all page content of specific type. For instance, customers for the case study\n`customers/customers.page.ts`\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport {butterService} from '../../services/buttercms.service';\n@Component({\n  selector: 'app-customers',\n  templateUrl: './customers.page.html',\n  styleUrls: ['./customers.page.scss'],\n})\nexport class CustomersPage implements OnInit {\n\tcustomers: any;\n  constructor() { }\n\n  ngOnInit() {\n  butterService.page.list('customer_case_study')\n      .then((res) =\u003e {\n        console.log(res.data.data);\n        this.customers = res.data.data;\n      }).catch((res) =\u003e {\n      console.log(res);\n    });\n  }\n\n}\n```\nThe Ionic page to render the customer list can be written as below:\n`customers/customers.page.html`\n```html\n\u003cion-header\u003e\n  \u003cion-toolbar\u003e\n    \u003cion-title\u003eCustomer Testimonials\u003c/ion-title\u003e\n  \u003c/ion-toolbar\u003e\n\u003c/ion-header\u003e\n\n\u003cion-content *ngIf=\"customers\"\u003e\n\u003cion-card *ngFor=\"let customer of customers\"\u003e\n\t\u003ca href=\"/customers/{{customer.slug}}\"\u003e\n  \u003cion-card-header\u003e\n  \t\u003cimg src=\"{{customer.fields.customer_logo}}\" height=\"100px\"/\u003e\n    \u003cion-card-title\u003e{{customer.fields.seo_title}}\u003c/ion-card-title\u003e\n  \u003c/ion-card-header\u003e\n\n  \u003cion-card-content\u003e\n    \u003cdiv [innerHTML]=\"customer.fields.headline\"\u003e\u003c/div\u003e\n  \u003c/ion-card-content\u003e\n\u003c/a\u003e\n\u003c/ion-card\u003e\n\u003cion-button href=\"/home\"\u003eBack\u003c/ion-button\u003e\n\u003c/ion-content\u003e\n```\n\n##Viewing specific page of a specific type \nBelow code create a customer component that displays the details of the customer. \n\n`customers/customer/customer.component.ts`\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport {butterService} from '../../../services/buttercms.service';\nimport {ActivatedRoute} from '@angular/router';\nimport {map, take} from 'rxjs/operators';\nimport {Observable} from 'rxjs';\n@Component({\n  selector: 'app-customer',\n  templateUrl: './customer.component.html',\n  styleUrls: ['./customer.component.scss'],\n})\nexport class CustomerComponent implements OnInit {\n\tcustomer: any;\n\tslug$: Observable\u003cany\u003e;\n  constructor(private route: ActivatedRoute) { }\n\n  ngOnInit() {\nthis.slug$ = this.route.paramMap\n            .pipe(\n                map(params =\u003e (params.get('id')))\n            );\n\n        this.slug$.pipe(\n            take(1))\n            .subscribe(slug =\u003e {\n                butterService.page.retrieve('customer_case_study', slug)\n\t\t\t      .then((res) =\u003e {\n\t\t\t        console.log(res.data.data);\n\t\t\t        this.customer = res.data.data;\n\t\t\t      }).catch((res) =\u003e {\n\t\t\t      console.log(res);\n\t\t\t    });\n\t\t\t  }\n            );\n    \t}\n}\n```\nTo render the customer details, create Ionic page as shown below\n`customers/customer/customer.component.html`\n```typescript\n\u003cion-header\u003e\n  \u003cion-toolbar\u003e\n    \u003cion-title *ngIf=\"customer\"\u003e{{customer.fields.seo_title}}\u003c/ion-title\u003e\n  \u003c/ion-toolbar\u003e\n\u003c/ion-header\u003e\n\u003cion-content  *ngIf=\"customer\"\u003e\n\n  \t\u003cion-img [src]=\"customer.fields.customer_logo\"\u003e\u003c/ion-img\u003e\n    \u003ch1\u003e{{customer.fields.seo_title}}\u003c/h1\u003e\n    \u003cdiv [innerHTML]=\"customer.fields.testimonial\"\u003e\u003c/div\u003e\n    \n\u003cion-button href=\"/customers\"\u003eBack\u003c/ion-button\u003e\n\u003c/ion-content\u003e\n```\n## Blog Engine\n\n### Display posts\n\nTo display posts we create a simple /blog route in our app and fetch blog posts from the Butter API. See our [API reference](https://buttercms.com/docs/api/) for additional options such as filtering by category or author. The response also includes some metadata we'll use for pagination.\n\nTo retrieve the blog posts using ButterCMS client, you can use the function `butter.post.list({})`\n\n`posts/posts.page.ts`\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport {butterService} from '../../services/buttercms.service';\n@Component({\n  selector: 'app-posts',\n  templateUrl: './posts.page.html',\n  styleUrls: ['./posts.page.scss'],\n})\nexport class PostsPage implements OnInit {\n\n  constructor() { }\n  posts: any;\n  ngOnInit() {\n  \tbutterService.post.list({\n                page: 1,\n                page_size: 10\n            })\n            .then((res) =\u003e {\n                console.log('Content from ButterCMS');\n                console.log(res);\n                this.posts = res.data.data;\n            });\n  }\n}\n```\nTo display the posts in a card layout, create the ionic page as shown below:\n`posts/posts.page.html`\n```html\n\u003cion-header\u003e\n  \u003cion-toolbar\u003e\n    \u003cion-title\u003ePosts\u003c/ion-title\u003e\n  \u003c/ion-toolbar\u003e\n\u003c/ion-header\u003e\n\n\u003cion-content *ngIf=\"posts\"\u003e\n\u003cion-card *ngFor=\"let post of posts\"\u003e\n  \u003cion-card-header \u003e\n  \t\u003cimg src=\"{{post.featured_image}}\" height=\"100px\"/\u003e\n    \u003cion-card-title\u003e{{post.title}}\u003c/ion-card-title\u003e\n    \u003cion-card-subtitle\u003ePublished on: {{post.created|date:'MM/dd/yyyy'}}\u003c/ion-card-subtitle\u003e\n\n  \u003c/ion-card-header\u003e\n\n  \u003cion-card-content\u003e\n    {{post.summary}}\u003cbr\u003e\n    \u003cion-button href=\"/posts/{{post.url}}\"\u003eRead more\u003c/ion-button\u003e\n  \u003c/ion-card-content\u003e\n\n\u003c/ion-card\u003e\n\u003cion-button href=\"/home\"\u003eBack\u003c/ion-button\u003e\n\u003c/ion-content\u003e\n```\n\nTo display a complete post, you can use the `butter.post.retrieve(\u003curl\u003e)` method. See a full list of available post properties in our [API reference](https://buttercms.com/docs/api/). \n\n`posts/post/post.component.ts`\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { ActivatedRoute } from '@angular/router';\nimport {map, take} from 'rxjs/operators';\nimport {Observable} from 'rxjs';\nimport {butterService} from '../../../services/buttercms.service';\n@Component({\n  selector: 'app-post',\n  templateUrl: './post.component.html',\n  styleUrls: ['./post.component.scss'],\n})\nexport class PostComponent implements OnInit {\n\n  constructor(protected route: ActivatedRoute) {\n    }\n\n    protected slug$: Observable\u003cany\u003e;\n    public post = {\n        meta: null,\n        data: null\n    };\n\n    ngOnInit() {\n        this.slug$ = this.route.paramMap\n            .pipe(\n                map(params =\u003e (params.get('slug')))\n            );\n\n        this.slug$.pipe(\n            take(1))\n            .subscribe(slug =\u003e {\n                butterService.post.retrieve(slug)\n                    .then((res) =\u003e {\n                    console.log(res.data);\n                        this.post = res.data.data;\n                    }).catch((res) =\u003e {\n                    console.log(res);\n                });\n            });\n    }\n\n}\n```\nTo render the single post, create the Ionic page as shown below:\n`posts/post/post.component.html`\n```html\n\u003cion-header\u003e\n  \u003cion-toolbar\u003e\n    \u003cion-title *ngIf=\"post\"\u003e{{post.title}}\u003c/ion-title\u003e\n  \u003c/ion-toolbar\u003e\n\u003c/ion-header\u003e\n\u003cion-content \u003e\n\n  \t\u003cion-img [src]=\"post.featured_image\"\u003e\u003c/ion-img\u003e\n    \u003ch1\u003e{{post.title}}\u003c/h1\u003e\n    \u003cspan\u003ePublished on: {{post.created|date:'MM/dd/yyyy'}}\u003c/span\u003e\n\n    \u003cdiv [innerHTML]=\"post.body\"\u003e\u003c/div\u003e\n    \n\u003cion-button href=\"/posts\"\u003eBack\u003c/ion-button\u003e\n\u003c/ion-content\u003e\n```\n### Categories, Tags, and Authors\n\nUse Butter's APIs for categories, tags, and authors to feature and filter content on your blog:\n\n### Categories\n\n\n`categories/categories.page.ts`\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport {butterService} from '../../services/buttercms.service';\n@Component({\n  selector: 'app-categories',\n  templateUrl: './categories.page.html',\n  styleUrls: ['./categories.page.scss'],\n})\nexport class CategoriesPage implements OnInit {\n\tcategories:any=[];\n  constructor() { }\n\n  ngOnInit() {\nbutterService.category.list()\n      .then((res) =\u003e {\n        console.log(res.data.data)\n        this.categories = res.data.data;\n      })\n  }\n\n}\n```\n###Get posts by category\n`categories/category/category.component.ts`\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport {butterService} from '../../../services/buttercms.service';\nimport {ActivatedRoute} from '@angular/router';\nimport {map, take} from 'rxjs/operators';\nimport {Observable} from 'rxjs';\n@Component({\n  selector: 'app-category',\n  templateUrl: './category.component.html',\n  styleUrls: ['./category.component.scss'],\n})\nexport class CategoryComponent implements OnInit {\n  posts:any=[];\n  constructor(private route: ActivatedRoute) { }\n  slug$: Observable\u003cany\u003e;\n\n  ngOnInit() {\n    this.slug$ = this.route.paramMap\n    .pipe(\n        map(params =\u003e (params.get('slug')))\n    );\n\nthis.slug$.pipe(\n    take(1))\n    .subscribe(slug =\u003e {\n        butterService.category.retrieve(slug, {\n      include: 'recent_posts'\n    }).then((res) =\u003e {\n      console.log(res.data.data);\n      this.posts = res.data.data;\n    }).catch((res) =\u003e {\n    console.log(res);\n  });\n}\n    );\n  }\n}\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuttercms%2Fbuttercms-ionic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuttercms%2Fbuttercms-ionic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuttercms%2Fbuttercms-ionic/lists"}