0

A function is created to be called when a change event occurs on a span tag as seen in the code snippet below.

$(".price-box").on("change", ".normal-price .price-wrapper span.price", function() {
  console.log('Hello, I am happy to be called');  
  // Get the value of the span element
  var price = $(".price-box .normal-price .price-wrapper span.price").html();

  // Clean and Convert the value to cents
  var priceCents = parseInt(parseFloat(price.replace(/[^\d.]/g,'')) * 100);

  // If value is different from existing Klarna product placement value, update it.
  // and then call Klarna with refresh-event to refresh the placement.
  var oldPurchaseAmt = $(".product-add-form klarna-placement").attr("data-purchase-amount");
  if (priceCents != oldPurchaseAmt) {
    $(".product-add-form klarna-placement").attr("data-purchase-amount", priceCents);

    // Trigger event to refresh
    window.KlarnaOnsiteService = window.KlarnaOnsiteService || [];
    window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' });
  }
});

Below is the complete JS file including the above code snippet.

function get_pmm_shipping_text() {
    var v_text = "",
    exceptions="MB TB OM",
    notFree="BB,LC,TB,JA,MD",
    ship_info="",cost="",free="",p=0,
    little_truck= '<img src="https://images.perfectshoppers.com/4b15739013799.png" class="altattr"  alt="Free Shipping">';
    // NOTE:  pmm_vendor_code, pmm_sku and  pmm_price are pre-existing variables
    console.log("Vendor Code=" + pmm_vendor_code + ", SKU=" + pmm_sku + "Price=" + pmm_price);

    notFree.indexOf(pmm_vendor_code)>-1 ? free="" : free = "FREE,"; // if prefix not in "notFree" variable, shipping is FREE regardless of price.
    pmm_price > 49 ? free="FREE," : free="" ; // everything over $49 ships free.
    // thresh>"" && netprice<thresh ? free="" : ''; // below shipping threshold nullifies free shipping  (thresh and netprice are not defined)
    pmm_vendor_code == "E2" ? free = "FREE," : "";  // forces FREE for E2 (Electric Mirror alternate vendor code)

    switch(pmm_vendor_code){  // exceptions items to vendor Free or Not-Free
        case "BB" : pmm_sku == "BB01" ? free = "FREE," : '' ;
        case "JA" : pmm_price > "32" ? free = "FREE," : '';
        case "MD" : pmm_price > "32" ? free = "FREE," : '';
        case "LC" : pmm_price > "57" ? free = "FREE," : '';
    }

    // REMEMBER free (lower case) is a variable
    cost = "In stock! &nbsp;Shipped "+free+" usually on the ";
    switch (pmm_vendor_code){
        case "AB" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> " ; break; // Amba
        case "AG" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> " ; break; // alkaglam
        case "AY" : ship_info=cost+"2<sup>nd</sup> to 4<sup>th</sup> "; break; // ayurderm
        case "BB" : ship_info=cost+"next " ; break; // NOT free -butterbabes
        case "CL" : ship_info=cost+"2<sup>nd</sup> to 4<sup>th</sup> " ; break; // clear mirror
        case "CB" : ship_info=cost+"same or next "; break; // cannaBon
        case "CP" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> " ; break;  // contrapac
        case "CY" : ship_info=cost+"same or next " ; break;  // cyberderm
        case "DB" : ship_info=cost+"same or next " ; break; // Dear by Renee
        case "DN" : ship_info=cost+"next " ; break;  // dia naturals
        case "E2" : ship_info=cost+"6<sup>th</sup> to 8<sup>th</sup> " ; break; // electric mirror backlit mirrors
        case "E3" : ship_info=cost+"3<sup>rd</sup> to 6<sup>th</sup> " ; break; // electric mirror Cordova brand
        case "EM" : ship_info=cost+"2<sup>nd</sup> to 4<sup>th</sup> " ; break; // electric mirror
        case "FS" : ship_info=cost+"2<sup>nd</sup> " ; break; // foster and lake
        case "GH" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> " ; break; // stan pardente ghd
        case "HR" : ship_info=cost+"same or next "; break; // hair restoration
        case "JA" : ship_info=cost+"same or next " ; break;  // JAVA skin care
        case "JD" : ship_info=cost+"2<sup>nd</sup> ";break; // Jerdon
        case "KY" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> "; break;  // kimball & young / aptations
        case "LC" : ship_info=cost+"same or next "; break;  // l.a. christine
        case "LU" : ship_info=cost+"same or next "; break;  // luce skincare
        case "LW" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> " ; break; // stemulation
        case "MD" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> "; break; // MDSolarSciences
        case "MH" : ship_info=cost+"2<sup>nd</sup> to 3<sup>rd</sup> " ; break; // more hair naturally
        case "MY" : ship_info=cost+"2<sup>nd</sup> to 3<sup>rd</sup> " ; break; // marcus york
        case "RE" : ship_info=cost+"same or next "; break; // replete skincare
        case "NO" : ship_info=cost+"same or next "; break; // gentleman's foundry
        case "SK" : ship_info=cost+"next " ; break; // skin triks
        case "SQ" : ship_info=cost+"same or next " ; break; // skintifique
        case "SY" : ship_info=cost+"2<sup>nd</sup> or 3<sup>rd</sup>" ; break; // shunly
        case "TB" : ship_info=cost+"2<sup>nd</sup> or 3<sup>rd</sup>" ; break; // to bee products
        case "TH" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> " ; break; // thalgo
        case "UC" : ship_info=cost+"2<sup>nd</sup> to 4<sup>th</sup>";break; // upper canada (danielle creations)
        case "VT" : ship_info=cost+"next " ; break;  // vintage traditions
        case "xx" : ship_info=cost+"same or next"; break; // pmm inventory product
    }
    console.log("Ship Info=" + ship_info);

    if (exceptions.indexOf(pmm_vendor_code)==-1){ // if vendor is not in the exceptions string  use the cases above
            if (free=="FREE," || pmm_vendor_code == "E2"){ // display the little truck // E2 to force it for E2 - doesn't work otherwise
                v_text = little_truck + ' &nbsp;<strong>' + ship_info + ' business day.</strong>';
            } else { // no little truck
                v_text = '<strong> ' + ship_info +' business day.</strong>';
            }
    } else { // following vendors are in the exceptions string
        switch (pmm_vendor_code){
            case "MB" : v_text = '<span style="color:#A300FC;font-size:1.1em;font-weight:bold" >'+little_truck+' &nbsp;Shipped FREE, directly to you via <span style="color:#FF0000">FedEx International Express</span> in about 14-21 days, directly from Paris, France.</span>'; break; // miroir brot
            case "OM" : v_text = '<span style="font-size:1.1em;font-weight:bold">'+little_truck+' 8 oz. size ships FREE.<br />Also shipped FREE: &nbsp;2 oz. size purchased together with 8 oz. size - or - 3 or more 2 oz. size.<br /><br />Shipment is from Canada after 1 business day. &nbsp;Time in transit to locations in the continental US is 3 to 5 business days.</span>'; break;  // oil me north
            case "TB" : v_text = '<span style="font-size:1.1em;font-weight:bold">Ships FREE when purchased together with ToBee 3-Pack</span>'; break;  // to bee products
        }
    }
    console.log("V Text=" + v_text);
    return v_text;
} // end of get_pmm_shipping_text()

