Custom product attribute multiple selection - display on frontend as a list

[Andy_Acute]

Hi all

I have a custom product attribute that is a multiple selection type.

The values of this attribute currently display on the product page as a string values separated by a comma (,).

How would I display the values as a list of individual values so that I can use css to display as an unordered list?

The template code is currently:

<?php
$_helper = $this->helper('Magento\Catalog\Helper\Output');
$_product = $block->getProduct();
$_code = $block->getAtCode();
$_className = $block->getCssClass();
$_attributeLabel = $block->getAtLabel();
$_attributeType = $block->getAtType();
$_attributeAddAttribute = $block->getAddAttribute();
if ($_attributeLabel && $_attributeLabel == 'default') {
$_attributeLabel = $_product->getResource()->getAttribute($_code)->getFrontendLabel();
}
$_attributeValue =$_product->getResource()->getAttribute($_code)->getFrontend()->getValue($_product);
?>
<?php if ($_attributeValue): ?>
<div>
<?php if ($_attributeLabel != 'none'): ?><strong class="type"><?php echo $_attributeLabel?></strong><?php endif; ?>
<div class="product-attribute product-attribute--key-features">
	<ul calss=product-attribute__list>		
		<li class="product-attribute__item>"> 
			<span><?php echo $_attributeAddAttribute;?><?php echo $_attributeValue; ?></span>
		</li>		
	</ul>	
</div>
</div>
<?php endif; ?>

Thank you

Andy

[Rahul Gupta]

Hi @Andy_Acute 

Can you please check once in the database how the value of this attribute is stored because if it is stored in the form of JSON then you can just convert the JSON into an array and then use your logic to show it in an unordered list?

Thank you.

[Andy_Acute]

Hi Rahul

Thank you for your reply.

The value is stored in the database table 'eav_attribute_option_value ' as a varchar(255) type.

These values display on the product page as comma separated (example):

15mA/200mA Continuity Testing, >1000V Insulation Testing, Manufacturers Calibration Certificate, Megger Confidence Meter, Earth Testing, Auto RCD, Non Trip Loop Testing

I want to display each value like this:

5mA/200mA Continuity Testing
>1000V Insulation Testing
Manufacturers Calibration Certificate
Megger Confidence Meter
Earth Testing
Auto RCD
Non Trip Loop Testing

Thank you

[Rahul Gupta · Accepted solution]

Hi @Andy_Acute 

Thanks for sharing the details.

Now please use the below code to achieve the requirement.

Let's suppose you're getting your value in $str as 15mA/200mA Continuity Testing, >1000V Insulation Testing, Manufacturers Calibration Certificate, Megger Confidence Meter, Earth Testing, Auto RCD, Non Trip Loop Testing.

Then you can convert this in array using below code.

$arr = explode(",",$str); 

Then apply foreach on this array. Let me know in case you face any issues.

Thank you.

[Andy_Acute]

Hi Rahul

That worked perfectly - thank you.

I now have a list of values displaying correctly :-)

I'm scratching my head over another issue now.

Each product uses one of several attribute sets and each of those sets include one of several 'key-feature' attributes (multiple selection).

The old code from Magento 1 looks like:

local.xml

<block type="catalog/product_view" name="product.info.key_features" as="product_info_key_features" template="catalog/product/view/key-features.phtml" />

key-features.phtml

<?php /* @var Mage_Catalog_Block_Product_View $this */ ?>

<?php
/** @var Mage_Catalog_Model_Product $_product */
/** @var Mage_Eav_Model_Entity_Attribute_Set $attributeSet */
/** @var array $attributes */
$_product       = $this->getProduct();
$attributeSetId = $_product->getAttributeSetId();
$attributeSet   = Mage::getModel('eav/entity_attribute_set')->load($attributeSetId);
$attributes     = Mage::getModel('catalog/product_attribute_api')->items($attributeSetId);
$limit          = (is_null($this->getData('limit')) ? 999 : $this->getData('limit'));
?>

<?php foreach ($attributes as $attribute) : ?>
    <?php /** @var array $attribute */ ?>
    <?php $attribute_code = $attribute['code']; ?>
    
    <?php if ($_product->getResource()->getAttribute($attribute_code)->getStoreLabel() == 'Key Features') : ?>
        <?php
        $key_features = $_product->getAttributeText($attribute_code);
        
        if (!empty($key_features) && !is_array($key_features)) {
            $key_features = array($key_features);
        }
        ?>
        
        <?php if (!empty($key_features) && count($key_features) > 0) : ?>
            <?php $key_features = array_slice($key_features, 0, $limit); ?>

            <div class="product-attribute product-attribute--key-features">
                <ul class="product-attribute__list">
                    <?php foreach ($key_features as $key_feature) : ?>
                        <li class="product-attribute__item">
                            <span class="product-attribute__text">
                                <?php echo $key_feature; ?>
                            </span>
                        </li>
                    <?php endforeach; // $key_features as $key_feature ?>
                </ul>
            </div>
            
            <?php break; ?>
        <?php endif; // is_array($key_features) s?>
    <?php endif; // $_product->getResource()->getAttribute($attribute_code)->getStoreLabel() == 'Key Features' ?>
<?php endforeach; // $attributes as $attribute ?>

Magento 2 code - catalog_product_view.xml

<block class="Magento\Catalog\Block\Product\View" name="product.attribute.multifunction_17th_ed" template="product/view/key-features.phtml">
<arguments> 
<argument name="at_call" xsi:type="string">getmultifunction_17th_ed</argument>
<argument name="at_code" xsi:type="string">multifunction_17th_ed</argument>
<argument name="at_label" xsi:type="string">Multifunction 17th Ed</argument>
<argument name="css_class" xsi:type="string">multifunction_17th_ed</argument> 
</arguments>
</block>

You can see I have used hard code for the attribute options. I need it to be dynamic like the old Magento 1 code. Do you know how I should do this?

Magento 2 code - key-features.phtml

<?php
$_helper = $this->helper('Magento\Catalog\Helper\Output');
$_product = $block->getProduct();
$_code = $block->getAtCode();
$_className = $block->getCssClass();
$_attributeLabel = $block->getAtLabel();
$_attributeType = $block->getAtType();
$_attributeAddAttribute = $block->getAddAttribute();
if ($_attributeLabel && $_attributeLabel == 'default') {
$_attributeLabel = $_product->getResource()->getAttribute($_code)->getFrontendLabel();
}
$_attributeValue =$_product->getResource()->getAttribute($_code)->getFrontend()->getValue($_product);
$_attributeValue = explode(",",$_attributeValue);
?>
<?php if ($_attributeValue): ?>
<div>
<?php if ($_attributeLabel != 'none'): ?><strong class="type"><?php echo $_attributeLabel?></strong><?php endif; ?>
<div class="product-attribute-keyfeatures">
	<ul class="product-attribute__list">
		<?php foreach ($_attributeValue as $_attributeValuesep): ?>
		<li class="product-attribute__item"> 
			<span><?php echo $_attributeAddAttribute;?><?php echo $_attributeValuesep; ?></span>
		</li>
		<? endforeach; ?>
	</ul>		
</div>
</div>
<?php endif; ?>

Thanks again for your help

Andy