Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Store-Front Theme need to put Add-to-cart button below thumbnail WordPress

I have got this them by templatic and it was perfect. but i needed to allow people to actually add the item even when they saw the thumbnail. so the best solution i could came up was to put an "add to cart" button below the thumbnail.

I manage to add one but i had problem when i tried clicking the button, the item was not added to the cart, and at one point i manage to add the item to cart, but the value/price came up $0.00.

how do i do this?

The php code for the store is below;

<?php
/*
Template Name: Store Page
*/
?>
<?php get_header(); ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/js/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("a.switch_thumb").toggle(function(){
$(this).addClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").removeClass("thumb_view");
});
}, function () {
$(this).removeClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").addClass("thumb_view");
});
});

});
</script>


<div id="content">
<div id="contentareatop"><img src="<?php bloginfo('template_directory'); ?>/images/i-contentareatop.png" alt="" title="" /></div>
<div id="contentpart">
<div class="breadcrumb">
<div class="breadcrumblinks"><?php if ( get_option( 'ptthemes_breadcrumbs' )) { yoast_breadcrumb('', ' » ' . $_GET['page']); } ?></div>

<a href="#" class="switch_thumb swap"><?php _e('Switch Thumb');?></a>
</div>


<div class="content_spacer clearfix">

<div id="products">
<h1 class="head"><?php _e('Store');?></h1>
<?php
$totalpost_count = 0;
$limit = 1000;
$blogCategoryIdStr = str_replace(',',',-',get_inc_categories("cat_exclude_"));
query_posts('showposts=' . $limit . '&cat='.$blogCategoryIdStr);
if(have_posts())
{
while(have_posts())
{
the_post();
$totalpost_count++;
}
}
//echo $totalpost_count;
$limit = 16; // number of posts per page for store page

$posts_per_page_homepage = $limit;
global $paged;
$blogCategoryIdStr = str_replace(',',',-',get_inc_categories("cat_exclude_"));
query_posts('showposts=' . $limit . '&paged=' . $paged .'&cat='.$blogCategoryIdStr);
?>
<?php
if(have_posts())
{
?>



<ul class="display thumb_view">
<?php
$postcounter = 0;
while(have_posts())
{
$postcounter++;
the_post();
$data = get_post_meta( $post->ID, 'key', true );
$product_price = $Product->get_product_price($post->ID);
?>

<li>
<div class="content_block"> <a href="<?php the_permalink() ?>" class="product_thumb"><img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo $data[ 'productimage' ]; ?>&w=145&zc=1&q=80<?php echo $thumb_url;?>" alt="" /></a>
<?php
if($Product->get_product_price_sale($post->ID)>0)
{
?>
<img src="<?php bloginfo('template_directory'); ?>/images/sale.png" alt="" class="sale_img" />
<?php
}else
{
?>
<?php
}
?>
<div class="content">
<h3><a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a></h3>
<p class="contentp"><?php echo bm_better_excerpt(200, ' ... '); ?></p>
<p class="sale_price" >
<?php
if($Product->get_product_price_sale($post->ID)>0)
{
echo ''.$General->get_currency_symbol() . number_format($Product->get_product_price_only($post->ID),2).' ';
echo ''.$General->get_currency_symbol() . $Product->get_product_price_sale($post->ID).'';

}else
{
if($General->is_storetype_catalog())
{
if($Product->get_product_price_only($post->ID)>0)
{
echo $General->get_currency_symbol() . number_format($Product->get_product_price_only($post->ID),2);
}
}else
{
echo $General->get_currency_symbol() . number_format($Product->get_product_price_only($post->ID),2);
}
}
?>
<?php /*?><?php echo $General->get_currency_symbol() . number_format($Product->get_product_price_only($post->ID),2); ?><?php */?> </p>
<div class="viewdetails"> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php _e('View Details');?> »</a> </div>
</div>
</div>
<!-- content block #end -->
</li>


<?php
if($postcounter%4==0)
{
echo '<li class="product_sepretor"> </li>';
}
?>


<?php
}
?>
</ul>
<div class="clearfix"></div>
<?php
}
?>

