magento move configurble product options using css -
please visit these links:
in configurable product, want move "color" & charactar top of page. 
i want move above "check delivery availability " block.
means want next text "age: 2 years & above". there gap after 4 lines. want move color , charactar there.
please me find solution.
this view.phtml
<?php ?> <?php $_helper = $this->helper('catalog/output'); ?> <?php $pagelayout = str_replace(array('page/','.phtml'),'',mage::app()->getlayout()->getblock('root')->gettemplate()); ?> <?php $_product = $this->getproduct(); ?> <?php $setting = mage::helper('em0113settings'); ?> <script type="text/javascript"> var optionsprice = new product.optionsprice(<?php echo $this->getjsonconfig() ?>); </script> <div class="individual"> <div id="messages_product_view"><?php echo $this->getmessagesblock()->getgroupedhtml() ?></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" style="width:<?php echo $setting->getimageproduct_baseimagewidth(390) ?>px;"> <?php echo $this->getchildhtml('media') ?> </div> <?php $related_product_collection = $_product->getrelatedproductcollection(); $related_product_collection->addstorefilter(); $count = count($related_product_collection); ?> <div class="product-shop <?php if($count > 0 && $pagelayout=='1column'): ?>has-related<?php else: ?>no-related<?php endif ?>"> <div class="product-shop-wrapper <?php if($_product->isgrouped()): ?>grouped<?php endif ?>"> <?php list($_prev_prod, $_next_prod) = mage::helper('em0113settings/product')->getpreviousnextproducts($this->getproduct()); ?> <!--<?php if($_prev_prod != null): ?> <a href="<?php echo $_prev_prod->getproducturl(); ?>" title="<?php echo $this->__('previous') ?>" class="prev"><?php echo $this->__('previous') ?></a> <?php endif; ?> <?php if($_next_prod != null): ?> <a href="<?php echo $_next_prod->getproducturl(); ?>" title="<?php echo $this->__('next') ?>" class="next"><?php echo $this->__('next') ?></a> <?php endif; ?>--> <div class="product-name"> <h2><?php echo $_helper->productattribute($_product, $_product->getname(), 'name') ?></h2> </div> <?php echo $this->getreviewssummaryhtml($_product, false, true)?> <!--<?php if ($this->canemailtofriend()): ?> <p class="email-friend"><a href="<?php echo $this->helper('catalog/product')->getemailtofriendurl($_product) ?>"><?php echo $this->__('email friend') ?></a></p> <?php endif; ?>--> <div class="pro_des"> <?php if ($_product->getshortdescription()):?> <div class="short-description"> <hr> <br/> <!-- <h2><?php echo $this->__('quick overview') ?></h2> --> <div class="std"><?php echo $_helper->productattribute($_product, nl2br($_product->getshortdescription()), 'short_description') ?></div> </div> <?php endif;?> </div> <!-- <?php if ($this->displayproductstockstatus()): ?> <?php if($_product->issaleable()): ?> <p class="availability in-of-stock"><span><?php echo $this->__('in of stock') ?></span></p> <?php else : ?> <p class="availability out-of-stock"><span><?php echo $this->__('out of stock') ?></span></p> <?php endif; ?> <?php endif; ?> --> <hr class="hr"> <?php if ($_product->issaleable() && $this->hasoptions()):?> <?php echo $this->getchildchildhtml('container2', '', true, true) ?> <?php endif;?> <hr class="hr"> <div class="check_delivery"> <?php echo $this->getlayout()->createblock('core/template')->settemplate('checkdelivery/checkdelivery.phtml')->tohtml();?> </div> <div class="quick"> <div class="quick_1"> <!--<?php if ($_product->getshortdescription()):?> <div class="short-description"> <h2><?php echo $this->__('quick overview') ?></h2> <div class="std"><?php echo $_helper->productattribute($_product, nl2br($_product->getshortdescription()), 'short_description') ?></div> </div> <?php endif;?>--> <div class="product-data"> <?php echo $this->getchildhtml('alert_urls') ?> <?php echo $this->getchildhtml('product_type_data') ?> <?php echo $this->getchildhtml('extrahint') ?> <?php echo $this->gettierpricehtml() ?> </div> <?php if (!$this->hasoptions()):?> <div class="add-to-box"> <?php if($_product->issaleable()): ?> <?php echo $this->getchildhtml('addtocart') ?> <?php else:?> <?php echo $this->getchildhtml('addto') ?> <?php endif; ?> <!-- <?php if ($_product->isavailable()) {?> <div><?php //$buttontitle = $this->__('add cart'); ?> <button type="button" title="<?php //echo $buttontitle ?>" id="product-addtocart-button" class="button btn-cart" onclick="productaddtocartform.submit(this)"><span><span><?php //echo $buttontitle ?></span></span></button> </div> <br/> <div ><button class="button buy-now" onclick="location.href ='{{config path="web/unsecure/base_url"}}/checkout/cart/add?product=1&qty=1'"> <span><span>buy now</span></span></button> </div> <?php }?>--> </div> <?php echo $this->getchildhtml('extra_buttons') ?> <?php elseif (!$_product->issaleable()): ?> <div class="add-to-box"> <?php echo $this->getchildhtml('addto') ?> </div> <?php endif; ?> </div> <div class="quick_2"> <!-- soled --> <div class="soled_by"> <?php $helper=mage::helper('marketplace'); $_product=mage::registry('current_product'); $productowner=mage::getmodel('marketplace/product')->iscustomerproduct($_product['entity_id']); if($productowner['userid']!=""){ $captchenable = $percent = mage::getstoreconfig('marketplace/marketplace_options/captcha'); $rowsocial=mage::getmodel('marketplace/userprofile')->getpartnerprofilebyid($productowner['userid']); } ?> <script type="text/javascript"> if (typeof jquery == 'undefined'){ document.write(unescape("%3cscript src='//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'%3e%3c/script%3e")); } </script> <div class="soled-by-dealer"> <!--<div class="block-title"><strong><span> <?php if($rowsocial['shoptitle']!='') echo $rowsocial['shoptitle']; else echo $rowsocial['profileurl']; ?> </span></strong> </div>--> <h5> sold : </h5> <span> <?php if($rowsocial['profileurl'] == "kidsdial2") {?> <a href="<?php echo mage::geturl('marketplace/seller/collection').$rowsocial['profileurl'] ?>" title="<?php echo "totaltoys"; ?>" id="siteconnect"> <?php echo "totaltoys"; ?></a><?php } else{?> <a href="<?php echo mage::geturl('marketplace/seller/collection').$rowsocial['profileurl'] ?>" title="<?php echo $rowsocial['profileurl']; ?>" id="siteconnect"> <?php echo $rowsocial['profileurl']; ?></a><?php } ?> </span> </div> <br/> <div class="delivery_details"> <div class="cod"> <?php $attribute = $_product->getresource()->getattribute('cod_available'); $attribute_value = $attribute ->getfrontend()->getvalue($_product); if ($attribute_value == "yes"){ ?> <h5> cash on delivery </h5> <div class="delivery_hover_details">?<p class="killing"><?php echo "available";?></p></div> <?php }else{ ?> <i class="fa fa-times"></i> <p> <h5 style="position:relative;bottom: 11px;">cash on delivery </h5> <p class="reduce"><?php echo " not available"; ?></p> </p> <?php } ?> <span class="coupontooltip"> <div class="cod_content"> <h5>how place cash on delivery (cod) order?</h5> <p>all items have "cash on delivery available" icon valid order cash on delivery.</p> <p>add item(s) cart , proceed checkout.when prompted choose payment option, select "cash on delivery". </p> <p>once place order receive confirmation call our customer support validation in 48 hours. once verified , confirmed, order processed shipment in time specified, date of confirmation. required make cash-only payment our courier partner @ time of delivery of order complete payment.</p> <p>terms & conditions</p> <p>the maximum order value cod ₹5000.</p> <p>e-gift vouchers or store credit cannot used cod orders.</p> <p>cash-only payment @ time of delivery.</p> </div> </span> </div> <div class= "bottom3"> <!-- wholesale available --> <?php //$product current product if($_product->gettierprice()) { echo " <div class = 'quickphp'> <h5>wholesale</h5> available.<br> delivered in 10-15 business days. </div> "; } else{ echo " <div class = 'quickphp'> <h5>wholesale</h5> not available.<br> </div> "; } ?> <div class="avail"> <?php if ($this->displayproductstockstatus()): ?> <?php if($_product->issaleable()): ?> <p class="availability in-of-stock"> <h5>availability</h5> <?php echo $this->__('in stock') ?></span></p> <?php else : ?> <p class="availability out-of-stock"> <h5>availability</h5> <?php echo $this->__('out of stock') ?></span></p> <?php endif; ?> <?php endif; ?> </div> <div class="replace"> <span> <b>7 days</b> replacement guarantee</span> <div class="delivery_hover_details">? <span class="coupontooltip"> <h5> how return item purchased on totaltoys.com</h5> <p>conveniently, can call @ 092-434-22233 , email @ contact@totaltoys.com order number, invoice number , product name. if you've received item in 'damaged', 'defective' or 'not described' state.</p> <h5>return & replacement policy:</h5> <p>returns or replacement request should placed within 7 days date of delivery.</p> <p>as receive request, our concerned team contact validate compliant. validation process may require submitting of product photos. once validation process completed further action taken. once product reaches us/seller, replacement proceed in 1-2 working days after physical inspection of goods , shipment done simultaneously.</p> <p>if you've received item in 'damaged', 'defective' or 'not described' state, replacements/pickups done free of cost.</p> <p>if packaging tampered or damaged, before accepting delivery of goods, please refuse take delivery of package, , call on 092-434-22233 or mail @ contact@totaltoys.com , mentioning order reference number. shall make our best efforts ensure replacement delivery made @ earliest.</p> <p>in rare circumstances pickup cannot done, can ship product through courier. reimbursed shipping charges against original receipt.</p> <p>replacement subjected availability of stock. in case replacement not available, amount refunded account purchase made. (amount includes shipping , gift wrapping charges)</p> <h5> return request not accepted if:</h5> <li>return request made outside specified time period</li> <li>missing of tags, labels, original packing, , invoice.</li> <li>misused or mishandle of product customer end.</li> <p>for refunds refund amount same mode of payment used during checkout. refunds cash on delivery made via online transfer of funds customers bank account.</p> <p>if customer chooses cancel order before product shipped, entitled 100% refund. have return free gift when return product?</p> <p>yes. free gift included part of item order , needs returned along delivered product</p> <p>please contact on contact@totaltoys.com or call @ 092-434-22233 doubts , concerns</p> </span> </div> </div> </div> </div> <div class="delivery"> <h5> delivered </h5> <div class="delivery_hover_details">? <span class="coupontooltip"> <div class="delivery_content"> <h5>what estimated delivery time?</h5> <p>sellers procure , ship items within time specified on product page. business days exclude public holidays , sundays.</p> <p>estimated delivery time depends on following factors: <li>time of order, orders made after 2:00pm can shipped on next workingday</li> <li>the seller offering product</li> <li>product's availability seller</li> <li>the destination want order shipped , seller's location</li></p> </div> </span> </div> <ul class="fk-ul-disc"> <li>usually delivered in 3-5 business days.</li> <li> delivery time may exceed usual due festival holidays</li> </ul> </div> </div> </div> <!--<?php if (!$this->hasoptions()):?> <div class="add-to-box"> <?php if($_product->issaleable()): ?> <?php echo $this->getchildhtml('addtocart') ?> <?php else:?> <?php echo $this->getchildhtml('addto') ?> <?php endif; ?> </div> <?php echo $this->getchildhtml('extra_buttons') ?> <?php elseif (!$_product->issaleable()): ?> <div class="add-to-box"> <?php echo $this->getchildhtml('addto') ?> </div> <?php endif; ?>--> <?php echo $this->getchildhtml('other');?> <?php echo $this->getchildhtml('short_des_after'); ?> <?php if ($_product->issaleable() && $this->hasoptions()):?> <?php echo $this->getchildchildhtml('container1', '', true, true) ?> <?php endif;?> <?php echo $this->getchildhtml('shippingreturns') ?> </div> </div> <!--<span class="or_buy_now"> -- or --</span>--> <!--<button type="button" title="<?php echo $buttontitle ?>" id="product-addtocart-button" class="button btn-cart" onclick="productaddtocartform.submit(this)"><span><span><?php echo $buttontitle ?></span></span></button>--> <!--<a href="<?= $this->getaddtocarturl($_product, array('qty' => $_price['price_qty'])) ?>"> buy </a>--> <div class="clearer"></div> </form> </div> <!-- add button share facebook --> <?php if ($setting->getimageproduct_viewsocial()): ?> <div id="social-share" class="hide-lte0 hide-lte1 hide-lte2"></div> <script type="text/javascript"> jquery(document).ready(function($){ jquery('#social-share').dcsocialshare({ buttons: 'facebook,plusone,twitter,pinterest', twitterid: 'designchemical', email: 'moc//niamod/liame', align: 'right', floater: false }); }); </script> <?php endif; ?> <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 (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"> <?php foreach ($this->getchildgroup('detailed_info', 'getchildhtml') $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;?> <?php echo $this->getchildhtml('product_additional_data') ?> <?php echo $this->getchildhtml('product_additional_collateral') ?> </div> <?php echo $this->getchildhtml('catalog.product.related'); ?> <?php echo $this->getchildhtml('review_list') ?> <?php echo $this->getchildhtml('upsell_products') ?> <?php if (mage::helper('em0113settings')->getimageproduct_usetabs()): ?> <script type="text/javascript"> //<![cdata[ jquery(window).ready(function() { settimeout(function() { timeout = null; em.tools.decorateproductcollateraltabs(); }, 200); }); //]]> </script> <?php endif ?> </div> <!-- mobile --> <div class="set"> <?php $attributesetmodel = mage::getmodel("eav/entity_attribute_set"); $product=mage::getmodel('catalog/product')->load($_product->getid()); $attributesetmodel->load($product->getattributesetid()); $attributesetname = $attributesetmodel->getattributesetname(); if($attributesetname=='mobile'){ echo $this->__('color may vary shown in above image'); } ?> </div> <!-- mobile end--> <style> .reduce { clear: both; float: left; bottom: 13px; border-radius: 2px; color: #666; display: inline-block; font-size: 11px; height: 0px; line-height: 6px; position: relative; text-align: center; text-decoration: none; } .set { position:relative; bottom:950px; } </style>
why want move using css, when can move via phtml file code.
search below code:
<?php if ($_product->issaleable() && $this->hasoptions()):?> <?php echo $this->getchildchildhtml('container2', '', true, true) ?> <?php endif;?> move , place before:
<div class="check_delivery"> <?php echo $this->getlayout()->createblock('core/template')->settemplate('checkdelivery/checkdelivery.phtml')->tohtml();?> </div> so code like:
<hr class="hr"> <?php if ($_product->issaleable() && $this->hasoptions()):?> <?php echo $this->getchildchildhtml('container2', '', true, true) ?> <?php endif;?> <hr class="hr"> <div class="check_delivery"> <?php echo $this->getlayout()->createblock('core/template')->settemplate('checkdelivery/checkdelivery.phtml')->tohtml();?> </div> after have done this, clear cache - delete /var/cache , /var/full_page_cache (if applicable) folders.
few additional inputs code, there magento standard ways of coding must followed best practices.
1. example, might want clean code. magento's recommendation use below way of coding when adding content via phtml files.
<?php echo $this->__('your content'); ?> //this called translation in magento this means, should doing this:
<span class="coupontooltip"> <div class="cod_content"> <h5><?php echo $this->__('how place cash on delivery (cod) order?'); ?></h5> ... ... .. </div> </span> this translation helps when creating websites different locale.
2. secondly, recommendation commenting out lines.
do not comment out code using html comments. use below:
single line comment <?php //<b>strong</b> ?>
multi line comment <?php /*<b>strong</b>*/ ?>
3. not write css in same phtml file
use styles.css under /skin/frontend/yourpackage/youtheme/css folder
[editing answer based on modifications required]
look catalog.xml file inside /app/design/frontend/yourpackage/yourtheme/layout folder, search as="container2"
<catalog_product_view translate="label"> ... ... ... <block type="core/template_facade" name="product.info.container2" as="container2"> <action method="setdatabykey"><key>alias_in_layout</key><value>container2</value></action> <action method="setdatabykeyfromregistry"><key>options_container</key><key_in_registry>product</key_in_registry></action> <action method="append"><block>product.info.options.wrapper</block></action> <!--action method="append"><block>product.info.options.wrapper.bottom</block></action> </block--> <!--comment out line--> <action method="unsetcallchild"><child>container1</child><call>ifequals</call><if>0</if><key>alias_in_layout</key><key>options_container</key></action> <action method="unsetcallchild"><child>container2</child><call>ifequals</call><if>0</if><key>alias_in_layout</key><key>options_container</key></action> </block> ... </catalog_product_view> to move color , character dropdowns/options next each other, update code way:
<div class="desc-options"> //add new div <div class="pro_des"> <?php if ($_product->getshortdescription()):?> <div class="short-description"> <hr> <br/> <div class="std"><?php echo $_helper->productattribute($_product, nl2br($_product->getshortdescription()), 'short_description') ?> </div> </div> <?php endif;?> </div> <?php if ($_product->issaleable() && $this->hasoptions()):?> <?php echo $this->getchildchildhtml('container2', '', true, true) ?> <?php endif;?> </div> remove below code block above "check delivery ..."
<hr class="hr"> <?php if ($_product->issaleable() && $this->hasoptions()):?> <?php echo $this->getchildchildhtml('container2', '', true, true) ?> <?php endif;?> add css below
styles.css line no: 1021, search ".product-options" change width: 100% width: 50%; in theme css below:
.product-view .short-description { width: 50%; float:left; } dl dt { font-weight: bold; display: block; margin: 0 0 .5em; } .product-options dd { margin: 4px 0; display: inline-block; } to move add cart , buy buttons simple product, update code way:
<div class="quick_1"> <div class="product-data"> <?php echo $this->getchildhtml('alert_urls') ?> <?php echo $this->getchildhtml('product_type_data') ?> <?php echo $this->getchildhtml('extrahint') ?> <?php echo $this->gettierpricehtml() ?> <?php echo $this->getchildhtml('product.info.options.wrapper.bottom') ?> // add line </div> let me know if helps.
happy coding...
Comments
Post a Comment