0

Actually using Ajax concept fetching related products & displaying in the form of HTML but i have been facing a problem i.e there is a JS attribute for an element data-mage-init='{"relatedProducts":{"relatedCheckbox":".related.checkbox"}}' which is not triggering.

app/design/frontend/Pearl/weltpixel_custom/WeltPixel_OwlCarouselSlider/templates/product/list/items.phtml

Here is the template file from code share: https://codeshare.io/aYoM4R

app/code/Demo/ConfigurableSku/view/frontend/requirejs-config.js

var config = {
   config: {
        mixins: {
            'Magento_ConfigurableProduct/js/configurable': {
             'Demo_ConfigurableSku/js/model/skuswitch': true
            }
        }
    }
};

app/code/Demo/ConfigurableSku/view/frontend/web/js/model/skuswitch.js

define([
    'jquery',
    'mage/utils/wrapper'
], function ($, wrapper) {
    'use strict';
    return function(targetModule){
        
        var reloadPrice = targetModule.prototype._reloadPrice;
        targetModule.prototype.configurableSku = $('div.product-info-main .sku .value').html();
        var reloadPriceWrapper = wrapper.wrap(reloadPrice, function(original){
            var simpleSku = this.configurableSku;
            if(this.simpleProduct){

                simpleSku = this.options.spConfig.skus[this.simpleProduct]; 
                //Added Logic For Related products
                //simpleSku = this.options.spConfig.skus[this.simpleProduct];
                var simplePid = this.options.spConfig.simpleid[this.simpleProduct];
                var configPid = this.options.spConfig.productId;
                var ajaxUrl = this.options.spConfig.ajaxUrl;
                $.ajax({
                    showLoader: true,
                    url: ajaxUrl,
                    data: {product_sku : simpleSku, parentflag : 0},
                    type: "POST",
                    cache: false,
                    success: function(response) {
                        if(typeof response != 'undefined') {
                            $('.columns').find('#datarelated-'+configPid).html('');
                            $('.columns').find('#datarelated-'+configPid).html(response.message);
                            $('#datarelated-'+configPid).find('#pre-div').css('display','none');
                        } 
                    },error: function(response) {
                        console.log("something went wrong while selecting simple " + response.message);
                    }
                });

            }else{
                //first load
                // added logic for related products
                var configPid = this.options.spConfig.productId;
                var ajaxUrl = this.options.spConfig.ajaxUrl;
                $.ajax({
                    showLoader: true,
                    url: ajaxUrl,
                    data: {product_id:configPid,parentflag:1},
                    type: "POST",
                    cache: false,
                    success: function(response) {
                        if(typeof response != 'undefined') {
                            $('.columns').find('#datarelated-'+configPid).html('');
                            $('.columns').find('#datarelated-'+configPid).html(response.message);
                            $('#datarelated-'+configPid).find('#pre-div').css('display','none');
                        }
                    },
                    error: function(response) {
                        console.log("something went wrong with configurable " + response.message);
                    }
                });
            }
            
            $('div.product-info-main .sku .value').html(simpleSku);      
            return original();
        });

        targetModule.prototype._reloadPrice = reloadPriceWrapper;
        return targetModule;
    };
});

related-products.js: pub/static/frontend/Pearl/weltpixel_custom/en_US/Magento_Catalog/js/related-products.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'jquery',
    'jquery/ui',
    'mage/translate'
], function ($) {
    'use strict';

    $.widget('mage.relatedProducts', {
        options: {
            relatedCheckbox: '.related-checkbox', // Class name for a related product's input checkbox.
            relatedProductsCheckFlag: false, // Related products checkboxes are initially unchecked.
            relatedProductsField: '#related-products-field', // Hidden input field that stores related products.
            selectAllMessage: $.mage.__('select all'),
            unselectAllMessage: $.mage.__('unselect all'),
            selectAllLink: '[role="select-all"]',
            //selectAllLink : '#selectdata',
            elementsSelector: '.item.product'
        },

        /**
         * Bind events to the appropriate handlers.
         * @private
         */
        _create: function () {

            $(this.options.selectAllLink).on('click', $.proxy(this._selectAllRelated, this));
            $(this.options.relatedCheckbox).on('click', $.proxy(this._addRelatedToProduct, this));
             this._showRelatedProducts(
                this.element.find(this.options.elementsSelector),
                this.element.data('limit'),
                this.element.data('shuffle')
            );
        },

        /**
         * This method either checks all checkboxes for a product's set of related products (select all)
         * or unchecks them (unselect all).
         * @private
         * @param {jQuery.Event} e - Click event on either the "select all" link or the "unselect all" link.
         * @return {Boolean} - Prevent default event action and event propagation.
         */
        _selectAllRelated: function (e) {
            console.log("_selectAllRelated calling"); 
            var innerHTML = this.options.relatedProductsCheckFlag ?
                this.options.selectAllMessage : this.options.unselectAllMessage;

            $(e.target).html(innerHTML);
            $(this.options.relatedCheckbox).attr(
                'checked',
                this.options.relatedProductsCheckFlag = !this.options.relatedProductsCheckFlag
            );
            this._addRelatedToProduct();

            return false;
        },

        /**
         * This method iterates through each checkbox for all related products and collects only those products
         * whose checkbox has been checked. The selected related products are stored in a hidden input field.
         * @private
         */
        _addRelatedToProduct: function () {
            console.log("_addRelatedToProductcalling"); 
            console.log("_addRelatedToProduct");
            $(this.options.relatedProductsField).val(
                $(this.options.relatedCheckbox + ':checked').map(function () {
                    return this.value;
                }).get().join(',')
            );
        },

        /**
         * Show related products according to limit. Shuffle if needed.
         * @param {*} elements
         * @param {*} limit
         * @param {*} shuffle
         * @private
         */
        _showRelatedProducts: function (elements, limit, shuffle) {
            var index;

            if (shuffle) {
                this._shuffle(elements);
            }

            if (limit === 0) {
                limit = elements.length;
            }

            for (index = 0; index < limit; index++) {
                $(elements[index]).show();
            }
        },

        /* jscs:disable */
        /* eslint-disable */
        /**
         * Shuffle an array
         * @param {Array} o
         * @returns {*}
         */
        _shuffle: function shuffle(o) { //v1.0
            for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
            return o;
        }

        /* jscs:disable */
        /* eslint:disable */
    });

    return $.mage.relatedProducts;
});
0

I have followed the below reference and its working my functionality. Here I am posting answer for others those who are face same kind of issue further it will help.

$('.columns').find('#datarelated-'+configPid).html(response.message).trigger('contentUpdated');

 $.ajax({
 showLoader: true,
 url: ajaxUrl,
 data: {product_sku : simpleSku, parentflag : 0},
 type: "POST",
 cache: false,
 success: function(response) {
 if(typeof response != 'undefined') {
   $('.columns').find('#datarelated-'+configPid).html('');
   $('.columns').find('#datarelated-'+configPid).html(response.message).trigger('contentUpdated');
   $('#datarelated-'+configPid).find('#pre-div').css('display','none');
 }
},error: function(response) {
   console.log("something went wrong while selecting simple " + response.message);
}
  });

Reference: https://gist.github.com/timneutkens/004f8ac0f963068fa718e8397877194e

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.