l08084のブログ

技術記事の執筆は、祈りに近い

【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();
    });
  }
}
  • ポイント
    • ionic-storageclear()メソッドを呼び出すことでIonicストレージを空にしている
    • clear()メソッドは処理が完了するとPromiseを返すので、thenでキャッチしている

以上


次回の記事