Drop down attributes on category views (list)

[srmobile]

I'm going crazy here trying to find a way to do this. I essentially have several attributes that have over 10 options, what I'd like to do is turn these attributes into drop down options.

Example attribute "Manufacturer" has 20 possible options, instead of displaying all the manufacturers, just show "Manufacturer" with a drop down box that will then reveal the 20 options.

Thanks!

SR

[MrKhoa99]

Hello,

You try these code lines in product listing page:

<?php
//$selectedvalue = $_product->getAttributeText('color');
$atributeCode = 'color';
$html = '<select>';
$attribute = Mage::getModel('eav/config')->getAttribute('catalog_product',$atributeCode);
$options = $attribute->getSource()->getAllOptions();
foreach($options as $key => $value){


$html .= '<option value="' . $value['value']. '">' .$value['label']. '</option>';
//print_r($value);
}
$html .="</select>";
?>
<?php echo "$html"; ?>

A Brief Description:

-The most interesting thing is:

$attribute = Mage::getModel('eav/config')->getAttribute('catalog_product',$atributeCode);
$options = $attribute->getSource()->getAllOptions();

=> Get all options of our attribute.

[srmobile]

Okay so that didnt work in my list.phtml but worked in

/app/design/frontend/base/default/template/catalog/layer

filter.phtml

But it affected all attributes and messed it up:

Thoughts?

[MrKhoa99]

Hello,

You can post some code lines in list.phtml file? If you test my code lines with rwd theme Magento. It will work ok! I test on rwd theme Magento 1.9.2.2.

[srmobile]

Ah okay, I'm using the Infortis Ultimo theme, but the layered navigation is using the base files so it should work.

here it the filter.phtml

<ol>
<?php foreach ($this->getItems() as $_item): ?>
    <li>
        <?php if ($_item->getCount() > 0): ?>
        <a href="<?php echo $this->urlEscape($_item->getUrl()) ?>"><?php echo $_item->getLabel() ?></a>
        <?php else: echo $_item->getLabel() ?>
        <?php endif; ?>
        <?php if ($this->shouldDisplayProductCount()): ?>
        (<?php echo $_item->getCount() ?>)
        <?php endif; ?>
    </li>
	
	<?php
//$selectedvalue = $_product->getAttributeText('color');
$atributeCode = 'color';
$html = '<select>';
$attribute = Mage::getModel('eav/config')->getAttribute('catalog_product',$atributeCode);
$options = $attribute->getSource()->getAllOptions();
foreach($options as $key => $value){


$html .= '<option value="' . $value['value']. '">' .$value['label']. '</option>';
//print_r($value);
}
$html .="</select>";
?>
<?php echo "$html"; ?>
<?php endforeach ?>
</ol>

Thank you!

[MrKhoa99]

Hello,

Actually, you want to create dropdown attribute in filter or category view template? If you want to show in category view, please find list.html template and post some code lines here. You can enable Template Path hints: http://help.sweettoothrewards.com/article/434-how-do-i-turn-on-template-path-hints. That helps you find your category view template easier.

[srmobile]

Here is the list.phtml

<?php
    $_productCollection=$this->getLoadedProductCollection();
    $_collectionSize = $_productCollection->count();
?>

<?php if ($_collectionSize && $tmpHtml = $this->getChildHtml('block_category_above_collection')): ?>
    <div class="block_category_above_collection std"><?php echo $tmpHtml; ?></div>
<?php endif; ?>

<?php if(!$_collectionSize): ?>
    <?php if ($tmpHtml = $this->getChildHtml('block_category_above_empty_collection')): ?>
        <div class="block_category_above_empty_collection std"><?php echo $tmpHtml; ?></div>
    <?php else: ?>
        <p class="note-msg empty-catalog"><?php echo $this->__('There are no products matching the selection.') ?></p>
    <?php endif; ?>
<?php else: ?>

<?php
    $_helper = $this->helper('catalog/output');
    $theme = $this->helper('ultimo');
    $helpLabels = $this->helper('ultimo/labels');
    $helpTemplate = $this->helper('ultimo/template');
    $helpImg = $this->helper('infortis/image');

    //Default image size
    $imgWidth = 295;
    $imgHeight = 295;

    //Aspect ratio settings
    if ($theme->getCfg('category/aspect_ratio'))
        $imgHeight = 0; //Height will be computed automatically (based on width) to keep the aspect ratio

    //Hide toolbar
    $hideToolbar = false;
    if ($this->getHideToolbar())
    {
        $hideToolbar = true;
    }
?>

