Lista produktów Magento2 - Pokaż opcje produktu

Obecnie pracuję nad nowym motywem Magento 2. W tym temacie chcę pokazać wszystkie opcje produktu (opcje niestandardowe i opcje konfigurowalne produktu) na liście produktów. W ten sposób użytkownik może szybko dodawać produkty do koszyka.

Próbowałem dodać product.infoblok catalog_category_view.xmli ustawić produkt dla tego bloku. Opcje są wyświetlane dla każdego produktu, problem polega na tym, że pokazana opcja dotyczy tylko pierwszego produktu. Więc wszystkie inne produkty mają te opcje.

--- AKTUALIZACJA ---

Udało mi się pokazać opcje produktu, ale ceny nie są aktualizowane. Czy ktoś może skierować mnie we właściwym kierunku?

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

Zaimplementowałem również tę getJsonConfigfunkcję w mojej własnej klasie ListProduct.

Możesz wziąć jako przykład moduł Magento_Swatch.

Blok Magento\Swatches\Block\Product\Renderer\Listing\Configurablezostanie dodany do bloku o nazwie category.product.type.details.renderers.

Jak tutaj: https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/layout/catalog_category_view.xml

Szablon inicjuje JS używany w próbkach: Magento_Swatches :: product / listing / renderer.phtml

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

I wszystko, co ważne, jest zrobione w próbce JS. https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js jak funkcje: _RenderControls, _RenderFormInput, _EventListener, _UpdatePricei inne. JS wygląda na duży. Ale ma wiele kodu do renderowania próbek, które są pobierane przez AJAX. Prawdopodobnie nie potrzebujesz go, łatwiej go wdrożyć.

Tutaj tworzone są opcje (super atrybuty i powiązane produkty) tagi html (próbki div). Cena jest tutaj również ustalana. W twoim przypadku będziesz mieć listy rozwijane.

Będziesz musiał napisać własny moduł, aby zaimplementować wszystko powyżej. Teoretycznie możesz dodać dowolne opcje ze wszystkich rodzajów produktów (pakiet, pogrupowane, ...). Kosztem jest wydajność, ponieważ trzeba załadować więcej danych do modeli do każdego produktu na stronie kategorii, która ma opcje.

Alternatywnie możesz spróbować ustawić niewizualne próbki konfigurowalne / proste powiązane produkty (bez obrazów).

W przypadku produktów konfigurowalnych: należy ustawić typ atrybutu „ Próbka tekstu ” i zmodyfikować szablon, aby wyświetlał próbkę (jest to domyślnie w Magento 2), w razie potrzeby jest to najprostsza lub rozszerzyć próbkę funkcjonalności przez moduł, który dodaje nowy opcję według typu atrybutu i utwórz nowy szablon dla tej opcji.

Po lewej stronie Lista menu -> Przejdź do sekcji atrybutów i kliknij Produkt -> Wyszukaj opcję produktu, którą musisz pokazać i kliknij ten atrybut -> Idź do właściwości sklepu -> I zmień -> w Widoczny na stronach katalogu w Sklepie i używany na liście produktów -> NIE na TAK.