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;
});
