ベースを大幅にカスタマイズして、カスタム Magento テーマを作成しました。Twitter ブートストラップを使用してレスポンシブにしました。ホームページでは右2段レイアウトで商品を表示しています。
2column-right.phtml:
<div class="container">
<div class="row">
<div class="span12 page">
<?php echo $this->getChildHtml('header') ?>
<?php echo $this->getChildHtml('breadcrumbs') ?>
<?php echo $this->getChildHtml('global_messages') ?>
<div class="row">
<div class="span9"><?php echo $this->getChildHtml('content') ?></div>
<div class="span3"><?php echo $this->getChildHtml('right') ?></div>
</div>
</div><!-- ./page -->
</div>
</div><!-- ./container -->
リストは list.phtml を使用して表示されます。
<?php // Grid Mode ?>
<?php $_collectionSize = $_productCollection->count() ?>
<ul class="thumbnails">
<?php $i=0; foreach ($_productCollection as $_product): ?>
<li class="span3 item <?php if($i%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<div class="thumbnail clearfix">
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(260); ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"/><!--145x215-->
</a>
<?php
$itemName = $_helper->productAttribute($_product, $_product->getName(), 'name');
$limit = ($ilimit) ? $ilimit : 23;
$pad=' …';
$itemName = strip_tags($itemName);
if(strlen($itemName) > $limit) {
$itemName = substr($itemName,0,$limit);
}
$itemName = $itemName.$pad;
?>
<h3><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $itemName; ?></a></h3>
<div class="price-box">
<span><?php echo $this->getPriceHtml($_product, true) ?></span>
</div>
<?php if($_product->isSaleable()): ?>
<button type="button" class="btn btn-warning btn-medium pull-left" title="<?php echo $this->__('Add to Cart') ?>" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><?php echo $this->__('Add to Cart') ?></button>
<?php else: ?>
<button type="button" disabled="disabled" class="btn btn-medium pull-left"><?php echo $this->__('Out of stock') ?></button>
<?php endif; ?>
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="btn btn-medium pull-right"><?php echo $this->__('Add to Wishlist') ?></a>
<?php endif; ?>
</div>
</li>
<?php endforeach; ?>
</ul>
私のコードのどこにもstdまたはside-colまたはcol-leftの言及はありませんが、出力 HTML は次のとおりです。
<div class="std">
<div class="col-left side-col">
<p class="home-callout"><span></span></p>
<ul class="thumbnails">
<li class="span3 item first">
<div class="thumbnail clearfix">
<a href="http://localhost:8888/index.php/sony-vaio-vgn-txn27n-b-11-1-notebook-pc.html" title="Sony VAIO VGN-TXN27N/B 11.1" Notebook PC">
<img src="http://localhost:8888/media/catalog/product/cache/1/small_image/260x/9df78eab33525d08d6e5fb8d27136e95/s/o/sony-vaio-vgn-txn27n-b-11-1-notebook-pc.jpg" alt="Sony VAIO VGN-TXN27N/B 11.1" Notebook PC">
</a>
<h3><a href="http://localhost:8888/index.php/sony-vaio-vgn-txn27n-b-11-1-notebook-pc.html" title="Sony VAIO VGN-TXN27N/B 11.1" Notebook PC">Sony VAIO VGN-TXN27N/B …</a></h3>
<div class="price-box">
<span>
<div class="price-box">
<span class="regular-price" id="product-price-27">
<span class="price">Rs2,699.99</span>
</span>
</div>
</span>
</div>
<button type="button" class="btn btn-warning btn-medium pull-left" title="Add to Cart" onclick="setLocation('http://localhost:8888/index.php/checkout/cart/add/uenc/aHR0cDovL2xvY2FsaG9zdDo4ODg4L2ZsYWlyYmFnL2luZGV4LnBocC8,/product/27/')">Add to Cart</button>
<a href="http://localhost:8888/index.php/wishlist/index/add/product/27/" class="btn btn-medium pull-right">Add to Wishlist</a>
</div>
</li>
</ul>
<p></p>
</div>
</div>
これらの余分なラッパー (std、side-col、col-left) を削除する必要があります。これにより、いくつかの場所でレイアウトが損なわれています。このために変更するファイルはありません。私はたくさんグーグルで検索しましたが、何も見つかりませんでした。レイアウト xml を完全には理解していませんが、私が見たところ、テンプレートに何かを与えているだけです。
どうすればいいのかわからない。私は立ち往生しています。助けてください。
また、次のような理由もなく気になる場所にこれらの余分な空のタグがあります。
<p class="home-callout"><span></span></p><p></p>下部に別のエクストラ。なぜこれらがここにあるのですか。これらも削除する方法はありますか？できれば大好きです。
すべての助けに本当に感謝しています。
ありがとう！