Desperately need Help with a task for a test in Magento 1.9.3

Question

So guys, I'm doing this task for something very important to me but now I'm completely stuck.

I need to fulfill this task:

Create a module to output a nice list of the products that have a value in the position field. The list should be sorted according to the value in the position field, lowest number shows first. The list should contain the product name and a picture of the product. When you click on the product name or picture you should get to the product detail view. Then Add a button somewhere on the page that reverses the sort order when you click it.

So, to sum up, I have 5 products with a custom attribute(this is a textfield and the code is position_new), 3 of the products have values in this field(1,2,3) and 2 don't. I need to display only the products which have value in this field, then sort the products by the values in this field(position_new).

So far I've managed to create a similiar module that displays the products that contain value in the custom attribute, in this case color, but I can't sort the list of products and create the button. It's been two days only researching this but so far I found nothing helpful and I'm running against time.

This is my code, and if someone can help me with this will have my forever gratitude and will completely change my life, so please please anyone.

app/etc/modules/Atwix_Cmsattr.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Atwix_Cmsattr>
            <active>true</active>
            <codePool>local</codePool>
        </Atwix_Cmsattr>
    </modules>
</config>

app/code/local/Atwix/Cmsattr/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Atwix_Cmsattr>
            <version>0.1.0</version>
        </Atwix_Cmsattr>
    </modules>
    <global>
        <blocks>
            <atwix_cmsattr>
                <class>Atwix_Cmsattr_Block</class>
            </atwix_cmsattr>
        </blocks>
        <models>
            <atwix_cmsattr>
                <class>Atwix_Cmsattr_Model</class>
            </atwix_cmsattr>
        </models>
    </global>
</config>

app/code/local/Atwix/Cmsattr/Block/List.php

<?php
class Atwix_Cmsattr_Block_List extends Mage_Catalog_Block_Product_Abstract
{
    protected $_itemCollection = null;

    public function getItems()
    {
        $color = $this->getColor();
        if (!$color)
            return false;
        if (is_null($this->itemCollection)) {
            $this->_itemCollection = Mage::getModel('atwix_cmsattr/products')->getItemsCollection($color);
        }

        return $this->_itemCollection;
    }
}

app/code/local/Atwix/Cmsattr/Model/Products.php

<?php
class Atwix_Cmsattr_Model_Products extends Mage_Catalog_Model_Product
{
    public function getItemsCollection($valueId)
    {   
        $collection = $this->getCollection()->addAttributeToSelect('*')->addAttributeToFilter('color', array('eq' => $valueId));
        Mage::getSingleton('cataloginventory/stock')->addInStockFilterToCollection($collection);    
        return $collection;
    }
}

app/desing/frontend/rwd/default/template/atwix/cmsattr/list.phtml

<?php $_items = $this->getItems() ?>
<div class="block">
    <div class="block-title">
        <strong><span><?php echo $this->__('Red Products') ?></span></strong>
    </div>
    <div class="category-products">
        <ul class="products-grid products-grid--max-3-col first last odd">
        <?php foreach ($_items as $_item): ?>
            <li class="item last">
                <a href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_item->getName()) ?>" class="product-image">
                    <img src="<?php echo $this->helper('catalog/image')->init($_item, 'small_image')->resize(210) ?>" alt="<?php echo $this->htmlEscape($_item->getName()) ?>" />
                </a>
                <div class="product-info" style="padding-bottom: 88px; min-height: 151px;">
                    <h2 class="product-name"><a href="<?php echo $_item->getProductUrl() ?>"><?php echo $this->htmlEscape($_item->getName()) ?></a></h2>
                    <?php echo $this->getPriceHtml($_item, true) ?>
                </div>
            </li>
        <?php endforeach; ?>
        </ul>
    </div>
</div>

Current result output

Answer 1

This should solve your problem.

app/design/frontend/rwd/default/template/atwix/cmsattr/list.phtml:

You will need to add two new buttons so you can order ascending and descending.

