Estimate Shipping and Tax Form not works due to js error in collapsible.js [proposed fix] #8222

Dart18 · 2017-01-21T01:13:44Z

The shipping and estimate tax form don't display the form with country, city, postcode fields.
The form is in the dom, but hidden.
The Cannot read property 'it/checkout/cart/block-shipping' of null javascript error appears in the console.

Preconditions

Magento 2.1.3
Mysql 5.7.17
PHP 5.6.29-1+deb.sury.org~xenial+1 (cli)
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies
with Xdebug v2.5.0, Copyright (c) 2002-2016, by Derick Rethans
Data imported from Magento 1.9.0.1 to 2.1.1, upgraded to 2.1.2 and after to 2.1.3
Shipping method: Table Rates
The site does not seems to be affected from Website Specific Shipping Methods are not working after upgrade 2.1.2=>2.1.3 #7840 in the checkout step 1 and 2, but I can not exclude a side effect on the estimation block.

Steps to reproduce

Set a base unsecure url in the format www.domain.tld
Cart with one item, simple product
No shipping promotions
Click on Estimate Shipping and Tax and nothing happens.

Expected result

Click on Estimate Shipping and Tax should display the form.

Actual result

The estimation form in the sidebar is hidden and appears the following error in console:

jquery-migrate.js:21 JQMIGRATE: Logging is active
jquery.storageapi.min.js:2 Uncaught TypeError: Cannot read property 'it%2Fcheckout%2Fcart%2Fblock-shipping' of null
    at Object.t (http://plutone.local.host/develflowershop/www.develflowershop…84959354/frontend/Magento/luma/it_IT/jquery/jquery.storageapi.min.js:2:721)
    at Object._callMethod (http://plutone.local.host/develflowershop/www.develflowershop…4959354/frontend/Magento/luma/it_IT/jquery/jquery.storageapi.min.js:2:4103)
    at Object.get (http://plutone.local.host/develflowershop/www.develflowershop…4959354/frontend/Magento/luma/it_IT/jquery/jquery.storageapi.min.js:2:4145)
    at $.(anonymous function).(anonymous function)._processState (http://plutone.local.host/develflowershop/www.develflowershop…c/version1484959354/frontend/Magento/luma/it_IT/mage/collapsible.js:116:42)
    at $.(anonymous function).(anonymous function)._processState (http://plutone.local.host/develflowershop/www.develflowershop…c/version1484959354/frontend/Magento/luma/it_IT/jquery/jquery-ui.js:402:25)
    at $.(anonymous function).(anonymous function)._create (http://plutone.local.host/develflowershop/www.develflowershop…ic/version1484959354/frontend/Magento/luma/it_IT/mage/collapsible.js:53:18)
    at $.(anonymous function).(anonymous function)._create (http://plutone.local.host/develflowershop/www.develflowershop…c/version1484959354/frontend/Magento/luma/it_IT/jquery/jquery-ui.js:402:25)
    at $.(anonymous function).(anonymous function)._createWidget (http://plutone.local.host/develflowershop/www.develflowershop…ic/version1484959354/frontend/Magento/luma/it_IT/jquery/jquery-ui.js:561:8)
    at new $.(anonymous function).(anonymous function) (http://plutone.local.host/develflowershop/www.develflowershop…ic/version1484959354/frontend/Magento/luma/it_IT/jquery/jquery-ui.js:363:9)
    at $.(anonymous function).(anonymous function) (http://plutone.local.host/develflowershop/www.develflowershop…c/version1484959354/frontend/Magento/luma/it_IT/jquery/jquery-ui.js:357:11)
t @ jquery.storageapi.min.js:2
_callMethod @ jquery.storageapi.min.js:2
get @ jquery.storageapi.min.js:2
_processState @ collapsible.js:116
(anonymous) @ jquery-ui.js:402
_create @ collapsible.js:53
(anonymous) @ jquery-ui.js:402
_createWidget @ jquery-ui.js:561
$.(anonymous function).(anonymous function) @ jquery-ui.js:363
$.(anonymous function).(anonymous function) @ jquery-ui.js:357
(anonymous) @ main.js:30
execCb @ require.js:1650
check @ require.js:866
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:1416
setTimeout (async)
(anonymous) @ require.js:1755
localRequire @ require.js:1405
window.require @ mixins.js:239
init @ main.js:23
(anonymous) @ main.js:83
_.each._.forEach @ underscore.js:150
(anonymous) @ main.js:72
apply @ main.js:69
fire @ jquery.js:3099
add @ jquery.js:3145
jQuery.fn.ready @ jquery.js:3379
jQuery.fn.init @ jquery.js:2819
jQuery.fn.init @ jquery-migrate.js:225
jQuery @ jquery.js:75
(anonymous) @ bootstrap.js:19
execCb @ require.js:1650
check @ require.js:866
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:991
(anonymous) @ require.js:132
(anonymous) @ mixins.js:106
execCb @ require.js:1650
check @ require.js:866
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:991
(anonymous) @ require.js:132
(anonymous) @ mixins.js:106
execCb @ require.js:1650
check @ require.js:866
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:991
(anonymous) @ require.js:132
(anonymous) @ mixins.js:106
execCb @ require.js:1650
check @ require.js:866
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
(anonymous) @ require.js:1113
(anonymous) @ require.js:132
(anonymous) @ require.js:1156
each @ require.js:57
emit @ require.js:1155
check @ require.js:917
enable @ require.js:1143
init @ require.js:774
(anonymous) @ require.js:991
(anonymous) @ require.js:132
runCallbacks @ domReady.js:24
callReady @ domReady.js:35
pageLoaded @ domReady.js:50

I'm working on a site ready to go live. So any suggestion is very appreciate.
Thanks in advance.

The text was updated successfully, but these errors were encountered:

Dart18 · 2017-01-23T11:18:17Z

Some additional informations.
I'm in developer mode.
The current theme is Luma.
All cache types are enabled.
All custom modules are disabled.
I tried cleaning browser cache and local storage data without any effect;
I tried also

php bin/magento setup:static-content:deploy -d;
php bin/magento setup:static-content:deploy -d it_IT;

, I emptied the cache from the backend, without success.
My website has two stores, the default uses en_US locale, the second uses it_IT locale provided by Magento2 Italian Language Pack (It_IT) and installed via composer.

Switch between languages does not change the resut: the error is the same.
Any suggestion? There is something else that I forget to try?
Thanks

Dart18 · 2017-01-23T13:24:34Z

Switching on YES the option:
Stores -> Configuration -> General -> Web -> Url Options -> Add Store Code to Urls, the error changes in:

jquery.storageapi.min.js:2 Uncaught TypeError: Cannot read property 'it%2Fita%2Fcheckout%2Fcart%2Fblock-shipping' of null
....

The string 'it/ita/checkout/cart/block-shipping now includes the store code.
I'm not sure, but the "it" at the beginning seems to be the TLD of my website (.it)

Dart18 · 2017-01-24T15:48:59Z

Proposed FIX:

In

<document root>/lib/web/mage/collapsible.js

at line 103 change the research value '.' with /\./g to perform the replace globally.

The result should be the following:

Original collapsible.js:

...
_processState: function () {
            var anchor = window.location.hash,
                isValid = $.mage.isValidSelector(anchor),
                urlPath = window.location.pathname.replace('.', '');
...

Modified collapsible.js:

...
_processState: function () {
            var anchor = window.location.hash,
                isValid = $.mage.isValidSelector(anchor),
                urlPath = window.location.pathname.replace(/\./g,'');
...

There is a single occurrence of 'window.location.pathname.replace' in all Magento 2.1.3 CE.
After this single change the estimation shipping and tax form appears and works.
Please check my work and, if approved, merge it as soon as possible.
Thanks

P.S.:
People who want to try this fix manually, have to clear static files cache after editing the file.

Dart18 · 2017-03-31T13:57:54Z

This issue affects also CE 2.1.5, CE 2.1.6 and CE 2.1.7

katmoon · 2017-09-07T09:53:03Z

The error also reproduces on 2.0.9

Dart18 · 2017-11-02T18:29:12Z

After the update to 2.2.0 the error seems to have disappeared and I'm no longer able to reproduce it.

magento-engcom-team · 2017-11-07T14:14:51Z

Hi @Dart18
Thanks for reporting this issue.
Could you please let us know if the issue is still actual? Thank you

magento-engcom-team · 2017-11-20T08:30:39Z

@Dart18, we are closing this issue due to inactivity. If you'd like to update it, please reopen the issue.

0m3r · 2018-06-18T12:50:35Z

The error also reproduces on 2.2.4

jquery.storageapi.min.js:2 Uncaught TypeError: Cannot read property 'htmlblock-shipping' of null

the error was reproduced if window.location.pathname has two or more dots (for example /index.php/push-it-messenger-bag.html)

>window.location.pathname
"/index.php/push-it-messenger-bag.html"
>window.location.pathname.replace('.', '')
"/indexphp/push-it-messenger-bag.html"
>window.location.pathname.replace(/\./g,'')
"/indexphp/push-it-messenger-baghtml"

magento2/lib/web/mage/collapsible.js

Line 113 in 1cd8257

urlPath = window.location.pathname.replace('.', ''),

original code replace only one dot

VladimirZaets · 2018-06-21T11:02:44Z

Hi @Dart18. Thank you for your report.
The issue has been fixed in #16213 by @0m3r in 2.2-develop branch
Related commit(s):

4952d50030bc8821eb9a85a0c8d6bb5e77e80cce

The fix will be available with the upcoming 2.2.6 release.

- Merge Pull Request #16213 from 0m3r/magento2:patch-1 - Merged commits: 1. 4952d50

magento-engcom-team · 2018-07-02T21:40:09Z

Hi @Dart18. Thank you for your report.
The issue has been fixed in #16429 by @0m3r in 2.3-develop branch
Related commit(s):

59a80fd02517d0fce844a6334e8d31d36feb6d07

The fix will be available with the upcoming 2.3.0 release.

- Merge Pull Request #16429 from 0m3r/magento2:2.3-develop-PR-port-16213 - Merged commits: 1. 59a80fd

sidolov · 2018-07-04T11:33:17Z

Hi @Dart18. Thank you for your report.
The issue has been fixed in #16491 by @gelanivishal in 2.1-develop branch
Related commit(s):

The fix will be available with the upcoming 2.1.15 release.

- Merge Pull Request #16491 from gelanivishal/magento2:2.1-develop-PR-port-16213 - Merged commits: 1. f0a8ba8 2. f388069

veloraven added 2.1.x bug report Component: Checkout labels Jan 23, 2017

Dart18 changed the title ~~Estimate Shipping and Tax Form not works due to js error Cannot read property 'it/checkout/cart/block-shipping' of null~~ Estimate Shipping and Tax Form not works due to js error in collapsible.js Jan 24, 2017

Dart18 changed the title ~~Estimate Shipping and Tax Form not works due to js error in collapsible.js~~ Estimate Shipping and Tax Form not works due to js error in collapsible.js [proposed fix] Jan 24, 2017

magento-engcom-team added 2.1.x bug report Component: Checkout labels Sep 5, 2017

magento-engcom-team added 2.1.x bug report Component: Checkout Issue: Format is valid Gate 1 Passed. Automatic verification of issue format passed and removed G1 Passed labels Sep 11, 2017

magento-engcom-team added the Issue: Clear Description Gate 2 Passed. Manual verification of the issue description passed label Nov 7, 2017

magento-engcom-team self-assigned this Nov 7, 2017

magento-engcom-team added the Progress: needs update label Nov 7, 2017

magento-engcom-team closed this as completed Nov 20, 2017

0m3r mentioned this issue Jun 18, 2018

Fix for #8222 #16213

Merged

4 tasks

VladimirZaets added the Fixed in 2.2.x The issue has been fixed in 2.2 release line label Jun 21, 2018

magento-engcom-team added a commit that referenced this issue Jun 21, 2018

ENGCOM-2033: Fix for #8222 #16213

3984406

- Merge Pull Request #16213 from 0m3r/magento2:patch-1 - Merged commits: 1. 4952d50

magento-engcom-team pushed a commit that referenced this issue Jun 21, 2018

ENGCOM-2033: Fix for #8222 #16213

e37c989

0m3r mentioned this issue Jun 27, 2018

[Forwardport] Fix for #8222 #16429

Merged

4 tasks

magento-engcom-team added the Fixed in 2.3.x The issue has been fixed in 2.3 release line label Jul 2, 2018

magento-engcom-team added a commit that referenced this issue Jul 2, 2018

ENGCOM-2147: [Forwardport] Fix for #8222 #16429

b0bbc82

- Merge Pull Request #16429 from 0m3r/magento2:2.3-develop-PR-port-16213 - Merged commits: 1. 59a80fd

magento-engcom-team pushed a commit that referenced this issue Jul 2, 2018

ENGCOM-2147: [Forwardport] Fix for #8222 #16429

b3ac99e

gelanivishal pushed a commit to gelanivishal/magento2 that referenced this issue Jul 3, 2018

Fix for magento#8222

f0a8ba8

gelanivishal mentioned this issue Jul 3, 2018

Fix for #8222 #16491

Merged

4 tasks

sidolov added the Fixed in 2.1.x The issue has been fixed in 2.1 release line label Jul 4, 2018

magento-engcom-team added a commit that referenced this issue Jul 4, 2018

ENGCOM-2167: Fix for #8222 #16491

977d7e4

- Merge Pull Request #16491 from gelanivishal/magento2:2.1-develop-PR-port-16213 - Merged commits: 1. f0a8ba8 2. f388069

magento-engcom-team pushed a commit that referenced this issue Jul 4, 2018

ENGCOM-2167: Fix for #8222 #16491

f0a5e63

magento-devops-reposync-svc pushed a commit that referenced this issue Apr 10, 2023

Merge pull request #8222 from magento-lynx/eav-graphql

c766d6c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Estimate Shipping and Tax Form not works due to js error in collapsible.js [proposed fix] #8222

Estimate Shipping and Tax Form not works due to js error in collapsible.js [proposed fix] #8222

Dart18 commented Jan 21, 2017 •

edited

Loading

Dart18 commented Jan 23, 2017 •

edited

Loading

Dart18 commented Jan 23, 2017

Dart18 commented Jan 24, 2017 •

edited

Loading

Dart18 commented Mar 31, 2017 •

edited

Loading

katmoon commented Sep 7, 2017

Dart18 commented Nov 2, 2017

magento-engcom-team commented Nov 7, 2017

magento-engcom-team commented Nov 20, 2017

0m3r commented Jun 18, 2018

VladimirZaets commented Jun 21, 2018

magento-engcom-team commented Jul 2, 2018

sidolov commented Jul 4, 2018

Estimate Shipping and Tax Form not works due to js error in collapsible.js [proposed fix] #8222

Estimate Shipping and Tax Form not works due to js error in collapsible.js [proposed fix] #8222

Comments

Dart18 commented Jan 21, 2017 • edited Loading

Preconditions

Steps to reproduce

Expected result

Actual result

Dart18 commented Jan 23, 2017 • edited Loading

Dart18 commented Jan 23, 2017

Dart18 commented Jan 24, 2017 • edited Loading

Proposed FIX:

Original collapsible.js:

Modified collapsible.js:

Dart18 commented Mar 31, 2017 • edited Loading

katmoon commented Sep 7, 2017

Dart18 commented Nov 2, 2017

magento-engcom-team commented Nov 7, 2017

magento-engcom-team commented Nov 20, 2017

0m3r commented Jun 18, 2018

VladimirZaets commented Jun 21, 2018

magento-engcom-team commented Jul 2, 2018

sidolov commented Jul 4, 2018

Dart18 commented Jan 21, 2017 •

edited

Loading

Dart18 commented Jan 23, 2017 •

edited

Loading

Dart18 commented Jan 24, 2017 •

edited

Loading

Dart18 commented Mar 31, 2017 •

edited

Loading