Magento:将产品页面中的产品选项显示为两列中的列表元素
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Magento:将产品页面中的产品选项显示为两列中的列表元素相关的知识,希望对你有一定的参考价值。
有实际的Magento 1.9.3情况......
在产品页面中有很多配置选项。需要节省空间,因此需要将一列垂直产品选项列表转换为两列列表,以将空间减少到50%。
已经尝试了几种方法,也就是这一种:https://magento.stackexchange.com/questions/70857/display-product-options-change-layout-of-in-block-after-info-column
与Css Styling list elements in two columns结合使用
这个https://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/
但是真的没弄明白。停止在结果上,只显示一条水平线。问题是,如果要选择10个属性,则该行变得非常紧迫,并且无法识别任何内容。
有谁在那里,谁能够调整代码?
这是以下代码:
/template/catalog/product/view/type/options/configurable.P html
<?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)):?>
<div class="items">
<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>
</div>
<script type="text/javascript">
var spConfig = new Product.Config(<?php echo $_jsonConfig ?>);
</script>
<?php echo $this->getChildHtml('after') ?>
<?php endif;?>
答案
没有看到输出很难知道你想要什么,但如果你想让选项在2列,这应该工作。
.items dl {
display:flex;
flex-wrap: wrap;
}
.items dl .options-wrapper{
width: 50%;
}
//If you want on smaller screens to make them 1 row.
@media screen and (max-width: 768px) {
.items dl .options-wrapper{
width: 100%;
}
}
<?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)):?>
<div class="items">
<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):
?>
<div class="options-wrapper">
<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>
</div>
<?php endif; ?>
<?php endforeach; ?>
</dl>
</div>
<script type="text/javascript">
var spConfig = new Product.Config(<?php echo $_jsonConfig ?>);
</script>
<?php echo $this->getChildHtml('after') ?>
<?php endif;?>
以上是关于Magento:将产品页面中的产品选项显示为两列中的列表元素的主要内容,如果未能解决你的问题,请参考以下文章
Magento 在 onclick 链接上的产品详细信息页面上打开描述选项卡