장바구니 결제 화면 구현

 

관련 : 지식인 질문

 

https://www.instagram.com/p/Cf_XuyWFBc9/

위 링크의 영상처럼 장바구니 목록을 구성해서 신용카드로 결제하는 화면을 구성하고 싶다는 질문입니다.

 

 

 

VBA와 ListBox 를 이용해서 만들어 보았습니다.

​

그림을 클릭해서 아이템을 추가하고 개수를 늘립니다.

+와 -를 눌러서 숫자를 수정합니다.

물건 가격은 그림 도형의 이름 "item_축구공_10000"에서 가져옵니다.

 

0개가 되면 목록에서 삭제합니다.

물건의 최대 개수는 10개로 제한했습니다. 바꾸려면 maxITem 값을 수정하면 됩니다.

결제화면 버튼을 누르면 총액수를 보여주고 결제하기를 누릅니다.

애니메이션이 뜨고 결제가 완료됩니다.

​

아래 실행 영상을 확인하세요.

 

 

윈도우에서만 작동하기 때문에 터치가 되는 노트북을 이용하거나

갤럭시 탭 등에 SuperDisplay로 윈도우 화면을 연동해서 태블릿화면을 터치하는 방식으로

원본 영상처럼 구현이 가능합니다.

 

 

아래는 사용된 Module1의 코드입니다.

ListBox를 다루는 코드 예시로 활용할 수 있습니다.

ListBox 는 Index가 0부터 시작하고 Column 순서도 0부터 시작하는 것에 주의해야 합니다. 

Option Explicit
Option Compare Text '문자열 비교시 대소문자 무시
Const MaxItem As Integer = 10
Const PaySlide As Long = 3

'초기화
Sub InitList()

    Slide1.ListBox1.Clear
    Slide1.ListBox1.ColumnCount = 3
    
End Sub

Sub test()
    ClickItem ActivePresentation.Slides(2).Shapes("item_축구공_10000")
End Sub

'아이템 추가
Sub ClickItem(shp As Shape)
    
    Dim Found As Integer, i As Integer
    Dim itemName As String, itemPrice As Long, itemTotal As Long
    
    With Slide1.ListBox1
        itemName = Split(shp.Name, "_")(1)
        itemPrice = Split(shp.Name, "_")(2)
        
        '기존 아이템인지 검색
        Found = -1
        For i = LBound(.List) To UBound(.List)
            If .List(i, 0) = itemName Then Found = i: Exit For
        Next i
        
        '새로 추가
        If Found = -1 Then
            .AddItem itemName

            'Debug.Print itemName, itemPrice
            .List(.ListCount - 1, 1) = 1
            .List(.ListCount - 1, 2) = Format(itemPrice, "###,###")
        '기존 아이템
        Else
            .List(Found, 1) = .List(Found, 1) + 1
        End If
        
        '총합계산
        For i = LBound(.List) To UBound(.List)
             itemTotal = itemTotal + .List(i, 1) * .List(i, 2)
        Next i
        ActivePresentation.Slides(PaySlide).Shapes("Total"). _
            TextFrame.TextRange = Format(itemTotal, "###,###,###")
    
    End With

    
End Sub

Sub PlusMinus(shp As Shape)
    
    Dim i As Integer
    Dim flag As Boolean
    Dim itemTotal As Long
    
    If shp.Name = "plus" Then flag = True Else flag = False
    
    With Slide1.ListBox1
        If .ListIndex < 0 Then MsgBox "먼저 개수를 수정할 물건을 선택하세요.", vbInformation: Exit Sub
        
        .List(.ListIndex, 1) = .List(.ListIndex, 1) + IIf(flag, 1, -1)
        
        '0개인 경우 삭제
        If .List(.ListIndex, 1) = 0 Then
            .RemoveItem .ListIndex
        '최대개수 초과인 경우
        ElseIf .List(.ListIndex, 1) > MaxItem Then
            MsgBox "최고개수는 " & MaxItem & "입니다.", vbOKOnly + vbInformation
            .List(.ListIndex, 1) = 10
        
        End If
        
        '총합계산
        For i = LBound(.List) To UBound(.List)
             itemTotal = itemTotal + .List(i, 1) * .List(i, 2)
        Next i
        ActivePresentation.Slides(PaySlide).Shapes("Total"). _
            TextFrame.TextRange = Format(itemTotal, "###,###,###")
            
    End With
    
End Sub


Sub OnSlideShowPageChange(SSW As SlideShowWindow)

    If SSW.View.Slide.SlideIndex = 1 Then InitList
    
End Sub

첫 슬라이드와 결제 전 슬라이드에 빈 슬라이드가 사용된 것은 의도적인 것입니다.

자동 전환 되는 첫 슬라이드는 ListBox 초기화를 위한 것이고

결제 전 빈 슬라이드는 원처럼 도는 애니메이션이 한번 재생되어 다시 재생되지 않는 것을 방지하기 위함입니다.

 

결제화면구현1.pptm

9.26MB

 

 

 

 

참고로 원 모양의 동그라미를 그리는 방법을 이용해서 로딩 애니메이션도 삽입해보았습니다.

 

중간에 결제 확인 화면 앞에 삽입된 로딩 애니메이션입니다.

Loading1.pptm

0.05MB