Magento News

 

Add options select to magento product list page

This tutorial will show you how to modify product list page, show up attribute/options select, then user can add product to cart from product listYou need to edit your list.phtml file located at:

app/design/frontend/default/{your-theme}/template/catalog/product/list.phtml

find this line(s):

<?php if($_product->isSaleable()): ?>

and below it replace this code:

<button type="button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('Add to Cart') ?></span></button>

with this:

<form action="<?php echo Mage::getBaseUrl(); ?>checkout/cart/add/” method="post" style="display:block; clear:both;">

<?php

$product = Mage::getModel('catalog/product');
$product->load($_product->getId());

$xml = "";
$hasAtts = 0;

// configurable products
$productType = $product->getTypeId();

if($productType == "configurable") {

// configurable products
$attValConfig = $product->getTypeInstance()->getConfigurableAttributesAsArray();

if(sizeof($attValConfig)) {

$hasAtts++;

foreach($attValConfig as $attValConfigSingle) {

$xml .= $attValConfigSingle['frontend_label'].": ";

$xml .= "<select style='display:block; clear:both; margin-bottom:10px;' name='super_attribute[".$attValConfigSingle['attribute_id']."]'>";

foreach($attValConfigSingle['values'] as $attValConfigSingleVal) {
$xml .= "<option value='".$attValConfigSingleVal['value_index']."'>".$attValConfigSingleVal['label']."</option>";
}

$xml .= "</select>";

}

}

}
// end configurable products

$attVal = $product->getOptions();

if(sizeof($attVal)) {

$hasAtts++;

foreach($attVal as $optionVal) {

$xml .= $optionVal->getTitle().": ";

$xml .= "<select style='display:block; clear:both; margin-bottom:10px;' name='options[".$optionVal->getId()."]'>";

foreach($optionVal->getValues() as $valuesKey => $valuesVal) {
$xml .= "<option value='".$valuesVal->getId()."'>".$valuesVal->getTitle()."</option>";
}

$xml .= "</select>";

}

}

$xml .= "qty: <input style='display:block; clear:both; margin-bottom:20px;' id='qty' class='input-text qty' type='text' value='' maxlength='12' name='qty'/>";

echo($xml);

?>

<input type="hidden" name="product" value="<?php echo($_product->getId()); ?>" />
<button type="submit"><span><?php echo $this->__('Add to Cart') ?></span></button>

</form>

And final result:

options select show on magento list products

final result

Add options select to magento product list page

Possibly Related Posts:


 

Leave a Reply