팝업에서 장바구니에 메뉴 담기

 

 

• 기존 문제: 팝업으로 첫 번째 추천 메뉴를 조회하고 창을 닫는 것은 가능했으나 바로 장바구니에 더하는 것은 불가능 → 카드를 누르면 장바구니에 더해지는 것까지는 구현했으나 닫기 버튼을 누르면 장바구니에 메뉴가 더해지면서 팝업이 닫힘
• 해결: 닫기 버튼을 제외한 팝업 창 어디든 누르면 메뉴가 장바구니에 더해지도록 수정, 닫기 버튼을 누르면 팝업창 닫힘

    <!-- Pop-up for best recommendation -->
    <div class="popup-overlay" id="popup-overlay">
        <div class="popup-container" id="popup-container">
            <h2>추천 음료</h2>
            <div class="menu-image">
                <img src="" alt="메뉴 이미지" id="popup-image"/>
            </div>
            <h2 class="name" id="popup-name">메뉴 이름</h2>
            <p class="price" id="popup-price">₩0</p>
            <button id="closePopup">닫기</button>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const filteredHashtags = localStorage.getItem('filteredHashtags');
            const responseText = localStorage.getItem('responseText');
            const popupOverlay = document.getElementById('popup-overlay');
            const popupContainer = document.getElementById('popup-container'); // 수정된 부분
            const popupImage = document.getElementById('popup-image');
            const popupName = document.getElementById('popup-name');
            const popupPrice = document.getElementById('popup-price');
            const closePopup = document.getElementById('closePopup'); // 수정된 부분
            console.log("filteredHashtags>>>>>>>>>>", filteredHashtags)
            console.log("responseText>>>>>>>>>>", responseText)

            // Function to update the menu based on hashtags
            axios.get('/orders/get_menus/', { params: { hashtags: filteredHashtags } })
                .then(response => {
                    const menus = response.data.menus.slice(0, 3);
                    const recommendations = document.getElementById('recommendations');
                    recommendations.innerHTML = '';

                    menus.forEach((menu, index) => {
                        const menuItem = `
                            <div class="recommendation" onclick="addItem('${menu.food_name}', ${menu.price}, '${menu.img_url}')">
                                <h2>${menu.food_name}</h2>
                                <div class="menu-image">
                                    <img src="${menu.img_url}" alt="${menu.food_name} 이미지">
                                </div>
                                <p>₩${menu.price}</p>
                            </div>
            `;
            
            if (index === 0) {
                popupImage.src = menu.img_url;
                popupName.textContent = menu.food_name;
                popupPrice.textContent = `₩${menu.price}`;
                popupContainer.setAttribute('onclick', `addItem('${menu.food_name}', ${menu.price}, '${menu.img_url}')`); // 수정된 부분
                popupOverlay.style.display = 'flex';
            }

            recommendations.insertAdjacentHTML('beforeend', menuItem);
        });

        closePopup.addEventListener("click", function() {
            event.stopPropagation(); // Stop event from bubbling up // 수정된 부분
            popupOverlay.style.display = "none"; // Hide the popup // 수정된 부분
        });
    })

    .catch(error => {
        console.error('메뉴 업데이트 중 오류 발생:', error);
    });
            
        if (responseText) {
            speak(responseText);
            }
        });

 

• 프롬프트 수정에 따른 문제
  • 음성 안내가 나오지 않는 문제: 프롬프트를 수정해 음성 안내와 메뉴 추천이 분리되도록 해서 발생함
  • 추천된 메뉴로 메뉴가 불러와지지 않았던 문제: 추천 메뉴 리스트를 기반으로 데이터베이스에서 값을 뽑아내야 하는 로직이 구현되지 않음
• 해결
  • 음성 안내와 메뉴 추천을 각각 받아서 local storage에 저장
  • 기존에 사용했던 API 가 아닌 원하는 로직이 들어있는 API를 불러와서 사용

                    axios.post('/orders/aibot/', { inputText: transcript },
                        {
                            headers: {
                                'X-CSRFToken': csrfToken
                            }
                        })
                        .then(function (response) {
                            const responseText = response.data.responseText;
                            const recommended_menu = response.data.recommended_menu;
                            console.log('서버 응답:', responseText);
                            localStorage.setItem('recommended_menu', JSON.stringify(recommended_menu)); // 수정된 부분 recommended_menu를 JSON.stringify()로 저장해줌
                            localStorage.setItem('customer_message', responseText); // 수정된 부분 - responseText와 recommended_menu를 분리해줌
                            window.location.href = '/orders/elder_menu/';
                            console.log("customer_message>>>>>>>", responseText);
                            console.log("recommended_menu>>>>>>>", recommended_menu);
                        })
                        .catch(function (error) {
                            console.error('에러:', error);
                        });

 

    document.addEventListener('DOMContentLoaded', function() {
        const recommended_menu_string = localStorage.getItem('recommended_menu'); // recommended_menu_string을 불러와주고
        const recommended_menu = JSON.parse(recommended_menu_string); // 다시 리스트화
        const responseText = localStorage.getItem('customer_message'); // 안내 메시지 불러옴
        
      axios.get('/orders/aibot/', { params: { recommended_menu: recommended_menu_string } }) // 사용하는 API를 변경
        .then(response => {
            const menuData = response.data.recommends; // assuming your API returns menus as an array
            //const recommendations = document.getElementById('recommendations');
            recommendations.innerHTML = '';

            menuData.forEach((menu, index) => {
                const menuItem = `
                    <div class="recommendation" onclick="addItem('${menu.food_name}', ${menu.price}, '${menu.img_url}')">
                        <h2>${menu.food_name}</h2>
                        <div class="menu-image">
                            <img src="${menu.img_url}" alt="${menu.food_name} 이미지">
                        </div>
                        <p>₩${menu.price}</p>
                    </div>
                `;