Woocommerce Products are not displaying

Ionic Framework ionic-v3
1

Hey all guys, hope you are all will be fine
Actually I am facing a problem with woocommerce products in ionic. You can see the error

Screenshot_2
Screenshot_2.png1363×570 44.9 KB

Saw my ts file code:
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import * as HA from ‘woocommerce-api’;

@Component({
selector: ‘page-all-products’,
templateUrl: ‘all-products.html’,
})
export class AllProductsPage {
WooCommerce: any;
products: any;
moreProducts: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.WooCommerce = HA({
url: ‘My Web link’,
consumerKey: ‘My consumerKey’,
consumerSecret: ‘My consumerSecret’,
wpAPI: true,
version: ‘wc/v3’,
queryStringAuth: true // Force Basic Authentication as query string true and using under HTTPS
})
this.WooCommerce.get(‘products’, function(err, data, res) {
console.log(JSON.parse(data.body));
this.products = JSON.parse(data.body).products;
}, (err) => {
console.log(err)
})
}
ionViewDidLoad() {
console.log(‘ionViewDidLoad AllProductsPage’);
}
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
also saw my html file:

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

<ion-navbar>

<ion-title style=“text-align: center;”> Our Products </ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item *ngFor=“let product of moreProducts”>

<ion-thumbnail>

<img [src]=“product.featured_src”>

</ion-thumbnail>

<h2> {{ product.title }} </h2>

<p>

<span [innerHTML]=“product.short_description”></span>

<span [innerHTML]=“product.price_html”></span>

</p>

</ion-item>

</ion-list>

</ion-content>

Can someone help me???

2

Hey there
I had been working with this npm package before, i think you may want to check out this link: async requests are possible
Promified Woocommerce methods - GITHUB

also you may want to export your woocommerce functions to a service/provider for better abstraction and ease of reading

Hope this helps!

3

Can you please send me your code?

4

I had to go back and try and find my old project
I have copied and pasted the relavent code, let me know if missed anything please!

this is what i had working in Ionic 3:

woocommerce.service.ts

import { Injectable } from '@angular/core';
import { environment }  from '../path/to/environment';


@Injectable()
export class WooCommerceService {

    wooCommerce: any;

    constructor() {
        // use your private api from you env config
        this.wooCommerce = WooCommerce(environment.wooCommerceApiConfig);
    }

    public async getProducts() {
        try {
            const list = await this.wooCommerce.getAsync('products');
            const parsedList: Product[] = JSON.parse(list.toJSON().body);
            console.log('productList = ', ...parsedList);
            return parsedList;
        }
        catch (error) { return null }
    }
    //other api methods
}

products.page.ts

import { Component,  OnInit } from '@angular/core';
import { WooCommerceService } from '../path/to/service';

@IonicPage()       // <-- only if IONIC v3
@Component({
    selector: 'page-products',
    templateUrl: 'products.page.html',
    styleUrls: ['./products.scss']
})
export class ProductsPage implements OnInit {

    public productList: Product[] = [];

    constructor(private wooCommerce: WooCommerceService) {}

    public async ngOnInit(): Promise<void> {
       this.getAllProducts();
    }

    public async getAllProducts(): Promise<void> {
        try { this.productList = await this.wooService.getProducts()  }
        catch(e) { console.log(e) }
    }
}

products.page.html

<ion-header>
  <!--  HEADER CONTENT -->
</ion-header>

<ion-content>
    <ion-list>
        <ion-row>
            <ion-col *ngFor="let product of productList">
                <!-- use 'product' to iterate through the list  -->
            </ion-col>
        </ion-row>
    </ion-list>
</ion-content>
1 Like
6

Thanks for your help. Please send me your project src folder as a zip or rar file. Only pages, I will replace my api there. It will be very easy for me because I am new in Ionic, and I don’t know too much about this. And I don’t know where to make this file ( woocommerce.service.ts ) in my project.