iOS issue :: product recommendations extends code with Breeze integration

[sandipansaha]

Hi @vovayatsyuk

We are using "magento/product-recommendations" and "swissup/module-breeze-magento-enterprise".

Now, we have extended the product recommendations features like displaying product reviews. For that I have created some JavaScript mixins and they are working fine with Luma and with Breeze (in browser) as expected with your help.

However, it is not working with iOS devices, I have checked it in iPhone 13, iPad, Macbook and browserstack as well. I have tried to debug this and found that some of the mixins are not working in iOS devices only.

breeze_default.xml (as you had suggested)

                    <item name="default" xsi:type="array">
                        <item name="items" xsi:type="array">
                            <item name="abstractRendererMixin" xsi:type="array">
                                <item name="path" xsi:type="string">WilliamsCommerce_MagentoProductRecommendationsExtend/js/breeze/abstractRendererMixin</item>
                                <item name="mixins" xsi:type="array">
                                    <item name="abstractRenderer" xsi:type="string">Magento_ProductRecommendationsLayout/js/abstractRenderer</item>
                                </item>
                            </item>
                            <item name="layoutRendererMixin" xsi:type="array">
                                <item name="path" xsi:type="string">WilliamsCommerce_MagentoProductRecommendationsExtend/js/breeze/layoutRendererMixin</item>
                                <item name="mixins" xsi:type="array">
                                    <item name="layoutRenderer" xsi:type="string">Magento_ProductRecommendationsLayout/js/layoutRenderer</item>
                                </item>
                            </item>
                            <item name="pageBuilderRendererMixin" xsi:type="array">
                                <item name="path" xsi:type="string">WilliamsCommerce_MagentoProductRecommendationsExtend/js/breeze/pageBuilderRendererMixin</item>
                                <item name="mixins" xsi:type="array">
                                    <item name="pageBuilderRenderer" xsi:type="string">Magento_PageBuilderProductRecommendations/js/pageBuilderRenderer</item>
                                </item>
                            </item>
                        </item>
                    </item>

Breeze URL - https://master-7rqtwti-vcte4ksdazidy.eu-4.magentosite.cloud/breeze/
Luma URL - https://master-7rqtwti-vcte4ksdazidy.eu-4.magentosite.cloud/default/

I have added console.log in all the 3 JavaScript mixins.
layoutRendererMixin Breeze
pageBuilderRendererMixin Breeze
abstractRendererMixin Breeze

The functionality is working for Breeze in desktop browser and also the log for each mixins are being logged.

But, the same breeze URL is not working for iOS devices -

The layoutRendererMixin Breeze and pageBuilderRendererMixin Breeze mixin is not being called before abstractRendererMixin Breeze mixin in case of iOS. The core file is being called instead.
Please check the below screenshot.

However, the Luma URL is working in iOS devices as well.

Could you please have a look and suggest accordingly.

As always your guidance will be very helpful I believe and we appreciate it very much.

Thanks
Sandipan

[vovayatsyuk]

Looks like a a tricky race condition bug. Please test if this patch will help.

--- a/Block/Js.php
+++ b/Block/Js.php
@@ -411,7 +411,14
                         continue;
                     }
 
