Skip to content

Jquery code doesn’t work when deployed but runs fine in the browser console in Magento cart page

We’re trying to just display the text in the code below if the page is the cart page so that visitors are aware that they can add a gift message to their order. Code works fine by displaying the text in the page when it is run in the Chrome browser console. But when I deploy the code on Magento server, it does nothing. Can you please help identify the cause of the issue?

if (document.location.href.indexOf("/checkout/cart") > -1){
    $(".gift-item-block>.title,.action-gift").css("color","#00008B").after('<div style="display:inline-block;color:#00008B;size:8px;width:600px;margin-top:-20px">We cannot gift wrap this these items.  We will mail a gift card the day of your order, to arrive before or on the day your gift arrives. Click &quot;Gift options&quot; to enter your message.</div>');
}

Entire JS file:

define([
    'jquery',
    'Magento_Ui/js/modal/modal',
    'domReady!'
], function($) {
   // console.log("Custom js code start");
   // console.log("H1 Text=" + $("h1").text());
    var docloch = document.location.href,
        margins="";  // pre set-up for home page

    // put the little truck and FREE shipping at the top of each page except checkout and footer-listed
    if (docloch.indexOf(".html")>-1 || docloch.length < 38 || (typeof(pmm_price) === "undefined" && docloch.match(///g).length < 4) ){
        typeof(pmm_price) === "undefined" ? margins="5px 0 0 0" : margins = "-10px 0 15px 0" ;  // non-product pages : product pages
        if (docloch == "https://www.perfectmakeupmirrors.com/"){ // home page
            margins = "0 0 25px 0" ; 
            $(".page-title").hide(); // hides "Perfect Makeup Mirrors Home Page" across the top.
        }

        $('.page-header').after('<div id="free_shipping_line" style="font-weight:bold;font-size:large;cursor:pointer;text-align:center;margin:'+margins+'"><span style="color:#0000ff;font-size:1.1em" >FREE SHIPPING over $49</span><span style="font-size:.8em"> + No sales tax except CA and WA.</span><div id="little_truck_dialog2" style="display:none;padding:20px 7px 20px 7px;background-color:#ddd;color:#000;border:4px #ff0000 solid;text-align:center">Free Ground Shipping to the 48 contiguous United States and the District of Columbia.</div><div id="price_match_dialog" style="display:none;position:relative;top:-50%;z-index:5000;padding-left:40px;background-color:#0000ff;color:#fff;border:4px #ff0000 solid">We&acute;ll beat any verifiable price+shipping,<br>for the identical product price+shipping,<br />at any other website. &nbsp;Sale prices excluded.<div style="float:left;margin:20px 0 0 10px;font-variant:small-caps"><strong>Esc to Close</sctrong></div></div>');

        var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                modalClass : "free_popup",
                title: "FREE Shipping",
                clickableOverlay: true,
                buttons:[{
                    text: $.mage.__('Close'),
                    click: function(){
                        this.closeModal();
                    }
                }]
            };
        $('#little_truck_dialog2').modal(options);

        $("#little_truck,.altattr,#free_shipping_line,#pmm_shipping").click(function(){
            $(".free_popup").css({"width":"500px","position":"absolute","left":"40%","top":"25%"});
            $("#little_truck_dialog2").modal("openModal");

        });

    } // end of free shipping modal ------------------------------------------------------

    // Make a call to the function defined in allpages.js if it exists
    if (typeof runPmmCustomAllPagesJs !== "undefined") {
        runPmmCustomAllPagesJs($);
    }
    
     // ------------------------strip the initial P- from SKUs entered into the search box
    $("#search").change(function () {
        thisVal = $(this).val().toUpperCase();
        if (thisVal.indexOf("P-") == 0) {
            $("#search").val(thisVal.substr(2));
        }
    });
    
    // ------------------------- shrinks huge font in category page and product page titles
    $(".base").css("font-size",".8em");
    
    //  ------------------------  adds emphasis and clarity to top navigation menu sub-categoreis
    $(".navpro-dropdown-inner").css("border","1px solid #000");
    $(".navpro-dropdown-inner span").css("color","#000");
    
    if (document.location.href.indexOf("/mirror") > -1) {
        $(".page-footer").before('<div class="yotpo yotpo-reviews-carousel" data-header-customisation-enabled="1" data-header-customisation-color="#0000AA" data-header-customisation-font-size="18" data-header-customisation-text="Our customers speak...." data-header-customisation-alignment="left" data-background-color="transparent" data-mode="top_rated" data-type="both" data-count="15" data-show-bottomline="1" data-autoplay-enabled="1" data-autoplay-speed="3000" data-show-navigation="1">&nbsp;</div>');
    }
    
    //  ------------------------ emphasizes and explains the gift options on the cart page
    if (document.location.href.indexOf("/checkout/cart") > -1){
        $(".gift-item-block>.title,.action-gift").css("color","#00008B").after('<div style="display:inline-block;color:#00008B;size:8px;width:600px;margin-top:-20px">We cannot gift wrap this these items.  We will mail a gift card the day of your order, to arrive before or on the day your gift arrives. Click &quot;Gift options&quot; to enter your message.</div>');
    }
    
}); // end of $ function