Hi, Chris. Yes. I have solved it by creating one module and customizing Magento_Swatches.
Just create a simple module having only this block.
<?php
namespace Magetique\ProductDesc\Block\ConfigurableProduct\Product\View\Type;
use Magento\Framework\Json\EncoderInterface;
use Magento\Framework\Json\DecoderInterface;
use Magento\CatalogInventory\Api\StockRegistryInterface;
class Configurable
{
protected $jsonEncoder;
protected $jsonDecoder;
protected $stockRegistry;
protected $productloader;
protected $_reviewCollection;
protected $appEmulation;
protected $imageHelperFactory;
protected $productRepositoryFactory;
public function __construct(
EncoderInterface $jsonEncoder,
DecoderInterface $jsonDecoder,
\Magento\Catalog\Model\ProductFactory $_productloader,
StockRegistryInterface $stockRegistry,
\Magento\Review\Model\ResourceModel\Review\CollectionFactory $reviewCollection,
\Magento\Store\Model\App\Emulation $appEmulation,
\Magento\Catalog\Api\ProductRepositoryInterfaceFactory $productRepositoryFactory,
\Magento\Catalog\Helper\Image $imageHelperFactory
) {
$this->jsonDecoder = $jsonDecoder;
$this->jsonEncoder = $jsonEncoder;
$this->stockRegistry = $stockRegistry;
$this->productloader = $_productloader;
$this->_reviewCollection = $reviewCollection;
$this->appEmulation = $appEmulation;
$this->productRepositoryFactory = $productRepositoryFactory;
$this->imageHelperFactory = $imageHelperFactory;
}
// Adding Quantitites (product=>qty)
public function aroundGetJsonConfig(
\Magento\ConfigurableProduct\Block\Product\View\Type\Configurable $subject,
\Closure $proceed
)
{
$descriptions = [];
$shortdescriptions = [];
$barcodes = [];
$designers = [];
$p_colors = [];
$materials = [];
$washing_instructions = [];
$washing_tips = [];
$p_reviews = [];
$product_storys = [];
$environment_licences = [];
$config = $proceed();
$config = $this->jsonDecoder->decode($config);
foreach ($subject->getAllowProducts() as $product) {
$stockitem = $this->stockRegistry->getStockItem(
$product->getId(),
$product->getStore()->getWebsiteId()
);
$products = $this->productloader->create()->load($product->getId());
$collection = $this->_reviewCollection->create()
->addStatusFilter(
\Magento\Review\Model\Review::STATUS_APPROVED
)->addEntityFilter(
'product',
$product->getId()
)->setDateOrder();
$barcodes[$product->getId()] = $products->getBarcode();
$designers[$product->getId()] = $products->getAttributeText('designer');
$materials[$product->getId()] = $products->getAttributeText('material');
$p_colors[$product->getId()] = $products->getAttributeText('color_ek');
$washing_instructions[$product->getId()] = $products->getWashing_instruction_ek();
$washing_tips[$product->getId()] = $products->getWashing_tip_ek();
$environment_licences[$product->getId()] = $products->getEnvironmental_licenced();
$productImageAttr = null;
$productImage = null;
if($products->hasData('product_story_ek'))
{
$productImageAttr = $products->getCustomAttribute( 'product_story_ek' );
$productImage = $this->imageHelperFactory->init($products, 'product_story_ek')
->setImageFile($productImageAttr->getValue());
$product_storys[$product->getId()] = $productImage->getUrl();
}else {
$product_storys[$product->getId()] = null;
}
$shortdescriptions[$product->getId()] = $products->getShortDescription();
$descriptions[$product->getId()] = $products->getDescription();
}
$config['barcodes'] = $barcodes;
$config['designers'] = $designers;
$config['materials'] = $materials;
$config['p_colors'] = $p_colors;
$config['washing_instructions'] = $washing_instructions;
$config['washing_tips'] = $washing_tips;
$config['product_storys'] = $product_storys;
$config['shortdescriptions'] = $shortdescriptions;
$config['descriptions'] = $descriptions;
$config['environment_licences'] = $environment_licences;
return $this->jsonEncoder->encode($config);
}
}
?>You can see various Product attributes there.
And create this file here by Just copying/pasting the core swatch-renderer.js file in theme level.
\app\design\frontend\vendor\customTheme\Magento_Swatches\web\js\swatch-renderer.js
And please add some some extra codes like the below. In my case, its around line 768.
You can see console.log($widget.options.jsonConfig); in the below code. From that line, you can see extra codes.
// Foreach every attribute and check. If only one undefined (not selected) - nothing won't work
$('.swatch-attribute').each(function () {
var $element = $(this),
attrId = $element.attr('attribute-id'),
optionSelected = $element.attr('option-selected');
if(typeof optionSelected == "undefined"){
errorFlag = true;
return false;
} else {
selectedSwatch[attrId] = optionSelected;
errorFlag = false;
}
});
// Show descrption notification to user
if(errorFlag == false){
var allTheProducts = $widget.options.jsonConfig.index;
$.each(allTheProducts, function(index, value) {
if(isEquivalent(selectedSwatch, value)){
// Quantity of selected simple product by ID
//console.log($widget.options.jsonConfig);
var shortdescriptions = $widget.options.jsonConfig.shortdescriptions[index];
var descriptions = $widget.options.jsonConfig.descriptions[index];
var barcodes = $widget.options.jsonConfig.barcodes[index];
var designers = $widget.options.jsonConfig.designers[index];
var materials = $widget.options.jsonConfig.materials[index];
var p_colors = $widget.options.jsonConfig.p_colors[index];
var product_story_url = $widget.options.jsonConfig.product_storys[index];
var washing_instructions = $widget.options.jsonConfig.washing_instructions[index];
var washing_tips = $widget.options.jsonConfig.washing_tips[index];
var environment_licences = $widget.options.jsonConfig.environment_licences[index];
console.log('Simple product ID: '+index+', descriptions: '+shortdescriptions);
console.log('Simple product ID: '+index+', descriptions: '+descriptions);
console.log('Simple product ID: '+index+', barcodes: '+barcodes);
console.log('Simple product ID: '+index+', designers: '+designers);
console.log('Simple product ID: '+index+', materials: '+materials);
console.log('Simple product ID: '+index+', p_colors: '+p_colors);
console.log('Simple product ID: '+index+', product_story: '+product_story_url);
console.log('Simple product ID: '+index+', washing_instructions: '+washing_instructions);
console.log('Simple product ID: '+index+', washing_tips: '+washing_tips);
console.log('Simple product ID: '+index+', environment_licences: '+environment_licences);
$('#product-attribute-specs-table').empty();
$('#washing-tab').empty();
$('#product-gallery').empty();
$('#product-attribute-specs-table').first().prepend("<caption class='table-caption'>More Information</caption>");
$('#product-attribute-specs-table').append("<tr><th class='col label' scope='row'>Barcode</th>" +
"<td class='col data' data-th='Barcode'>" + barcodes + "</td></tr>" +
"<tr><th class='col label' scope='row'>Material</th>" +
"<td class='col data' data-th='Material'>" + materials + "</td></tr>" +
"<tr><th class='col label' scope='row'>Designer</th>" +
"<td class='col data' data-th='Designer'>" + designers + "</td></tr>" +
"<tr><th class='col label' scope='row'>Color</th>" +
"<td class='col data' data-th='Color'>" + p_colors + "</td></tr>");
$('#washing-tab').append($('<p>').text(washing_instructions));
$('#washing-tab').append($('<p>').text(washing_tips));
$('#product-gallery').append("<div class='loader'><img id='tab_product_story_img' src=" + product_story_url+ " /></div>");
if(environment_licences == 1){
$('.gots-brand-container').css("visibility","visible")
}else $('.gots-brand-container').css("visibility","hidden");
$('#product_description').html(shortdescriptions);
$('#description').html(descriptions);
}
});
} else {
$('#product-attribute-specs-table').html("");
$('#product_description').html("");
$('#description').html("");
}
$widget._Rebuild();
if ($widget.element.parents($widget.options.selectorProduct)
.find(this.options.selectorProductPrice).is(':data(mage-priceBox)')
) {
$widget._UpdatePrice();
}After that, please remove cache and deploy static files again.
If you solve your problem, please click Kudos.
All the best.
John.
