Elenco prodotti Magento2: mostra le opzioni del prodotto


10

Al momento sto lavorando a un nuovo tema di Magento 2. Per questo tema voglio mostrare tutte le opzioni di prodotto (opzioni personalizzate e opzioni da un prodotto configurabile) nell'elenco dei prodotti. In questo modo l'utente può aggiungere rapidamente prodotti al proprio carrello.

Ho provato ad aggiungere il product.infoblocco catalog_category_view.xmle impostare il prodotto per quel blocco. Le opzioni sono visualizzate per ogni prodotto, il problema è che l'opzione visualizzata è solo dal primo prodotto. Quindi tutti gli altri prodotti hanno questa opzione.

--- AGGIORNARE ---

Sono riuscito a mostrare le opzioni del prodotto, ma i prezzi non sono aggiornati. Qualcuno può indicarmi la giusta direzione?

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

Ho anche implementato la getJsonConfigfunzione nella mia classe ListProduct.


magento.stackexchange.com/questions/100801/… Come per le opzioni personalizzate, potresti condurre anche verso opzioni regolari. Aggiungi al carrello nell'elenco delle categorie: magento.stackexchange.com/a/125813/69
B00MER

cos'è value_index e option_type_id nel tuo codice. value_index è l'indice del valore dell'opzione e option_type_id è l'id dell'opzione
Sarvesh Tiwari,

sto ricevendo un errore variabili non definite $ customOpzioni puoi controllarmi e ripristinarmi sto aspettando la tua risposta
Sarvesh Tiwari,

Risposte:


1

Puoi prendere ad esempio il modulo Magento_Swatch.

Il blocco Magento\Swatches\Block\Product\Renderer\Listing\Configurableviene aggiunto al blocco con il nome category.product.type.details.renderers.

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

Il modello inizializza il JS utilizzato sui campioni: Magento_Swatches :: product / listing / renderer.phtml

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

E tutto ciò che è importante viene fatto nel campione JS. https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js Come funzioni: _RenderControls, _RenderFormInput, _EventListener, _UpdatePriceed altro. Il JS sembra grande. Ma ha un sacco di codice per il rendering di immagini di campioni che vengono recuperate tramite AJAX. Probabilmente non ti serve, è più facile da implementare.

Qui vengono create e manipolate le opzioni (super attributi e prodotti associati) tag html (div di campioni). Il prezzo è gestito anche qui. Nel tuo caso avrai dei menu a discesa.

Dovresti scrivere il tuo modulo per implementare tutto quanto sopra. Teoricamente puoi aggiungere qualsiasi opzione da tutti i tipi di prodotti (bundle, raggruppati, ..). Il costo è il rendimento, dal momento che sarebbe necessario caricare più dati nei modelli per ogni prodotto in una pagina di categoria con opzioni.

In alternativa, puoi provare a impostare i campioni non visivi dei prodotti associati configurabili / semplici (senza immagini).


0

Per i prodotti configurabili: è necessario impostare il tipo di attributo " Text Swatch " e modificare il modello per visualizzare il campione (è predefinito su Magento 2), se lo si desidera, questo è il più semplice o estendere il campione di funzionalità attraverso un modulo, che aggiunge un nuovo opzione al tipo di attributo e creare un nuovo modello per tale opzione.


Questa non sembra essere l'opzione migliore, vedi la mia domanda aggiornata, solo i prezzi non funzionano al momento.
Silvan,

0

Nel menu a sinistra Elenco -> Vai all'attributo sezione e fai clic su Prodotto -> Cerca opzione prodotto che devi mostrare e fai clic su quell'attributo -> Vai a proprietà vetrina -> E modifica -> in Visibile nelle pagine del catalogo su vetrina e usato in Elenco prodotti -> NO a SÌ.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.