Hello magento friends todays in this blog post im share with you to How to Change Configurable Product Description Dynamically Based on Swatches in magento2. In Magento 2, you can change the configurable product description dynamically based on swatches by using JavaScript and AJAX to update the product details when a different swatch option is selected. Here's a general outline of the steps to achieve this:
Create configurable products with associated simple products and set up swatches for the attributes you want to display.
Configure the configurable product attributes and their corresponding options. Create a JavaScript function that listens for swatch selection changes and fetches the product details dynamically via AJAX.
Create a controller in Magento 2 to handle the AJAX request and return the updated product details.
Let's go through each step in detail:
➤ Step 1: Create Configurable Products with Swatches:-
- Create a configurable product in Magento 2.
- Assign the simple products to the configurable product and configure their attributes and values.
- Set up swatches for the configurable attributes you want to use for dynamic changes.
➤ Step 2: Configure the Configurable Product Attributes:-
- Go to Stores > Attributes > Product and edit the attributes you want to use as swatches.
- Set "Catalog Input Type for Store Owner" to "Visual Swatch" or "Text Swatch."
- Configure the attribute options with appropriate labels and images if you're using visual swatches.
➤ Step 3: Create a JavaScript Function:-
Create a JavaScript file (e.g., swatch_handler.js) in your theme or module.
Add a function to handle swatch selection changes and make an AJAX call to fetch the updated product details. For example:
.png "How to Change Configurable Product Description Dynamically Based on Swatches in magento2 - magento source24")
require(['jquery'], function($) {
$(document).ready(function() {
$('.swatch-opt').on('click', function() {
// Get the selected swatch option value
var selectedOptionValue = $(this).attr('option-selected-value');
// Make an AJAX call to fetch the product details dynamically
$.ajax({
url: '/your_module_name/index/getproductdetails',
type: 'POST',
dataType: 'json',
data: {option_value: selectedOptionValue},
success: function(response) {
// Update the product description and other details on the product page
$('#product-description').html(response.description);
// ... other product details
},
error: function(xhr, status, error) {
// Handle the error
}
});
});
});
});
➤ Step 4: Create a Controller:-
Create a controller to handle the AJAX request and return the updated product details. For example:
.png "How to Change Configurable Product Description Dynamically Based on Swatches in magento2 - magento source24")
// File: Your_Module_Name/Controller/Index/GetProductDetails.php
namespace Your\Module\Name\Controller\Index;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\Controller\Result\JsonFactory;
use Magento\Catalog\Model\ProductFactory;
class GetProductDetails extends Action
{
protected $jsonFactory;
protected $productFactory;
public function __construct(
Context $context,
JsonFactory $jsonFactory,
ProductFactory $productFactory
) {
$this->jsonFactory = $jsonFactory;
$this->productFactory = $productFactory;
parent::__construct($context);
}
public function execute()
{
$response = [];
$optionValue = $this->getRequest()->getPost('option_value');
// Fetch the product details based on the selected swatch option
$product = $this->productFactory->create()->loadByAttribute('custom_attribute', $optionValue);
if ($product) {
$response['description'] = $product->getDescription();
// ... other product details you want to update dynamically
}
$result = $this->jsonFactory->create();
return $result->setData($response);
}
}
Please note that the above code is just a basic example to illustrate the process. You might need to modify it to fit your specific requirements and ensure it follows best practices.
Remember to replace Your_Module_Name with the actual name of your custom module. Additionally, the AJAX URL (/your_module_name/index/getproductdetails) should match your module's routing configuration.
Once you have implemented the above steps, the configurable product description will be updated dynamically based on the selected swatch option on the product page.