Listado de productos Magento2 - Mostrar opciones de productos

10

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.

Selvático
fuente
magento.stackexchange.com/questions/100801/… Cómo obtener opciones personalizadas, también puede llevarlo a opciones regulares. Agregar al carrito en la lista de categorías: magento.stackexchange.com/a/125813/69
B00MER
qué es value_index y option_type_id en su código. value_index es el índice del valor de la opción y option_type_id es el id de la opción
Sarvesh Tiwari
recibo un error de variables indefinidas $ customOptions, ¿pueden verificar y revertirme? Estoy esperando su respuesta
Sarvesh Tiwari

Respuestas:

1

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

oscuro
fuente
0

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.

St3phan
fuente
Esta no parece ser la mejor opción, vea mi pregunta actualizada, solo que los precios no funcionan en este momento.
Silvan
0

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

Abhishek
fuente