Welcartは既に売る商品が決まっている場合や、自社サーバーやレンタルサーバーで低コスト運用する場合に最適ですね。ECサイトの構築面ではスピーディーかつ、Wordpressに組み込むので親しみやすいUIなんかも広く使われている理由かもしれません。

さて、今回はそんなWelcartで商品を表示させたい！というTipsです。テーマカスタマイズでテンプレートファイルにコピペするだけですぐに使えます。

Welcartのトップページにプラグイン無しで商品を表示させる

widgetやプラグインを使うのも嫌だ、という時有りますよね。
そういう時こそこのコードをコピペしましょう。

<div class="rcmnd-list">


<?php query_posts('cat=2&status=post&posts_per_page=3'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
    usces_the_item();
    usces_have_skus();
?>



            <div class="item-img"><a href="<?php the_permalink(); ?>"><?php usces_the_itemImage(0, 230, 230); ?></a>
            <br><span class="price-tag"><?php usces_the_itemName(); ?></span><br><?php if (usces_is_skus()) : ?>
            <span class="price-tag">&yen; <?php usces_the_firstPrice(); ?><?php usces_guid_tax(); ?></span>
            <?php endif; ?>
            <?php echo $post->post_excerpt; ?>
            </div>

<?php endwhile; else: ?>
    <p>商品が見つかりません。</p>
<?php endif; ?>



</div><!-- end of rcmnd-list -->

ポイントとしては、

<?php query_posts('cat=2&status=post&posts_per_page=3'); ?>

ここのcat=2 が自分が入れているWelcartの商品カテゴリーになるように設定しておきましょう。また、page=3 ここの数字を増やすことで表示商品点数を変更することが出来ます。実にカンタンですね。商品の名前、価格、サムネイル画像が表示されますのでマウスオーバー時にキラリと光らせるならJquery入れておきましょう。

サムネイルの大きさを変更するときは、

<?php usces_the_itemImage(0, 230, 230); ?>

ここで変更します。

<?php query_posts('cat=2&status=post&posts_per_page=3'); ?>

ここを以下のように書き加えると商品がランダムで表示されます。

<?php query_posts('cat=2&status=post&posts_per_page=3&orderby=rand'); ?>

おまけ – JQueryでマウスオーバー時にキランと光らせる

<script language="javascript">
$(function() {
	$('a').mouseover(function(){
		$(this).css('opacity', '.4').animate({'opacity': '1'}, 'slow');
	});
});
</script>