These buttons are calling javascript functions on click which are sorting according to position_new.

<?php $_items = $this->getItems(); ?>

<div class="block">
    <div class="block-title">
        <strong><span><?php echo $this->__('Red Products') ?></span></strong>
    </div>
    <div class="category-products">
        <ul class="products-grid products-grid--max-3-col first last odd">
        <?php $count = 1; ?>
        <?php foreach ($_items as $_item): ?>

            <li class="item <?php if(count($_items) == $count) { echo " last"; } ?>">

                <input hidden type="number" value="<?php echo $_item->getData('position_new') ?>" />

                <a href="<?php echo $_item->getProductUrl() ?>" 
                   title="<?php echo $this->htmlEscape($_item->getName()) ?>" 
                   class="product-image">
                    <img src="<?php echo $this->helper('catalog/image')->init($_item, 'small_image')->resize(210) ?>" 
                         alt="<?php echo $this->htmlEscape($_item->getName()) ?>" />
                </a>
                <div class="product-info" style="padding-bottom: 88px; min-height: 151px;">
                    <h2 class="product-name">
                        <a href="<?php echo $_item->getProductUrl() ?>"><?php echo $this->htmlEscape($_item->getName()) ?></a>
                    </h2>
                    <?php echo $this->getPriceHtml($_item, true) ?>
                </div>
            </li>
            <?php $count++; ?>
        <?php endforeach; ?>
        </ul>
    </div>
</div>

<button class="button" onclick="sort('asc')">Sort Asc</button>
<button class="button" onclick="sort('desc')">Sort Desc</button>

<script type="text/javascript">

    function sort(sortOrder)
    {
        var list = jQuery(".category-products").children().closest("ul");

        sortUsingNestedValue(list, "li", "input", sortOrder);
    }

    function sortUsingNestedValue(parent, childSelector, keySelector, sortOrder) 
    {
        var items = parent.children(childSelector).sort(function(a, b) {
            var vA = jQuery(keySelector, a).val();
            var vB = jQuery(keySelector, b).val();

            if (sortOrder == "asc") {
                return ((vA < vB) ? -1 : (vA > vB) ? 1 : 0);
            } else if (sortOrder == "desc") {
                return ((vA > vB) ? -1 : (vA < vB) ? 1 : 0);
            }
        });
        parent.append(items);
    }

</script>

Tipp: You can get the attribute value in two ways.

1. $_item->getData('position_new');
2. $_item->getPositionNew();

---

I also had to change your Model.

app/code/local/Atwix/Cmsattr/Model/Products.php

<?php
class Atwix_Cmsattr_Model_Products extends Mage_Catalog_Model_Product
{
    public function getItemsCollection()
    {   
        $collection = Mage::getModel('catalog/product')
                ->getCollection()
                ->addAttributeToSelect('*')
                ->addAttributeToFilter('position_new', array('notnull' => true));

        Mage::getSingleton('cataloginventory/stock')->addInStockFilterToCollection($collection);

        return $collection;
    }
}

...and your Block Class.

app/code/local/Atwix/Cmsattr/Block/List.php

<?php
class Atwix_Cmsattr_Block_List extends Mage_Catalog_Block_Product_Abstract
{
    protected $_itemCollection = null;

    public function getItems()
    {        
        if (is_null($this->_itemCollection)) {
            $this->_itemCollection = Mage::getModel('atwix_cmsattr/products')->getItemsCollection("position_new");
        }

        return $this->_itemCollection;
    }
}

You can remove the attribute hidden in <input hidden type="number" value="<?php echo $_item->getData('position_new') ?>" /> at app/design/frontend/rwd/default/template/atwix/cmsattr/list.phtml and play with the values to see that it works.

Hint: I changed the values in the picture above.

Final Tip: You should always take time when writing your questions. Always include all necessary informations in your post. You started very well and provided all needed code. But then you started to bring in position_new which we helpers would need to know from start.