Woocomarce product featured images not showing

Ionic Framework ionic-v3
1

Try to retrieve and show featured image inside the app but am not able to do below i attached my code

**.html**
ion-row>
      <ion-slides>
        <ion-slide *ngFor="let product of products">
          <ion-card no-padding>
            <img [src]="product.featured_src" />
            <h1 [innerHTML]="product.name"></h1>
            <p [innerHTML]="product.short_description"></p>
            <!--<p>{{product.description}}</p>-->
          </ion-card>
        </ion-slide>
      </ion-slides>
   </ion-row>

.ts

 constructor(public navCtrl: NavController,  private WP: WoocommerceProvider) {
  	this.WooCommerce = WP.init();
  	this.WooCommerce.getAsync("products").then((data)=>{
  		console.log(JSON.parse(data.body));
  		this.products = JSON.parse(data.body);
  		console.log(this.products)
  	},(error)=>{
  		console.log(error)		
  	})
  }

Please help me

2

First install ( npm install woocommerce-api --save ) then
In your TS file
try to use this code
import { Component, ViewChild } from ‘@angular/core’;
import { NavController, NavParams, Slides } from ‘ionic-angular’;

import * as HA from ‘woocommerce-api’;
import { ProductsPage } from ‘…/products/products’;

@Component({
selector: ‘page-allproducts’,
templateUrl: ‘allproducts.html’,
})
export class AllproductsPage {
WooCommerce: any;
products: any;
moreProducts: any;
@ViewChild (‘product’) product: Slides;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.WooCommerce = HA({
url: “YourWebLink”,
consumerKey: “YourConsumerKey”,
consumerSecret: “YourConsumerSecret”
})
this.WooCommerce.getAsync(“products”).then( (data) => {
console.log(JSON.parse(data.body));
this.products = JSON.parse(data.body).products;
}, (err) => {
console.log(err)
})
}
ionViewDidLoad(){
setInterval(()=> {
if (this.product.getActiveIndex() == this.product.length() - 1)
this.product.slideTo(0);

this.product.slideNext();
}, 3000)
}
}
…
In your html file
Use this code, problem will be solved

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

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

{{ product.title }}



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



1 Like
3

Thanks for your response also am facing some issue on search and product by category

am using this code for search “products?search=” + this.searchQuery + “&page=” + this.page but while i type product name or anything its showing all product can your help me on this also i have faced same problem on product by category am using this code for product by category “products?filter[category]=” + this.category.slug + “&page=” + this.page" whenever I clicked on any category its showing all product . If there is no product in that category nevertheless showing all product

Please help me out

4

Use this code for showing categories

//////////////////////////////////////////////////////////////////////////////////////////////////////

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import * as HA from 'woocommerce-api';

@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html',
})
export class MenuPage {

  WooCommerce: any;
  categories: any[];
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.categories = [];
    this.WooCommerce = HA({
      url: "WEB_Link",
    consumerKey: "Your consumerKey",
    consumerSecret: "Your consumerSecret"
   })
   this.WooCommerce.getAsync("products/categories").then( (data) => {
    console.log(JSON.parse(data.body).product_categories);
    let temp: any[] = JSON.parse(data.body).product_categories;
    for (let i = 0; i < temp.length; i++) {
      if (temp[i].parent == 0) {
        this.categories.push(temp[i]);
      }
    }
  }, (err) => { 
    console.log(err)
  })
  }
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
In html file:

 <ion-content>
        <ion-list>
            <ion-item *ngFor="let category of categories" text-wrap>
                <h2> {{ category.name }} </h2>
                <p> {{ category.description }} </p>
            </ion-item>
        </ion-list>
    </ion-content>

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Your problem will be solved.

5

Category is showing properly but i want to search product by category also i followed the Udamy tutorial

6

Can you share with me your code???

7

Below my code

  ionViewDidLoad() {
    this.AP.presentLoading('Loading data for you..');
   this.WooCommerce.getAsync("products?filter[categories]=" + this.category.slug).then((data) => {
     this.AP.dismissLoading();
      console.log(JSON.parse(data.body));
      this.products = JSON.parse(data.body);
    }, (err) => {
      console.log(err)
    })
  }
8

Try to use this code for search
In .html file:

<!--
  Generated template for the SearchPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Search : {{ searchQuery }}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let product of products" text-wrap  (click)="openProductPage(product)">
      <ion-thumbnail item-left>
        <img [src]="product.featured_src" />
      </ion-thumbnail>

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

      <p>
        <span [innerHTML]="product.short_description.substr(0, 50) + '...'"></span>
        <span [innerHTML]="product.price_html"></span>
        <span *ngIf="product.average_rating >= 1">
          <ion-icon style="color: #d4af37" small name="star"></ion-icon>
        </span>
        <span *ngIf="product.average_rating >= 2">
          <ion-icon style="color: #d4af37" small name="star"></ion-icon>
        </span>
        <span *ngIf="product.average_rating >= 3">
          <ion-icon style="color: #d4af37" small name="star"></ion-icon>
        </span>
        <span *ngIf="product.average_rating >= 4">
          <ion-icon style="color: #d4af37" small name="star"></ion-icon>
        </span>
        <span *ngIf="product.average_rating >= 5">
          <ion-icon style="color: #d4af37" small name="star"></ion-icon>
        </span>
      </p>

      <button ion-button icon clear item-right>
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </ion-item>
  </ion-list>
   <ion-infinite-scroll (ionInfinite)="loadMoreProducts($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

In .ts file:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import * as WC from 'woocommerce-api';
import { WoocommerceProvider } from '../../providers/woocommerce/woocommerce';

@IonicPage({})
@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
})
export class SearchPage {

  searchQuery: string = "";
  WooCommerce: any;
  products: any[] = [];
  page: number = 2;

  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, private WP: WoocommerceProvider) {
    console.log(this.navParams.get("searchQuery"));
    this.searchQuery = this.navParams.get("searchQuery");

    this.WooCommerce = WP.init();

    this.WooCommerce.getAsync("products?filter[q]=" + this.searchQuery).then((searchData) => {
      this.products = JSON.parse(searchData.body).products;
    });


  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SearchPage');
  }

  loadMoreProducts(event){

    this.WooCommerce.getAsync("products?filter[q]=" + this.searchQuery + "&page=" + this.page).then((searchData) => {
      this.products = this.products.concat(JSON.parse(searchData.body).products);

      if(JSON.parse(searchData.body).products.length < 10){
        event.enable(false);

        this.toastCtrl.create({
          message: "No more products!",
          duration: 5000
        }).present();

      }

      event.complete();
      this.page ++;

    });
  }

}

Your problem will be solved. .

9

Thank you for your response. unfortunately your code dose not work for me.

10

anything Need to be change in wordpress ?

11

https://mydomainname.com/ecomtestapp/wp-json/wc/v3/products?filter[q]=gfgfg this is my end point when i try to search something its fetching all product.

12

This is wrong, just use this like: www.example.com