<div class="pagination">
<div class="Navi">
<?php if (function_exists('wp_pagenavi')) { ?>
<?php wp_pagenavi(); ?>
<?php } ?>
</div>
</div>
<?php
global $Cart,$General;
$itemsInCartCount = $Cart->cartCount();
$cartAmount = $Cart->getCartAmt();
?>

</div>
</div> <!-- content spcer #end -->
</div> <!-- contetn part #end -->

<div id="contentareabottom"><img src="<?php bloginfo('template_directory'); ?>/images/i-img-contentareabottom.png" alt="" title="" /></div>
</div> <!-- content #end -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

the checkout cart php is;

<script type="text/javascript" >
function setAttributeVal()
{
var postformflag = 1;
if(eval(document.getElementById('size')))
{
var size = document.getElementById('size').value;
if(size == '')
{
alert('<?php _e("Please select size");?>');
postformflag = 0;
}
}else
{
var size = '';
}
if(postformflag)
{
if(eval(document.getElementById('color')))
{
var color = document.getElementById('color').value;
if(color == '')
{
alert('<?php _e("Please select color");?>');
postformflag = 0;
}
}else
{
var color = 0;
}
}
if(postformflag)
{
if(eval(document.getElementById('cart_information_span')))
{
document.getElementById('cart_information_span').innerHTML = '<?php _e('processing ...');?>';
}
if(eval(document.getElementById('cart_information_header_span')))
{
document.getElementById('cart_information_header_span').innerHTML = '<?php _e('processing ...');?>';
}
var attstr = '';
if(size != '' && color != '')
{
attstr = size+','+color;
}else
if(size != '' && color == '')
{
attstr = size;
}else
if(size == '' && color != '')
{
attstr = color;
}
document.getElementById('product_att').value = attstr;
postform();
}
}

function postform()
{
dataString = $("#shopingcartfrm").serialize();
$.ajax({
url: '<?php echo get_option('siteurl'); ?>/?page=cart&'+dataString,
type: 'GET',
dataType: 'html',
timeout: 20000,
error: function(){
//alert('Error loading cart information');
},
success: function(html){
chekc_stock();
if(eval(document.getElementById('cart_content_sidebar')))
{
refresh_cartinfo_sidebar();
}
if(eval(document.getElementById('cart_information_span')))
{
document.getElementById('cart_information_span').innerHTML=html;
}
if(eval(document.getElementById('cart_information_header_span')))
{
document.getElementById('cart_information_header_span').innerHTML=html;
}
if(eval(document.getElementById('addtocartformspan')))
{
document.getElementById('addtocartformspan').innerHTML = '<strong><?php _e(ADDED_CART_MSG);?><Br><a href="<?php echo get_option('siteurl'); ?>/?page=cart"><?php _e(VIEW_CART_DETAIL_TEXT);?></a> or <a href="<?php echo get_option('siteurl'); ?>/?page=cart"><?php _e(CHECKOUT_TEXT);?> »</a></strong>';

}
}
});
return false;
}
function refresh_cartinfo_sidebar()
{
$.ajax({
url: '<?php echo get_option('siteurl'); ?>/?page=cart&cartact=cart_refresh',
type: 'GET',
dataType: 'html',
timeout: 20000,
error: function(){
//alert('Error loading cart information');
},
success: function(html){
if(eval(document.getElementById('cart_content_sidebar')))
{
document.getElementById('cart_content_sidebar').innerHTML=html;
}
}
});
return false;
}
function chekc_stock()
{
dataString = $("#shopingcartfrm").serialize();
$.ajax({
url: '<?php echo get_option('siteurl'); ?>/?page=cart&pid=<?php echo $post->ID?>'+dataString+'&cartact=stock_chk',
type: 'GET',
dataType: 'html',
timeout: 20000,
error: function(){
//alert('Error loading cart information');
},
success: function(html){
if(html=='unlimited')
{

}else
if(html>0)
{
//alert(html);
}else
{
document.getElementById('addtocartformspan').innerHTML = html;
//window.location.href='<?php echo $_SERVER['REQUEST_URI'];?>';
}
}
});
}
function checkstock(attval)
{
if(eval('document.getElementById("shoppingcart_button_1")'))
{
document.getElementById("shoppingcart_button_1").style.display="";
}
if(eval('document.getElementById("shoppingcart_outofstock_msg1")'))
{
document.getElementById("shoppingcart_outofstock_msg1").innerHTML="";
}
if(eval('document.getElementById("shoppingcart_button_2")'))
{
document.getElementById("shoppingcart_button_2").style.display="";
}
if(eval('document.getElementById("shoppingcart_outofstock_msg2")'))
{
document.getElementById("shoppingcart_outofstock_msg2").innerHTML="";
}
<?php
$product_color_js = $Product->get_product_custom_dl($post->ID,'size','',1);
echo $product_color_js .= $Product->get_product_custom_dl($post->ID,'color','',1);
?>
}
</script>

