【JavaScript】Ionicで架空のECアプリを作成する #8 - ヘッダーにボタンをつける

前回の記事はこちら

ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成します。

第8回目である今回は、ショッピングカート画面のヘッダーに「空にする」ボタンをつけます

デモ

こちらのURLで、完成版のアプリを実際に操作することができます

https://l08084.github.io/ionic-sample-shopping-app/www

GitHubリポジトリ

github.com

バージョン情報
あらすじ
今回やること
ヘッダーの右側にボタンを配置する
ショッピングカートを空にする処理

バージョン情報

Angular（JavaScriptのWebフレームワーク）ベースの、ハイブリットモバイルアプリ用フレームワークである「Ionic」を使っています

ionic-angular@3.9.2
Angular@5.2.10
Google Chrome バージョン: 60.0.3112.113

あらすじ

ショッピングカート画面に、「カート内に入れたアイテムを削除」する機能をつけるのをすっかり忘れていたのだった（全部買わない限り、カートを空にできない）。

今回やること

f:id:l08084:20180506173409p:plain — 今回やることのイメージ

カート画面に「ショッピングカート内に入っているアイテムを全部削除する」ボタンをつけます

ヘッダーの右側にボタンを配置する

カート画面に、Ionicのボタンを配置します。<ion-buttons>タグにendをつけることで、ヘッダーの右端にボタンが配置されます。

カート画面のテンプレートファイル（src/pages/cart/cart.html）:

<ion-header>
  <ion-navbar>
    <ion-title>
      カート
    </ion-title>
    <!-- add this! -->
    <!-- endをつけることで、右側に配置される -->
    <ion-buttons end>
      <button ion-button (click)="allRemove()">空にする</button>
    </ion-buttons>

  </ion-navbar>
</ion-header>

<!-- ...長いので省略 -->

ショッピングカートを空にする処理

「空にする」ボタンをクリックすると呼び出されるallRemove()メソッドを実装します。

カート画面のコンポーネントファイル（src/pages/cart/cart.ts）:

  /**
   * ショッピングカートの中を空にする
   *
   * @memberof CartPage
   */
  allRemove() {
    this.storage.clear().then(() => {
      // タブのバッジを更新するために、
      // カート情報が更新されたことを出版している
      this.events.publish("cart:updated", 0);
      // ストレージの再読み込みを行う
      this.init();
    });
  }
}