ManaLight / magento2-bundlejs

Open Software License 3.0
10 stars 2 forks source link

Plugin do not support firefox desktop & mobile version #1

Closed replysharma closed 1 year ago

replysharma commented 1 year ago

Step to reproduce Install plugin as per the instruction share by the author. Apply configuration/settings as suggested. site will show the good performance in all other browsers except the firefox.

ManaLight commented 1 year ago

@replysharma Thank you for reporting the issue. Could you please provide more information like screenshots or which tool you used to test on Firefox?

elisei commented 1 year ago

Hi @ManaLight

First of all, thank you very much, as the module has incredible potential. <3

Well, I also have this issue.

My environment is:

When I'm using Chrome, all the JS files are loaded perfectly, even with the "Enable Delay JavaScript execution" process active. image

However, in Mozilla Firefox, when I activate it, it doesn't load. image

I noticed that this only happens with my custom theme, possibly due to some conflict, but the absence of error logs prevents me from finding out what's happening in order to find a solution.

ManaLight commented 1 year ago

@replysharma @elisei I will investigate this issue tomorrow. Thank you all for your information!

ManaLight commented 1 year ago

@replysharma @elisei I've fixed it in https://github.com/ManaLight/magento2-bundlejs/commit/3124c65325a60daaba6a39b4d83b6067ae2f3ac2.

Please download the new version by the below CLI and help me check it again. Thanks.

composer require pure_mashiro/magento2-bundlejs:^1.3.2-alpha1
elisei commented 1 year ago

@ManaLight

It has evolved, but any "requirejs" that calls "domReady!" returns an error!

ManaLight commented 1 year ago

It has evolved, but any "requirejs" that calls "domReady!" returns an error!

@elisei Does this issue also happen on Chrome? Could you please copy-paste or screenshot the error? Thanks.

elisei commented 1 year ago

yes also on it:

image

ManaLight commented 1 year ago

@elisei Unfortunately, I can't replicate the issue. See my test video below:

https://github.com/ManaLight/magento2-bundlejs/assets/24420996/439b7cd3-f56c-4e99-9652-4ad84ae59f8c

vendor/magento/module-theme/view/frontend/templates/html/copyright.phtml

<div id="test-modal" style="display: none"><span>Abc... </span></div>
<script>
    require(['jquery', "Magento_Ui/js/modal/modal", 'domReady!'], function ($, modal) {
        var options = {
            type: 'popup',
            responsive: true,
            title: 'Main title',
            buttons: [{
                text: $.mage.__('Ok'),
                class: '',
                click: function () {
                    this.closeModal();
                }
            }]
        };

        var popup = modal(options, $('#test-modal'));
        $(".page-wrapper").click(function() {
            $('#test-modal').modal('openModal');
        });

        $('#test-modal').modal('openModal');
    });
</script>

Could you please open another ticket with steps to reproduce it on the luma theme?

elisei commented 1 year ago

@ManaLight First of all, thank you very much for your effort in finding the solution.