<form id="shopingcartfrm" name="shopingcartfrm">
<input type="hidden" name="cartact" value="addtocart" />
<input type="hidden" name="product_id" id="product_id" value="<?php the_ID(); ?>" />
<div class="row_spacer ">
<strong><?php _e('Qty:');?></strong> <input name="product_qty" id="product_qty" type="text" onKeyPress="return numberonly(event)" value="1" class="textbox" />
</div>
<input type="hidden" name="product_att" id="product_att" value="" />
<input type="hidden" name="product_price" id="product_price" value="<?php echo $product_cart_price;?>" />
<input type="hidden" name="product_istaxable" id="product_istaxable" value="<?php echo $data['istaxable'];?>" />
<input type="hidden" name="product_weight" id="product_weight" value="<?php echo $data[ 'weight']; ?>" />
<?php
global $General;
$chk_stock = $General->check_stock($post->ID);
if($data['isshowstock'])
{
$General->display_stock_text($chk_stock);
}
if($chk_stock=='out_of_stock')
{
if(!$data['isshowstock'])
{
$General->get_out_of_stock_text();
}
}
else
{
?>
<div class="addtocart" id="shoppingcart_button_1"><a href="javascript:void(0);" onclick="setAttributeVal();"> <?php _e("Add to Cart");?> » </a></div>
<span id="shoppingcart_outofstock_msg1"></span>
<?php }?>
</form>
<span id="addtocartformspan">
<?php if($Cart->is_product_in_cart($post->ID)){echo ''.__('Already Added in the cart').'<Br><a href="'.get_option('siteurl').'/?page=cart">'.__('View Cart Detail').'</a> or <a href="'.get_option('siteurl').'/?page=cart">'.__('Checkout »').'</a>';}?>
</span>

the "Add to cart" button from which i wanted to copy from was from the product details page;

<div class="product clearfix product_inner">
<div id="photos" class="pro_img">
<?php
$image_array = $General->get_post_image($post->ID);
if($image_array[0]){?>
<div class="photo main_photo" > <a href="#productimage"><img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo $image_array[0]; ?>&w=300&zc=1&q=80<?php echo $thumb_url;?>" alt=""/></a>
<div class="zoom"><a href="#productimage"> Zoom </a> </div>
</div>
<?php }?>

