我的网站提供有多种选择的产品。有些甚至有5-8种选择。所以，"详细信息框"在所有选项的下方。此外，详细信息太长，无法放在顶部的"简短描述"框中。因此，我将细节框移动到选项框上方。当这样做时，它会导致"添加到购物车"按钮不再工作。我试过将代码移动到整个页面&无论我移动代码的哪一部分，"添加到购物车按钮"都不会工作。(我试过移动选项代码&详细信息框代码)我使用一个自定义主题称为BuyShop。这是其中一个产品的链接，这样你就能明白我在说什么了&尝试做:http://www.dvineinspiration.com/featured-products/mime-basic-plus.html。我还包含了来自product/视图的代码。
<!--PRODUCT BOX-->
<?php
$widthSmall=62;
$heightSmall=62;
$widthMedium=460;
$heightMedium=440;
$_video = $this->getProduct()->getVideobox();
$_customtab = $this->getProduct()->getCustomtab();
$_customtabtitle = $this->getProduct()->getCustomtabtitle();
$image_size=Mage::getStoreConfig('buyshoplayout/product_info/product_info_image_size');
$main_image_popup='';
$popup_video='';
if(Mage::helper('lightboxes')->isActive())
{
/*popups*/
$helper = Mage::helper('lightboxes');
$rel = $helper->getLightboxRel($helper->getConfig('lightbox_type'));
$class = $helper->getLightboxClass($helper->getConfig('lightbox_type'));
$main_image_popup='class="'.$class.'" rel="'.$rel.'"';
$popup_video='class="video '.$class.'" rel="'.$rel.'"';
}
switch($image_size)
{
case 'small':
if(Mage::helper('buyshopconfig')->getMediaCount($_product) or !empty($_video))
{
$span0=4;
$span1=1;
$span2=3;
$span3=8;
}
else
{
$span0=3;
$span1=1;
$span2=3;
$span3=9;
}
$height_thumbs=206;
break;
case 'medium':
if(Mage::helper('buyshopconfig')->getMediaCount($_product) or !empty($_video))
{
$span0=5;
$span1=1;
$span2=4;
$span3=7;
}
else
{
$span0=4;
$span1=1;
$span2=4;
$span3=8;
}
$height_thumbs=350;
break;
case 'big':
if(Mage::helper('buyshopconfig')->getMediaCount($_product) or !empty($_video))
{
$span0=6;
$span1=1;
$span2=5;
$span3=6;
}else
{
$span0=5;
$span1=1;
$span2=5;
$span3=7;
}
$height_thumbs=422;
break;
}
?>
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<div class="product-box">
<div class="no-display">
<input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
</div>
<div class="row">
<div class="span<?php echo $span0?>">
<div class="product-img-box">
<div class="row">
<?php if(Mage::helper('buyshopconfig')->getMediaCount($_product) or !empty($_video)):?>
<div class="span<?php echo $span1?>">
<div class="more-views flexslider">
<ul class="slides">
<?php echo $this->getChildHtml('media') ?>
<?php if(!empty($_video)):?>
<li><a class="video" href="<?php echo Mage::helper('catalog/output')->productAttribute($this->getProduct(), $_video, 'video') ?>"><i class=" icon-link"></i></a></li>
<?php endif;?>
</ul>
</div>
</div>
<?php endif;?>
<div class="span<?php echo $span2?>">
<div class="product-image">
<a <?php echo $main_image_popup;?> title="<?php echo $this->htmlEscape($_product->getImageLabel())?>" <?php if(!Mage::helper('lightboxes')->isActive()):?>class="cloud-zoom"<?php endif;?> href="<?php echo Mage::helper('catalog/image')->init($_product, 'image', $_product->getFile())?>" <?php if(!Mage::helper('lightboxes')->isActive()):?>id='zoom1' data-rel="position: 'right', adjustX: 10, adjustY: 0"<?php endif;?>>
<img class="product-retina" data-image2x="<?php echo Mage::helper('catalog/image')->init($_product, 'image', $_product->getFile())->resize($widthMedium*2, $heightMedium*2)?>" src="<?php echo Mage::helper('catalog/image')->init($_product, 'image', $_product->getFile())->resize($widthMedium, $heightMedium)?>" alt="" />
</a>
</div>
<div class="pull-right hidden"><a href="#" class="fancybox fancy-zoom"><i class="icon-zoom-in"></i></a></div>
</div>
</div>
</div>
</div>
<div class="span<?php echo $span3?>">
<div class="product-shop">
<?php echo $this->getChildHtml('custom_related_block') ?>
<div class="product_info_left">
<div class="product-name">
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
</div>
<?php if(Mage::getStoreConfig('buyshoplayout/product_info/sku')):?>
<p><?php echo $this->__('SKU') ?>: <b><?php echo nl2br($_product->getSku()) ?></b></p>
<?php endif; ?>
<?php if(!Mage::getStoreConfig('buyshopconfig/options/catalog_mode')):?>
<div class="product_type_data_price"><?php echo $this->getChildHtml('product_type_data') ?></div>
<?php endif; ?>
<div class="share-buttons share-buttons-panel" data-style="medium" data-counter="true" data-oauth="true" data-hover="true" data-promo-callout="left" data-buttons="twitter,facebook,pinterest"></div></p>
<div class="add-to-links">
<ul>
<?php echo Mage::helper('buyshopconfig')->addWishCompLink($_product,$this,true); ?>
<?php if ($this->canEmailToFriend()): ?>
<li><a href="<?php echo $this->helper('catalog/product')->getEmailToFriendUrl($_product) ?>" class="small_icon_color"><i class="icon-at"></i></a><a href="<?php echo $this->helper('catalog/product')->getEmailToFriendUrl($_product) ?>"><?php echo $this->__('Email to a friend') ?></a></li>
<?php endif; ?>
</ul>
</div>
<?php echo $this->getReviewsSummaryHtml($_product, false, true)?>
<?php if(!Mage::getStoreConfig('buyshopconfig/options/catalog_mode')):?>
<?php echo $this->getPriceHtml($_product) ?>
<?php endif; ?>
<div class="socialsplugins_wrapper">
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('buyshop_social_like_buttons')->toHtml() ?>
</div>
<?php if ($_product->getShortDescription()):?>
<div class="short-description"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
<?php endif;?>
<?php echo Mage::helper('buyshopconfig')->countdownSpecialPrice($_product,'defaultCountdown',$this);?>
<?php if(!Mage::getStoreConfig('buyshopconfig/options/catalog_mode')):?>
<?php echo $this->getChildHtml('alert_urls') ?>
<?php echo $this->getTierPriceHtml() ?>
<?php echo $this->getChildHtml('extrahint') ?>
<?php if (!$this->hasOptions()):?>
<?php if($_product->isSaleable()): ?>
<?php echo $this->getChildHtml('addtocart') ?>
<?php endif; ?>
<?php echo $this->getChildHtml('extra_buttons') ?>
<?php endif; ?>
<?php endif; ?>
<?php echo $this->getChildHtml('other');?>
<?php if(Mage::getStoreConfig('buyshoplayout/product_info/qr')):?>
<div class="clearfix hidden-phone" style="margin: 20px 0 0 0">
<img src="http://api.qrserver.com/v1/create-qr-code/?size=100x100&data=<?php echo Mage::helper("core/url")->getCurrentUrl() ?>" alt="QR: <?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>"/>
</div>
<?php endif;?>
</div>
</div>
</div>
<?php $modules_enable=Mage::getStoreConfig('advanced/modules_disable_output');?>
<div class="row">
<div class="span12">
<ul class="nav-tabs" id="myTab">
<li class="active"><a href="#tab1"><?php echo $this->__('Description') ?></a></li>
<?php if(!$modules_enable['Mage_Review']):?><li><a href="#tab2"><?php echo $this->__('Reviews') ?></a></li><?php endif;?>
<?php if(!$modules_enable['Mage_Tag']):?><li><a href="#tab3"><?php echo $this->__('Tags') ?></a></li><?php endif;?>
<?php if ($_customtab && Mage::getStoreConfig('buyshoplayout/product_info/custom_tab')): ?>
<li><a href="#tab4"><?php if(!empty($_customtabtitle)) echo html_entity_decode($this->helper('catalog/output')->productAttribute($this->getProduct(), $_customtabtitle, 'customtabtitle'));else echo 'Custom tab title' ?></a></li>
<?php endif;?>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<?php foreach ($this->getChildGroup('detailed_info', 'getChildHtml') as $alias => $html):?>
<div class="box-collateral <?php echo "box-{$alias}"?>">
<?php if ($title = $this->getChildData($alias, 'title')):?>
<h2><?php echo $this->escapeHtml($title); ?></h2>
<?php endif;?>
<?php echo $html; ?>
</div>
<?php endforeach;?>
</div>
<div class="tab-pane" id="tab2">
<?php echo $this->getChildHtml('reviews') ?>
</div>
<div class="tab-pane" id="tab3">
<?php echo $this->getChildHtml('product_additional_data') ?>
</div>
<?php if ($_customtab): ?>
<div class="tab-pane" id="tab4">
<?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_customtab, 'customtab') ?>
</div>
<?php endif; ?>
</div></div></div>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container1', '', true, true) ?>
<?php endif;?>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>
</div>
</div>
<!--PRODUCT BOX EOF-->
</form>
</div>
</div>
</div>
<?php echo $this->getChildHtml('upsell_products') ?>
<script type="text/javascript">
<?php
?>
jQuery(function(){
var PreviewSliderHeight = function() {
var big_image_height= <?php echo $height_thumbs?>;
var preview_image_height= jQuery('div.more-views ul.slides li:first-child').height();
var slider_height = Math.round (big_image_height/preview_image_height) * preview_image_height - 10;
jQuery(".flexslider.more-views .flex-viewport").css({
"min-height": slider_height + "px"
});
if((slider_height-(jQuery('div.more-views ul.slides li:first-child').height()*jQuery('div.more-views ul.slides li').length))>=-10)
{
jQuery('.more-views .flex-next').remove()
jQuery('.more-views .flex-prev').remove()
}
};
jQuery('.flexslider.more-views').flexslider({
animation: "slide",
autoplay: false,
minItems: 3,
animationLoop: false,
direction: "vertical",
controlNav: false,
slideshow: false,
prevText: "<i class='icon-down'></i>",
nextText: "<i class='icon-up'></i>",
start: PreviewSliderHeight
});
})
</script>
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
<?php if(Mage::getStoreConfig('buyshopconfig/options/ajax_add_to_cart')){?>
productAddToCartForm.submit = function(button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;
if (url) {
form.action = url;
}
var e = null;
// Start of our new ajax code
if (!url) {
url = jQuery('#product_addtocart_form').attr('action');
}
url = url.replace("checkout/cart","ajax/index"); // New Code
var data = jQuery('#product_addtocart_form').serialize();
data += '&isAjax=1';
jQuery('#preloader .loader').fadeIn(300);
try {
jQuery.ajax( {
url : url,
dataType : 'json',
type : 'post',
data : data,
success : function(data) {
jQuery('#ajax_loader').hide();
if(data.status == 'ERROR'){
jQuery('#preloader .loader').hide();
jQuery('#preloader .inside').html(data.message);
jQuery('#preloader .message').fadeIn(300);
setTimeout(function(){
jQuery('#preloader .message').fadeOut();
},1500);
}else{
jQuery('#preloader .loader').hide();
if(jQuery('.ul_wrapper.toplinks')){
jQuery('.shoppingcart').replaceWith(data.sidebar);
}
jQuery(".shoppingcart .fadelink").bind({
mouseenter: function(e) {
jQuery(this).find(".shopping_cart_mini").stop(true, true).fadeIn(300, "linear");
},
mouseleave: function(e) {
jQuery(this).find(".shopping_cart_mini").stop(true, true).fadeOut(300, "linear");
}
});
if(jQuery('#topline .links')){
jQuery('#topline .links').replaceWith(data.toplink);
}
jQuery('#preloader .inside').html(data.message);
jQuery('#preloader .message').fadeIn(300);
setTimeout(function(){
jQuery('#preloader .message').fadeOut();
},1500)
}
}
});
} catch (e) {
}
// End of our new ajax code
this.form.action = oldUrl;
if (e) {
throw e;
}
}
}.bind(productAddToCartForm);
<?php }else { ?>
productAddToCartForm.submit = function(button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;
if (url) {
form.action = url;
}
var e = null;
try {
this.form.submit();
} catch (e) {
}
this.form.action = oldUrl;
if (e) {
throw e;
}
if (button && button != 'undefined') {
button.disabled = true;
}
}
}.bind(productAddToCartForm);
<?php } ?>
productAddToCartForm.submitLight = function(button, url){
if(this.validator) {
var nv = Validation.methods;
delete Validation.methods['required-entry'];
delete Validation.methods['validate-one-required'];
delete Validation.methods['validate-one-required-by-name'];
// Remove custom datetime validators
for (var methodName in Validation.methods) {
if (methodName.match(/^validate-datetime-.*/i)) {
delete Validation.methods[methodName];
}
}
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
<?php if(!Mage::helper('lightboxes')->isActive()):?>
jQuery("a.video").click(function() {
jQuery.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
<?php endif;?>
//]]>
When you have products with multiple options the details box ends up way beneath them so that the customer many not even see them. So, just in case anyone else has this issue & wants/needs assistance doing this. In order to move the "Details/Description" box above the add to cart button & keep the add to cart button functioning......
1. Details/Description Box - move the following code to above the last two </div> right before <!--PRODUCT BOX EOF-->:
<?php $modules_enable=Mage::getStoreConfig('advanced/modules_disable_output');?>
<div class="row">
<div class="span12">
<ul class="nav-tabs" id="myTab">
<li class="active"><a href="#tab1"><?php echo $this->__('Description') ?></a></li>
<?php if(!$modules_enable['Mage_Review']):?><li><a href="#tab2"><?php echo $this->__('Reviews') ?></a></li><?php endif;?>
<?php if(!$modules_enable['Mage_Tag']):?><li><a href="#tab3"><?php echo $this->__('Tags') ?></a></li><?php endif;?>
<?php if ($_customtab && Mage::getStoreConfig('buyshoplayout/product_info/custom_tab')): ?>
<li><a href="#tab4"><?php if(!empty($_cu`enter code here`stomtabtitle)) echo html_entity_decode($this->helper('catalog/output')->productAttribute($this->getProduct(), $_customtabtitle, 'customtabtitle'));else echo 'Custom tab title' ?></a></li>
<?php endif;?>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<?php foreach ($this->getChildGroup('detailed_info', 'getChildHtml') as $alias => $html):?>
<div class="box-collateral <?php echo "box-{$alias}"?>">
<?php if ($title = $this->getChildData($alias, 'title')):?>
<h2><?php echo $this->escapeHtml($title); ?></h2>
<?php endif;?>
<?php echo $html; ?>
</div>
<?php endforeach;?>
</div>
<div class="tab-pane" id="tab2">
<?php echo $this->getChildHtml('reviews') ?>
</div>
<div class="tab-pane" id="tab3">
<?php echo $this->getChildHtml('product_additional_data') ?>
</div>
<?php if ($_customtab): ?>
<div class="tab-pane" id="tab4">
<?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_customtab, 'customtab') ?>
</div>
<?php endif; ?>
2. Add to cart button - move the following code beneath <!--PRODUCT BOX EOF--> (Each piece of code is located in a separate part of the product box so just look for them & put them together)
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
And
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container1', '', true, true) ?>
<?php endif;?>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>
And
</form>