// ---------------------------------  miroir brot vacation -------------------------------------------------------- 

    /*if(docloch.indexOf("miroir-brot")>-1){
            var brot_start = new Date(2019,06,28),
                brot_end = new Date(2019,07,30);
            if (today_date => brot_start && today_date <= brot_end){
                $(".product-name").after('<div id="brot_vacation" style="text-align: left;font-size: large; color: #9900ff;">Miroir Brot will be CLOSED for summer vacation from August 5th through August 30th.<br /><br /><strong>Order by <span style="color: #ff0000;">Thursday, July 25th</span> for shipment before vacation closing.</strong><br /><br />Orders placed after July 25th will be shipped after August 30th.</div>');
            }
    } */

// Normally add the bind to a parent which will be stable.
$(".price-box").on("change", ".normal-price .price-wrapper span.price", function() {
  console.log('Hello, I am happy to be called');  
  // Get the value of the span element
  var price = $(".price-box .normal-price .price-wrapper span.price").html();

  // Clean and Convert the value to cents
  var priceCents = parseInt(parseFloat(price.replace(/[^\d.]/g,'')) * 100);

  // If value is different from existing Klarna product placement value, update it.
  // and then call Klarna with refresh-event to refresh the placement.
  var oldPurchaseAmt = $(".product-add-form klarna-placement").attr("data-purchase-amount");
  if (priceCents != oldPurchaseAmt) {
    $(".product-add-form klarna-placement").attr("data-purchase-amount", priceCents);

    // Trigger event to refresh
    window.KlarnaOnsiteService = window.KlarnaOnsiteService || [];
    window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' });
  }
});