<?php if(count($image_array)>1){?>
<div class="pro_thumb_img">
<?php if($image_array[1]){?>
<div class="photo" ><a href="#productimage1" class="small_thumb"> <img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo $image_array[1]; ?>&w=95&zc=1&q=80<?php echo $thumb_url;?>" alt="" /> </a> </div>
<?php }?>
<?php if($image_array[2]){?>
<div class="photo" ><a href="#productimage2" class="small_thumb"> <img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo $image_array[2]; ?>&w=95&zc=1&q=80<?php echo $thumb_url;?>" alt="" /> </a> </div>
<?php }?>
<?php if($image_array[3]){?>
<div class="photo" ><a href="#productimage3" class="small_thumb"> <img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo $image_array[3]; ?>&w=95&zc=1&q=80<?php echo $thumb_url;?>" alt="" /> </a> </div>
<?php }?>
<?php if($image_array[4]){?>
<div class="photo" > <a href="#productimage4" class="small_thumb"> <img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo $image_array[4]; ?>&w=95&zc=1&q=80<?php echo $thumb_url;?>" alt="" /> </a> </div>
<?php }?>
<?php if($image_array[5]){?>
<div class="photo" > <a href="#productimage5" class="small_thumb"> <img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo $image_array[5]; ?>&w=95&zc=1&q=80<?php echo $thumb_url;?>" alt="" /> </a> </div>
<?php }?>
<?php if($image_array[6]){?>
<div class="photo" > <a href="#productimage6" class="small_thumb"> <img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo $image_array[6]; ?>&w=95&zc=1&q=80<?php echo $thumb_url;?>" alt="" /> </a> </div>
<?php }?>
</div>
<?php }?>
<?php if($data[ 'productimage' ]){?>
<div style="display: none;" id="productimage" > <img src="<?php echo $image_array[0]; ?>" alt="helmet" /> </div>
<?php }?>
<?php if($data[ 'productimage1' ]){?>
<div style="display: none;" id="productimage1"> <img src="<?php echo $image_array[1]; ?>" alt="helmet" /> </div>
<?php }?>
<?php if($data[ 'productimage2' ]){?>
<div style="display: none;" id="productimage2"> <img src="<?php echo $image_array[2]; ?>" alt="helmet" /> </div>
<?php }?>
<?php if($data[ 'productimage3' ]){?>
<div style="display: none;" id="productimage3"> <img src="<?php echo $image_array[3]; ?>" alt="helmet" /> </div>
<?php }?>
<?php if($data[ 'productimage4' ]){?>
<div style="display: none;" id="productimage4"> <img src="<?php echo $image_array[4]; ?>" alt="helmet" /> </div>
<?php }?>
<?php if($data[ 'productimage5' ]){?>
<div style="display: none;" id="productimage5"> <img src="<?php echo $image_array[5]; ?>" alt="helmet" /> </div>
<?php }?>
<?php if($data[ 'productimage6' ]){?>
<div style="display: none;" id="productimage6"> <img src="<?php echo $image_array[6]; ?>" alt="helmet" /> </div>
<?php }?>
</div>

<div class="product_info ">
<h1 class="head"><?php the_title(); ?></h1>
<?php
if(get_option('ptthemes_add_to_cart_button_position')=='Above Description' || get_option('ptthemes_add_to_cart_button_position') == '' || get_option('ptthemes_add_to_cart_button_position')=='Above and Below Description') // add to cart button ABOVE description
{
?>
<div class="product_details">

<?php
if($Product->get_product_price_sale($post->ID)>0)
{
?>
<p><?php _e('Regular Price');?>: <?php echo $General->get_currency_symbol() . number_format($Product->get_product_price_only($post->ID),2); ?> </p>
<p><strong> <?php _e('Sale Price');?> : <span class="price"> <?php echo $General->get_currency_symbol() . $Product->get_product_price_sale($post->ID); ?></span></strong> </p>
<?php
}else
{
?>
<p><strong> <?php _e('Price');?>: </strong><span class="price"><?php echo $General->get_currency_symbol() . number_format($Product->get_product_price_only($post->ID),2); ?></span> </p>
<?php
}
?>


<?php if($product_color){?>
<div class="row_spacer"><strong><?php _e('Color');?>:</strong>
<?php echo $product_color; ?>
</div>
<?php } ?>


<?php if($product_size){?>
<div class="row_spacer ">
<strong><?php _e('Size');?>: </strong>
<?php echo $product_size; ?>




<span style="text-decoration: underline;" class="size_chart more" title="size_chart1">+ <?php _e('Size Chart');?></span>
<div style="display: none;" class="size_chart1 hide" > <span class="close" onclick="document.getElementById('infoHolder').style.display='none'">Close X</span>
<?php if ( get_option('ptthemes_size_chart') != "") { ?>
<?php echo stripslashes(get_option('ptthemes_size_chart')); ?>
<?php } ?>
</div>
<!-- size chart -->
</div>
<?php }?>







<?php
//affiliate link
if($data['affiliate_link']){ ?>
<?php echo $data['affiliate_link'];?>
<?php }else{?>
<?php
if($General->is_storetype_shoppingcart() || $General->is_storetype_digital())
{
if($General->is_checkoutype_cart())
{
include(TEMPLATEPATH . '/library/includes/checkout_cart.php');
}else
{
include(TEMPLATEPATH . '/library/includes/checkout_buynow.php');
}
?>
<?php
}
elseif($General->is_storetype_catalog())
{
if($_REQUEST['msg']=='inqsuccess')
{
echo __(INQUIRY_SEND_SUCCESS_MSG)."<Br>";
}
?>
<a href="<?php echo get_option('siteurl')."/?page=sendenquiry&pid=".$post->ID;?>" class="normal_button fl"><?php _e(SEND_INQUIRY);?> </a>
<?php
}
?>
<?php }?>
</div>
<?php
}
?>
<?php the_content(); ?>
<?php
//stock start
include(TEMPLATEPATH . '/library/includes/stock_desc_single.php');
//stock end
?>

