Originally Posted by
ralph.m
Here's a stripped down version of your page with an extra item added in. I've made some CSS changes (using !important, but just change them in the actual style sheet) and made some changes to the size of images, though it would be best to change the actual size of the images too.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/style.css" media="all" />
<link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/widgets.css" media="all" />
<link rel="stylesheet" type="text/css" href="https://www.clothingrepublic.com/skin/frontend/clothing/default/css/print.css" media="print" />
<style>
.products-grid li.item {
float: left;
width: 175px !important; /* was 200px */
padding: 20px 0 !important; /* was 20px 10px */
border: 0px solid #DDD;
margin-right: 0 !important; /* was 16px */
margin-bottom: 16px;
}
.products-grid .product-image {
display: block;
width: 175px; /* was 225px */
height: 175px; /* was 225px */
margin: 0 auto;
}
</style>
</head>
<body class=" catalog-category-view categorypath-shop-new-arrivals-mens-html category-mens">
<div id="wrapper"> <script type="text/javascript" src="https://www.clothingrepublic.com/skin/frontend/clothing/default/chromejs/chrome.js"></script>
<div id="catalog-holder">
<div id="catalog-list-holder">
<div id="catalog-list-left" style="width: 150px; height: 320px; background: #e7e7e7;">
<div id="catalog-categories-holder">
</div></div>
<div id="catalog-list-right">
<div class="page-title category-title">
<h1>Mens</h1>
</div>
<div class="category-products">
<ul class="products-grid" style="padding-top:16px;">
<li class="item first">
<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head.html" title="COOL HEAD IN WHITE (MENS)" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/c/o/cool_head_mens_white.jpg" width="175" height="175" alt="COOL HEAD IN WHITE (MENS)"/></a>
<!--div class="out-stock-label">
<div class="out-label">
<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
</div>
</div-->
<div class="out-stock-label">
<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
</div>
<div style="display:block" class="gridli">
<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head.html" title="COOL HEAD IN WHITE (MENS)">COOL HEAD IN WHITE (MENS)</a></h2>
<div class="price-box">
<span class="regular-price" id="product-price-564">
<span class="price">S$25.00</span></span>
</div>
</div>
<div>
</div>
</li>
<li class="item">
<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/c/o/cool_head_mens_royal_blue.jpg" width="175" height="175" alt="COOL HEAD IN BLUE (MENS)"/></a>
<!--div class="out-stock-label">
<div class="out-label">
<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
</div>
</div-->
<div class="out-stock-label">
<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
</div>
<div style="display:block" class="gridli">
<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)">COOL HEAD IN BLUE (MENS)</a></h2>
<div class="price-box">
<span class="regular-price" id="product-price-569">
<span class="price">S$25.00</span></span>
</div>
</div>
<div>
</div>
</li>
<li class="item">
<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/c/o/cool_head_mens_royal_blue.jpg" width="175" height="175" alt="COOL HEAD IN BLUE (MENS)"/></a>
<!--div class="out-stock-label">
<div class="out-label">
<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
</div>
</div-->
<div class="out-stock-label">
<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
</div>
<div style="display:block" class="gridli">
<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/cool-head-in-blue.html" title="COOL HEAD IN BLUE (MENS)">COOL HEAD IN BLUE (MENS)</a></h2>
<div class="price-box">
<span class="regular-price" id="product-price-569">
<span class="price">S$25.00</span> </span>
</div>
</div>
<div>
</div>
</li>
<li class="item last">
<a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/urt.html" title="URT" class="product-image"><img src="https://www.clothingrepublic.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/u/r/urt.jpg" width="175" height="175" alt="URT"/></a>
<!--div class="out-stock-label">
<div class="out-label">
<img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/newtag.png" alt="" title="" border="0">
</div>
</div-->
<div class="out-stock-label">
<div class="out-label"><img src="https://www.clothingrepublic.com/skin/frontend/clothing/default/images/new.png" /></div>
</div>
<div style="display:block" class="gridli">
<h2 class="product-name" align="center"><a href="https://www.clothingrepublic.com/index.php/shop/new-arrivals/mens/urt.html" title="URT">URT</a></h2>
<div class="price-box">
<span class="regular-price" id="product-price-780">
<span class="price">S$25.00</span> </span>
</div>
</div>
<div>
</div>
</li>
</ul>
</div>
</body>
</html>
To test this code, make up a .html page on your desktop, paste in this code, and open the page in your browser. See if that's what you want.
Hi Ralph,
This works perfectly as usual. However, I notice that the images are grabbed from the Magento backend whereby I upload the products.
This is the code for the actual page for listing of the products.
Code:
<?php
/**
* Magento
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE_AFL.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@magentocommerce.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade Magento to newer
* versions in the future. If you wish to customize Magento for your
* needs please refer to http://www.magentocommerce.com for more information.
*
* @category design
* @package base_default
* @copyright Copyright (c) 2010 Magento Inc. (http://www.magentocommerce.com)
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
*/
?>
<?php
/**
* Product list template
*
* @see Mage_Catalog_Block_Product_List
*/
?>
<?php
$_productCollection=$this->getLoadedProductCollection();
$_helper = $this->helper('catalog/output');
?>
<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<div class="category-products">
<?php echo $this->getToolbarHtml() ?>
<?php // List mode ?>
<?php if($this->getMode()!='grid'): ?>
<?php $_iterator = 0; ?>
<ol class="products-list" id="products-list">
<?php foreach ($_productCollection as $_product): ?>
<li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>">
<?php // Product Image ?>
<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 $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
<?php // Product description ?>
<div class="product-shop">
<div class="f-fix">
<h2 class="product-name"><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 if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product) ?>
<?php endif; ?>
<?php echo $this->getPriceHtml($_product, true) ?>
<?php $_productTmp = Mage::getModel('catalog/product')->load($_product->getId());?>
<?php if($_productTmp->getData('reward_point_product')):?>
<p style="clear:left;">
<?php echo Mage::helper("rewardpoints")->__("Earn %s",Mage::helper('rewardpoints')->formatPoints($_productTmp->getData('reward_point_product')))?>
</p>
<?php endif;?>
<?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; ?>
<div class="desc std">
<?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="link-more"><?php echo $this->__('Learn More') ?></a>
</div>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
<li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
<?php endif; ?>
</ul>
</div>
</div>
</li>
<?php endforeach; ?>
</ol>
<script type="text/javascript">decorateList('products-list', 'none-recursive')</script>
<?php else: ?>
<?php // Grid Mode ?>
<?php $_collectionSize = $_productCollection->count() ?>
<?php $_columnCount = $this->getColumnCount(); ?>
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php if ($i++%$_columnCount==0): ?>
<ul class="products-grid" style="padding-top:16px;">
<?php endif ?>
<li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<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 $this->helper('catalog/image')->init($_product, 'small_image')->resize(200); ?>" width="200" height="200" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"/></a>
<?php //if($_product->getnewlabel ()): ?>
<!--div class="out-stock-label">
<div class="out-label">
<img src="<?php echo $this->getSkinUrl('images/newtag.png'); ?>" alt="" title="" border="0">
</div>
</div-->
<?php //endif; ?>
<?php if ($_product->getnewlabel()):?>
<?php $img_ico = $_product->getResource()->getAttribute('newlabel')->getFrontend()->getValue($_product); ?>
<div class="out-stock-label">
<div class="out-label"><img src="<?php echo $this->getSkinUrl('images/'.$img_ico.'.png'); ?>" /></div>
</div>
<?php endif;?>
<div style="display:block" class="gridli">
<h2 class="product-name" align="center"><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 if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
<?php endif; ?>
<?php echo $this->getPriceHtml($_product, true) ?>
</div>
<?php $_productTmp = Mage::getModel('catalog/product')->load($_product->getId());?>
<?php if($_productTmp->getData('reward_point_product')):?>
<p>
<?php echo Mage::helper("rewardpoints")->__("Earn <b>%s</b>",Mage::helper('rewardpoints')->formatPoints($_productTmp->getData('reward_point_product')))?>
</p>
<?php endif;?>
<div>
<?php if($_product->isSaleable()): ?>
<?php else: ?>
<div class="out-stock-label">
<div class="out-label">
<img src="<?php echo $this->getSkinUrl('image/outstock.png'); ?>" alt="" title="" border="0"/>
</div>
</div>
<?php endif; ?>
</div>
</li>
<?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
</ul>
<?php endif ?>
<?php endforeach ?>
<script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
<?php endif; ?>
<div class="toolbar-bottom">
<?php echo $this->getToolbarHtml() ?>
</div>
</div>
<?php endif; ?>
Let me know if you need anything else, thanks for the great help so far.
Chris
Reply With Quote
Bookmarks