How do you access methods and dependency using mixin?

[IbrahimS2]

I am working on integrating Affirm, I do not get how you access the parent properties and dependencies.

(() => {
    "use strict";

    $.mixin("Astound_Affirm/js/aslowasPDP", {
        _create: function (parent) {
            self = this;
            **// It will throw an error here**
            var priceBox = $(selector); 
            if (typeof affirm == "undefined") {
                Promise.resolve(aslowas.loadScript(self.options)).then( 
                    function () {
                        self.initPrice();
                        priceBox.on("updatePrice", self.updatePriceHandler);
                    }
                );
            } else {
                self.initPrice();
                priceBox.on("updatePrice", self.updatePriceHandler);
            }

            return parent();
        },
    });
})();

It will throw an error here:
var priceBox = $(selector);
and here, where it cannot figure out aslowas property which is a dependency in the original script
Promise.resolve(aslowas.loadScript(self.options)).then(

The original file is:

/**
 * Copyright © 2016 Astound. All rights reserved.
 * See COPYING.txt for license details.
 */
/*jshint jquery:true*/
define(["jquery",
    "mage/translate",
    "Astound_Affirm/js/model/aslowas"
], function ($, $t, aslowas) {

    "use strict"

    var self,
        selector = '.price-box';
    $.widget('mage.aslowasPDP',{
        options: {
        },
        /**
         * Specify default price
         */
        initPrice: function() {
            var price = $(this.element)
                .parent()
                .find("[data-price-type='finalPrice']")
                .text();
            if (price) {
                aslowas.process(price, this.options);
            }
        },

        /**
         * Create as low as widget
         *
         * @private
         */
        _create: function() {
            self = this;
            var priceBox = $(selector);
            if (typeof affirm == "undefined") {
                $.when(aslowas.loadScript(self.options)).done(function() {
                    self.initPrice();
                    priceBox.on('updatePrice', self.updatePriceHandler);
                });
            } else {
                self.initPrice();
                priceBox.on('updatePrice', self.updatePriceHandler);
            }
        },

        /**
         * Handle update price event
         *
         * @param event
         */
        updatePriceHandler: function(event) {
            var el = $(event.currentTarget),
                price,
                priceInfo = $(el).parents(self.options.selector).get(0),
                currentElement;

            if (priceInfo) {
                //get first element from the array
                currentElement = $(self.element).get(0);
                if ($.contains(priceInfo, currentElement)) {
                    price = $(el[0]).find("[data-price-type='finalPrice']").text();
                    aslowas.process(price, self.options);
                }
            }

            aslowas.processBackordersVisibility(self.options.backorders_options);
        }
    });
    return $.mage.aslowasPDP
});

[vovayatsyuk]

You need to step back and review your code carefully. The issues are not caused by breeze integration.

var priceBox = $(selector); 

How can this work? You didn't declare the variable in the visible scope.

aslowas.loadScript...

You need to include Astound_Affirm/js/model/aslowas dependency to the get aslowas object:

define(['Astound_Affirm/js/model/aslowas'], (aslowas) => {
    console.log(aslowas);
})

Everything works similarly to Luma, except you need to register these components in the breeze_default.xml file.

[IbrahimS2]

Can we have this added to the integration list?

https://packagist.org/packages/aqeltech/module-breeze-astound-affirm

[IbrahimS2]

@vovayatsyuk .

[IbrahimS2]

@vovayatsyuk Kind reminder

[vovayatsyuk]

Sure. Done: breezefront/breezefront.com@0e3b0a1