magento 使用 css 移动可配置产品选项
问题描述 投票：0回答：1
请访问这些链接：
在可配置产品中，我想将“颜色”和字符移动到页面顶部。
我想将其移至“检查递送可用性”块上方。
意味着我希望在文本“年龄：2 岁及以上”旁边显示此内容。 4行之后有一个间隙。我想在那里移动颜色和字符。
请帮我找到解决方案。
这是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 to a 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 to 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 By -->
<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 BY : </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 do I place a Cash on Delivery (COD) order?</h5>
<p>All items that have the "Cash on Delivery Available" icon are valid for order by Cash on Delivery.</p>
<p>Add the item(s) to your cart and proceed to checkout.When prompted to choose a payment option, select "Cash on Delivery". </p>
<p>Once you place the order you will receive confirmation call from our customer support for validation with in 48 hours. Once verified and confirmed, your order will be processed for shipment in the time specified, from the date of confirmation. You will be required to make a cash-only payment to our courier partner at the time of delivery of your order to complete the payment.</p>
<p>Terms & Conditions</p>
<p>The maximum order value for COD is ₹5000.</p>
<p>e-Gift Vouchers or Store Credit cannot be used for COD orders.</p>
<p>Cash-only payment at the time of delivery.</p>
</div>
</span>
</div>
<div class= "bottom3">
<!-- wholesale available -->
<?php
//$product is your current product
if($_product->getTierPrice()) {
echo "
<div class = 'quickphp'>
<h5>Wholesale</h5>
Available.<br>
Usually 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 do I return an item purchased on Totaltoys.com</h5>
<p>Conveniently, you can call us at 092-434-22233 and email us at [email protected] with order number, invoice number and product name. If you've received an item in a 'Damaged', 'Defective' or 'Not as Described' state.</p>
<h5>Return & Replacement policy:</h5>
<p>Returns or replacement request should be placed within 7 days from the date of delivery.</p>
<p>As we receive your request, our concerned team will contact you to validate the compliant. The validation process may require submitting of product photos. Once the validation process is completed then further action will be taken.
Once the product reaches to us/seller, the replacement will be proceed in 1-2 working days after physical inspection of the goods and shipment will be done simultaneously.</p>
<p>If you've received an item in a 'Damaged', 'Defective' or 'Not as Described' state, all replacements/pickups will be done free of cost.</p>
<p>If the packaging is tampered with or damaged, before accepting delivery of the goods, please refuse to take delivery of the package, and call us on 092-434-22233 or mail us at [email protected] , mentioning your order reference number. We shall make our best efforts to ensure that a replacement delivery is made to you at the earliest.</p>
<p>In the rare circumstances where a pickup cannot be done, you can ship the product through any courier. You will be reimbursed the shipping charges against the original receipt.</p>
<p>Replacement is subjected to availability of stock. In case a replacement is not available, the amount will be refunded to your account from which the purchase was made. (Amount includes shipping and gift wrapping charges)</p>
<h5> Return Request is not Accepted If:</h5>
<li>Return request is made outside the specified time period</li>
<li>Missing of tags, labels, original packing, and invoice.</li>
<li>Misused or Mishandle of the product from customer end.</li>
<p>For all refunds we will refund the amount to same mode of payment as used during checkout. Refunds for cash on delivery will be made via online transfer of funds to the customers bank account.</p>
<p>If the customer chooses to cancel the order before the product is shipped, he will be entitled to a 100% refund.
Do I have to return the free gift when I return a product?</p>
<p>Yes. The free gift is included as part of the item order and needs to be returned along with the originally delivered product</p>
<p>Please contact us on [email protected] or call us at 092-434-22233 for any doubts and concerns</p>
</span>
</div>
</div>
</div>
</div>
<div class="Delivery">
<h5> Delivered By </h5>
<div class="Delivery_hover_details">?
<span class="coupontooltip">
<div class="delivery_content">
<h5>What is the estimated delivery time?</h5>
<p>Sellers generally procure and ship the items within the time specified on the product page. Business days exclude public holidays and Sundays.</p>
<p>Estimated delivery time depends on the following factors:
<li>Time of the order, usually orders made after 2:00pm can be shipped only on next workingday</li>
<li>The Seller offering the product</li>
<li>Product's availability with the Seller</li>
<li>The destination to which you want the order shipped to and the 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 than usual due to 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 Now </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
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">
<?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;?>
<?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 as 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>
1个回答
1
投票
投票
当你可以通过 phtml 文件代码移动它时，为什么要使用 CSS 来移动它。
搜索以下代码：
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>
移动并将其放置在之前：
<div class="check_delivery">
<?php echo $this->getLayout()->createBlock('core/template')->setTemplate('checkdelivery/checkdelivery.phtml')->toHtml();?>
</div>
所以你的代码现在看起来像：
<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>
完成此操作后，清除缓存 - 删除 /var/cache 和 /var/full_page_cache（如果适用）文件夹。
关于您的代码的额外输入很少，必须遵循 Magento 标准编码方式才能获得最佳实践。
1。例如，您可能想要清理代码。 Magento 的建议是在通过 phtml 文件添加任何内容时使用以下编码方式。
<?php echo $this->__('Your Content'); ?> //this is called TRANSLATION in Magento
这意味着，你应该这样做：
<span class="coupontooltip">
<div class="cod_content">
<h5><?php echo $this->__('How do I place a Cash on Delivery (COD) order?'); ?></h5>
...
...
..
</div>
</span>
此翻译有助于您创建具有不同区域设置的网站。
2。其次，建议注释掉行。
请勿使用 HTML 注释注释掉代码。使用方法如下：
单行评论
<?php //<b>Strong</b> ?>多行注释
<?php /*<b>Strong</b>*/ ?>3.不要在同一个 phtml 文件中写入 CSS
使用 /skin/frontend/yourpackage/youtheme/css 文件夹下的 styles.css
[根据需要修改编辑答案]
在 /app/design/frontend/yourpackage/yourtheme/layout 文件夹中查找 Catalog.xml 文件，搜索 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 this 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>
要将“颜色”和“字符”下拉列表/选项移到彼此旁边，请按以下方式更新代码：
<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>
从上面的“检查交货...”中删除下面的代码块
<hr class="hr">
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>
添加CSS如下
styles.css line no: 1021, search for ".product-options"
Change the width: 100% to width: 50%;
在主题 CSS 中执行以下操作：
.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;
}
要将“添加到购物车”和“立即购买”按钮移动为“简单产品”，请按以下方式更新您的代码：
<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 this line
</div>
请告诉我这是否有帮助。
快乐编码...
最新问题
- Django 和 Elastic Beanstalk URL 运行状况检查
- Trainer Huggingface - RuntimeError：无法固定“torch.cuda.FloatTensor”，只能固定密集的 CPU 张量
- 虽然 Azure Key Vault Secret 已作为读者与我共享，但我无法在 Power Automate 中检索该机密
- 无法通过Workbench（或任何GUI）连接到数字海洋LEMP堆栈MySql，但可以通过终端mysql cmd连接
- Tailwind 侧边栏问题
- “管道”对象没有属性“_check_fit_params”
- 很难用玩笑来模拟supabase.eq().eq()
- 根据日期将报告列设置为“是”或“否” - Oracle SQL
- 使用公式EXCEL自动重复数据
- 如何从客户端下载按序列生成的csv？
- Excel TEXTJOIN 表中非空行
- 根据行号从 CSV 中删除一行，然后移动所有行
- 我可以使用带有“only”和“ excepted”的“devise_for”吗？
- Outlook 可用性
- preventDefault() 无法按文档运行
- 如何对 req.file 使用 multer-s3 的类型定义而不是 multer 的
- 从 Google 表格中获取富文本数据
- AppLauncher找不到iOS版本18.0.1磁盘映像，xcode直接工作正常
- 如何在 Android 中将浮动操作按钮展开为 EditText？
- Pandas：按公共列合并，保留所有其他列并按公共列排序
© www.soinside.com 2019 - 2024. All rights reserved.