DEV Community: Fernando Mendoza

Create an eCommerce app with Ionic, Capacitor, and Commerce.js

Fernando Mendoza — Thu, 21 Jan 2021 02:47:42 +0000

For this tutorial, we'll be creating a single-page mobile app to display and purchase products using the Chec API.

Before we start, create an account at Chec. Then add a few categories and products and grab a copy of your public API key (Settings > Developer).

If you don't feel ready to create an account, you can use the test API key provided in their docs:

pk_184625ed86f36703d7d233bcf6d519a4f9398f20048ec

Stack

Here's the stack that we're going to use for our app:

Ionic: 5.0.0
Angular: 10.0.0
Commerce.js: 2.3.0
Capacitor: 3.0.0 (Beta)

Setup

First, open your terminal and execute the following instruction to create a new Ionic project.



ionic start IonicCommerce blank --type=angular

For this guide, we'll use Angular since it's the framework I feel more comfortable with.

If everything went well, we should have our Ionic project based on the list template on a new folder called IonicCommerce.

The Ionic CLI will also ask if we want to add Capacitor. This is optional but if you want to give it a try just make sure to review the required dependencies for each platform.

At the time of writing this post, the new Capacitor 3.0 is still in beta, for that reason the CLI will install the 2.4 version but I'm curious to try the new version so we'll skip the default integration for now.

Now open the project in your code editor. For VSCode users run code . in your command line, or open the app as you normally would do.

Setup Commerce.js

Let's cd into our project cd ./IonicCommerce, and type npm i @chec/commerce.js to install the SDK that later will help us working with the Chec API.

Next, create a service to initialize and expose the Commerce.js instance by running the following command:



// This will create a file at src/services/commerce-client.service.ts
ionic g service services/commerce-client --skipTests=true

Let's import and initialize the commerce.js instance as follows:



import { Injectable } from '@angular/core';
import Commerce from '@chec/commerce.js';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class CommerceClientService {

  private mClient: any;

  constructor() {
    this.mClient = new Commerce(
      environment.commerceApiKey,
      !environment.production,
    );
  }

  get client(): any {
    return this.mClient;
  }

}

This a simple class with three members: a private property called 'mClient', a constructor, and a getter that will be used later in the app to easily access the commerce.js client.

When creating the Commerce.js instance we should pass two parameters: the API key that you can grab in your Chec Account and a boolean value to enable/disable the debug mode.

Notice that we're importing the environment.ts file where we have defined the API key.



// environment.ts
export const environment = {
  production: false,
  commerceApiKey: 'pk_184625ed86f36703d7d233bcf6d519a4f9398f20048ec',
};

Currently Typescript support for the Commerce.js SDK is in WIP, so for now, we'll declare our commerce.js client as any.

Display products

Now that our service is all set, let's create a page to show the product catalog.



// This will create a new folder under src/pages/products with all the component files.
ionic g page pages/products --spec=false

The first thing that we need to do is to inject our CommerceClientService into the products page.



import { CommerceClientService } from 'src/app/services/commerce-client.service';

export class ProductsPage implements OnInit {
  constructor(private commerce: CommerceClientService) {}
}

Now let's create a function to retrieve the products using our injected CommerceClient.




public products: any = [];

async loadProducts() {
    try {
      const { data: products } = await this.commerce.client.products.list();
      this.products = products
    } catch {
     // a network error occurred or something went wrong
    }
}

Since ngInit is executed once our component is created, it is the perfect place to invoke our loadProducts method.



ngOnInit() {
   this.loadProducts();
}

For our view we're going to use the following structure:



<ion-header>
  <ion-toolbar color="dark">
    <ion-title>Products</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item *ngFor="let product of products">
      <ion-thumbnail style="--border-radius: 10px" slot="end" *ngIf="product.media.source">
        <img [src]="product.media.source" />
      </ion-thumbnail>
      <ion-label>
        <h2>{{ product.name }}</h2>
        <p>{{ product.price.formatted_with_symbol }}</p>
        <ion-button color="dark" (click)="onBuyNowButtonTouched(product)">
          Buy now
        </ion-button>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

Notice the <ion-button> has a binding to the click event, so let's add a method to handle it in our component.

