Need help on product recommendations extends code with Breeze integration #263

sandipansaha · 2024-04-16T11:20:40Z

sandipansaha
Apr 16, 2024

Hi,

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

Now, I am extending the product recommendations features like displaying product reviews. For that I have created some JavaScript mixins and they are working fine with Luma as expected.

Luma - LINK

For Breeze I have added the JS mixins as described at https://breezefront.com/docs/mixins

    <body>
        <referenceBlock name="breeze.js">
            <arguments>
                <argument name="bundles" xsi:type="array">
                    <item name="default" xsi:type="array">
                        <item name="items" xsi:type="array">
                            <item name="Magento_ProductRecommendationsLayout/js/layoutRenderer" xsi:type="array">
                                <item name="import" xsi:type="array">
                                    <item name="Magento_ProductRecommendationsLayout/js/layoutRendererMixin"
                                          xsi:type="string">WilliamsCommerce_MagentoProductRecommendationsExtend/js/breeze/layoutRendererMixin</item>
                                    <item name="abstractRendererMixin" xsi:type="string">WilliamsCommerce_MagentoProductRecommendationsExtend/js/breeze/abstractRendererMixin</item>
                                </item>
                            </item>
                            <item name="Magento_PageBuilderProductRecommendations/js/pageBuilderRenderer" xsi:type="array">
                                <item name="import" xsi:type="array">
                                    <item name="Magento_ProductRecommendationsLayout/js/pageBuilderRendererMixin"
                                          xsi:type="string">WilliamsCommerce_MagentoProductRecommendationsExtend/js/breeze/pageBuilderRendererMixin</item>
                                    <item name="abstractRendererMixin" xsi:type="string">WilliamsCommerce_MagentoProductRecommendationsExtend/js/breeze/abstractRendererMixin</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
        <referenceBlock name="breeze.Magento_ProductRecommendationsLayout_recommendations_html"
                        template="WilliamsCommerce_MagentoProductRecommendationsExtend::breeze/recommendations.html"/>
    </body>

Possibly, I am doing something wrong so it is not working as expected.

Breeze - LINK
Seeing the error:

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

Answered by vovayatsyuk

Apr 16, 2024

Hi,

You forgot the first argument in mixin.

The first argument in the overridden function - is the parent function followed by other arguments:

fnName: function (parent, arg1, arg2..)

View full answer

vovayatsyuk · 2024-04-16T11:28:04Z

vovayatsyuk
Apr 16, 2024
Maintainer

Hi,

You forgot the first argument in mixin.

The first argument in the overridden function - is the parent function followed by other arguments:

fnName: function (parent, arg1, arg2..)

1 reply

sandipansaha Apr 16, 2024
Author

Thank you very much, it was the issue. 💯

pk-pankaj · 2024-07-26T07:58:05Z

pk-pankaj
Jul 26, 2024

Hi @vovayatsyuk

Product recommendations are not working on the iOS, but they are working fine on others.
This is happening due to our extended code in this file WilliamsCommerce_MagentoProductRecommendationsExtend/js/breeze/abstractRendererMixin
When we disable our module it works fine