<?php
if(get_option('ptthemes_add_to_cart_button_position')=='Below Description' || get_option('ptthemes_add_to_cart_button_position')=='Above and Below Description') // add to cart button below description
{
if(get_option('ptthemes_add_to_cart_button_position')=='Above and Below Description')
{
$product_size = $Product->get_product_custom_dl($post->ID,'size','size2');
$product_color = $Product->get_product_custom_dl($post->ID,'color','color2');
}
?>
<div class="product_details">

<?php
if($Product->get_product_price_sale($post->ID)>0)
{
?>
<p><?php _e('Regular Price');?>: <?php echo $General->get_currency_symbol() . number_format($Product->get_product_price_only($post->ID),2); ?> </p>
<p><strong> <?php _e('Sale Price');?> : <span class="price"> <?php echo $General->get_currency_symbol() . $Product->get_product_price_sale($post->ID); ?></span></strong> </p>
<?php
}else
{
?>
<p><strong> <?php _e('Price');?>: </strong><span class="price"><?php echo $General->get_currency_symbol() . number_format($Product->get_product_price_only($post->ID),2); ?></span> </p>
<?php
}
?>


<?php if($product_color){?>
<div class="row_spacer"><strong><?php _e('Color');?>:</strong>
<?php echo $product_color; ?>
</div>
<?php } ?>


<?php if($product_size){?>
<div class="row_spacer ">
<strong><?php _e('Size');?>: </strong>
<?php echo $product_size; ?>




<span style="text-decoration: underline;" class="size_chart more" title="size_chart1">+ <?php _e('Size Chart');?></span>
<div style="display: none;" class="size_chart1 hide" > <span class="close" onclick="document.getElementById('infoHolder').style.display='none'">Close X</span>
<?php if ( get_option('ptthemes_size_chart') != "") { ?>
<?php echo stripslashes(get_option('ptthemes_size_chart')); ?>
<?php } ?>
</div>
<!-- size chart -->
</div>
<?php }?>







<?php
//affiliate link
if($data['affiliate_link']){ ?>
<?php echo $data['affiliate_link'];?>
<?php }else{?>
<?php
if($General->is_storetype_shoppingcart() || $General->is_storetype_digital())
{
if($General->is_checkoutype_cart())
{
if(get_option('ptthemes_add_to_cart_button_position')=='Above and Below Description')
{
include(TEMPLATEPATH . '/library/includes/checkout_cart_2.php');
}else
{
include(TEMPLATEPATH . '/library/includes/checkout_cart.php');
}
}else
{
include(TEMPLATEPATH . '/library/includes/checkout_buynow.php');
}
?>
<?php
}
elseif($General->is_storetype_catalog())
{
if($_REQUEST['msg']=='inqsuccess')
{
echo __(INQUIRY_SEND_SUCCESS_MSG)."<Br>";
}
?>
<a href="<?php echo get_option('siteurl')."/?page=sendenquiry&pid=".$post->ID;?>" class="normal_button fl"><?php _e(SEND_INQUIRY);?> </a>
<?php
}
?>
<?php }?>
</div>
<?php
}
?>

