[스틸스] 구매 페이지 구현

 

 

구매 페이지는 반응형 웹이라는 목표에 초점을 맞춰 사용자가 최대한 정보를 보기 쉽도록 레이아웃을 구성하는 데 많은 힘을 썼다.

 

 

기획에서부터 모바일과 웹 화면으로 나누어 구조를 만들었고, 포함될 주문 단계 역시 간소화했다.

 

 

1. 모바일 화면

 

모바일은 화면의 크기가 작기 때문에 주문 상품 정보를 나란히 배치해 한눈네 확인할 수 있도록 했다.

 

이에 display:flex 속성을 사용했고, 나란히 배열하니 상품 정보가 서로 공백 없이 달라붙게 되어 보기에 불편하다는 것을 확인했다.

따라서 상품 정보를 포함한 div에 margin을 주고싶어졌다.

모든 div에 margin을 주기엔 레이아웃이 의도와 달리 변형될 것 같아 not(:nth-child), not(:last-child) 속성을 활용해 원하는 위치의 div에만 margin이 들어가도록 조정했다.

 

 

주문자 정보는 작은 화면에서 상품 정보 밑으로 배치해야 최대한 크게 확인할 수 있다고 생각했고, display속성을 사용하지 않고 수직으로 구현되도록 했다.

 

구매페이지 모바일

 

 

 

2. 웹 화면

 

큰 화면을 구성할 때는 모바일보다 공간의 제약이 적어서 사용자가 최대한 정보를 크게 볼 수 있도록 하는 데 집중했다.

 

모바일에서는 나란히 두었던 상품 정보를 수직으로 배치해 이미지와 정보가 크게 확인할 수 있도록 했다.

또한 큰 화면이지만 정보를 스크롤 하며 찾기 보다 한눈에 볼 수 있도록 구현하고자 상품정보와 주문자 정보에 display:flex 속성으로 나란히 나열해주었다.

 

 

따라서 모든 정보는 크게 스크롤할 필요 없이 한 화면에서 확인이 가능해졌으며, 상품 이미지 또한 크게 볼 수 있어 사용자가 주문을 확인함에 있어 편해질 것이라 기대된다.

 

구매페이지 웹

 

 

---

 

 

3. 구매 총 금액 계산

 

구매페이지에서 확인해야하는 중요한 정보 중 하나가 주문 상품 총 금액이라고 생각했다.

 

따라서 상품의 가격 정보를 읽어와 총 금액을 계산하고 화면에 나타낼 수 있도록 하기 위해 script 코드를 작성했다.

이전과 마찬가지로 jQuery를 많이 연습해보고 싶었기 때문에 jQuery를 사용해 코드를 작성해주었다.

 

 

먼저, 상품의 가격정보가 표시되는 div에 공통된 class를 설정하고, jQuery로 값을 불러와 정수로 변환한 뒤 더해주었다.

 

이어서 계산을 한 결과 값인 구매 총 금액을 화면에 나타내기 위한 위치 div에 class를 부여하고, 자리를 읽어와 값을 설정해 화면에 출력되도록 만들었다.

 

밑의 코드가 작성했던 script 코드이다.

 

<script>

      $(document).ready(function () {

        var totalPrice = 0;

 

        $(".pro-price").each(function () {

          var price = parseInt($(this).text());

          totalPrice += price;

        });

 

        $(".pur-price").text(totalPrice + "원");

      });

</script>

 

 

---

 

 

4. 주문자 입력 폼을 안채워도 주문 완료창 뜨는 오류 수정

 

주문자 입력 폼을 설정할 때, required 속성을 부여해 폼이 다 채워지지 않으면 제출이 안되도록 설정했으나, 경고창 이벤트를 설정하면서 required 속성이 작동하지 않는 것을 확인했다.

 

 

따라서 경고창을 띄울 때도 폼이 채워지지 않으면 주문 완료창이 나타나지 않게하기 위해 script 코드를 수정했다.

form에 id를 추가하여 폼의 기본 제출 동작을 방지하는 event.preventDefault()를 정의하고, 조건문을 작성했다.

 

만약 폼이 모두 채워진 경우 alert()함수가 작동하고, 그렇지 않은 경우 required로 폼 검증 메시지를 띄우도록 jQuery를 작성했다.

 

script 코드를 수정해준 후 입력 폼이 비어있으면 required 속성이 잘 작동하는 것을 확인할 수 있었다.

 

 

수정한 html과 script 코드를 올려두겠다.

 

<article class="purchase">

          <div class="pur-name">주문자 정보</div>

          <div class="checkout">

            <form id="pur-form">

              <div class="check-group">

                <label for="fullname" class="check-name">이름</label>

                <input

                  type="text"

                  id="fullname"

                  name="fullname"

                  placeholder="홍길동"

                  required

                />

              </div>

              <div class="check-group">

                <label for="tel" class="check-name">전화번호</label>

                <input

                  type="tel"

                  id="tel"

                  name="tel"

                  placeholder="010-0000-0000"

                  required

                />

              </div>

              <div class="check-group">

                <label for="address" class="check-name">배송지</label>

                <input

                  type="text"

                  id="address"

                  name="address"

                  placeholder="서울특별시 마포구 숭문4길 6 스프레틱스 염리 사옥 1층"

                  required

                />

              </div>

              <div class="check-group">

                <label for="payment" class="check-name">결제 수단</label>

                <select id="payment" name="payment" required>

                  <option value="">결제 수단을 선택하세요</option>

                  <option value="creditcard">신용 카드</option>

                  <option value="paypal">페이팔</option>

                </select>

              </div>

              <div class="check-group">

                <input type="submit" value="주문 완료" />

              </div>

            </form>

          </div>

</article>

<script>

      $(document).ready(function () {

        $("#pur-form").submit(function (event) {

          var fullname = document.getElementById("fullname").value;

          var tel = document.getElementById("tel").value;

          var address = document.getElementById("address").value;

          var payment = document.getElementById("payment").value;

          var totalPrice = document.querySelector(".pur-price").innerText;

          event.preventDefault();

          if (this.checkValidity()) {

 

            alert(

              "주문 정보 확인\n\n" +

                "이름: " +

                fullname +

                "\n" +

                "주문 금액 : " +

                totalPrice +

                "\n" +

                "전화번호: " +

                tel +

                "\n" +

                "배송지: " +

                address +

                "\n" +

                "결제 수단: " +

                payment

            );

            window.location.href = "../index.html";

          } else {

 

            this.reportValidity();

          }

        });

      });

</script>

 

주문자 정보 form

 

 

---

 

 

5. 결제 수단 선택하지 않고도 주문 완료되는 오류 수정

 

4번과 비슷하게 required를 체크하는 과정에서 결제수단을 설정하지 않아도 주문이 완료되는 오류가 발생했다.

 

원인을 찾기 위해 html 코드를 다시 살펴보는 과정에서 기본으로 설정되어 있는 '결제 수간을 선택하세요' 선택지에 value값이 부여되어 있었다.

따라서 required 속성이 기본 설정 옵션을 하나의 선택 값으로 인식하고 주문이 완료되는 것을 확인했다.

 

 

간단히 기본 선택 option의 value 값을 삭제해줌으로써 문제를 해결할 수 있었다.

 

<select id="payment" name="payment" required>

                  <option value="">결제 수단을 선택하세요</option>

                  <option value="creditcard">신용 카드</option>

                  <option value="paypal">페이팔</option>

</select>