CODEWITHSUNDEEP
spartacus-storefront
Yash
Yash

Reputation: 21

Backend Call to SAP Commerce is not triggering From My New Spartacus Setup

I am new to Spartacus and I am trying to do end-to-end integration by creating one feature in myAccount Navigation. I am able to render the page and map the CMS Component to Angular Component and it displays correctly.

Now I want to call a new occ API from this component to Commerce. I have written a service where it calls the API. But I don't see the request getting triggered in the Web Browser Console. Is there any extra setup that has to be done for this

I am using Spartacus 4.3 and Hybris 2011

Below is component

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { BuyAgain } from 'src/app/model/buyAgain-model';
import { BuyAgainService } from 'src/app/service/buyAgain.service';

@Component({
  selector: 'app-buyAgain',
  templateUrl: './buyAgain.component.html',
  styleUrls: ['./buyAgain.component.scss']
})
export class BuyAgainComponent implements OnInit {

  productList$: any;
  constructor(protected buyAgainService: BuyAgainService) { }
  ngOnInit(): void {
    this.productList$ = this.getAllProductsForCustomer();
  }

  getAllProductsForCustomer(): Observable<BuyAgain> {
  
    return this.buyAgainService.getCustomerOrderedProducts();
  }

}

Below is the BuyAgain Service

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { OccEndpointsService } from '@spartacus/core';
import { Observable } from 'rxjs';
import { BuyAgain } from '../model/buyAgain-model';

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

  constructor(protected http: HttpClient,
    protected occEndpoints: OccEndpointsService) { }

getCustomerOrderedProducts(): Observable<BuyAgain> {
  console.log("In Service")
  return this.http.get<BuyAgain>(
    this.getBuyAgainEndpoint()
  );
}

  protected getBuyAgainEndpoint(): string {

    return this.occEndpoints.buildUrl('buyAgainProducts');
  }

}

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { translationChunksConfig, translations } from "@spartacus/assets";
import { FeaturesConfig, I18nConfig, OccConfig, provideConfig, SiteContextConfig } from "@spartacus/core";
import { defaultCmsContentProviders,layoutConfig, mediaConfig } from "@spartacus/storefront";
import { BuyAgainModule } from '../component/buyAgain/buyAgain.module';
import { LayoutConfigurationModule } from '../confiuration/layout/layout.module';
import { ExtendServices } from '../service/extend-services.service';

@NgModule({
  declarations: [],
  imports: [
    LayoutConfigurationModule,
    ExtendServices,
    BuyAgainModule,
    HttpClientModule
  ],
  providers: [provideConfig(mediaConfig), ...defaultCmsContentProviders, provideConfig(<OccConfig>{
    backend: {
      occ: {
        baseUrl: 'https://localhost:9002/',
      }
    },
  }), provideConfig(<SiteContextConfig>{
    context: {
      currency: ['GBP', 'USD'],
      language: ['en','de'],
      baseSite: ['apparel-uk-spa', 'electronics-spa'],
      urlParameters: ['baseSite', 'language', 'currency']
    },
  }),
  provideConfig(<I18nConfig>{
    i18n: {
      resources: translations,
      chunks: translationChunksConfig,
      fallbackLang: 'en'
    },
  }),

  //***** How to Override i18n*****/
  // provideConfig({
  //   i18n: {
  //     backend: {
  //       loadPath: 'assets/i18n-assets/{{lng}}/{{ns}}.json',
  //     },
  //     chunks: translationChunksConfig,
  //   },
  // }),
  provideConfig(<FeaturesConfig>{
    features: {
      level: '4.3'
    }
  })]
})
export class SpartacusConfigurationModule { }

Upvotes: 0

Views: 952

Answers (1)

timoblume
timoblume

Reputation: 156

Does your call to this.occEndpoints.buildUrl call actually return something? You need to have the endpoint provided with corresponding fields in your config.

Another problem could be that the subscription to the observable of your productList might not be started? Are you using something like the async pipe in the html of the component to subscribe to the productList$ attribute?

Upvotes: 0

Related Questions