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

Question

我想在 magento2 的类别视图页面中显示可配置的产品选项下拉菜单。谁能帮帮我？

提前致谢。

Answer 1

转到

/app/design/frontend/[包]/[主题]/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。

Answer 2

• 点击左侧菜单列表中的商店
• 转到属性部分并点击产品
• 搜索您必须显示的产品选项并单击该属性
• 转到店面属性
• 和更改 -> 在店面目录页面上可见 & 用于产品列表 -> 否到是并且
• 刷新你的缓存或者你 需要部署静态内容。

Cli-> php bin/magento setup:static-contnet:deploy or
php bin/magento setup:static-contnet:deploy -f 如果你正在使用 magento2.2x。

Answer 3

这一切都取决于您是否希望拥有样本或下拉菜单，下拉菜单的答案并不容易。

首先创建一个自定义模块。并将以下内容添加到您的 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>

然后在 Plugin 下创建一个自定义的 php 类，叫做configurable

<?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相比发生了什么变化

我们添加了下面的初始化脚本，这使得网格本身的价格是动态的，如果没有下面的价格无法初始化并且具有静态价格的可配置选项将失败。

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

我们还修改了可配置 x-init 中的参数，使它们更具体地适用于网格独立项目，否则每个项目的所有价格都会发生变化，隐藏的可配置选择的隐藏项目也会发生变化。

最后要做的就是在你的list.phtml中再次调用循环中的选项，在表单的范围内，

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

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

就是这样，希望对你有帮助。