I believe I managed to fix it. The issue lies in two modules from Magefan (blog and webp). The "down" call is unnecessary because I had already implemented a flow for executing the necessary JavaScript through another module of my theme (and I didn't use inline JavaScript in it).

I haven't taken this to production yet, but it worked in my local tests.

By the way, what should be the routine for future deployments? Should I put the store in development mode to collect the JavaScript, then deploy the content, and finally put it into production?

ManaLight commented 1 year ago

@elisei The flow is:

  1. Install the extension
  2. Collect bundles by clicking the Auto button in admin. It will work regardless of developer mode or production mode.
  3. Switch to production mode and deploy again
  4. If you only change the content of the files like adding more methods in the js file, deploying the site again is enough. However, if there is a new requirejs file or a new dependency in the existing requirejs file, it is necessary to collect bundles again.

Please test and make sure it works with your payment methods, especially online payment methods as well. There is another issue here: https://github.com/ManaLight/magento2-bundlejs/issues/2 . I will investigate this later.

elisei commented 1 year ago

Hi @ManaLight

I took it to production today, but unfortunately, it didn't work out. Unlike in my local environment. The issue now lies in the critical category. I'm using the infinite scroll module from Amasty, and I indicated it in the configuration: image

But during the JavaScript compilation, it's not being applied. I've already tried cleaning the folders: rm -rf pub/media/frontend/O2TI/Cristais/pt_BR/mashiro

I've deployed the static content and collected it again, but still, the amscroll call is not happening. =(


Regarding the payment issue, I specialize in developing plugins for that purpose here in Brazil.

I have developed the official solution for the main payment methods here: https://github.com/pagseguro/payment-magento https://github.com/Getnet-Brasil/payment-magento https://github.com/mercadopago/payment-magento-plugin

I have tested them all, and there were no errors in the local environment. I believe the problem with PayPal might be related to an external call to one of their JavaScript files. By default, almost all modules have encryption or iframe features for payment.

In my development, I keep that external to Magento: https://github.com/pagseguro/payment-magento/blob/Magento%402.4.6/etc/config.xml#L180

I think with PayPal, you need to indicate which JavaScript file it is and remove it as you did for YouTube!

ManaLight commented 1 year ago

@elisei In Magento, JS are applied in multiple ways:

  1. Internal scripts, like <script type="text/javascript">....<script> in the phtml file , which can be ignored from JS delaying of the extension by:

https://github.com/ManaLight/magento2-bundlejs/blob/baf31a0eb98e6ad716ff3e95197fbca361dce53d/etc/config.xml#L17

or using the attribute excluded-defer, for example, <script excluded-defer="1">

  1. External scripts, like <script src="....", which can be ignored from JS delaying of the extension by:

https://github.com/ManaLight/magento2-bundlejs/blob/baf31a0eb98e6ad716ff3e95197fbca361dce53d/etc/config.xml#L18

  1. jQuery widget, which can be ignored from JS delaying of the extension by allowed_js_components:

https://github.com/ManaLight/magento2-bundlejs/blob/baf31a0eb98e6ad716ff3e95197fbca361dce53d/etc/config.xml#L19

  1. JS load by deps syntax in requirejs-config, which can be ignored from JS delaying of the extension by critical JS config.

Could you please add my skype contact? It will be great if you can expose your local with ngrok so that I can investigate it directly!


Thank you for your test with Paypal!

Regarding Payflow Pro, unfortunately, I can't set up a sandbox for it. I will try other online payment methods:

image

As long as I can replicate it, I can fix it.

elisei commented 1 year ago

Hi, even though I used the "exclude" feature, it didn't work, but now at least I know what's happening.

The file is being called as if it were in the root of the frontend.

Screencast_04_07_2023_09:45:04.webm

elisei commented 1 year ago

Great! o/ I managed to do it! I had to change the require's call, even though the alias was declared in "require-config.js", but it seems to be working fine now!

image image


Regarding the payment method, I suggest removing these guys:

image

elisei commented 1 year ago

About the module: The configuration is really complex and requires a high level of knowledge of the additional modules that have been implemented, sometimes even involving rewriting some JavaScript. What I've noticed is that these are generally poorly written scripts, but they are commonly present in large projects, so you will definitely have to deal with them.

There has been a significant improvement compared to other resources like:

It's not yet the cornerstone for achieving 100% (initially, external tracking systems like Google, Facebook, Instagram are used), but it's a big step forward in terms of metrics.

Suggestion:

Create a wiki here on Git.

But I really want to thank you for providing this module and taking the time to actually contribute to the community. Please create a "sponsor" option here.

ManaLight commented 1 year ago

@replysharma @elisei Please make sure to set "Enable collect bundle js" to "No" after finishing collect bundle js. If this config is left as "Yes", only 11 JS files (instead of 78) will be loaded. However, on mobile, the user will have to click 2 times to make the menu expand. The correct config is "No". Please see the below video:

https://github.com/ManaLight/magento2-bundlejs/assets/24420996/140dde9c-44b1-4fc9-9aaa-a8708dbca126

Btw, I have merged release/1.3.3 into the master branch to fix the issue in https://github.com/ManaLight/magento2-bundlejs/issues/2. Please update the extension to the latest version and test it again. Thanks!

ManaLight commented 1 year ago

@elisei Thank you very much for your encouragement! I will create a "sponsor" option. Thank you for the suggestion as well! I will check with Terser.

replysharma commented 1 year ago

@ManaLight - I setup this on my stage server but it seems 'composer require pure_mashiro/magento2-bundlejs:^1.3.2-alpha1' do not have settings to disable this on checkout.

Can you please guide me to the right direction, next week we are moving it to production.

ManaLight commented 1 year ago

I setup this on my stage server but it seems 'composer require pure_mashiro/magento2-bundlejs:^1.3.2-alpha1' do not have settings to disable this on checkout.

@replysharma The option to disable on checkout was removed. I added another new config to limit the delay js on some types of static pages only instead. Please see my comment here: https://github.com/ManaLight/magento2-bundlejs/issues/2#issuecomment-1622441801

replysharma commented 1 year ago

Thank you so much @ManaLight for your superfast response as always but I face another issue after upgrading the plugin. I restart the collect JS bundle again but this time I do not get success message.

Do I need to follow any other step, If you can help here because this time I am struggling with auto/manual collecting the bundle js.

I am keep getting the auto collecting is in process, please wait. I waited around 30-40 minutes but no luck this time, also suggest me how do I make sure that everything is getting setup successfully.

ManaLight commented 1 year ago

@replysharma Manual collecting was removed from the extension a long time ago. Auto collecting will take like 2-3 minutes only.

Could you please open the console tab to see if there is any error, and check the network tab to see if the request failed, and check the Magento log files as well?

replysharma commented 1 year ago

@ManaLight Thank you for your suggestion, I am getting error while trying to upgrade plugin version. image

Can you please suggest me how to avoid this?

Should I remove the plugin and try again or any other way to avoid this error.

ManaLight commented 1 year ago

@replysharma There is an identical issue here: https://magento.stackexchange.com/questions/344418/m2-4-exception-throwing-while-executing-composer-require-higher-matching-versio

When you have a module with a same name at packagist.org and at magento marketplace, and the first is newer than the second, this error will happen. This is caused by magento/composer-dependency-version-audit-plugin module

Could you please try to install with --no-plugins option?

composer require pure_mashiro/magento2-bundlejs:^1.3.3  --no-plugins
replysharma commented 1 year ago

@ManaLight - I am able to update the plugin, thank you so much for your help but getting below error while enabling Production mode.

Error happened during deploy process: File "/public_html/pub/static/frontend/Magento/blank/en_GB/mashiro/contexts_config.min.js" cannot be opened Warning!fopen(/public_html/pub/static/frontend/Magento/blank/en_GB/mashiro/contexts_config.min.js): Failed to open stream: No such file or directory

It seems above file is not getting generated.

ManaLight commented 1 year ago

@replysharma Unfortunately, I can't replicate the issue. I suspect it is a permission issue. Could you please send all command lines which are used for the deployment process?

ManaLight commented 1 year ago

Error happened during deploy process: File "/public_html/pub/static/frontend/Magento/blank/en_GB/mashiro/contexts_config.min.js" cannot be opened Warning!fopen(/public_html/pub/static/frontend/Magento/blank/en_GB/mashiro/contexts_config.min.js): Failed to open stream: No such file or directory

@replysharma Did you resolve the issue?

replysharma commented 1 year ago

@ManaLight - Above issue is resolved on my stage server.

I have a query regarding the collecting bundle js after upgrading to plugin version 1.3.4. Plugin is upgraded to latest version successfully but when I try to collect the bundle js from admin, I am not getting message like "auto collecting is in progress. please wait.." as I was getting earlier.

Am I missing anything here, can you please suggest?

ManaLight commented 1 year ago

@replysharma Please try enabling the Collecting bundle option, flush Magento cache, then try clicking the "auto" button again. If it doesn't work for the first click, please try clicking on the "auto" button again.

replysharma commented 1 year ago

@ManaLight this trick works for me on stage server but do not worked on Production. My production server is behind the Cloud Flare although I am using cloud flare for DNS purpose for the time being.

Is their any other way which can help?

ManaLight commented 1 year ago

@ManaLight this trick works for me on stage server but do not worked on Production. My production server is behind the Cloud Flare although I am using cloud flare for DNS purpose for the time being.

Is their any other way which can help?

@replysharma It is possible that your Cloud Flare cached assets so that the auto-collect process failed. I suggest importing the below tables from staging DB to Production DB, which are the result of the auto-collect process.

mashiro_bundle_by_page 
mashiro_bundle_by_type
mashiro_bundle_contexts_config

The original issue "Open Plugin do not support firefox desktop & mobile version" was resolved, so could you create another post for this issue, please?

replysharma commented 1 year ago

@ManaLight - thank you so much for your response, I am closing this