Hi there,
I'm building a new webshop... On the homepage i have displayed 2 categories with 9 products in total. On the homepage i have also the custom options displayed beneath the image from every product. Now i want the customer to select a product options and directly put it in the shopping cart.
I have all the code and styling ready but when i select an option and click put in shopping cart it goes to the detailpage of the product instead of putting it in the shopping cart.
This is the code:
<ul class="products-grid category-products-grid itemgrid itemgrid-adaptive itemgrid-2col<?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;">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true); ?>" class="product-image">
<img id="product-collection-image-<?php echo $_product->getId(); ?>"
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>
<?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
$productSku = $_product->getSku();
$product = Mage::getModel('catalog/product');
$productId = $product->getIdBySku( $productSku );
$product = Mage::getModel("catalog/product")->load($productId);
$attVal = $product->getOptions();
$optStr = "";
foreach($attVal as $optionKey => $optionVal) {
$optStr .= "<div class='homeCustomContainer'>";
foreach($optionVal->getValues() as $valuesKey => $valuesVal) {
$optStr .=
"<div class='homeCustomProdItems'><input type='radio' name='".$_product->getSku()."' id='".$_product->getSku()."-".$valuesVal->getTitle()."' class='radio'/><label for='".$_product->getSku()."-".$valuesVal->getTitle()."'>".$valuesVal->getTitle()."</label></div>"
;
}
$optStr .= "</div>";
}
echo($optStr );
?>
<?php
//Provides extra blocks on which to hang some features for products in the list
//Features providing UI elements targeting this block will display directly below the product name
//echo 'a: ' . $this->getChildHtml('name.after'); //TEST
//echo 'b: ' . $this->getChildHtml('reg2'); //TEST
if ($this->getChild('name.after')) {
$_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
foreach ($_nameAfterChildren as $_nameAfterChildName) {
$_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
$_nameAfterChild->setProduct($_product);
echo $_nameAfterChild->toHtml();
}
}
?>
<?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 if ($gc['display_addtocart'] != 0): //Cart button ?>
<?php if(!$_product->canConfigure() && $_product->isSaleable()): ?>
<button type="button" title="<?php echo Mage::helper('core')->quoteEscape($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 elseif($_product->getStockItem() && $_product->getStockItem()->getIsInStock()): ?>
<a title="<?php echo $this->__('View Details') ?>" class="button btn-cart" href="<?php echo $_product->getProductUrl() ?>"><?php echo $this->__('View Details') ?></a>
<?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>And the frontend:
As you can see, you can select an option and then put it in the shopping cart but the last step doesn't work 
Also i have to show the price of the custom option...
Kind regards,
Robert
Hi,
Thank you, the button URL works, but it seems magento doesn't recognize the radio button i select. After i select a option on the homepage (where the products are displayed with the custom options) and put it in the shopping cart, it goes to the detail page and says that i have to make a choice of custom option...
I didn't pasted the whole code i see, this is the whole page:
<?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');
//Image size
$imgWidth = intval($theme->getCfg('category/image_width'));
$imgHeight = $imgWidth;
//If image width is not specified, use default values
if ($imgWidth <= 0)
{
$imgWidth = 295;
$imgHeight = 295;
}
//Image aspect ratio settings
$keepAspectRatio = $theme->getCfg('category/aspect_ratio');
if ($keepAspectRatio)
{
$imgHeight = 0; //Height will be calculated automatically (based on width) to keep the aspect ratio
$catViewKeepFrame = FALSE;
}
else
{
$catViewKeepFrame = TRUE;
}
if (Mage::registry('catViewKeepFrame') === NULL)
{
Mage::register('catViewKeepFrame', $catViewKeepFrame);
}
//Hide toolbar
$hideToolbar = false;
if ($this->getHideToolbar())
{
$hideToolbar = true;
}
?>
<div class="category-products">
<?php if($this->getMode()!='grid'): //List mode ?>
<?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">
<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 id="product-collection-image-<?php echo $_product->getId(); ?>"
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> <!-- 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; ?>
<?php
//Provides extra blocks on which to hang some features for products in the list
//Features providing UI elements targeting this block will display directly below the product name
if ($this->getChild('name.after')) {
$_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
foreach ($_nameAfterChildren as $_nameAfterChildName) {
$_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
$_nameAfterChild->setProduct($_product);
echo $_nameAfterChild->toHtml();
}
}
?>
<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->canConfigure() && $_product->isSaleable()): ?>
<p><button type="button" title="<?php echo Mage::helper('core')->quoteEscape($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 elseif($_product->getStockItem() && $_product->getStockItem()->getIsInStock()): ?>
<p><a title="<?php echo $this->__('View Details') ?>" class="button btn-cart" href="<?php echo $_product->getProductUrl() ?>"><?php echo $this->__('View Details') ?></a></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-2col<?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;">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true); ?>" class="product-image">
<img id="product-collection-image-<?php echo $_product->getId(); ?>"
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>
<?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
$productSku = $_product->getSku();
$product = Mage::getModel('catalog/product');
$productId = $product->getIdBySku( $productSku );
$currency_code = Mage::app()->getStore()->getCurrentCurrencyCode();
$currency = Mage::getModel('directory/currency')->load($currency_code);
$product = Mage::getModel("catalog/product")->load($productId);
$attVal = $product->getOptions();
$optStr = "";
foreach($attVal as $optionKey => $optionVal) {
$optStr .= "<div class='homeCustomContainer'>";
foreach($optionVal->getValues() as $valuesKey => $valuesVal) {
$optStr .=
"<div class='homeCustomProdItems'>
<input type='radio' name='".$_product->getSku()."' id='".$_product->getSku()."-".$valuesVal->getTitle()."' class='radio'/>
<label for='".$_product->getSku()."-".$valuesVal->getTitle()."'>
".$valuesVal->getTitle()."
".$valuesVal->getPrice()."
</label>
</div>"
;
}
$optStr .= "</div>";
}
echo($optStr );
?>
<?php
//Provides extra blocks on which to hang some features for products in the list
//Features providing UI elements targeting this block will display directly below the product name
//echo 'a: ' . $this->getChildHtml('name.after'); //TEST
//echo 'b: ' . $this->getChildHtml('reg2'); //TEST
if ($this->getChild('name.after')) {
$_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
foreach ($_nameAfterChildren as $_nameAfterChildName) {
$_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
$_nameAfterChild->setProduct($_product);
echo $_nameAfterChild->toHtml();
}
}
?>
<?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 if ($gc['display_addtocart'] != 0): //Cart button ?>
<?php if(!$_product->canConfigure() && $_product->isSaleable()): ?>
<button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->helper('checkout/cart')->getAddUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<?php elseif($_product->getStockItem() && $_product->getStockItem()->getIsInStock()): ?>
<button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->helper('checkout/cart')->getAddUrl($_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 ?>
</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; ?>
<?php
//Provides a block where additional page components may be attached, primarily good for in-page JavaScript
if ($this->getChild('after')) {
$_afterChildren = $this->getChild('after')->getSortedChildren();
foreach ($_afterChildren as $_afterChildName) {
$_afterChild = $this->getChild('after')->getChild($_afterChildName);
//set product collection on after blocks
$_afterChild->setProductCollection($_productCollection);
echo $_afterChild->toHtml();
}
}
?>But it won't recognize the option i choose so it think this piece of code doesn't pick-up the custom options in the right way:
<?php
$productSku = $_product->getSku();
$product = Mage::getModel('catalog/product');
$productId = $product->getIdBySku( $productSku );
$currency_code = Mage::app()->getStore()->getCurrentCurrencyCode();
$currency = Mage::getModel('directory/currency')->load($currency_code);
$product = Mage::getModel("catalog/product")->load($productId);
$attVal = $product->getOptions();
$optStr = "";
foreach($attVal as $optionKey => $optionVal) {
$optStr .= "<div class='homeCustomContainer'>";
foreach($optionVal->getValues() as $valuesKey => $valuesVal) {
$optStr .=
"<div class='homeCustomProdItems'>
<input type='radio' name='".$_product->getSku()."' id='".$_product->getSku()."-".$valuesVal->getTitle()."' class='radio'/>
<label for='".$_product->getSku()."-".$valuesVal->getTitle()."'>
".$valuesVal->getTitle()."
".$valuesVal->getPrice()."
</label>
</div>"
;
}
$optStr .= "</div>";
}
echo($optStr );
?>Hope you can help me a bit with this 
Best regards,
Robert