<div class="category-products">
    <?php if (!$hideToolbar): ?>
        <?php echo $this->getToolbarHtml() ?>
    <?php endif; ?>
    <?php if($this->getMode()!='grid'): //List mode ?>

    <?php
        //Get list configuration array
        $lc = $theme->getCfgGroup('category_list');

        //List classes
        $listClasses = '';
        if ($lc['hover_effect'])
            $listClasses = ' hover-effect';


    ?>

    <?php $_iterator = 0; ?>
    <ul class="products-list<?php if($listClasses) echo $listClasses; ?>" id="products-list">
    <?php foreach ($_productCollection as $_product): ?>
        <li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>">

            <?php //Product Image ?>
            <div class="product-image-wrapper grid12-4 mobile-grid-half">
                <div class="prolabel-wrapper" style="float: none !important;">
                    <?php echo Mage::helper('prolabels')->getLabel($_product, 'category'); ?>
                    <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image" style="max-width:<?php echo $imgWidth; ?>px;">
                        <img src="<?php echo $helpImg->getImg($_product, $imgWidth, $imgHeight, 'small_image'); ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />

                        <?php if ($theme->getCfg('category/alt_image')): ?>
                            <?php echo $theme->getAltImgHtml($_product, $imgWidth, $imgHeight); ?>
                        <?php endif; ?>

                        <?php echo $helpLabels->getLabels($_product); //Product labels ?>
                    </a>
                </div>
            </div> <!-- end: product-image-wrapper -->

            <?php //Product description ?>
            <div class="product-shop grid12-5 mobile-grid-half">
                <div class="product-shop-inner">
                    <?php $_productNameStripped = $this->stripTags($_product->getName(), null, true); ?>
                    <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped; ?>"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></a></h2>
                    <?php if($_product->getRatingSummary()): ?>
                        <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                    <?php endif; ?>

                    <div class="desc std">
                        <?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
                        <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped ?>" class="link-learn"><?php echo $this->__('Learn More') ?></a>
                    </div>
                </div>
            </div>

            <div class="right-column grid12-3 mobile-grid-half">
                <?php echo $this->getPriceHtml($_product, true) ?>
                <?php if($_product->isSaleable()): ?>
                    <p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
                <?php else: ?>
                    <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                <?php endif; ?>

                <?php
                if ($lc['addtolinks_simple'])
                    echo $helpTemplate->getCategoryAddtoLinks($_product, $this->getAddToCompareUrl($_product), 'addto-gaps-right');
                else
                    echo $helpTemplate->getCategoryAddtoLinksComplex($_product, $this->getAddToCompareUrl($_product), 'addto-gaps-right');
                ?>
            </div>

        </li>
    <?php endforeach; ?>
    </ul>
    <script type="text/javascript">decorateList('products-list', 'none-recursive')</script>

    <?php else: //Grid mode ?>

    <?php
        //Get grid configuration array
        $gc = $theme->getCfgGroup('category_grid');

        //Get number of columns (from parameter or from theme config)
        $columnCount = 3;
        if ($this->getGridColumnCount())
        {
            $columnCount = $this->getGridColumnCount();
        }
        else
        {
            $columnCount = $gc['column_count'];
        }

        //Grid classes
        $gridClasses = '';
        $productNameClasses = '';
        if ($gc['display_name'] == 2 && $gc['display_name_single_line'] == true)
            $gridClasses .= ' single-line-name';
        if ($gc['display_name'] == 1)
            $productNameClasses .= ' display-onhover';
        if ($gc['centered'])
            $gridClasses .= ' centered';
        if ($gc['hover_effect'])
            $gridClasses .= ' hover-effect';
        if ($gc['equal_height'])
            $gridClasses .= ' equal-height';

        //Size of grid elements
        if ($gc['elements_size'])
        {
            $gridClasses .= ' size-' . $gc['elements_size'];
        }
        else
        {
            //Calculate size based on number of columns
            if ($columnCount >= 6)
            {
                $gridClasses .= ' size-xs';
            }
            elseif ($columnCount >= 4)
            {
                $gridClasses .= ' size-s';
            }
        }

        //Container "actions" at the bottom of the grid item stores button and add-to links
        //If at least one of those elements was set as "Display on hover" but no element was set as "Display":
        //apply appropriate classes to the container.
        $actionsClasses = '';
        if ($gc['display_addtocart'] == 1 || ($gc['display_addtolinks'] == 1 && !$gc['addtolinks_simple']))
        {
            $actionsClasses = ' display-onhover';
        }
        if ($gc['display_addtocart'] == 2 || ($gc['display_addtolinks'] == 2 && !$gc['addtolinks_simple']))
        {
            $actionsClasses = '';
        }
    ?>

    <ul class="products-grid category-products-grid itemgrid itemgrid-adaptive itemgrid-<?php echo $columnCount; ?>col<?php if($gridClasses) echo $gridClasses; ?>">
        <?php foreach ($_productCollection as $_product): ?>
            <li class="item">

                <div class="product-image-wrapper" style="max-width:<?php echo $imgWidth; ?>px;">
                    <div class="prolabel-wrapper">
                    <?php echo Mage::helper('prolabels')->getLabel($_product, 'category'); ?>
                        <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true); ?>" class="product-image">
                            <img src="<?php echo $helpImg->getImg($_product, $imgWidth, $imgHeight, 'small_image'); ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true); ?>" />

                            <?php if ($theme->getCfg('category/alt_image')): ?>
                                <?php echo $theme->getAltImgHtml($_product, $imgWidth, $imgHeight); ?>
                            <?php endif; ?>

                            <?php echo $helpLabels->getLabels($_product); //Product labels ?>
                        </a>
                    </div>

                    <?php //Add-to links
                        if ($gc['display_addtolinks'] != 0 && $gc['addtolinks_simple'])
                        {
                            if ($gc['display_addtolinks'] == 1) //Display on hover
                                echo $helpTemplate->getCategoryAddtoLinksIcons($_product, $this->getAddToCompareUrl($_product), 'addto-links-icons addto-onimage display-onhover');
                            else //Always display
                                echo $helpTemplate->getCategoryAddtoLinksIcons($_product, $this->getAddToCompareUrl($_product), 'addto-links-icons addto-onimage');
                        }
                    ?>

                </div> <!-- end: product-image-wrapper -->

                <?php if ($gc['display_name'] != 0): ?>
                    <h2 class="product-name<?php echo $productNameClasses; ?>"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h2>
                <?php endif; ?>

                <?php if ($_product->getRatingSummary()): ?>
                    <?php if ($gc['display_rating'] == 1): //Display on hover ?>
                        <div class="display-onhover ratings-wrapper"><?php echo $this->getReviewsSummaryHtml($_product, 'short') ?></div>
                    <?php elseif ($gc['display_rating'] == 2): //Always display ?>
                        <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
                    <?php endif; ?>
                <?php endif; ?>

                <?php if ($gc['display_price'] == 1): //Display on hover ?>
                    <div class="display-onhover"><?php echo $this->getPriceHtml($_product, true); ?></div>
                <?php elseif ($gc['display_price'] == 2): //Always display ?>
                    <?php echo $this->getPriceHtml($_product, true); ?>
                <?php endif; ?>

                <?php
                    //If at least one element was set as "Display on hover" but no element was set as "Display":
                    //aggregate classes from those elements and apply them to the "actions" container.
                    $actionsClasses = '';
                    if ($gc['display_addtocart'] == 1 || ($gc['display_addtolinks'] == 1 && !$gc['addtolinks_simple']))
                    {
                        $actionsClasses = ' display-onhover';
                    }
                    if ($gc['display_addtocart'] == 2 || ($gc['display_addtolinks'] == 2 && !$gc['addtolinks_simple']))
                    {
                        $actionsClasses = '';
                    }
                ?>

                <div class="actions clearer<?php echo $actionsClasses; ?>">
                    <?php //Cart button ?>
                    <?php if ($gc['display_addtocart'] != 0): ?>
                        <?php if ($_product->isSaleable()): ?>
                            <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                        <?php else: ?>
                            <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                        <?php endif; ?>
                    <?php endif; ?>

                    <?php //Add-to links
                        if ($gc['display_addtolinks'] != 0 && !$gc['addtolinks_simple'])
                        {
                            echo $helpTemplate->getCategoryAddtoLinks($_product, $this->getAddToCompareUrl($_product), 'addto-gaps-right');
                        }
                    ?>
                </div> <!-- end: actions -->
            </li>
        <?php endforeach; ?>
    </ul>
    <?php endif; //end: if grid mode ?>

    <?php if (!$hideToolbar): ?>
        <div class="toolbar-bottom">
            <?php echo $this->getToolbarHtml() ?>
        </div>
    <?php endif; ?>
</div>
<?php endif; ?>

<?php if ($_collectionSize && $tmpHtml = $this->getChildHtml('block_category_below_collection')): ?>
    <div class="block_category_below_collection std"><?php echo $tmpHtml; ?></div>
<?php endif; ?>

Thank you!

SR

[MrKhoa99]

Hello,

You can add my code lines inside the foreach product collection:

......

<?php foreach ($_productCollection as $_product): ?>
            <li class="item">


             ......
           //You add my code lines here
            ......
          

          </li>
<?php endforeach; ?>
......

[srmobile]

I tried in that location and nothing changes - I put it lower and then the drop downs show up with the products.

[MrKhoa99]

Hello,

You should check Css Style.