https://www.touchofclass.com/Javascript/page-cart.js?v=47

1$(document).ready(function() {
2});
3
4window.onload = (event) => {
5    const removeButton = document.querySelectorAll('.btn-remove');
6    removeButton.forEach(button => {
7        button.addEventListener('click', ga4RemoveFromCart);
8    });
9};
10
11function ga4RemoveFromCart(event) {
12    event.preventDefault();
13    const parentElement = event.currentTarget.closest('.js-cartProduct');
14    const productTotal = parseFloat(parentElement.querySelector('#product-total').value);
15    
16    const removedProduct = [{
17        'item_id': parentElement.querySelector('#product-number').value,
18        'item_variant': parentElement.querySelector('#product-sku').value,
19        'item_variant_normalized': parentElement.querySelector('#product-sku-normalized').value,
20        'item_name': parentElement.querySelector('#product-name').value,
21        'item_brand': 'touch of class',
22        'price': parseFloat(parentElement.querySelector('#product-price').value.replace("$", "")),
23        'quantity': parseInt(parentElement.querySelector('.input-number').value)
24    }]
25    
26    if(typeof dataLayer === 'object') {
27        window.dataLayer.push({ ecommerce: null });
28        dataLayer.push({
29            'event': 'remove_from_cart',
30            'ecommerce': {
31                'currency': 'USD',
32                'value': productTotal,
33                'items': [...removedProduct]
34            },
35            'code': ga4GetKeyCode()
36        });
37    }
38    
39    window.location = event.currentTarget.href;
40}
41
42$("#estimator-shipping").on("click", function() {
43
44    var country_ship = $("#Country").val();
45    var ship_zip = $("#estimator-zip").val();
46    var state_ship = $("#State_SHIP").val();
47
48    if (ship_zip == "Zip/Postal Code")
49        ship_zip = "";
50
51    if (state_ship == "Select State")
52        state_ship = "";
53
54    if (country_ship == "US")
55    {
56        if (state_ship == "" || ship_zip == "")
57        {
58            alert("Please specify a Country, State, and Zip to Estimate Shipping Costs.");
59            return false;
60        }
61    }
62    
63    //If Canadian providence, thne country = Canada
64    if ((state_ship == "AB") || (state_ship == "BC") || (state_ship == "MB") || (state_ship == "NB") || (state_ship == "NF") || (state_ship == "NS") || (state_ship == "ON") || (state_ship == "PE") || (state_ship == "QC") || (state_ship == "SK") || (state_ship == "NT") || (state_ship == "YT") || (state_ship == "NU")) {
65        country_ship = "CA";
66    }
67
68    if (state_ship != " - Select - " || ship_method != "") {
69        $(".cart-total").addClass("loading");
70        DmiAjaxFetchWithCallBack('CartTotalContent', 'DmiAjax.aspx', 'request=CartTotalContent&state_ship=' + state_ship + '&country_ship=' + country_ship + '&zip_code=' + ship_zip + '&extra=', rnd(), function() {
71           DmiAjaxFetchWithCallBack('CartTotalContent', 'DmiAjax.aspx', 'request=CartTotalContent&state_ship=' + state_ship + '&country_ship=' + country_ship + '&zip_code=' + ship_zip + '&extra=', rnd(), function() {});
72        });
73    }
74});
75
76function CalculateShippingAndTotalsClick() {
77    var state_bill = document.getElementsByName("State")[0].value;
78    var country_bill = document.getElementsByName("Country")[0].value;
79    var zip_bill = document.getElementsByName("PostalCode")[0].value;
80
81    var state_ship = document.getElementsByName("State_SHIP")[0].value;
82    var country_ship = document.getElementsByName("Country_SHIP")[0].value;
83    var zip_ship = document.getElementsByName("PostalCode_SHIP")[0].value;
84
85    if ($("#same-as-billing").is(':checked')) {
86        state_ship = state_bill;
87        country_ship = country_bill;
88        zip_ship = zip_bill;
89    }
90
91    var ship_method = "";
92
93    if (country_ship != "" && country_ship != " - Select - " && ((country_ship == "US" && state_ship != " - Select - " && state_ship != "") || country_ship != "US")) {
94        if (document.getElementById("shipping_method") != null) {
95            var radios = document.getElementsByName('shipping_method');
96
97            for (var i = 0, length = radios.length; i < length; i++) {
98                if (radios[i].checked) {
99                    ship_method = radios[i].value;
100                    break;
101                }
102            }
103        } else {
104            ship_method = ""; // won't get set on call, but will use existing or default
105        }
106    }
107
108    $("#CheckoutCartTotalContent").html("<div class=\"text-center\"><i class=\"fa fa-refresh fa-spin fa-2x\"></i></div>");
109    $("#checkoutshippingmethods #checkout-shipping").html("<div class=\"text-center\"><i class=\"fa fa-refresh fa-spin fa-2x\"></i></div>");
110
111    DmiAjaxFetchWithCallBack('checkoutshippingmethods', 'DmiAjaxSecure.aspx', 'request=setcheckoutshippingmethods' + '&shipping_method=' + ship_method + debugFlag() + '&extra=', rnd(), function() {
112        DmiAjaxFetchWithCallBack('CheckoutCartTotalContent', 'DmiAjaxSecure.aspx', 'request=checkoutgrandtotals' + '&state_ship=' + state_ship + '&country_ship=' + country_ship + '&zip_ship=' + zip_ship + '&shipping_method=' + ship_method + debugFlag() + '&extra=', rnd());
113    });

114}
115
116$("#Country").on("change", function() {
117    var estimator_country = $(this).val();
118    if (estimator_country != "US") {
119        $("#estimator-state").slideUp("fast");
120        $("#State_SHIP").val("Select State");
121        $("#estimator-zip").slideUp("fast");
122        $("#estimator-zip").val("Zip/Postal Code");
123    } else {
124        $("#estimator-state").slideDown("fast");
125        $("#estimator-zip").slideDown("fast");
126        $("#State_SHIP").val("Select State");
127        $("#estimator-zip").val("Zip/Postal Code");
128    }
129});
130
131function populateShippingMethods(recipientId) {
132    var recipient = 'Default';
133
134    var country_ship = $("#Country").val();
135    var ship_zip = $("#estimator-zip").val();
136    var state_ship = $("#State_SHIP").val();
137    //var state_ship = document.getElementsByName("State_SHIP")[0].value;
138    //var country_ship = document.getElementsByName("Country_SHIP")[0].value;
139    //var zip_ship = document.getElementsByName("PostalCode_SHIP")[0].value;
140    var length = "";
141
142    if (country_ship != "" && ((country_ship == "US" && state_ship != "Select State" && state_ship != "") || country_ship != "US") && $(".ship-choice input[type='radio']").length > 0 )  {
143        var ship_method;
144        if ($(".ship-choice input[type='radio']").length > 0) {
145            //shipping_method dropdown wont exist if page portion is being refreshed by AJAX call
146            //ship_method = document.getElementsByName("shipping_method")[0].value;
147        ship_method = $(".ship-choice input[type='radio']:checked").val()
148        } else {
149            ship_method = ""; // won't get set on call, but will use existing or default
150        }
151
152       $(".cart-total").addClass("loading");
153        DmiAjaxFetchWithCallBack('CartTotalContent', 'DmiAjax.aspx', 'request=CartTotalContent&state_ship=' + state_ship + '&country_ship=' + country_ship + '&zip_code=' + zip_ship + '&shipping_method=' + ship_method + '&extra=', rnd(), function() {
154           DmiAjaxFetchWithCallBack('CartTotalContent', 'DmiAjax.aspx', 'request=CartTotalContent&state_ship=' + state_ship + '&country_ship=' + country_ship + '&zip_code=' + zip_ship + '&shipping_method=' + ship_method + '&extra=', rnd(), function() {});
155        });
156    }
157}
158
159//Associate event with quantity buttons on cart page.
160PlusMinusButtons();
161
162function ga4ViewCart() {
163    // GA4 view_cart event
164    const products = document.querySelectorAll(".js-cartProduct");
165    let productData = [];
166    let cartValue = 0;
167
168    products.forEach(product => {
169        const productNumber = product.querySelector("#product-number").value;
170        const sku = product.querySelector("#product-sku").value;
171        const skuNormalized = product.querySelector("#product-sku-normalized").value;
172        const name = product.querySelector("#product-name").value;
173        const listName = product.querySelector("#product-listName").value;
174        const listId = product.querySelector("#product-listId").value;
175        const price = parseFloat(product.querySelector("#product-price").value.replace("$", ""));
176        const total = parseFloat(product.querySelector("#product-total").value);
177        const quantity = parseInt(product.querySelector(".input-number").value);
178        
179        if (productNumber && name && price && total && quantity) {
180            cartValue += total;
181            
182            productData.push({
183                name: name,
184                id: productNumber,
185                sku: sku,
186                skuNormalized: skuNormalized,
187                price: price,
188                total: total,
189                quantity: quantity,
190                listId: listId,
191                listName: listName
192            });
193        }
194    });
195
196    const items = productData.map(product => ({
197        'item_id': product.id,
198        'item_name': product.name,
199        'item_variant': product.sku,
200        'item_variant_normalized': product.skuNormalized,
201        'item_brand': 'touch of class',
202        'price': product.price,
203        'quantity': product.quantity,
204        'list_id': product.listId,
205        'list_name': product.listName
206    }));
207
208    dataLayer.push({
209        'event': 'view_cart',
210        'ecommerce': {
211            'value': cartValue,
212            'currency': 'USD',
213            'items': items
214        },
215        'code': ga4GetKeyCode()
216    });

217}
218
219$(window).on("load", function() {
220    ga4ViewCart();
221});