0

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
5
  • Please provide more details about where are you try to insert this fragment of code. I guess expected content didn't rendered when you try to run this code. I think it's better to use mixin (example Magento_GiftMessage/js/gift-options) or overwrite related template in your theme - vendor/magento/module-gift-message/view/frontend/web/template/gift-message.html Jun 29, 2022 at 18:47
  • I've this code in a custom js file called argento-custom.js in app/design/...path. I just need to fix the jQuery issue. Jun 29, 2022 at 19:02
  • When you run code in the console it is after the page is loaded and the dom object exists. So you may need to wrap that code in a document ready or page load function (assuming the element with class name action-gift is not loaded by ajax) Jun 29, 2022 at 20:08
  • To check if my above assumption is correct you could try if($(".gift-item-block>.title,.action-gift").length){alert("The element you're testing is present.");} Jun 29, 2022 at 20:12
  • MagePal, I believe the function is being called before the page is fully loaded. I'm pasting the entire JS file for you to have a look and suggest if I still need to add document.ready(). If I need to, please show me where to add it. Jun 30, 2022 at 2:28

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.