When the button is pressed, we'll take the user to the hosted checkout URL to finish the checkout process.



onBuyNowButtonTouched(product: any) {
  window.open(product.checkout_url.checkout, '__target');
}

Finally, let's build and serve our app by executing ionic s. Once the app is up and running, navigate to the /products path, and if everything is ok you should see the list with all the product catalog!

Bonus: Capacitor 3.0 🌝

Now let's see what Capacitor 3.0 can do for us.

Install the Capacitor package as follows:



npm i @capacitor/core@next @capacitor/cli@next

Run the following to set the app name and package id.



npx cap init

Open the src/main.ts file and import the Capacitor library.



import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// Add this line
import '@capacitor/core';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

Deploy the app to an iOS simulator by executing the following commands:



npm i @capacitor/ios@next
npx cap add ios
ionic build
npx cap run ios

The cool thing with Capacitor 3.0 is that there's no need to open Xcode in order to build and run the app. The npx cap run ios will put all the pieces together for us.

Last few words

This is just a start to work with Commerce.js. There's so much to be done for a more robust commerce experience.

With that said, I highly recommend checking out IonShop UI Headless, our premium template that comes with better Commerce.js integration, including customer authentication, cart, variants, and an integrated checkout with payment methods, shipping zones, taxes calculation, and more.

How to customize the ion-menu-button in Ionic 5

Fernando Mendoza — Thu, 29 Oct 2020 18:34:08 +0000

As a quick introduction, the ion-menu-button is a component that works together with the neat ion-menu. That means that once added, the ion-menu-button can open the ion-menu automatically 🤓. Therefore, we don't need to worry about anything since Ionic will handle the click event internally for us.

The thing is that sometimes you will have the requirement to show a different icon. Luckily for us, this can be achieved with the help of the ion-icon component.

As many of you might know, this component has the ability to render any of the icons found on the Ionicons library and custom assets like a local image and even better, an SVG.



<ion-toolbar>
  <ion-buttons slot="start">
    <ion-menu-button>
      <ion-icon src="./assets/img/custom-menu.svg"></ion-icon>
    </ion-menu-button>
  </ion-buttons>
  <ion-title></ion-title>
</ion-toolbar>

To define a custom asset for our ion-icon is as easy as just passing the path of our file in the src property.

Since SVG's are just files based on the XML format, let's first create it by opening the command line and running the instruction below:



touch ./src/assets/img/custom-menu.svg

Next, let's open our newly created custom-menu.svg. You can do this manually using your file explorer, or if you're using VSCode... 😎



code ./src/assets/img/custom-menu.svg

Now copy and paste the XML below into the custom-menu.svg.



<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20">
  <defs>
    <style>
      .cls-1 {
        fill: currentColor;
      }
    </style>
  </defs>
  <g transform="translate(-23 -44)">
    <rect class="cls-1" width="22" height="1.8" rx="2" transform="translate(23 44)"/>
    <rect class="cls-1" width="15" height="1.8" rx="2" transform="translate(23 52)"/>
    <rect class="cls-1" width="22" height="1.8" rx="2" transform="translate(23 60)"/>
  </g>
</svg>

The cool part is that using this technique it's possible to customize the theme by just adding the color attribute in the ion-menu-button.



<!-- Dark color -->
<ion-icon color="dark" src="./assets/img/custom-menu.svg"></ion-icon>



<!-- Secondary color -->
<ion-icon color="secondary" src="./assets/img/custom-menu.svg"></ion-icon>



<!-- Tertiary color -->
<ion-icon color="tertiary" src="./assets/img/custom-menu.svg"></ion-icon>

Demo:

That's it! As always, I hope you've learned something new today.

Hasta la próxima!

Styling ion-tabs in Ionic 5

Fernando Mendoza — Tue, 27 Oct 2020 17:24:37 +0000

A couple of weeks ago I was given a design by a client where the tabs UI was quite different compared to the default appearance of the well-known ion-tabs.

When I saw the design my first thought was "oh boy here we go again... another UI challenge that probably will be resolved adding position:absolute and a bit of sweet sugar courtesy of the border-radius property.

