#IF(NOT (#INPUT.IsEditorModeEnabled AND #INPUT.IsEditorNavElements AND #INPUT.IsAdvancedDesign))
#REM
<!--
    Event handlers for global events such as *product view* are defined here. Within these event handlers,
    events are triggered that have been registered in the appropriate places
    (see e.g. DE_EPAGES/GoogleSmartShopping/Data/Public/lib/en_epages/googlesmartshopping/googlesmartshopping-controller.js).
-->
#ENDREM
<script>
require([
    'jquery',
    'ep/ajax',

    'jquery/i18n',
    '$ready!'
], function($, ep) {
    /* START - fake ajax request */
    var qp = {},
        detail = {"lineItemContainer": {"productLineItems": [{"name":"Top - violet","productId":"649BC632-F8EC-9858-5D18-AC1300025EB7","quantity":1,"lineItemPrice":{"taxType":"GROSS","formatted":"39,90 €","amount":39.9,"currency":"EUR"},"singleItemPrice":{"taxType":"GROSS","formatted":"39,90 €","amount":39.9,"currency":"EUR"},"lineItemCouponDiscount":null,"taxClass":"normal","additionalInformation":{"bulkPriceInfo":[]},"lineItemId":"649D1B39-138F-4AE3-17BF-AC1300025CF0","sku":"22-Top","imageUrl":"/storage/images/image?remote=https%3A%2F%2Fqp-20230628-0730.docker-bravo.epages.systems%2FWebRoot%2FStore%2FShops%2Fqp-20230628-0730%2FProducts%2F22-Top%2Ftop-woman-blue.jpg&shop=qp-20230628-0730","slug":"top-violet","essentialFeatures":["Material 100% Baumwolle, Hersteller Cottoncorp, Neu"],"energyLabel":null,"energyLabelSourceFile":null,"variationString":null,"listPrice":{"taxType":"GROSS","formatted":"39,90 €","amount":39.9,"currency":"EUR"},"customizedText":null,"customizedHeadlineText":"Personalisierungswunsch"}],"grandTotal":{"taxType":"GROSS","formatted":"46,90 €","amount":46.9,"currency":"EUR"}}, "cart":{"cartId":"649D1B38-8801-DD7A-7995-AC1300025CB0","checkoutUrl":"https://qp-20230628-0730.docker-bravo.epages.systems/epages/qp-20230628-0730.sf/?ObjectPath=/Shops/qp-20230628-0730/AnonymousUsers/1/Baskets/22057&ChangeAction=PickupBasket&PickupToken=Njg2YmFkNzc0MjhjMzM0NjZlN2NjMmExY2UwZjBhYjlhNDlhNzJhMmYzZjk4OTNhZDk3OTZkMjhhZWI4ZDkzMF8xNjg4MDE3NzIx&Locale=de_DE","pickupToken":"Njg2YmFkNzc0MjhjMzM0NjZlN2NjMmExY2UwZjBhYjlhNDlhNzJhMmYzZjk4OTNhZDk3OTZkMjhhZWI4ZDkzMF8xNjg4MDE3NzIx","cartValidation":{"possibleShippingMethods":["Standardzustellung","Expresszustellung","Selbstabholung"]},"potentialBasketDiscounts":null,"registerSessionUrl":"https://qp-20230628-0730.docker-bravo.epages.systems/epages/qp-20230628-0730.sf/?ObjectPath=/Shops/qp-20230628-0730/AnonymousUsers/1/Baskets/22057&ChangeAction=JSONRegisterSession&ViewAction=JSON&PickupToken=ZmQ2Y2Y4NzU4MWQwNDU0MGE3NTUzMjFiOGYzZTcxMWFlZjM5MzViZmQxZDJlOTkzYTAxMjUxOTNhM2Y4MDJiN18xNjg4MDE3NzIx","productLineItems":[{"name":"Top - violet","productId":"649BC632-F8EC-9858-5D18-AC1300025EB7","quantity":1,"lineItemPrice":{"taxType":"GROSS","formatted":"39,90 €","amount":39.9,"currency":"EUR"},"singleItemPrice":{"taxType":"GROSS","formatted":"39,90 €","amount":39.9,"currency":"EUR"},"lineItemCouponDiscount":null,"taxClass":"normal","additionalInformation":{"bulkPriceInfo":[]},"lineItemId":"649D1B39-138F-4AE3-17BF-AC1300025CF0","sku":"22-Top","imageUrl":"/storage/images/image?remote=https%3A%2F%2Fqp-20230628-0730.docker-bravo.epages.systems%2FWebRoot%2FStore%2FShops%2Fqp-20230628-0730%2FProducts%2F22-Top%2Ftop-woman-blue.jpg&shop=qp-20230628-0730","slug":"top-violet","essentialFeatures":["Material 100% Baumwolle, Hersteller Cottoncorp, Neu"],"energyLabel":null,"energyLabelSourceFile":null,"variationString":null,"listPrice":{"taxType":"GROSS","formatted":"39,90 €","amount":39.9,"currency":"EUR"},"customizedText":null,"customizedHeadlineText":"Personalisierungswunsch"}], "shippingLineItem":{"lineItemPrice":{"taxType":"GROSS","formatted":"7,00 €","amount":7,"currency":"EUR"},"shippingMethod":{"_id":null,"name":"Standardzustellung","description":""}},"paymentLineItem":{"lineItemPrice":{"taxType":"GROSS","formatted":"0,00 €","amount":0,"currency":"EUR"},"paymentMethod":{"_id":null,"name":"Vorkasse","description":""}},"pickupLineItem":null,"shippingAddress":null,"billingAddress":null,"customerEmail":null,"couponCampaign":null,"checkoutButtons":[],"taxType":"GROSS","taxes":[],"grandAmount":"46,90 €","grandTotal":{"taxType":"GROSS","formatted":"46,90 €","amount":46.9,"currency":"EUR"},"subAmount":"39,90 €","subAmountValue":39.9,"totalBasketDiscount":null,"netAmount":"39,41 €","grandAmountNote":"views.storefrontView.basketPageSection.priceInclusiveVat","canHaveCoupon":true,"coupon":null,"couponAutomaticallyRemoved":false,"totalNumberOfItems":1,"checkoutState":{"readyToOrder":null,"shippingMethodValid":null,"pickupOptionValid":null,"paymentMethodValid":null,"billingAddressSet":null,"priceValidToOrder":true,"paymentTransactionStatus":null},"minimumOrderValue":null,"mustAcceptTermsAndConditions":false,"status":null,"_links":null},"product":{"variations":null,"stockLevelMicrodata":"InStock","isShippingLinkVisible":true,"customizableProductInfo":null,"isManufacturerPriceRRP":true,"energyLabelSourceFile":null,"isProductNumberVisible":false,"highestPrice":null,"productVariationValues":"","isVariationProduct":false,"productDataSheet":null,"hasTaxClass":true,"productVariationSelection":null,"hasStockLevel":true,"availabilityText":"Auf Lager","customAttributes":null,"isVisible":true,"price":{"taxType":"GROSS","formatted":"39,90 €","amount":39.9,"currency":"EUR"},"listPrice":{"taxType":"GROSS","formatted":"39,90 €","amount":39.9,"currency":"EUR"},"available":true,"stockLevelClass":"in","productId":"649BC632-F8EC-9858-5D18-AC1300025EB7","hasCrossSelling":true,"name":"Top - violet","slug":"top-violet","href":"/p/top-violet","listPrice":null,"isVariationMaster":false,"energyLabel":null,"slideshow":null,"warnStock":false,"outOfStock":false,"manufacturer":null,"mainCategoryId":"649BC62C-E3D7-F4EF-114E-AC1300025E20","gtin":null,"conditionMicrodata":"NewCondition","variationMaster":{"name":null,"productId":null,"slug":""},"deliveryPeriod":"","onStock":true,"metaDescription":"Dieses Produkt vereinigt komfortable Materialien und hat einen angenehmen Tragekomfort. 100% Cotton","lowestPrice":null,"basePrice":null,"title":"Top - violet - iFrig Shopping","weight":null,"isMarkedAsNew":false,"manufacturerPrice":null,"deliveryPeriodUnit":null,"links":[{"rel":"self","href":"https://docker-bravo.epages.systems/rs/shops/qp-20230628-0730/products/649BC632-F8EC-9858-5D18-AC1300025EB7","title":""},{"rel":"categories","href":"https://docker-bravo.epages.systems/rs/shops/qp-20230628-0730/categories/?productId=649BC632-F8EC-9858-5D18-AC1300025EB7","title":""},{"rel":"cross-selling","href":"https://docker-bravo.epages.systems/rs/shops/qp-20230628-0730/products/649BC632-F8EC-9858-5D18-AC1300025EB7/crossselling","title":""},{"rel":"producttype","href":"https://docker-bravo.epages.systems/rs/shops/qp-20230628-0730/producttypes/649BC62C-0D8B-08A3-2A2A-AC1300025EC7","title":""},{"rel":"main-category","href":"https://docker-bravo.epages.systems/rs/shops/qp-20230628-0730/categories/649BC62C-E3D7-F4EF-114E-AC1300025E20","title":"Kategorien"}],"hasVariations":false,"image":{"url":"/storage/images/image?remote=https%3A%2F%2Fqp-20230628-0730.docker-bravo.epages.systems%2FWebRoot%2FStore%2FShops%2Fqp-20230628-0730%2FProducts%2F22-Top%2Ftop-woman-blue.jpg&shop=qp-20230628-0730","width":599,"height":1079,"isZoomEnabled":true},"vatNote":"components.productComponent.priceInclusiveVat","description":"<p>Dieses Produkt vereinigt komfortable Materialien und hat einen angenehmen Tragekomfort.</p>\n\n<ul>\n  <li>100% Cotton</li>\n</ul>","bulkPrices":[],"sku":"22-Top"},"quantity":1};

    qp.ajax = function (o) {
        var result = ep.Deferred(),
            resolveSend;

        if (o.data && o.data.ChangeAction) {
            if (o.data.ChangeAction === "JSONGetDataForGSS") {
                console.log("request (data): ", o.data, "\ndetail: ", detail);

                result.resolve({
                    success: true,
                    product: detail.product,
                    cart: detail.cart,
                    quantity: detail.quantity,
                    lineItemContainer: detail.lineItemContainer
                });
            }
        } else {
            result.reject();
        }

        return result;
    };
    /* END - fake ajax request */


        // Collect product links
    var productCTAs = $('.HotDealList a, .InfoArea a'),
        // collect product views
        productViews = $('.HotDeal, .InfoArea, *[itemtype="http://schema.org/Product"][data-productGUID], *[itemtype="http://schema.org/Offer"][data-productGUID], #' + 'ShoppingListForm *[data-productGUID], .VariationsTable *[data-productGUID], .CrossellingCount *[data-productGUID], .ComparisonTable *[data-productGUID], .ListItemProductInfoContainer *[data-productGUID]'),
        // collect add to basket buttons
        addToBasketCTAs = $('form[id^="basketForm"]'),
        // collect basket views
        basketViews = $('form[id="BasketForm"][data-basketGUID]').filter(function(index, form) {
            return $(form).closest('.CheckOut').length === 0;
        }),
        // collect order completed views
        orderCompletedViews = $('*[data-orderGUID]').filter(function(index, table) {
            return $(table).closest('.CustomerOrder').length !== 0;
        }),

        /*
         Method to get relevant DOM nodes.
         */
         initializeNodes = function() {
            productCTAs = $('.HotDealList a, .InfoArea a');
            // collect product views
            productViews = $('.HotDeal, .InfoArea, *[itemtype="http://schema.org/Product"][data-productGUID], *[itemtype="http://schema.org/Offer"][data-productGUID], #' + 'ShoppingListForm *[data-productGUID], .VariationsTable *[data-productGUID], .CrossellingCount *[data-productGUID], .ComparisonTable *[data-productGUID], .ListItemProductInfoContainer *[data-productGUID]');
            // collect add to basket buttons
            addToBasketCTAs = $('form[id^="basketForm"]');
            // collect basket views
            basketViews = $('form[id="BasketForm"][data-basketGUID]').filter(function(index, form) {
                return $(form).closest('.CheckOut').length === 0;
            });
            // collect order completed views
            orderCompletedViews = $('*[data-orderGUID]').filter(function(index, table) {
                return $(table).closest('.CustomerOrder').length !== 0;
            });
         },

        /*
         Method to send the gtag event *view_item* with the correct data of a single product
         that was called by *click* (cta).
         */
        handleProductCTAs = function() {
            // loop over all product call to actions
            productCTAs.each(function(index, elem) {
                var $this = $(this);

                $this.on('click', function(evt) {
                    evt.preventDefault();

                    var $cta = $(this),
                        productData = $this.data('productguid'),
                        productId;

                    productData = productData ? productData : $this.closest('*[data-productGUID]').data('productguid');
                    productId = productData.id;

                    // request REST-API via ajax to get product data
                    ep.ajax({
                        url: "#Shop.RESTAPIURL[0]/products/" + productId
                    }).done(function(product, statusText, jqXHR) {
                        // if request was successful -> trigger product view event and hand over the necessary data
                        // for the product view
                        if (product && product.productId) {
                            // map price property to correct place for Google gtag
                            if (product.priceInfo) {
                                // product.price = {...product.priceInfo.price};
                                product.price = product.priceInfo.price;
                            }
                            // trigger event to send GTAG event
                            ep(window).trigger('product:ctaGSS', {product: product});
                        }
                    });
                });
            });
        },

        /*
         Method to send the gtag event *view_item* with the correct data of products
         belonging to the current rendered view.
         */
        handleSingleProductViews = function(productId) {
            productId && ep.ajax({
                url: "#Shop.RESTAPIURL[0]/products/" + productId
            }).done(function(product, statusText, jqXHR) {
                // if request was successful -> trigger product view event and hand over the necessary data
                // for the product view
                if (product && product.productId) {
                    // map price property to correct place for Google gtag
                    if (product.priceInfo) {
                        // product.price = {...product.priceInfo.price};
                        product.price = product.priceInfo.price;
                    }
                    // trigger event to send GTAG event
                    ep(window).trigger('product:viewGSS', {product: product});
                }
            });
        },

        /*
         Method to send the gtag event *view_item_list* with the correct data of products
         belonging to the current rendered view.
         */
        handleProductListViews = function() {
            var productLists = {},
                productDetailViews = [],
                // collect data for google tag manager
                dataContainer = {},
                listKeys;

            // loop over all product call to actions
            productViews.length && productViews.each(function(index, elem) {
                var $this = $(this),
                    productData = $this.data('productguid'),
                    productId;

                productData = productData ? productData : $this.closest('*[data-productGUID]').data('productguid');

                if (productData) {
                    productId = productData.id;

                    if (productData.list) {
                        if (productLists[productData.list] === undefined) productLists[productData.list] = [];

                        // avoid id duplicates
                        if (productId && !productLists[productData.list].includes(productId)) {
                            productLists[productData.list].push(productId);
                        }

                        if (dataContainer[productData.list] === undefined) {
                            dataContainer[productData.list] = {};
                            dataContainer[productData.list].list = productData.list;
                        }

                    } else {
                        // avoid id duplicates
                        if (productId && !productDetailViews.includes(productId)) {
                            productDetailViews.push(productId);
                        }
                    }
                }
            });

            listKeys = Object.keys(productLists);

            // handle product detail views
            if (productDetailViews.length > 0) {
                productDetailViews.forEach(function(id) {
                    handleSingleProductViews(id);
                });
            }

            // handle product lists
            if (listKeys.length > 0) {

                // loop over lists
                listKeys.forEach(function(key) {
                    var productsReady = [];

                    /* BEGIN - variant 1: request more products at the same time page by page via REST API
                     *                    (REST API allows only max. 12 at the same time)
                     */
                    var productsPerRequest = 12,
                        productsLen = productLists[key].length,
                        productsToRequest = productLists[key].splice(0, productsPerRequest);

                    while (productsToRequest.length) {
                        // request REST-API via ajax to get product data for an array of products (max. productsPerRequest)
                        ep.ajax({
                            url: "#Shop.RESTAPIURL[0]/products/?id=" + productsToRequest.join("&id=") + "&allowAllHtml=true"
                        })
                        .done(function(response, statusText, jqXHR) {
                            var products = response.items;

                            // if request was successful -> trigger product view event and hand over the necessary data
                            // for the product view
                            if (products && products.length) {
                                // map price property to correct place for Google gtag
                                products.forEach(function(product) {
                                    if (product.priceInfo) {
                                        // product.price = {...product.priceInfo.price};
                                        product.price = product.priceInfo.price;
                                    }
                                });

                                // add products to products that should be requested by GTM
                                productsReady = productsReady.concat(products);

                                if (productsReady.length >= productsLen) {
                                    // trigger event to send GTAG event
                                    ep(window).trigger('product:viewlistGSS', {products: productsReady, data: dataContainer[key]});
                                }
                            }
                        });

                        // get next products
                        productsToRequest = productLists[key].splice(0, productsPerRequest);
                    }
                    /* END - variant 1: request more products at the same time page by page via REST API */

                    /* BEGIN: variant 2: iterate over all single product IDs and request product data for each product */
                    // $.each(productLists[key], function() {
                    //     var id = this;

                    //     ep.ajax({
                    //         url: "#Shop.RESTAPIURL[0]/products/" + id
                    //     }).done(function(product, statusText, jqXHR) {
                    //         // if request was successful -> trigger product view event and hand over the necessary data
                    //         // for the product view
                    //         if (product && product.productId) {
                    //             // map price property to correct place for Google gtag
                    //             if (product.priceInfo) {
                    //                 product.price = {...product.priceInfo.price};
                    //             }

                    //             productsReady = productsReady.concat(product);

                    //             if (productLists[key].length === productsReady.length) {
                    //                 ep(window).trigger('product:viewlistGSS', {products: productsReady, data: dataContainer[key]});
                    //             }
                    //         }
                    //     });
                    // });
                    /* END: variant 2: iterate over all single product IDs and request product data for each product */

                });
            }
        },

        /*
         Method to send the gtag event *add_to_cart* with the correct data of a single product
         that was added to the basket by *click* (cta).
         */
        handleAddToBasketCTAs = function() {
            var productIDs = [];

            // loop over all add to basket call to actions
            addToBasketCTAs.each(function(index, elem) {
                var $form = $(this),
                    addToBasketButton = $form.find('[name="AddToBasket"]').filter(function(index, button) {
                        return !/^customizerButton_/.test($(button).attr('id'));
                    }),
                    quantity = $.i18n.parseNumber($form.find('*[name="Quantity"]').val()),
                    productData = $form.data('productguid'),
                    productId = productData ? productData.id : undefined;

                quantity = quantity ? quantity : 1;

                productId && addToBasketButton.on('click', function(evt) {
                    evt.preventDefault();

                    var $cta = $(this),
                        productData = $form.data('productguid'),
                        productId;

                    productData = productData ? productData : $cta.closest('*[data-productGUID]').data('productguid');
                    productId = productData.id;

                    // request REST-API via ajax to get product data
                    productId && ep.ajax({
                        url: "#Shop.RESTAPIURL[0]/products/" + productId
                    })
                        .done(function(product, statusText, jqXHR) {
                            // if request was successful -> trigger product view event and hand over the necessary data
                            // for the product view
                            if (product && product.productId) {
                                // map price property to correct place for Google gtag
                                if (product.priceInfo) {
                                    // product.price = {...product.priceInfo.price};
                                    product.price = product.priceInfo.price;
                                }
                                // trigger event to send GTAG event
                                ep(window).trigger('cart:addGSS', {product: product, quantity: quantity});
                            }
                        })
                        .always(function() {
                            $form.trigger('submit');
                        });
                });
            });
        },


        /*
         Method to send the gtag event *page_view* with the correct data of the cart
         in the current rendered view.
         */
        handleBasketViews = function() {
            var lineItemGUIDs = [],
                basketViewLists = {},
                // collect data for google tag manager
                dataContainer = {};

            // loop over all baskets views
            basketViews && basketViews.each(function(index, elem) {
                var $form = $(this),
                    basketData = $form.data('basketguid'),
                    productLineItems = $form.find('*[data-lineitemGUID]'),
                    basketId;
                    // , lineItemGUID = $form.data('lineitemguid');

                basketData = basketData ? basketData : $this.closest('*[data-basketGUID]').data('basketguid');

                if (basketData) {
                    // loop over all line items
                    productLineItems.each(function(index, elem) {
                        var $lineItem = $(this),
                            lineItemData = $lineItem.data('lineitemguid'),
                            lineItemGUID;

                        lineItemData = lineItemData ? lineItemData : $lineItem.closest('*[data-lineitemGUID]').data('lineitemguid');
                        lineItemGUID = lineItemData.id;

                        // avoid id duplicates
                        if (lineItemGUID && !lineItemGUIDs.includes(lineItemGUID)) {
                            lineItemGUIDs.push(lineItemGUID);
                        }
                    });


                    // send ajax request to get the necessary line items belonging to the
                    // current cart
                    // qp.ajax({
                    lineItemGUIDs.length && ep.ajax({
                        type: "post",
                        dataType: "json",
                        data: {
                            ViewAction: "JSONViewResponse",
                            ChangeAction: "JSONGetDataForGSS",
                            IDs: lineItemGUIDs,
                            type: "cart"
                        }
                    }).done(function(jsonData, statusText, jqXHR) {
                        // if request was successful -> trigger cart view event and hand over the necessary data
                        // for the gtag call
                        if (jsonData.success){
                            // trigger event to send GTAG event
                            ep(window).trigger('cart:viewGSS', {cart: jsonData, data: basketData.list ? {list: basketData.list} : {}});
                        }
                    });
                }

            });
        },


        /*
         Method to send the gtag event *page_view* with the correct data of the completed
         order in the current rendered view.
         */
        handleOrderCompletedViews = function() {
            var orderGUIDs = [];

            // loop over all baskets views
            orderCompletedViews.each(function(index, elem) {
                var $order = $(this),
                    orderData = $order.data('orderguid'),
                    orderGUID;

                orderData = orderData ? orderData : $order.closest('*[data-orderGUID]').data('orderguid');
                orderGUID = orderData.id;

                // avoid id duplicates
                if (orderGUID && !orderGUIDs.includes(orderGUID)) {
                    orderGUIDs.push(orderGUID);
                }

                // send ajax request to get the necessary line items belonging to the
                // current cart
                orderGUIDs.length && ep.ajax({
                    type: "post",
                    dataType: "json",
                    data: {
                        ViewAction: "JSONViewResponse",
                        ChangeAction: "JSONGetDataForGSS",
                        IDs: orderGUIDs,
                        type: "order"
                    }
                }).done(function(jsonData, statusText, jqXHR) {
                    // if request was successful -> trigger cart view event and hand over the necessary data
                    // for the gtag call
                    if (jsonData.success){
                        // trigger event to send GTAG event
                        ep(window).trigger('order:completedGSS', jsonData);
                    }
                });
            });
        },

        init = function() {
            initializeNodes();

            // can be used if *clicks* to product should also be tracked by gtag
            // handleProductCTAs();
            handleProductListViews();
            handleAddToBasketCTAs();
            handleBasketViews();
            handleOrderCompletedViews();
        };

    // initialize for non embedded storefronts (previews)
    (ep(this.parent.document).find('iframe.EmbeddedStorefront').length === 0) && init();


    // define publish hook (use with require)
    define('$pub!__registerEvents__', [], function() {
        // returns the ref units object
        return {
            init: init
        };
    });
});
</script>
#ENDIF