Magento2产品列表-显示产品选项


10

目前,我正在研究新的Magento 2主题。对于此主题,我想在产品列表中显示所有产品选项(自定义选项和选项构成可配置产品)。这样,用户可以快速将产品添加到购物车中。

我尝试在其中添加product.infocatalog_category_view.xml并为该块设置产品。显示每个产品的选项,问题是显示的选项仅来自第一个产品。因此,所有其他产品都有此选项。

-更新-

我设法显示了产品选项,但是价格没有更新。有人可以指出我正确的方向吗?

<form id='product_addtocart_form_<?php echo $product->getId(); ?>' class="c-product__details__add-to-cart" data-role="tocart-form" action="<?php echo $postParams[ 'action' ]; ?>" method="post">
    <input type="hidden" name="product" value="<?php echo $postParams[ 'data' ][ 'product' ]; ?>">
    <input type="hidden" name="<?php echo Action::PARAM_NAME_URL_ENCODED; ?>" value="<?php echo $postParams[ 'data' ][ Action::PARAM_NAME_URL_ENCODED ]; ?>">
    <?php echo $block->getBlockHtml('formkey') ?>
    <div class="product-options-wrapper" id="product-options-wrapper" data-hasrequired="* Verplichte velden">
        <?php if($product->getTypeId() === 'configurable') : ?>
            <?php foreach($product->getTypeInstance()->getConfigurableAttributes($product) as $attribute) : ?>
                <div class="field">
                    <label class="label" for="select_<?php echo $attribute->getAttributeId(); ?>"><span><?php echo $attribute->getLabel() ?></span></label>
                    <?php $values = $attribute->getOptions(); ?>
                    <div class="control">
                        <select id="select_<?php echo $attribute->getAttributeId() ?>" name="options[<?php echo $attribute->getAttributeId() ?>]" class="product-option product-custom-option-<?php echo $attribute->getAttributeId() ?> admin__control-select" data-selector="options[<?php echo $attribute->getAttributeId() ?>]">
                            <?php foreach($values as $value): ?>

                                <option value="<?php echo $value['value_index'] ?>" price="2"><?php echo  $value['label'] ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else : ?>
            <?php foreach($customOptions as $option): ?>
                <div class="field">
                    <label class="label" for="select_<?php echo $option->getId(); ?>"><span><?php echo $option->getTitle() ?></span></label>
                    <?php $values = $option->getValues(); ?>
                    <div class="control">
                        <select id="select_<?php echo $option->getId() ?>" data-id="<?php echo $product->getId() ?>" name="options[<?php echo $option->getId() ?>]" class="product-option product-custom-option-<?php echo $product->getId() ?> admin__control-select" data-selector="options[<?php echo $option->getId() ?>]">
                            <?php foreach($values as $value): ?>

                                <option value="<?php echo $value->getData('option_type_id') ?>" price="3"><?php echo $value->getTitle() ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
        <script>
            require([
                'jquery',
                'Magento_Catalog/js/price-box'
            ], function($){
                var priceBoxes = $('[data-product-id=<?php echo $product->getId(); ?>]');

                priceBoxes = priceBoxes.filter(function(index, elem){
                    return !$(elem).find('.price-from').length;
                });
                var priceBox = priceBoxes.priceBox({'priceConfig': <?php /* @escapeNotVerified */ echo $block->getJsonConfig($product, $customOptions) ?>});

                $('.product-option').on('change', function() {
                    priceBox.trigger('updatePrice');
                });
            });
        </script>
    </div>
    <button type="submit" title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>" class="action tocart primary im">
        <span><?php echo __('Add to cart'); ?></span>
    </button>
</form>

我还在getJsonConfig自己的ListProduct类中实现了该功能。


magento.stackexchange.com/questions/100801/…如何使用自定义选项,也可能会引导您使用常规选项。添加到类别列表上的购物车:magento.stackexchange.com/a/125813/69
B00MER '04

您的代码中的value_index和option_type_id是什么。value_index是选项值的索引,而option_type_id是选项ID
Sarvesh Tiwari

我收到错误未定义变量$ customOptions,您可以检查并还原我吗,我正在等待您的回复
Sarvesh Tiwari

Answers:


1

您可以以Magento_Swatch模块为例。

该块Magento\Swatches\Block\Product\Renderer\Listing\Configurable将添加到名称为的块中category.product.type.details.renderers

如此处所示:https : //github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/layout/catalog_category_view.xml

该模板初始化用于色板的JS:Magento_Swatches :: product / listing / renderer.phtml

https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml

样例JS中完成了所有重要的工作。 https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js 像功能:_RenderControls_RenderFormInput_EventListener_UpdatePrice等。JS看起来很大。但是,它具有许多代码,用于渲染通过AJAX获取的色板图像。您可能不需要它,它更容易实现。

在这里,选项(超级属性和相关产品)的html标记(色板div)被创建和操纵。价格也在这里处理。就您而言,您将具有下拉菜单。

您需要编写自己的模块以实现上述所有功能。从理论上讲,您可以从所有类型的产品(捆绑,分组,..)中添加任何选项。成本就是性能,因为您需要将更多数据加载到具有选项的类别页面上的每个产品的模型中。

作为替代,您可以尝试将非可视色板(无图像)设置为可配置/简单的关联产品。


0

对于可配置产品:必须设置属性类型“ Text Swatch ”并修改模板以显示该色板(Magento 2的默认设置),如果需要的话,这是最简单的方法,或者通过一个模块扩展功能色板,从而添加一个新的色板。属性类型的选项,并为此选项创建一个新模板。


这似乎不是最好的选择,请参阅我的更新问题,仅目前价格不起作用。
Silvan

0

在左侧菜单列表->转到属性部分,然后单击产品->搜索要显示的产品选项并单击该属性->转到店面属性->更改->在店面目录页面上可见并使用产品列表中->否到是。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.