Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

New Member
4 0 0

Hi all, I'm new to Shopify coding. I've been trying to handle this JS error for a while but couldn't solve it.

Here're the error messages:

jquery.min.js:2 jQuery.Deferred exception: Cannot read property 'toLowerCase' of undefined TypeError: Cannot read property 'toLowerCase' of undefined
at HTMLDocument.<anonymous> *this code is called via combined.js in theme.liquid after jQuery source code.
at e (https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js:2:29453)
at t (https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js:2:29755) undefined
k.Deferred.exceptionHook @ jquery.min.js:2
t @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
B @ jquery.min.js:2

 

In productpage, it keeps showing warning "Each dictionary in the list "icons" should contain a non-empty UTF8 string field "type"." I'm not sure where should I look into....

 

Below are the code lines where error messages happened: 

 
//when load show related image only
var altvl = $(".HorizontalList__Item:first-child").children("input").val().toLowerCase();

& if ((e = a.apply(n, r)) === o.promise())

function l(i, o, a, s) {
                        return function() {
                            var n = this
                              , r = arguments
                              , e = function() {
                                var e, t;
                                if (!(i < u)) {
                                    if ((e = a.apply(n, r)) === o.promise())  // ERROR 'at e'
                                        throw new TypeError("Thenable self-resolution");
                                    t = e && ("object" == typeof e || "function" == typeof e) && e.then,
                                    m(t) ? s ? t.call(e, l(u, o, M, s), l(u, o, I, s)) : (u++,
                                    t.call(e, l(u, o, M, s), l(u, o, I, s), l(u, o, M, o.notifyWith))) : (a !== M && (n = void 0,
                                    r = [e]),
                                    (s || o.resolveWith)(n, r))
                                }
                            }

 

I would very much appreciate your advice and help or even just share the similar problem you encounter, thanks in advance! If I need to provide more details about the error, please leave a comment and I'll do it ASAP.

0 Likes
Shopify Partner
827 125 168

Check first what value get in this by console.log: 

$(".HorizontalList__Item:first-child").children("input").val()

May be you can not get any value in this that's why this error occurring..  

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
New Member
4 0 0

Hi Jasoliya, thanks for your reply.

I've tried console.log() with it, but couldn't be able to get anything..

Even tried alert() but it seems that part of the code isn't really functional.

In the end, I delete that part of the code and it seems doesn't really cause any problem....

PS. I wasn't the one who initiated our site so I guess there are some scripts just not used anymore.

Thanks anyway!

0 Likes
Shopify Partner
827 125 168

That mean Js is wrong for this line you have to solve this by cheeking exact selector of HorizontalList__Item.

Let me know if you need help. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
New Member
4 0 0

Hi Jasoliya, 

Thanks again for your reply.

I just checked the class of  .HorizontalList__Item and it is in the theme.scss.liquid file as below.

.HorizontalList__Item {
  display: inline-block;
  margin: 6px 8px 6px 8px;
}

I wasn't able to find any other trace in other template or section code....or how it's assigned to objects.

Is there anyway of finding out where it's assigned in which code?  

0 Likes
Shopify Partner
827 125 168

First of all let me know whats an issue now if you have remove HorizontalList__Item from Js then i don't think you getting 'toLowerCase' of undefined error, if you want to keep this then you have to find this selector in code so you can get exact value from this selector after that you dont get this error.

send me store ulr i will check, and also let me know for what you have used this.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
New Member
4 0 0

@Jasoliya wrote:

First of all let me know whats an issue now if you have remove HorizontalList__Item from Js then i don't think you getting 'toLowerCase' of undefined error, if you want to keep this then you have to find this selector in code so you can get exact value from this selector after that you dont get this error.

send me store ulr i will check, and also let me know for what you have used this.


- if I remove this part of JS code, indeed I won't get error message.

- I found the code below about .HorizontalList__Item in theme.js . 

- Here's the url https://www.allocacocshop.com/

I'm not the theme developer, so I'm not 100% sure what these codes are for....From my observation,   ".HorizontalList__Item" is only used when the menu is horizontal, but we're using side menu now.


Hope these would help clarify the problem.

 

 key: 'onBlockSelect',
      value: function onBlockSelect(event) {
        var _this43 = this;

        var listItem = event.target.closest('.HorizontalList__Item');

        fastdom.mutate(function () {
          event.target.setAttribute('aria-hidden', 'false');

          if (listItem) {
            listItem.classList.add('is-expanded');

            __WEBPACK_IMPORTED_MODULE_0__helper_Dom__["default"].getSiblings(listItem, '.is-expanded').forEach(function (item) {
              item.classList.remove('is-expanded');
            });
          }

          _this43.element.classList.remove('Header--transparent'); // This is needed to make sure everything is visible
        });
      }
    }, {
      key: 'onBlockDeselect',
      value: function onBlockDeselect(event) {
        var listItem = event.target.closest('.HorizontalList__Item');

        fastdom.mutate(function () {
          event.target.setAttribute('aria-hidden', 'true');

          if (listItem) {
            listItem.classList.remove('is-expanded');
          }
        });

        this._checkTransparentHeader();
      }
     

 

0 Likes
Highlighted
Shopify Partner
827 125 168

I have checked code and see that bellow code is used for display variants image on page load but this selector can not find in variants HorizontalList__Item

$(".HorizontalList__Item:first-child").children("input").val().toLowerCase();

This is custom code you have to reach your developer who's made this.

As i can see this selector can not find on page that's why it occur Js error. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes