Magento：在产品页面中将产品选项显示为两列中的列表元素

Posted 2023-03-06

【中文标题】Magento：在产品页面中将产品选项显示为两列中的列表元素

【英文标题】：Magento: Display Product Options in Product Page as List Elements in Two Columns

【发布时间】：2019-03-31 07:23:09

【问题描述】：

有实际的 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.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)):?>
<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;?>

【参考方案1】：

没有看到输出很难知道你到底想要什么，但如果你希望选项在 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;?>

【讨论】：

亲爱的@vasilis-neris！感谢您的快速响应。是的，看来是刚需。让我向您展示之前和之后以及现在已经完成的定制。这是 CSS > jsfiddle.net/yqn9degz 这是之前的：ibb.co/eUnzGV 和之后的：ibb.co/cr9Aqq。但值得注意的是，属性在长度上当然不会完全相同。因此需要对@media 进行调整。也许您还有其他关于修改的 cmets？

ibb.co 链接显示一个空白页面。可以试试新的吗？