Magento2-Produktliste - Produktoptionen anzeigen

Ich arbeite gerade an einem neuen Magento 2-Thema. Für dieses Thema möchte ich alle Produktoptionen (benutzerdefinierte Optionen und Optionen aus konfigurierbaren Produkten) in der Produktliste anzeigen. Auf diese Weise kann der Benutzer schnell Produkte in den Warenkorb legen.

Ich habe versucht, den product.infoBlock hinzuzufügen catalog_category_view.xmlund das Produkt für diesen Block festzulegen. Optionen werden für jedes Produkt angezeigt. Das Problem besteht darin, dass die angezeigte Option nur vom ersten Produkt stammt. Alle anderen Produkte haben diese Optionen.

--- UPDATE ---

Ich habe es geschafft, die Produktoptionen anzuzeigen, aber die Preise werden nicht aktualisiert. Kann mich jemand in die richtige Richtung weisen?

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

Ich habe die getJsonConfigFunktion auch in meiner eigenen ListProduct-Klasse implementiert.

Sie können als Beispiel das Modul Magento_Swatch nehmen.

Der Block Magento\Swatches\Block\Product\Renderer\Listing\Configurablewird dem Block mit dem Namen hinzugefügt category.product.type.details.renderers.

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

Die Vorlage initialisiert das für Farbfelder verwendete 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

Und alles Wichtige wird in das Farbfeld JS getan. https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js Wie Funktionen: _RenderControls, _RenderFormInput, _EventListener, _UpdatePriceund andere. Der JS sieht groß aus. Das Rendern von Farbfeldern, die über AJAX abgerufen werden, enthält jedoch viel Code. Sie brauchen es wahrscheinlich nicht, es ist einfacher zu implementieren.

Hier werden die Optionen (Superattribute und zugehörige Produkte) HTML-Tags (Swatches Divs) erstellt und bearbeitet. Auch hier wird der Preis abgewickelt. In Ihrem Fall haben Sie Dropdowns.

Sie müssten Ihr eigenes Modul schreiben, um alle oben genannten zu implementieren. Theoretisch können Sie beliebige Optionen für alle Arten von Produkten hinzufügen (Bundle, gruppiert, ..). Die Kosten sind Leistung, da Sie mehr Daten in Modelle für jedes Produkt auf einer Kategorieseite mit Optionen laden müssen.

Alternativ können Sie versuchen, auf die konfigurierbaren / einfachen zugehörigen Produkte nicht visuelle Farbfelder (ohne Bilder) einzustellen.

Für konfigurierbare Produkte: Sie müssen den Attributtyp " Textfeld " festlegen und die Vorlage so ändern, dass die Farbfelder angezeigt werden (dies ist bei Magento 2 die Standardeinstellung). Falls gewünscht, ist dies das einfachste oder erweitern Sie das Funktionsmuster durch ein Modul, das ein neues hinzufügt Option unter dem Typ des Attributs und erstellen Sie eine neue Vorlage für diese Option.

Klicken Sie im linken Menübereich -> Zum Attributbereich Gehe zu und klicken Sie auf Produkt -> Produktoption suchen, die Sie anzeigen müssen, und klicken Sie auf dieses Attribut -> Gehe zu Storefront-Eigenschaften -> Und Ändern -> in Sichtbar auf Katalogseiten in Storefront & Verwendet in der Produktliste -> NEIN zu JA.