</div> <!-- productinfo #end -->


<ul class="fav_link">
<li class="print"><a href="#" onclick="window.print();return false;"><?php _e('Print');?></a> </li>
<?php if ( get_option('ptthemes_feed_name') != "") { ?>
<li class="sharethis"><a class="a2a_dd" href="http://www.addtoany.com/subscribe?linkname=http%3A%2F%2Fpt.com&linkurl=http%3A%2F%2F<?php echo stripslashes(get_option('ptthemes_feed_url')); ?>"><?php _e('Share This');?></a>
<script type="text/javascript">a2a_linkname="<?php echo stripslashes(get_option('ptthemes_feed_name')); ?>";a2a_linkurl="<?php echo stripslashes(get_option('ptthemes_feed_url')); ?>";</script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/js/feed.js"></script>
</li>
<?php } ?>
<li class="rss"><a href="<?php if( get_option('ptthemes_feed_url')){echo get_option('ptthemes_feed_url');}else{ echo bloginfo('rss_url');} ?>"><?php _e('RSS');?></a> </li>
<?php
if($General->is_show_tellaFriend())
{
include(TEMPLATEPATH . '/library/includes/tellafriend.php');
} ?>
</ul>


<div class="fix"></div>
<?php
if($General->is_show_related_products())
{
include(TEMPLATEPATH . '/library/includes/related_products.php');
}
?>
<?php
if($General->is_show_addcomment())
{
?>
<div class="fix"></div>


<p class="post_bottom clearfix"> <?php the_tags(' <span class="tags">'.__('Tags : ').'', ', ', '</span>'); ?> <span class="commentcount"> <a href="<?php the_permalink(); ?>#commentarea"><?php comments_number('0 Comments', '1 Comments', '% Comments'); ?></a></span></p>
<div id="comments"><?php comments_template(); ?></div>
<?php
}
?>
</div> <!-- product #end -->
<script type="text/javascript">
function numberonly(evt) {
evt = (evt) ? evt : window.event
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
status = "This field accepts numbers only."
return false
}
status = ""
return true
}
</script>

ok in case you wanted to install the theme itself, just download from here

[[LINK href="http://www.mediafire.com/?ayqq36dpyd7ymhc"]][[/LINK]]

And the website im working on is this;

[[LINK href="http://www.mumtazcollections.com"]][[/LINK]]

2011-06-07 by scott calbee

Answers (1)

2011-06-08

Peter Michael answers:

Can you please fix the links to your site & theme or send it to me via PM? Thanks.

scott calbee comments:

link to theme

http://rapidshare.com/files/438774359/storefront_v1.0.rar

link to website:

www.mumtazcollections.com

Peter Michael comments:

You are repeating the JavaScript functions and the product forms. You should:
- move the JavaScript outside the loop
- if you are repeating product forms, they need different ID's. Currently all have ID 'shopingcartfrm'. Ideally you ID them 'shopingcartfrm_%productID%'
- you will have to change JavaScript functions to use something different than getElementById as you will have to find elements in the DOM or make the calls slightly different and dynamic. For example:

function setAttributeVal( form_id) {
var postformflag = 1;
if(jQuery('#'+form_id+' #size').length) {
var size = jQuery('#'+form_id+' #size').val();
}
..


HTH

scott calbee comments:

so i should change the js function to the one u posted? im still a newbie at this level, so which line should i change to your suggested example...?

Peter Michael comments:

That was just an idea to get you started. If you're unsure maybe you should consider let some other user from here doing it for you. You will have to raise your bid anyway. Unfortunately I don't have the time right now. Good luck!