Amasty Faq Integration

[IbrahimS2]

I am trying to get this module fully integrated, but I am hitting some walls, and I am not certain where I am failing:

<item name="Amasty_Faq/js/faq-collapsible" xsi:type="array">
    <!-- Path to our JS file -->
    <item name="path" xsi:type="string">Vendor_vendor/js/faq-collapsible</item>
    <!-- Config paths to check before injecting JS file -->
    <item name="enabled" xsi:type="helper" helper="Swissup\Breeze\Helper\Config::isEnabled">
        <param name="path">amastyfaq/general/enabled</param>
    </item>
    <!-- JS files to add before our file -->
    <item name="import" xsi:type="array">
        <item name="collapsible" xsi:type="string">Swissup_Breeze/js/components/ui/collapsible</item>
    </item>
</item>

define([
    'jquery',
    'collapsible'
], function ($) {

    $.widget('mage.amFaqCollapsible', $.mage.collapsible, {
        // Component alias to search in DOM structure
        component: 'amFaqCollapsible',

        _create: function () {
            // WCAG compatibility
            this.options.content = $(this.element).find(this.options.content);
            this._super();
        }
    });

    return $.mage.amFaqCollapsible;
});

It is not extending/working for some reason, any clue?

[vovayatsyuk]

Use breakpoints to see if everything works like it should.

$.mage.collapsible - is undefined in your case.

Try this approach:

define([
    'jquery',
    'collapsible'
], function ($, collapsible) {
    'use strict';

    $.widget('mage.amFaqCollapsible', collapsible, {
        // Component alias to search in DOM structure
        component: 'amFaqCollapsible',

        _create: function () {
            // WCAG compatibility
            this.options.content = $(this.element).find(this.options.content);
            this._super();
        }
    });

    return $.mage.amFaqCollapsible;
});

[IbrahimS2]

@vovayatsyuk It might be a good idea to have this added to Breeze as part of the core which will help with lots of other integrations, what do you think?

[IbrahimS2]

@vovayatsyuk A question, I refactored a JS so it uses the $.sections to access the customer data, anyhow, there is an issue where it returns undefined even though I am certain it is proper, please let me know if you have any clue:

define([
    'jquery',
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'Magento_Customer/js/view/customer',
    'mage/validation'
], function ($, Component, customerData) {
    return Component.extend({
        initialize: function (config) {
            this.faq = $.sections.get('faq');
            this._super();
        },
        saveData: function () {
            $.sections.set('faq', this.faq());
        },
        initObservable: function () {
            console.log(this.faq); // undefined, no clue!!?
            
            this._super()
                .observe({
                    title: this.faq().title,
                    email: this.faq().email,
                    name: this.faq().name,
                    isEmailVisible: null,
                    isNameVisible: null,
                    isNotificationVisible: null,
                    isNotificationChecked: null
                });

            this.title.subscribe(function (value) {
                this.faq().title = value;
                this.saveData();
            }.bind(this));
            this.email.subscribe(function (value) {
                this.faq().email = value;
                this.saveData();
            }.bind(this));
            this.name.subscribe(function (value) {
                this.faq().name = value;
                this.saveData();
            }.bind(this));
            this.faq.subscribe(function (value) {
                if (this.name() != value.name) {
                    this.name(value.name)
                }
                if (this.email() != value.email) {
                    this.email(value.email)
                }
                if (this.title() != value.title) {
                    this.title(value.title)
                }
            }.bind(this));

            return this;
        },
        toggleEmail: function (element) {
            this.isEmailVisible(element.checked);
            this.isNotificationChecked(element.checked);
        },
        toggleNameAndNotification: function (element) {
            this.isNameVisible(element.checked);
            this.isNotificationVisible(element.checked);
            this.isEmailVisible(element.checked && this.isNotificationChecked());
        },
        formSubmit: function (form) {
            if (!$(form).validation() || !$(form).validation('isValid')) {
                return false;
            }
            $(form).find(':input').attr('readonly', true);
            $(form).find('button').attr('disabled', true);

            return true;
        }
    });
});

Please note component is already defined on another file when importing:

define(["uiComponent"], function (Component) {
    "use strict";

    Component.register("Amasty_Faq/js/askform");
});

[vovayatsyuk]

Try to set the value in initObservable function. In this case, you don't need to override initialize method:

// initialize: function (config) {
//     this.faq = $.sections.get('faq');
//     this._super();
// },
initObservable: function () {
    this.faq = ...

p.s. The issue is caused by different order of function calls in Breeze:

• In Luma initObservable is called from initialize method (when you call this._super();).
• In Breeze, initObservable is called before initialize.

I think I'm gonna fix this in the next Breeze update

p.p.s Still, I don't understand why Amasty created the initialize method to declare observable - why don't they move that code into initObservable just like I show?

[IbrahimS2]

@vovayatsyuk No clue, it just came to my attention this is the way it works with Luma; anyhow should I wait for this update if it will fix it on its own?

[IbrahimS2]

@vovayatsyuk Let me know, please.

[MaxSouza]

Hey @IbrahimS2, Did you get it fully integrated with Breeze?

[IbrahimS2]

@MaxSouza 90% yes

[MaxSouza]

@IbrahimS2 Do you plan to make it available as a Breeze extension?

[IbrahimS2]

@MaxSouza 100%, I will be releasing it by next Monday