define([
    'mage/url'
], (url) => {
    'use strict';
    $.mixin('Magento_ProductRecommendationsLayout/js/abstractRenderer', {
        //Helper function to add addToCart button & convert currency
        /**
         *
         * @param parent
         * @param {@} response is type Array.
         * @returns type Array.
         */
        processResponse(parent, response) {
            return new Promise((resolve) => {
                const units = [];
                if (!response.length || response[0].unitId === undefined) {
                    //return units;
                    resolve(units);
                }

                // Get product ids
                const productIds = [];
                for (let i = 0; i < response.length; i++) {
                    response[i].products = response[i].products.slice(
                        0,
                        response[i].displayNumber,
                    );
                    for (let j = 0; j < response[i].products.length; j++) {
                        if (response[i].products[j].productId) {
                            productIds.push(response[i].products[j].productId);
                        }
                    }
                }

                $.ajax({
                    url: url.build('recommendations/ajax/index'),
                    method: 'post',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    data: {'productIds': productIds},
                    context: this,
                    dataType: 'json',
                    success: function (resultData) {
                        for (let i = 0; i < response.length; i++) {
                            response[i].products = response[i].products.slice(
                                0,
                                response[i].displayNumber,
                            );
                            for (let j = 0; j < response[i].products.length; j++) {
                                if (response[i].products[j].productId) {
                                    const form_key = $.cookie("form_key");
                                    const url = this.createAddToCartUrl(
                                        response[i].products[j].productId,
                                    );
                                    const postUenc = this.encodeUenc(url);
                                    const addToCart = {form_key, url, postUenc};
                                    response[i].products[j].addToCart = addToCart;

                                    // product image
                                    if (resultData.images) {
                                        const raw = resultData.images;
                                        response[i].products[j].image = Object.keys(raw).map(key => parseInt(key))
                                            .filter(key => key === response[i].products[j].productId)
                                            .reduce((obj, key) => raw[key].image, {});
                                    }

                                    // review
                                    if (resultData.reviews) {
                                        const raw = resultData.reviews;
                                        response[i].products[j].review = Object.keys(raw).map(key => parseInt(key))
                                            .filter(key => key === response[i].products[j].productId)
                                            .reduce((obj, key) => raw[key], {});
                                    } else {
                                        response[i].products[j].review = {};
                                    }

                                    // Attributes
                                    if (response[i].products[j].type === "configurable" && response[i].products[j].attributes) {
                                        // color swatches
                                        if (response[i].products[j].attributes.color && resultData.color_swatches) {
                                            const colorSwatches = [],
                                                colors = response[i].products[j].attributes.color;
                                            for (let c = 0; c < colors.length; c++) {
                                                const swatch = resultData.color_swatches
                                                    .filter(data => data.label === colors[c])
                                                    .reduce((obj, currentValue) => currentValue, {});
                                                colorSwatches.push(swatch);
                                            }
                                            response[i].products[j].attributes.colorSwatches = colorSwatches;
                                        }
                                        if (response[i].products[j].attributes.size) {
                                            const sizes = response[i].products[j].attributes.size;
                                            response[i].products[j].attributes.sizeText = sizes.length
                                                + (sizes.length > 1 ? " sizes" : " size") + " available";
                                        }
                                    }

                                    // Amasty labels
                                    if (resultData.amasty_labels) {
                                        const raw = resultData.amasty_labels;
                                        response[i].products[j].labels = Object.keys(raw).map(key => parseInt(key))
                                            .filter(key => key === response[i].products[j].productId)
                                            .reduce((obj, key) => raw[key], {});
                                    } else {
                                        response[i].products[j].labels = {};
                                    }

                                    // Product price
                                    if (resultData.price) {
                                        const raw = resultData.price;
                                        response[i].products[j].price = Object.keys(raw).map(key => parseInt(key))
                                            .filter(key => key === response[i].products[j].productId)
                                            .reduce((obj, key) => raw[key], {});
                                    } else {
                                        response[i].products[j].price = {};
                                    }
                                }

                                if (
                                    this.currencyConfiguration &&
                                    response[i].products[j].currency !==
                                    this.currencyConfiguration.currency
                                ) {
                                    if (response[i].products[j].prices === null) {
                                        response[i].products[j].prices = {
                                            minimum: {final: null},
                                        };
                                    } else {
                                        response[i].products[j].prices.minimum.final =
                                            response[i].products[j].prices &&
                                            response[i].products[j].prices.minimum &&
                                            response[i].products[j].prices.minimum.final
                                                ? this.convertPrice(
                                                    response[i].products[j].prices.minimum
                                                        .final,
                                                )
                                                : null;
                                    }
                                    response[i].products[j].currency =
                                        this.currencyConfiguration.currency;
                                }
                            }
                            units.push(response[i]);
                        }

                        units.sort((a, b) => a.displayOrder - b.displayOrder);
                        //return units;
                        resolve(units);
                    }
                });
            });
        }
    });
});

can you please see the code if you find any issues?

Here is the URL of our sandbox: https://master-7rqtwti-vcte4ksdazidy.eu-4.magentosite.cloud/breeze/

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Breeze Frontend

Need help on product recommendations extends code with Breeze integration #263

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Breeze Frontend

Need help on product recommendations extends code with Breeze integration #263

sandipansaha Apr 16, 2024

Replies: 2 comments · 1 reply

vovayatsyuk Apr 16, 2024 Maintainer

sandipansaha Apr 16, 2024 Author

pk-pankaj Jul 26, 2024

sandipansaha
Apr 16, 2024

Replies: 2 comments 1 reply

vovayatsyuk
Apr 16, 2024
Maintainer

sandipansaha Apr 16, 2024
Author

pk-pankaj
Jul 26, 2024