CODEWITHSUNDEEP
angularsap-commerce-cloudspartacus-storefrontstorefrontcomposable
David Levy
David Levy

Reputation: 1

SAP Spartacus Storefront 2211 - how to override PDP pickup options and preselect store

I am using SAP Composable Storefront Spartacus 2211

In PDP, I need to

1- Hide the "Ship it" pickup option 2- Preselect the "Free pickup in store" as it should be the only option available. (See image 1)

As an added complexity for #2, I need to preselect the option and ALSO preselect ANY store, which is selected through a popup when clicking Select Store and then Find Stores (See image 2)

PDP pickup options PDP Pickup in store popup

For 1, I tried hiding the 'Ship it' option through global styles.scss, which worked fine, but it remained as the preselected option of the combo, which is a problem cause user could still Add to cart with that hidden option selected.

I have tried to do a CMS Component replacement of the full AddToCartComponent, but that would mean replicating the other parts of the component like Qty selector and AddToCart button, which I also tried and didn't work.

I have also tried replacing the specific deeper outlet:

@NgModule({
  declarations: [
    CustomProductAddToCartComponent
  ],
  imports: [CommonModule, OutletRefModule],
  exports: [  CustomProductAddToCartComponent  ],
  providers: [
    provideOutlet({
      id: CartOutlets.ADD_TO_CART_PICKUP_OPTION,
      position: OutletPosition.REPLACE,
      component: CustomProductAddToCartComponent
    })
  ]
})
export class CustomProductAddToCartComponent { }

But this option didn't replace the ootb pickup options content, it only appended my html template to the existing one.

According to the documentation we can only replace full CMS Components, is that still valid for version 2211? I am eager to know how to replace/customize lower-level components.

Upvotes: 0

Views: 188

Answers (1)

Kumar Rituraj
Kumar Rituraj

Reputation: 76

Yes its a strange behaviour , it is not able to replace components . Why do not you hide the standard component with css & use your custom component . I was able to get pick up option preselected . enter image description here

import { Component } from '@angular/core';
import { CartOutlets } from '@spartacus/cart/base/root';
import { CartPickupOptionsContainerComponent, PdpPickupOptionsContainerComponent } from '@spartacus/pickup-in-store/components';
import { PickupOption } from '@spartacus/pickup-in-store/root';
import { provideOutlet, OutletPosition } from '@spartacus/storefront';

@Component({
  selector: 'app-cust-cart-pick-up-container',
  templateUrl: './cust-cart-pick-up-container.component.html',
  styleUrl: './cust-cart-pick-up-container.component.scss',
})
export class CustCartPickUpContainerComponent extends PdpPickupOptionsContainerComponent{
pickupOptions1:PickupOption = 'pickup';
}
<ng-container *ngIf="availableForPickup">
    <cx-pickup-options
    [selectedOption] = pickupOptions1
    
      (pickupOptionChange)="onPickupOptionChange($event)"
      (pickupLocationChange)="openDialog()"
    ></cx-pickup-options>
  </ng-container>

For your scenario 2 , I will check & let you know.

Regards KR

Upvotes: 0

Related Questions