Responsive Design Article Result List Add Item To Cart via Select Bullets

apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.ts

@@ -52,7 +52,7 @@ export class SearchResultItemComponent extends ComponentStore<SearchResultItemCo
   }
 
   @Output()
-  selectedChange = new EventEmitter<boolean>();
+  selectedChange = new EventEmitter<ItemDTO>();
 
   get contributors() {
     return this.item?.product?.contributors?.split(';').map((val) => val.trim());
@@ -147,6 +147,10 @@ export class SearchResultItemComponent extends ComponentStore<SearchResultItemCo
   setSelected() {
     const isSelected = this._articleSearchService.selectedItemIds.includes(this.item?.id);
     this._articleSearchService.setSelected({ selected: !isSelected, itemId: this.item?.id });
+
+    if (!this.isTablet) {
+      this.selectedChange.emit(this.item);
+    }
   }
 
   @HostBinding('style') get class() {

apps/page/catalog/src/lib/article-search/search-results/search-results.component.html

@@ -58,18 +58,19 @@
     class="page-search-results__result-item"
     [class.page-search-results__result-item-main]="isOutletMain"
     *cdkVirtualFor="let item of results$ | async; trackBy: trackByItemId"
+    (selectedChange)="addToCart($event)"
     [selectable]="isSelectable(item)"
     [item]="item"
   ></search-result-item>
   <page-search-result-item-loading *ngIf="fetching$ | async"></page-search-result-item-loading>
 </cdk-virtual-scroll-viewport>
 
-<div class="actions z-fixed">
+<div *ngIf="isTablet" class="actions z-fixed">
   <button
     [disabled]="loading$ | async"
     *ngIf="(selectedItemIds$ | async)?.length > 0"
     class="cta-cart cta-action-primary"
-    (click)="addSelectedItemsToCart()"
+    (click)="addToCart()"
   >
     <ui-spinner [show]="loading$ | async">In den Warenkorb legen</ui-spinner>
   </button>

apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss

@@ -23,25 +23,9 @@
   @apply pl-[4.9375rem] px-4;
 }
 
-.filter {
-  @apply justify-self-end font-sans flex self-end items-center font-bold bg-wild-blue-yonder border-0 text-regular py-px-8 px-px-15 rounded-filter justify-center z-sticky;
-  width: 106px;
-  min-width: 106px;
-
-  .label {
-    @apply ml-px-5;
-  }
-
+.page-search-results__filter {
   &.active {
-    @apply bg-active-customer text-white ml-px-5;
-  }
-}
-
-.filter-wrapper {
-  @apply block relative;
-
-  .hits {
-    @apply text-inactive-branch font-semibold absolute top-2 right-0;
+    @apply bg-[#596470] text-white ml-px-5;
   }
 }
 

apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts

@@ -290,29 +290,44 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
     this.searchService.patchState({ selectedItemIds: [] });
   }
 
-  async addSelectedItemsToCart() {
+  async addToCart(item?: ItemDTO) {
     this.loading$.next(true);
-    const selectedItems = await this.selectedItems$.pipe(first()).toPromise();
+
+    if (!!item) {
+      await this.addItemsToCart(item);
+    } else {
+      await this.addItemsToCart();
+    }
+
+    this.loading$.next(false);
+  }
+
+  private _createShoppingCartItem(item: ItemDTO): AddToShoppingCartDTO {
+    return {
+      quantity: 1,
+      availability: {
+        availabilityType: item?.catalogAvailability?.status,
+        price: item?.catalogAvailability?.price,
+        supplierProductNumber: item?.ids?.dig ? String(item?.ids?.dig) : item?.product?.supplierProductNumber,
+      },
+      product: {
+        catalogProductNumber: String(item?.id),
+        ...item?.product,
+      },
+      itemType: item?.type,
+      promotion: { points: item?.promoPoints },
+    };
+  }
+
+  async addItemsToCart(item?: ItemDTO) {
+    const selectedItems = !item ? await this.selectedItems$.pipe(first()).toPromise() : [item];
     const items: AddToShoppingCartDTO[] = [];
+
     const canAddItemsPayload = [];
 
     for (const item of selectedItems) {
+      const shoppingCartItem = this._createShoppingCartItem(item);
       const isDownload = item?.product?.format === 'EB' || item?.product?.format === 'DL';
-      const shoppingCartItem: AddToShoppingCartDTO = {
-        quantity: 1,
-        availability: {
-          availabilityType: item?.catalogAvailability?.status,
-          price: item?.catalogAvailability?.price,
-          supplierProductNumber: item?.ids?.dig ? String(item.ids?.dig) : item?.product?.supplierProductNumber,
-        },
-        product: {
-          catalogProductNumber: String(item?.id),
-          ...item?.product,
-        },
-        itemType: item.type,
-        promotion: { points: item?.promoPoints },
-      };
-
       if (isDownload) {
         shoppingCartItem.destination = { data: { target: 16 } };
         canAddItemsPayload.push({