define([
    'jquery',
    'domReady!'
], function($) {
    var docloch=document.location.href,new_title="";

    // Commented out as the Tab is not opening by default.
    // $("#tab-label-product.info.description").click();
    setTimeout(function() {
        $("#pmm_shipping").html('<br><div style="margin:-40px 0 15px">'+get_pmm_shipping_text()+'</div>');
    }, 750); // end of setTimeout

    // make the word CLOSEOUT red on product pages
    if ($("h1").text().indexOf("CLOSEOUT!")>-1 || $("h1").text().indexOf("OPEN BOX!")>-1){
        var newT= $("h1").html();
        newT = newT.replace("CLOSEOUT!",'<span style="color:#FF0000">CLOSEOUT!</span>');
        newT = newT.replace("OPEN BOX!",'<span style="color:#FF0000">OPEN BOX!</span>');
        $("h1").html(newT);
    }   


}); // end of $ function

Could you please point out the mistake being present which triggers Uncaught TypeError: $ is not a functionThank you.

  • I think version problem :- $ instead jQuery write – Mohit Patel May 18 at 2:38
  • okay, will check it out. – CodeForGood May 18 at 2:57
0

try this

define([
    'jquery',
    'domReady!'
], function($) {
// Normally add the bind to a parent which will be stable.
$(".price-box").on("change", ".normal-price .price-wrapper span.price", function() {
  console.log('Hello, I am happy to be called');  
  // Get the value of the span element
  var price = $(".price-box .normal-price .price-wrapper span.price").html();

  // Clean and Convert the value to cents
  var priceCents = parseInt(parseFloat(price.replace(/[^\d.]/g,'')) * 100);

  // If value is different from existing Klarna product placement value, update it.
  // and then call Klarna with refresh-event to refresh the placement.
  var oldPurchaseAmt = $(".product-add-form klarna-placement").attr("data-purchase-amount");
  if (priceCents != oldPurchaseAmt) {
    $(".product-add-form klarna-placement").attr("data-purchase-amount", priceCents);

    // Trigger event to refresh
    window.KlarnaOnsiteService = window.KlarnaOnsiteService || [];
    window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' });
  }
});
});

Use imperative notation in the PHTML template to include raw JavaScript code on the pages to execute specified business logic. This method uses the tag without the type="text/x-magento-init" attribute as shown in the following example:

<script>
require([
    'jquery'
], function ($) {
    $(function () { 

    // Write code here

    });
});
</script>

In a similar way, you can initialize any JS component that a returns callback function accepting a config object and element (a DOM node).

For example:

define ([
    'jquery'
], function ($) {
    $(function () { 

     // Write code here

    });
});
| improve this answer | |
  • Thanks, I already fixed it by replacing the dollar symbol with Jquery. I hope yours is also a valid solution. – CodeForGood May 18 at 13:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.