移动详细信息框呈现“添加到购物车”按钮无法操作 - Magento

Question

我的网站提供有多种选择的产品。有些有多达 5-8 个选项。因此，“详细信息框”最终位于所有选项下方。此外，详细信息太长，无法放入顶部的“简短描述”框中。因此，我将详细信息框移到了选项框上方。这样做会导致“添加到购物车”按钮不再起作用。我已经尝试在整个页面上移动代码，无论我移动“添加到购物车按钮”的哪一部分代码都不起作用。 （我已经尝试移动选项代码和详细信息框代码）我正在使用一个名为 BuyShop 的自定义主题。这是其中一种产品的链接，因此您可以看到我在谈论和尝试做的事情：http://www.dvineinspiration.com/featured-products/mime-basic-plus.html。我还包含了下面 product/view.phtml 文件中的代码。

<!--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 &colon; 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;?>
    //]]> 

Answer 1

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>