0

i am using the default RWD theme that comes with Magento 1.9.1. I also have the demo products that you can download from magento installed. I am facing a weird problem in the configurable products view page where the switcher options, add to cart and social media link are for some reason loading outside the container div that they should be loading in. It work fine using demo products but not on configurable products i created.

I will post some screen shots: Demo Product, this is how the layout should look like based on the code

This is how it looks like for the configurable product i create, the code is the same except for the bit that loads outside its container div

View.phtml

<?php $_helper = $this->helper('catalog/output'); ?>
<?php $_product = $this->getProduct(); ?>
<script type="text/javascript">
    var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->toHtml() ?></div>
<div class="product-view">
    <div class="product-essential">
        <form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
            <?php echo $this->getBlockHtml('formkey') ?>
            <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="product-img-box">
                <div class="product-name">
                    <h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
                </div>
                <?php echo $this->getChildHtml('media') ?>
            </div>

            <div class="product-shop">
                <div class="product-name">
                    <span class="h1"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></span>
                </div>

                <div class="price-info">
                    <?php echo $this->getPriceHtml($_product); ?>
                    <?php echo $this->getChildHtml('bundle_prices') ?>
                    <?php echo $this->getTierPriceHtml() ?>
                </div>

                <div class="extra-info">
                    <?php echo $this->getReviewsSummaryHtml($_product, 'default', false)?>
                    <?php echo $this->getChildHtml('product_type_availability'); ?>
                </div>

                <?php echo $this->getChildHtml('alert_urls') ?>

                <?php if ($_product->getShortDescription()):?>
                    <div class="short-description">
                        <div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
                    </div>
                <?php endif;?>




                <?php echo $this->getChildHtml('other');?>

                <?php if ($_product->isSaleable() && $this->hasOptions()):?>
                    <?php echo $this->getChildChildHtml('container1', '', true, true) ?>
                <?php endif;?>

            </div>

            <div class="add-to-cart-wrapper">
                <?php echo $this->getChildHtml('product_type_data') ?>
                <?php echo $this->getChildHtml('extrahint') ?>

                <?php if (!$this->hasOptions()):?>
                    <div class="add-to-box">
                        <?php if($_product->isSaleable()): ?>
                            <?php echo $this->getChildHtml('addtocart') ?>
                            <?php if( $this->helper('wishlist')->isAllow() || $_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product)): ?>
                                <span class="or"><?php echo $this->__('OR') ?></span>
                            <?php endif; ?>
                        <?php endif; ?>
                        <?php echo $this->getChildHtml('addto') ?>
                        <?php echo $this->getChildHtml('sharing') ?>
                    </div>
                    <?php echo $this->getChildHtml('extra_buttons') ?>
                <?php elseif (!$_product->isSaleable()): ?>
                    <div class="add-to-box">
                        <?php echo $this->getChildHtml('addto') ?>
                        <?php echo $this->getChildHtml('sharing') ?>
                    </div>
                <?php endif; ?>
            </div>

            <!--Container to hold product tabs on small screens-->
             <div class="product-collateral toggle-content tabs small-screen">
                <?php if ($detailedInfoGroup = $this->getChildGroup('detailed_info', 'getChildHtml')):?>
                 <dl id="collateral-tabs" class="collateral-tabs">
                    <?php foreach ($detailedInfoGroup as $alias => $html):?>
                        <dt class="tab"><span><?php echo $this->escapeHtml($this->getChildData($alias, 'title')) ?></span></dt>
                        <dd class="tab-container">
                         <div class="tab-content"><?php echo $html ?></div>
                        </dd>
                <?php endforeach;?>
                 </dl>
            <?php endif; ?>
             </div>

            <?php echo $this->getChildHtml('related_products') ?>

            <div class="clearer"></div>
            <?php if ($_product->isSaleable() && $this->hasOptions()):?>
                <?php echo $this->getChildChildHtml('container2', '', true, true) ?>
            <?php endif;?>
        </form>
        <script type="text/javascript">
        //<![CDATA[
            var productAddToCartForm = new VarienForm('product_addtocart_form');
            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);

            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);
        //]]>
        </script>
    </div>

    <div class="product-collateral toggle-content tabs large-screen">
        <?php if ($detailedInfoGroup = $this->getChildGroup('detailed_info', 'getChildHtml')):?>
            <dl id="collateral-tabs" class="collateral-tabs">
                <?php foreach ($detailedInfoGroup as $alias => $html):?>
                    <dt class="tab"><span><?php echo $this->escapeHtml($this->getChildData($alias, 'title')) ?></span></dt>
                    <dd class="tab-container">
                        <div class="tab-content"><?php echo $html ?></div>
                    </dd>
                <?php endforeach;?>
            </dl>
        <?php endif; ?>
    </div>

    <?php echo $this->getChildHtml('upsell_products') ?>
    <?php echo $this->getChildHtml('product_additional_data') ?>

