Liste des produits Magento2 - Afficher les options du produit

Je travaille actuellement sur un nouveau thème Magento 2. Pour ce thème, je veux afficher toutes les options de produit (options personnalisées et options sous forme de produit configurable) dans la liste des produits. De cette façon, l'utilisateur peut rapidement ajouter des produits à son panier.

J'ai essayé d'ajouter le product.infobloc catalog_category_view.xmlet de définir le produit pour ce bloc. Les options sont affichées pour chaque produit, le problème est que l'option indiquée ne concerne que le premier produit. Tous les autres produits ont donc ces options.

--- METTRE À JOUR ---

J'ai réussi à montrer les options du produit, mais les prix ne sont pas mis à jour. Quelqu'un peut me diriger dans la bonne direction?

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

J'ai également implémenté la getJsonConfigfonction dans ma propre classe ListProduct.

Vous pouvez prendre comme exemple le module Magento_Swatch.

Le bloc Magento\Swatches\Block\Product\Renderer\Listing\Configurableest ajouté au bloc avec nom category.product.type.details.renderers.

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

Le modèle initialise le JS utilisé sur les échantillons: Magento_Swatches :: product / listing / renderer.phtml

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

Et tout ce qui est important est fait dans le swatch JS. https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js Comme fonctions: _RenderControls, _RenderFormInput, _EventListener, _UpdatePriceet d' autres. Le JS semble grand. Mais il a beaucoup de code autour du rendu des images d'échantillons récupérées via AJAX. Vous n'en avez probablement pas besoin, c'est plus facile à mettre en œuvre.

Ici, les options (super attributs et produits associés) balises html (swatches divs) sont créées et manipulées. Le prix est également géré ici. Dans votre cas, vous aurez des listes déroulantes.

Vous auriez besoin d'écrire votre propre module pour implémenter tout ce qui précède. Théoriquement, vous pouvez ajouter toutes les options de tous les types de produits (bundle, groupés, ..). Le coût est la performance, car vous auriez besoin de charger plus de données dans les modèles pour chaque produit sur une page de catégorie qui a des options.

Vous pouvez également essayer de définir des échantillons non visuels configurables / simples pour les produits associés (sans images).

Pour les produits configurables: vous devez définir le type d'attribut " Texte Swatch " et modifier le modèle pour afficher le nuancier (c'est la valeur par défaut sur Magento 2), si vous le souhaitez, c'est le plus simple, ou étendre la fonctionnalité swatch via un module, qui ajoute un nouveau option au type d'attribut et créer un nouveau modèle pour cette option.

Dans la liste de menu de gauche -> Aller à la section d'attribut et cliquez sur Produit -> Rechercher l'option de produit que vous devez afficher et cliquer sur cet attribut -> Aller aux propriétés de la vitrine -> Et modifier -> dans Visible sur les pages de catalogue sur la vitrine et utilisé dans la liste des produits -> NON à OUI.