I would like to show the “Cross-Sells” not only on the checkout process, but on the product page itself.
What’s neat about the Cross-Sells block is that it includes the “Add To Cart” button. Combine that with the “do not redirect customer to shopping cart” option, and you have a way to inobtrusively add accessories/add-ons/extended warranty to the shopping process.
The question is, how do I migrate the Cross-Sells block to the Product Page?
The related products concept already does what you’re describing on the product page. Upsells also are displayed on the product page, while cross sells are displayed on the cart page. Because cross sells are triggered by the cart contents, I’m not sure there’s a simple way to port them to the product page. Do the native product page upsell/related product concepts not work for your purpose?
The related products concept already does what you’re describing on the product page. Upsells also are displayed on the product page, while cross sells are displayed on the cart page. Because cross sells are triggered by the cart contents, I’m not sure there’s a simple way to port them to the product page. Do the native product page upsell/related product concepts not work for your purpose?
No, they don’t really work, since I want to either let customers add-to-cart the individual “related items” / “options” / “accessories”, OR have them show up “inline” with the product info, so they can be selected before the main “Add To Cart” button is clicked. Due to the specifics of my products (as well as the client base), making the customers jump from the content area to the sidebar (for accessories), then scroll down to the AddToCart button will present a usability issue. It should either be all-inline, or allow “on-the-spot” adding to cart for each optional item.
I would be interested to know if anyone figures this one out. Although related products and upsells work for some things I would like to have the one-stop function as well. I am working on a way to combine the best of both worlds, but am having a hard time. Please let me know if you find a way. I would love to have a solution. Thanks to all that are posting on the Mage forums!
Essentially what I want is to combine the function/format of the “upsells” and the “related products”. I like the grid format of “upsells”, but want the customer to be able to have a check-box to add the product to their cart like the “related products”. Maybe someone has an answer to this that I am not seeing.
I hacked the code together to make this happen, but it isn’t fully functional cross-browser. I will have to look at it closer when I get time, but please post if you can help or have a solution I am not aware of. Thanks.
Hi
You can do it very easily.
1- Create a new template named “crosssel.phtml” as>> yourTemplateDir/catalog/product/list/crosssel.phtml Then paste following code in that:
***********************
<h4><?php echo $this->__('Based on your selection, you may be interested in the following items:') ?></h4>
<ul class="generic-product-list">
<?php foreach ($this->getItems() as $_item): ?>
<li>
<a href="<?php echo $_item->getProductUrl() ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75); ?>” width="75" alt="<?php echo $this->htmlEscape($_item->getName()) ?>” class="product-image" /></a>
<div class="product-shop">
<h5><a href="<?php echo $_item->getProductUrl() ?>"><?php echo $this->htmlEscape($_item->getName()) ?></a></h5>
<?php echo $this->getPriceHtml($_item, true) ?>
<button class="form-button" onclick="setLocation(’<?php echo $this->getAddToCartUrl($_item) ?>’)” type="button"><span><?php echo $this->__('Add to Cart') ?></span></button><br/>
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<small><a href="<?php echo $this->getAddToWishlistUrl($_item) ?>” class="link-cart"><?php echo $this->__('Add to Wishlist') ?></a></small>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?><br/>
<small><a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a></small>
<?php endif; ?>
</div>
</li>
<?php endforeach; ?>
</ul>
******************
2- Go to in catalog/product/view.phtml, paste following code where you want to show crosssell:
******************
<?php echo $this->getChildHtml('crosssell_products') ?>
******************
3- Now finally open yourLayoutDir/catalog.xml and findout <catalog_product_view> section in it and finally add following block uder upsell block:
******************
<block type="catalog/product_list_crosssell" name="product.info.crosssell" as="crosssell_products" template="catalog/product/list/crosssell.phtml"/>
******************
Enjoy
Hi
You can do it very easily.
1- Create a new template named “crosssel.phtml” as>> yourTemplateDir/catalog/product/list/crosssel.phtml Then paste following code in that:
***********************
<h4><?php echo $this->__('Based on your selection, you may be interested in the following items:') ?></h4>
<ul class="generic-product-list">
<?php foreach ($this->getItems() as $_item): ?>
<li>
<a href="<?php echo $_item->getProductUrl() ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75); ?>” width="75" alt="<?php echo $this->htmlEscape($_item->getName()) ?>” class="product-image" /></a>
<div class="product-shop">
<h5><a href="<?php echo $_item->getProductUrl() ?>"><?php echo $this->htmlEscape($_item->getName()) ?></a></h5>
<?php echo $this->getPriceHtml($_item, true) ?>
<button class="form-button" onclick="setLocation(’<?php echo $this->getAddToCartUrl($_item) ?>’)” type="button"><span><?php echo $this->__('Add to Cart') ?></span></button><br/>
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<small><a href="<?php echo $this->getAddToWishlistUrl($_item) ?>” class="link-cart"><?php echo $this->__('Add to Wishlist') ?></a></small>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?><br/>
<small><a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a></small>
<?php endif; ?>
</div>
</li>
<?php endforeach; ?>
</ul>
******************
2- Go to in catalog/product/view.phtml, paste following code where you want to show crosssell:
******************
<?php echo $this->getChildHtml('crosssell_products') ?>
******************
3- Now finally open yourLayoutDir/catalog.xml and findout <catalog_product_view> section in it and finally add following block uder upsell block:
******************
<block type="catalog/product_list_crosssell" name="product.info.crosssell" as="crosssell_products" template="catalog/product/list/crosssell.phtml"/>
******************
Enjoy
Works great, amazing - thank you! One problem though; add to cart doesn’t seem to do anything - whereas wishlist/compare are ok. Any suggestions? Thanks again.