</div>

Configurable.phtml

<?php
$_product    = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
$_jsonConfig = $this->getJsonConfig();
$_renderers = $this->getChild('attr_renderers')->getSortedChildren();
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <dl>
    <?php foreach($_attributes as $_attribute): ?>
        <?php
        $_rendered = false;
        foreach ($_renderers as $_rendererName):
            $_renderer = $this->getChild('attr_renderers')->getChild($_rendererName);
            if (method_exists($_renderer, 'shouldRender') && $_renderer->shouldRender($_attribute, $_jsonConfig)):
                $_renderer->setProduct($_product);
                $_renderer->setAttributeObj($_attribute);
                echo $_renderer->toHtml();
                $_rendered = true;
                break;
            endif;
        endforeach;

        if (!$_rendered):
        ?>
        <dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
        <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
            <div class="input-box">
                <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
                    <option><?php echo $this->__('Choose an Option...') ?></option>
                  </select>
              </div>
        </dd>
        <?php endif; ?>
    <?php endforeach; ?>
    </dl>
    <script type="text/javascript">
        var spConfig = new Product.Config(<?php echo $_jsonConfig ?>);
    </script>
    <?php echo $this->getChildHtml('after') ?>
<?php endif;?>
3
  • Please attach your code for /catalog/product/view.phtml and for /catalog/product/view/type/configurable.phtml inside of template that you're using. I'm pretty sure that your IF statement is placed or ended in wrong place.
    – versedi
    Commented Mar 15, 2015 at 10:38
  • Do you have any custom updates in local.xml with <reference name="product.info.options.wrapper"> or did you change anything in catalog.xml? If you're not sure you can paste your catalog.xml content with <!-- Product view --> section
    – versedi
    Commented Mar 15, 2015 at 13:37
  • I've managed to recreate your error, give me a moment and I'll reedit my answer and undelete it.
    – versedi
    Commented Mar 15, 2015 at 15:27

1 Answer 1

0

So I've recreated your error and it's not an error but specific way for those products by RWD theme authors.

You can choose where to display that in Design section at you product. Look at image below. You'll find two options there:

  1. Product info column -> your right side
  2. Block after info column -> your bottom side

Display product options in

So if you want to display them on right you choose first option. If you don't like that setting and want to override it you can do it easily by editing file RWD/default/theme/catalog/product/view.phtml in which you can find code responsible for displaying container2:

 <?php if ($_product->isSaleable() && $this->hasOptions()):?>
      <?php echo $this->getChildChildHtml('container2', '', true, true) ?>
 <?php endif;?>

Move that code so it'll be around container1 like this:

<?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;?> This way you'll have in both possibilities the div#product-options-wrapper wrapped in div.product-shop and positioned in same place so whatever option is choosen they will appear there.

Your whole file will look like this: http://pastebin.com/4taVx45t

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.