Like some of you should know, ion-tabs is one of the most complex components built in Ionic Framework. This web component is smart enough to manage different stack navigation for each tab declared in our template and in our routing module.

The good news is that it's also flexible enough to allow us to customize the appearance with some user-defined styles.

So, after some weird CSS experiments 🌝 the final result ended like this:

To get this design, the following markup was used:



<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home" layout="icon-top">
      <ion-icon name="search"></ion-icon>
      <ion-label>Explore</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="wishlists" layout="icon-top">
      <ion-icon name="gift"></ion-icon>
      <ion-label>Wishlists</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="groups" layout="icon-top">
      <ion-icon name="people-circle"></ion-icon>
      <ion-label>Groups</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="account" layout="icon-top">
      <ion-icon name="person"></ion-icon>
      <ion-label>Account</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

Nothing fancy here. This structure will be very familiar if you already have experience working with tabs in Ionic.

The real magic happens in the component styles file.

First, I targeted the ion-tab-bar element. Since I only needed it to move it slightly from the bottom, I set the position and the bottom property to relative and 20px, respectively.

Also, the tabs shouldn't fill the whole width, so I modified the width property to 92% and added margin: 0 auto to align the element horizontally. Finally, I also set border-radius: 16px to get that nice corners.

The last thing was to add a line indicator right above the selected tab. For our fortune, the .tab-selected class is brought automatically by Ionic, so just by using the pseudo-selector ::before I was able to add the desired indicator.

By default, the line indicator will be transparent for all the ion-tab-button, except the one with the .tab-selected class.



ion-tab-bar {
  bottom: 20px;
  position: relative;
  border-radius: 16px;
  width: 92%;
  margin: 0 auto;
}

ion-tab-button {
  --color: var(--ion-color-medium);
  --color-selected: var(--ion-color-primary);

  &::before {
    background-color: transparent;
    display: block;
    content: "";
    margin: 0 auto;
    width: 20px;
    height: 2px;
  }

  &.tab-selected::before {
    background-color: var(--ion-color-primary);
  }
}

Demo:

Animating views with Ionic 5 and ion-segment

Fernando Mendoza — Tue, 20 Oct 2020 20:01:50 +0000

Hey there,

This will be a short one where I just want to show you how you can animate views with Ionic 5 and the awesome ion-segment component.

Afterward, you will be able to implement a UI similar to this:

// Detect dark theme var iframe = document.getElementById('tweet-1316798725738635265-225'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1316798725738635265&theme=dark" }

So, let's get started.

For the template, we just need an ion-segment with two or more ion-segment-button, and two separated containers. I'll be using two ion-list but feel free to use a div or any other element according to your needs.

Now we need to know when one of the ion-segment-button is clicked or touched. This is as easy as adding the ionChange event listener into the ion-segment and pass a user-defined callback. For this example, mine is called segmentChanged.

Also, we use *ngIf directive to show/hide the ion-list according to the segment value. We will change the value of this variable when our segmentChanged callback is executed, as you will notice in our component file.



<ion-segment (ionChange)="segmentChanged($event)" value="list1">
  <ion-segment-button value="list1">
    <ion-label>
      List 1
    </ion-label>
  </ion-segment-button>
  <ion-segment-button value="list2">
    <ion-label>
      List 2
    </ion-label>
  </ion-segment-button>
</ion-segment>

<ion-list *ngIf="segment === 'list1'">
  <ion-item>
    <ion-label>List 1</ion-label>
  </ion-item>
  ...
</ion-list>

<ion-list *ngIf="segment === 'list2'">
  <ion-item>
    <ion-label>List 2</ion-label>
  </ion-item>
  ...
</ion-list>



import { Component } from "@angular/core";

@Component({
  selector: "app-my-page",
  templateUrl: "my-page.page.html",
  styleUrls: ["my-page.page.scss"]
})
export class MyPage {

  public segment: string = "list1";

  constructor() {}

  segmentChanged(ev: any) {
    this.segment = ev.detail.value;
  }
}

Once you implement the code above, you'll notice that the views are toggled correctly.

But what about the nice animation that we saw in the video?

The trick is to add the animate.css library into our project and add the animations through CSS classes.

I first learned this technique from Simon Grimm, a well-known expert and developer in the Ionic community.

