Listado de productos Magento2 - Mostrar opciones de productos

Estoy trabajando en un nuevo tema de Magento 2 en este momento. Para este tema, quiero mostrar todas las opciones del producto (opciones personalizadas y opciones del producto configurable) en la lista de productos. De esta forma, el usuario puede agregar rápidamente productos a su carrito.

Intenté agregar el product.infobloque catalog_category_view.xmly configurar el producto para ese bloque. Se muestran opciones para cada producto, el problema es que la opción que se muestra es solo del primer producto. Todos los demás productos tienen estas opciones.

--- ACTUALIZACIÓN ---

Logré mostrar las opciones del producto, pero los precios no están actualizados. ¿Alguien me puede apuntar en la dirección correcta?

<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>

También implementé la getJsonConfigfunción en mi propia clase ListProduct.

Puede tomar como ejemplo el módulo Magento_Swatch.

El bloque Magento\Swatches\Block\Product\Renderer\Listing\Configurablese agrega al bloque con nombre category.product.type.details.renderers.

Como aquí: https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/layout/catalog_category_view.xml

La plantilla inicializa el JS utilizado en las muestras: Magento_Swatches :: product / listing / renderer.phtml

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

Y todo lo importante se hace en la muestra JS. https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js Como funciones: _RenderControls, _RenderFormInput, _EventListener, _UpdatePricey otros. El JS se ve grande. Pero tiene mucho código para representar imágenes de muestras que se obtienen a través de AJAX. Probablemente no lo necesite, es más fácil de implementar.

Aquí, las opciones (súper atributos y productos asociados) se crean y manipulan etiquetas html (muestras divs). El precio también se maneja aquí. En su caso, tendrá menús desplegables.

Tendría que escribir su propio módulo para implementar todo lo anterior. Teóricamente, puede agregar cualquier opción de todo tipo de productos (agrupados, agrupados, ...). El costo es el rendimiento, ya que necesitaría cargar más datos en los modelos para cada producto en una página de categoría que tenga opciones.

Como alternativa, puede intentar establecer en los productos asociados configurables / simples muestras no visuales (sin imágenes).

Para productos configurables: debe establecer el tipo de atributo " Muestra de texto " y modificar la plantilla para mostrar la muestra (es predeterminada en Magento 2), si lo desea, esta es la muestra de funcionalidad más simple o extendida a través de un módulo, que agrega un nuevo opción en el tipo de atributo y cree una nueva plantilla para esa opción.

En la lista de menú izquierda -> Ir a la sección de atributos y haga clic en Producto -> Buscar opción de producto que tiene que mostrar y haga clic en ese atributo -> Ir a Propiedades de escaparate -> Y Cambiar -> en Visible en páginas de catálogo en escaparate y usado en Listado de productos -> NO a SÍ.