移动详细信息框呈现添加到购物车按钮无法使用 - Magento

时间:2015-09-02 23:46:14

标签: html magento layout details

我的网站提供多种选择的产品。有些人有多达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;?>
    //]]> 

1 个答案:

答案 0 :(得分:0)

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>