상품 구입 후의 상품에 SOLD를 표기(모 프리마 앱의 SOLD 기능)

4685 단어 HTMLCSS3루비Rails

전제 조건



Payjp에 등록한 신용 카드로 상품 구매 구현 (Rails)

참고로 구현했습니다.

1. 구매 버튼을 누르면 구매자 ID가 상품에 등록되도록 구현



purchase_controller
def  done
 @product_purchaser= Product.find(params[:id])
 @product_purchaser.update( purchaser_id: current_user.id)
end

2.상품 일람의 상품에 SOLD를 기재



index.html.haml
      -if product.purchaser_id.present? 
        .items-box_photo__sold
          .items-box_photo__sold__inner
            SOLD

위의 코드를 제품의 개별 프레임 하단에 배치



index.scss
  .items-box_photo__sold{
    width: 0;
    height: 0;
    border-top: 60px solid #ea352d ;
    border-right: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid #ea352d ;
    z-index:100;
    position: relative;
    top:-320px;
    &__inner{
      transform: rotate(-45deg);
      font-size: 28px;
      margin:-35px 0px 0px -55px;
      color: #fff;
      letter-spacing: 2px;
      font-weight: 600;
    }
  }

상품 상세가 있는 경우도 마찬가지로 실시





이런 느낌! !

좋은 웹페이지 즐겨찾기