-                    $this->allBundles[$info['bundle']]['items'][$info['itemName']]['import'][] = $itemName;
+                    if (!isset($this->allBundles[$info['bundle']]['items'][$info['itemName']]['import'])) {
+                        $this->allBundles[$info['bundle']]['items'][$info['itemName']]['import'] = [];
+                    }
+
+                    array_unshift(
+                        $this->allBundles[$info['bundle']]['items'][$info['itemName']]['import'],
+                        $itemName
+                    );
 
                     if (isset($this->allBundles[$info['bundle']]['items'][$info['itemName']]['load'])) {
                         $this->allBundles[$bundleName]['items'][$itemName]['load']['onRequire'] = true;

[vovayatsyuk]

I've just pushed this change: breezefront/module-breeze@6de05bf

[sandipansaha]

Hi @vovayatsyuk

I have applied patch, however, it seems it did not fix but it also affected the same in the chrome browser as well.

Please check the URL - https://master-7rqtwti-vcte4ksdazidy.eu-4.magentosite.cloud/breeze/

Thanks
Sandipan

[vovayatsyuk]

One more fix: breezefront/module-breeze@87666cc

[wclsandipan]

Hi @vovayatsyuk

It worked. Thank you very much. Can we please publish the fixes asap?
Please let me know when they are published to composer.

Thanks

[vovayatsyuk]

Just tagged the new release!

[pk-pankaj]

Hi @vovayatsyuk

We found an issue further,

Adobe Live Search and Product recommendations are not working in the Safari private window with Breeze, these work fine in Browserstack if we check, so the issue appears in real devices in the Safari private window, working fine with Luma.

Search: When searching anything the results do not appear on the search drop, but getting results on the page if we submit the search.

We have verified the issue is appearing in multiple projects and sandbox also https://master-7rqtwti-vcte4ksdazidy.eu-4.magentosite.cloud/breeze/

Would be great if you check this as it has been critical for us.

Thanks,
Pankaj

[vovayatsyuk]

When I open https://master-7rqtwti-vcte4ksdazidy.eu-4.magentosite.cloud/breeze/ on my phone in a private window and click on the search icon search form is still hidden. If I pull the page down to refresh I see the following message:

It's not my picture, but mine is the same:

After I pressed reduce protection, the form became visible and search works fine.

Do you have the same issue?

[pk-pankaj]

Hi @vovayatsyuk

I agree it, may be a privacy protection issue but this is only with Breeze, working fine with Luma, so I think there is something insecure with Breeze which is blocked by Safari.

Thanks,
Pankaj

[vovayatsyuk]

Looks like it's a feature. It works the same as I described (On mobile, after clicking the search icon, the icon becomes invisible, and the scroll is blocked.)

[pk-pankaj]

Hi @vovayatsyuk

The search is working on mobile view with Luma, see screen below.
But the main issue is Live search and Product recommendations do not work in safari private window with breeze, work fine with Luma.
you can find the same issue on the desktop also on Safrai.

[vovayatsyuk]

Please apply the fix I gave you before.

[pk-pankaj]

@vovayatsyuk
Do you mean this changes
breezefront/theme-frontend-breeze-blank@02f2230
if yes then its only CSS changes so how can this fix the Live search and product recommendations issue of Safari

[vovayatsyuk]

When I try https://master-7rqtwti-vcte4ksdazidy.eu-4.magentosite.cloud/breeze/ on mobile the search is not working regardless of the browser.

My fix fixes this issue.

[pk-pankaj]

Hi @vovayatsyuk
Applied CSS changes so the search is working on mobile, although the main issue is not related to mobile that appears on Safari on all devices like iOS, mac etc.

[vovayatsyuk]

Here is how LiveSearch autocomplete is initialized:

require([
    "dataServicesBase",
    "magentoStorefrontEvents",
    "https://livesearch-autocomplete.magento-ds.com/v0/LiveSearchAutocomplete.js"
], function () {
    new window.LiveSearchAutocomplete({
        ...
    });
})

dataServicesBase references to the https://commerce.adobedtm.com/v6/ds.min. When trying to load this script in Safari private window, here is what you see in the dev console:

---

But why the LiveSearch is working in Luma?

The thing is, dataServicesBase and magentoStorefrontEvents are not required for LiveSearch. We do not need to load these files to use the search form. And this is what Luma does with the help ofthe RequireJs fallback feature:

dataServicesBase: [
    'https://commerce.adobedtm.com/v6/ds.min',
    'Magento_DataServices/js/noopDs' // <-- empty fn
],

How to fix this on Breeze

Breeze doesn't have js fallback feature. I recommend modifying initialization in magento/module-live-search-storefront-popover/view/frontend/templates/search_as_you_type.phtml as shown below:

require([
    "dataServicesBase",
    "magentoStorefrontEvents"
]);
require([
    "https://livesearch-autocomplete.magento-ds.com/v0/LiveSearchAutocomplete.js"
], function () {
    new window.LiveSearchAutocomplete({
        ...
    });
})

[pk-pankaj]

Thanks @vovayatsyuk
it worked for Live Search, I have replaced as you suggested like below

require([
            "https://livesearch-autocomplete.magento-ds.com/v0/LiveSearchAutocomplete.js"
        ],
        function () {
        new window.LiveSearchAutocomplete({ 

But product recommendations have the same issue so can you please check them as well?

Thanks,
Pankaj

[pk-pankaj]

@vovayatsyuk I have tried by removing from dependencies completely from all three files
module-product-recommendations-layout/view/frontend/web/js/abstractRenderer.js
module-product-recommendations-layout/view/frontend/web/js/layoutRenderer.js
module-product-recommendations-layout/view/frontend/web/js/recsFetcher.js

But still not working and giving error in console

Blocked connection to known tracker https://commerce.adobedtm.com/v6/ds.min.js

In below Breeze file:

Swissup_Breeze/js/core/load-script.js

[vovayatsyuk]

Please provide the link to the updated store so I can look at it too. Additionally, please explain what I should look for at the provided URL.

[pk-pankaj]

Hi @vovayatsyuk

I have updated here by removing the dependency

https://master-7rqtwti-vcte4ksdazidy.eu-4.magentosite.cloud/breeze/

Product recommendations are coming on the home page at the bottom

[vovayatsyuk]

I don't see the recommendations in the Safari private tab using the Luma store. Is it working for you? https://master-7rqtwti-vcte4ksdazidy.eu-4.magentosite.cloud/default/

Looks like it's not a breeze-specific issue.

[pk-pankaj]

Hi @vovayatsyuk

You are right it's also not working in Luma.

I will create an Adobe support ticket for this.

We have resolved the Live search issue, thanks for your help @vovayatsyuk