Question

我想在magento2的类别视图页面中显示可配置的产品选项下拉列表。任何人都可以帮助我吗？

提前致谢。

Answer 1

点击左侧菜单列表中的商店
转到属性部分，然后单击产品
您必须显示并单击该属性的搜索产品选项
转到店面属性
并更改-> ＆在产品列表中使用->否定为是，
刷新您的缓存或需要部署静态内容。

Cli-> php bin / magento设置：static-contnet：部署或
php bin / magento设置：static-contnet：deploy -f（如果使用） magento2.2x。

Answer 2

这全部取决于您是否想要色板或下拉菜单，下拉菜单的答案并不那么容易。

首先创建一个自定义模块。并将以下内容添加到您的di文件中，该类可停止将可配置产品添加到购物车中。

<type name="Magento\ConfigurableProduct\Model\Product\Type\Configurable">
        <plugin name="remove_possible_by_from_list" type="GremlinTech\CategoryConfigurable\Plugin\Configurable" sortOrder="1"  disabled="false"/>

</type>

然后在插件下创建一个名为configurable的自定义php类

<?php

namespace GremlinTech\CategoryConfigurable\Plugin;

class Configurable
{

    public function afterIsPossibleBuyFromList(\Magento\ConfigurableProduct\Model\Product\Type\Configurable $subject, $result)
    {
        return true;
    }

}

下一步是覆盖Magento_Catalog :: templates / list.phtml，并在已存在的隐藏输入字段下添加以下内容。

<input type="hidden" name="selected_configurable_option" value="" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
<input type="hidden" name="item"  value="<?= /* @noEscape */ $postParams['data']['product'] ?>" />

此外，您还需要修改表单元素本身，使其看起来如下所示

      <form data-role="tocart-form"
                      id="product_addtocart_form-<?=$_product->getId(); ?>"
                      data-product-sku="<?= $block->escapeHtml($_product->getSku()) ?>"
                      action="<?= $block->getAddToCartUrl($_product) ?>"
                      <?php if ($_product->getOptions()) :?> enctype="multipart/form-data"<?php endif; ?>
                      method="post">

现在您的列表视图具有其实际字段，您需要在主题或上面创建的模块中添加catalog_category_view.xml布局，并添加以下内容。这会将产品视图可配置模板称为您的列表。

  <referenceBlock name="category.products.list">
            <block class="Magento\ConfigurableProduct\Block\Product\View\Type\Configurable" name="category.product.configurable" as="configurable_options"  template="Magento_Catalog::product/list/view/type/options/configurable.phtml" />
</referenceBlock>

您需要对catalogsearch_result_index.xml进行相同的操作，因为尽管使用相同的目录列表模板，但搜索结果的xml有所不同

 <referenceBlock name="search_result_list">
            <block class="Magento\ConfigurableProduct\Block\Product\View\Type\Configurable" name="category.product.configurable" as="configurable_options"  template="Magento_Catalog::product/list/view/type/options/configurable.phtml" />
 </referenceBlock>

现在我们有了这个，您需要在主题或模块中再次覆盖Magento_Catalog :: product / list / view / type / options / configurable.phtml模板，然后使它看起来像下面的样子。

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>

<?php
/** @var $block \Magento\ConfigurableProduct\Block\Product\View\Type\Configurable*/
$_product    = $block->getProduct();
if($_product->getTypeId() === 'configurable') :
$_attributes = $block->decorateArray($block->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)) :?>
    <?php foreach ($_attributes as $_attribute) : ?>
        <div class="field configurable required">
            <label class="label" for="attribute<?= $block->escapeHtmlAttr($_attribute->getAttributeId()) ?>">
                <span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span>
            </label>
            <div class="control">
                <select name="super_attribute[<?= $block->escapeHtmlAttr($_attribute->getAttributeId()) ?>]"
                        data-selector="super_attribute[<?= $block->escapeHtmlAttr($_attribute->getAttributeId()) ?>]"
                        data-validate="{required:true}"
                        id="attribute<?= $block->escapeHtmlAttr($_attribute->getAttributeId()) ?>"
                        class="super-attribute-select">
                    <option value=""><?= $block->escapeHtml(__('Choose an Option...')) ?></option>
                </select>
            </div>
        </div>
    <?php endforeach; ?>
    <script type="text/x-magento-init">
        {
            "[data-role=priceBox][data-price-box=product-id-<?= $block->escapeJs($_product->getId()) ?>]": {
                "priceBox": {}
            }
        }
    </script>
    <script type="text/x-magento-init">
        {
            "#product_addtocart_form-<?=$_product->getId(); ?>": {
                "configurable": {
                    "selectSimpleProduct" : ".cart-price.product-<?=$_product->getId(); ?> [name=selected_configurable_option]",
                    "priceHolderSelector" : ".cart-price.product-<?=$_product->getId(); ?> > .price-box",
                    "spConfig": <?= /* @noEscape */ $block->getJsonConfig() ?>,
                    "gallerySwitchStrategy": "<?= $block->escapeJs($block->getVar(
                        'gallery_switch_strategy',
                        'Magento_ConfigurableProduct'
                    ) ?: 'replace'); ?>"
                }
            },
            "*" : {
                "Magento_ConfigurableProduct/js/catalog-add-to-cart": {}
            }
        }
    </script>
<?php endif;?>
<?php endif;?>

与默认configurable.phtml相比发生了什么

我们添加了以下init脚本，该脚本使价格在网格本身上具有动态性，而不会降低以下价格，并且采用静态价格的可配置选项将不会失败。

 <script type="text/x-magento-init">
        {
            "[data-role=priceBox][data-price-box=product-id-<?= $block->escapeJs($_product->getId()) ?>]": {
                "priceBox": {}
            }
        }
    </script>

我们还修改了可配置x-init中的参数，以使其更特定于网格非常规项目，否则每个项目的所有价格都会发生变化，隐藏的configurable_selected隐藏项目也会发生变化。

最后要做的是在表单范围

中再次调用list.phtml循环中的选项。

  <?= $block->getChildBlock("configurable_options")->setData('product', $_product)->toHtml(); ?>

我们正在做的是获取子块并将特定列表项设置为块上的产品，否则它将尝试像使用产品视图一样使用注册表。

那是希望能对您有所帮助。

Answer 3

转到

/ app / design / frontend / [package] / [theme] /template/catalog/product/list.phtml

在for循环中设置以下代码

foreach ($_productCollection as $_product)

<?php if($_product->isConfigurable()): ?>
  //get attributes
  <?php $attributes = $_product->getTypeInstance(true)->getConfigurableAttributes($_product) ?>
  <?php if(count($attributes)): ?>
    <ul>
    <?php foreach($attributes as $att): ?>
      <?php $pAtt=$att->getProductAttribute();
        //get the child products
        $allProducts = $_product->getTypeInstance(true)->getUsedProducts(null, $_product);
        $frontValues =array() ?>
      <li><?php echo $pAtt->getFrontendLabel() ?>
       <ul>
       <?php foreach($allProducts as $p): ?>
         //check stock, status, ...
         //do not show unsaleable options
         <?php if(!$p->isSaleable()) continue; ?>
         <?php $out=$p->getAttributeText($pAtt->getName()); ?>
         <?php $frontValues[$out]=$out; ?>
       <?php endforeach ?>
        <li><?php echo implode('</li><li>', $frontValues) ?></li>
       </ul>
      </li>
    <?php endforeach ?>
    </ul>
  <?php endif ?>
<?php endif ?>

您需要根据您的网站设置CSS。

如何在magento2的类别视图页面中添加可配置产品选项？

3 个答案: