관리자 :: 추천 상품 관리 (2)

이번 게시물에서 작업할 내용은

 

추천상품 관리 페이지에 '추천 상품 추가' 버튼을 만들어주고

그 버튼을 클릭하면

추천상품으로 추가되지 않은 애들의 리스트를 보여주고

그 리스트에서 상품을 선택해서 추천 상품 리스트에 추가해주도록 해야지

 

recommand.js

팝업창으로 만들어줄 애들을 만들어주었다.

그리고는 css를 통해 팝업창으로 올려주자

 

recommand.css

짠 팝업창 만들어주고 바탕은 연한 회색으로 깔아주었다.

 

(잠깐 쉬어가는 타임 = css 타임)

 

아유 맘 편하다 ..

 

이제 상단의 '추천 상품 추가'  버튼을 클릭하면

추천 상품에 추가되지 않은 상품들의 리스트를 가져오도록 하자

 

recommand.js

 

버튼을 클릭하면 팝업창으로 통해 추천상품에 들어가지 않은 상품들의 리스트를 확인할 수 있다.

 

그럼 추가 버튼을 클릭하면 추천 상품 리스트로 들어가도록 해주자

 

팝업창 안의 버튼 이름이 중복되서 애먹엇다 ..

그래서 버튼 이름을 변경해주고

아래와 같이 ajax를 작성해주었다

그리고 팝업창의 닫기 버튼을 클릭하면 팝업틍 닫을 수 있도록

 

이 친구를 추가해주었다.

 

다음과 같은 alert과 함께 추천 상품 리스트에 잘 추가됨을 확인해줄수 있다.

 

여기서 바로바로 적용되도록 location.reload();를 추가해주니,

한개 추가해줄때마다 팝업창이 내려가서 불편하게되었다.

 

그래서

 

비추천 상품 리스트를 새로 로드해주는 함수를 만들어서 기존의 리스트를 가져와주는 애들을 안에 넣어주고

버튼을 클릭했을 때, 그 함수가 실핼되도록 만들어주었다!

 

그럼 추천 상품 리스트로 바로바로 업데이트 되도록 만들어주자

 

똑같은 방식으로 함수를 만들어주고

 

팝업창의 추천 상품 추가 버튼을 클릭했을 때 실행되도록 만들어준다.

 

기능은 완성되었다.

그럼 이제 팝업창을 예쁘게 만들어 보자 ..

 

 

완성했습니다