<ion-searchbar show-cancel-button="focus" placeholder="欢迎来到手艺之窗购物" cancel-button-text="取消" (ionInput)="handleInput($event)"></ion-searchbar>

<div class="buttons-row">
   <div class="button-tag">
     <button (click)="showContent('cart-one')">推荐</button>
   </div>
   <div class="button-tag">
    <button  (click)="showContent('cart-two')">手工艺品</button>
   </div>
   <div  class="button-tag">
    <button (click)="showContent('cart-three')">数字藏品</button>
   </div>
</div>

<div class="content-wrapper">
  <div class="item-container" >
    <div *ngFor="let item of items" class="image-container">
      <div *ngIf="item.choice === 1" class="left-column" >
        <div class="image-item">
          <img [src]="item.imgUrl" alt="item image">
          <div class="image-details">
            <h3>{{ item.name }}</h3>
          </div>
          <div class="price-container">
            <p class="price">￥{{ item.price }}</p>
            <p class="sales">销量{{ item.sales }}</p>
          </div>
        </div>
      </div>
      <div *ngIf="item.choice === 2"class="right-column" >
        <div class="image-item">
          <img [src]="item.imgUrl" alt="item image">
          <div class="image-details">
            <h3>{{ item.name }}</h3>
          </div>
          <div class="price-container">
            <p class="price">￥{{ item.price }}</p>
            <p class="sales">销量{{ item.sales }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
