I want to change text-swatch to dropdown in category page.
I want here drop down instead swatch
Magento – Magento2 Add dropdown option in product listing page for configurable product
category-productsconfigurable-productdropdown-attributemagento2product-list
Related Solutions
$fieldset->addField('cadmin', 'select', array(
'name' => 'cadmin',
'label' => 'Corporate Admin',
'id' => 'cadmin',
'title' => 'Corporate Admin',
'required' => false,
'values' => Mage::getModel('customer/group')->getCollection()->toOptionHash()
));
If it doesn't work with Mage::getModel('customer/group')->getCollection()->toOptionHash()
try with Mage::getModel('customer/group')->getCollection()->toOptionArray()
You can follow below code for swatches:
app/design/frontend/rwd/my_theme/template/configurableswatches/catalog/product/view/type/options/configurable/swatches.phtml
<?php
$_product = $this->getProduct();
$_attribute = $this->getAttributeObj();
$_jsonConfig = $this->getJsonConfig();
$_config = json_decode($_jsonConfig);
$_swatchInnerWidth = $this->getSwatchInnerWidth();
$_swatchInnerHeight = $this->getSwatchInnerHeight();
$_swatchOuterWidth = $this->getSwatchOuterWidth();
$_swatchOuterHeight = $this->getSwatchOuterHeight();
$_attr = $_attribute->getProductAttribute();
$_attrCode = $_attr->getAttributeCode();
$_id = $_attribute->getAttributeId();
$_swatchArray = $_config->attributes->$_id;
?>
<dt class="swatch-attr abc">
<label id="<?php echo $_attrCode ?>_label" class="required">
<?php echo $_attribute->getLabel() ?>:<em>*</em>
</label>
</dt>
<dd class="clearfix swatch-attr bc <?php if ($_attribute->decoratedIsLast) echo ' last'; ?>">
<div class="input-box">
<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select no-display swatch-select">
<option><?php echo $this->__('Choose an Option...') ?></option>
</select>
<ul id="configurable_swatch_<?php echo $_attrCode ?>" class="configurable-swatch-list clearfix">
<?php foreach ($_swatchArray->options as $_option): ?>
<?php
$_optionCode = Mage::helper('configurableswatches')->getHyphenatedString($_option->label);
$_swatchUrl = Mage::helper('configurableswatches/productimg')->getSwatchUrl($_product, $_option->label, $_swatchInnerWidth, $_swatchInnerHeight, $_swatchType);
$_hasImage = !empty($_swatchUrl);
$_liClass = '';
$_aClass = 'swatch-link swatch-link-' . $_attribute->getAttributeId();
if ($_hasImage) {
$_liClass .= $_swatchType == 'media' ? ' is-media' : '';
$_aClass .= ' has-image';
} elseif (strlen($_option->label) > 3) {
$_liClass .= ' wide-swatch';
}
?>
<li class="option-<?php echo $_optionCode; ?><?php echo $_liClass; ?>" id="option<?php echo $_option->id; ?>">
<a onclick="return changeSku(<?php echo $_attribute->getAttributeId() ?>, this, <?php echo $_option->id; ?>);" href="javascript:void(0)" name="<?php echo $_optionCode; ?>" id="swatch<?php echo $_option->id; ?>" class="<?php echo $_aClass ?>" title="<?php echo $_option->label; ?>"
style="height: <?php echo $_swatchOuterHeight ?>px; <?php if (!$_hasImage): ?>min-<?php endif; ?>width: <?php echo $_swatchOuterWidth ?>px;">
<span class="swatch-label" style="height: <?php echo $_swatchInnerHeight ?>px; <?php if (!$_hasImage): ?>min-<?php endif; ?>width: <?php echo $_swatchInnerWidth ?>px; line-height: <?php echo $_swatchInnerHeight ?>px;">
<?php if ($_hasImage): ?>
<img src="<?php echo $_swatchUrl; ?>" alt="<?php echo $_option->label; ?>" width="<?php echo $_swatchInnerWidth ?>" height="<?php echo $_swatchInnerHeight ?>" />
<?php else: ?>
<?php echo $_option->label; ?>
<?php endif; ?>
</span>
<span class="x">X</span>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
</dd>
<div id="sku-container"></div>
<?php
$conf = Mage::getModel('catalog/product_type_configurable')->setProduct($_product);
$col = $conf->getUsedProductCollection()->addAttributeToSelect('*')->addFilterByRequiredOptions();
$productMap = array();
$atLable = array();
$unitLabel = '';
foreach($col as $simpleProduct){
$productMap[$simpleProduct->getId()] = $simpleProduct->getSku();
} ?>
<script type="text/javascript">
function changeSku(confAttributeId, sel, pid) {
var productMap = <?php echo Mage::helper('core')->jsonEncode($productMap);?>;
var selectedAttributeId = pid;
if (selectedAttributeId) {
var options = spConfig.config.attributes[confAttributeId].options;
var productId = options.find(function (option) {return option.id == selectedAttributeId}).products[0]
$("sku-container").update("<strong>Product Id: </strong>" + productMap[productId]);
} else {
$("sku-container").update("<strong>Product Id: </strong> Select an option to display Product Id");
}
}
</script>
Best Answer
Overwrite below mentioned file in your Theme,
vendor/magento/module-swatches/view/frontend/templates/product/listing/renderer.phtml