Lista produktów Magento2 - Pokaż opcje produktu


10

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.


magento.stackexchange.com/questions/100801/... Porady dotyczące opcji niestandardowych mogą również prowadzić do zwykłych opcji. Dodaj do koszyka na liście kategorii: magento.stackexchange.com/a/125813/69
B00MER

co to jest wartość_indeks i identyfikator_typu_w_kodzie w twoim kodzie. value_index jest indeksem wartości opcji, a ID_typu_typu to id opcji
Sarvesh Tiwari

dostaję błąd niezdefiniowane zmienne $ customOptions czy możesz mnie sprawdzić i przywrócić Czekam na twoją odpowiedź
Sarvesh Tiwari

Odpowiedzi:


1

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


0

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.


To nie wydaje się być najlepszą opcją, zobacz moje zaktualizowane pytanie, tylko ceny obecnie nie działają.
Silvan

0

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.