BTW I highly recommend checking out their website to learn more about Ionic and Angular.

Animate.css is installed using a two-step process:

First, open your terminal, navigate to your Ionic project, and run the following:



npm install animate.css

Now open the src/styles.css and add the following line to import the animate.css library.



@import "~animate.css/animate.min.css";

Note: If you don't have a styles.css file, try to add the import statement in the global.scss file.

Now, let's go back to our template and add the proper css classes:



<ion-list class="animate__animated animate__slideInUp animate__fast" *ngIf="segment === 'list1'">
  <ion-item>
    <ion-label>List 1</ion-label>
  </ion-item>
  ...
</ion-list>

<ion-list class="animate__animated animate__slideInUp animate__fast" *ngIf="segment === 'list2'">
  <ion-item>
    <ion-label>List 2</ion-label>
  </ion-item>
  ...
</ion-list>

And that's it! 😅 You can see the result below:

How to create an Avatar Card with Ionic 5

Fernando Mendoza — Fri, 16 Oct 2020 17:29:21 +0000

Recently I had been working on a new app and I decided to share the progress on social media. Below is the original tweet, which as a write these lines has almost 2K views.

// Detect dark theme var iframe = document.getElementById('tweet-1316798725738635265-403'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1316798725738635265&theme=dark" }

It was also well-received on a popular Facebook group related to Ionic development. So I thought that it will be nice to share more technical stuff with the dev community.

Some folks were asking mainly about 2 things: how to get the Avatar Card and how to animate the views when the ion-segment-button is clicked.

In this post, we will review how to create that nice Avatar Card design.

Card Avatar

Before starting make sure that you're using Ionic 5. Note that some classes and icons won't work on previous versions.

As you can see in the code below, the card template is very straightforward. I added a div to act as a container for the image and the camera button. Notice that we're also applying the class img-wrapper in order to style the container and their children easily.

Template



<ion-card color="light">
  <div class="img-wrapper">
    <img src="./assets/imgs/lady_3.jpg" />
    <ion-button color="light">
      <ion-icon slot="icon-only" name="camera-outline" color="medium">
      </ion-icon>
    </ion-button>
  </div>
  <ion-card-content class="ion-text-center">
    <h2>Zahra Zamin</h2>
    <ion-text color="medium">
      <div style="display: flex;" class="ion-justify-content-center">
        <ion-icon name="location-outline" color="medium">
        </ion-icon>
        <p>2345 Street, Ohio, USA.</p>
      </div>
    </ion-text>
  </ion-card-content>
</ion-card>

Styles

To put the Avatar at the top-center, we will set the img-wrapper position to absolute. This will allow us to move the container from their relative position using the top and left attributes.

To center our container horizontally the left property should be equal to 50% and with some transform magic our img-wrapper should be good to go.

It's important to add the following attributes to the ion-card as well: position: relative and overflow: visible. Otherwise, our img-wrapper will be displayed incorrectly.

We also added padding-top: 60px to prevent the ion-card-content from being displayed below our img-wrapper.

Note that to make the ion-button appear at the bottom-right we set their position to absolute and also we modified their appearance with CSS variables. To make it circular the key is to set the CSS variable --border-radius: 50% and set the width and height to the same value, in our case 26px.



ion-card {
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  overflow: visible;
  margin: 16px 0 24px;
  position: relative;
  padding-top: 60px;

  .img-wrapper {
    position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    img {
      border-radius: 10px;
      width: 80px;
      height: 80px;
    }

    ion-button {
      --border-width: 1px;
      --border-color: var(--ion-color-light-shade);
      --border-style: solid;
      --padding-start: 0;
      --padding-end: 0;
      --padding-bottom: 0;
      --padding-top: 0;

      --border-radius: 50%;
      height: 26px;
      width: 26px;

      position: absolute;
      right: -10px;
      bottom: -10px;

      ion-icon {
        width: 14px;
        height: 14px;
      }
    }
  }
}

And that's it! 😅 I hope you enjoyed this post and have learned something new. You can follow me on Twitter as well where I share tips about web development and programming in general.

Stay tuned for the next article 👀, as we will review how to code the ion-segment with the view animations! 🔥