Daftar Produk Magento2 - Tampilkan opsi produk

Saya sedang mengerjakan tema Magento 2 baru saat ini. Untuk tema ini saya ingin menampilkan semua opsi produk (opsi kustom dan opsi dari produk yang dapat dikonfigurasi) dalam daftar produk. Dengan cara ini pengguna dapat dengan cepat menambahkan produk ke keranjangnya.

Saya mencoba menambahkan product.infoblok catalog_category_view.xmldan mengatur produk untuk blok itu. Opsi ditampilkan untuk setiap produk, masalahnya adalah bahwa opsi yang ditampilkan hanya dari produk pertama. Jadi semua produk lain memiliki opsi ini.

--- PEMBARUAN ---

Saya berhasil menunjukkan opsi produk, tetapi harga tidak diperbarui. Bisakah seseorang mengarahkan saya ke arah yang benar?

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

Saya juga mengimplementasikan getJsonConfigfungsi di kelas ListProduct saya sendiri.

Anda bisa mengambil contoh Magento_Swatch modul.

Blok Magento\Swatches\Block\Product\Renderer\Listing\Configurableditambahkan ke blok dengan nama category.product.type.details.renderers.

Seperti di sini: https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/layout/catalog_category_view.xml

Template menginisialisasi JS yang digunakan pada swatch: Magento_Swatches :: product / listing / renderer.phtml

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

Dan semua yang penting dilakukan ke dalam carikan JS. https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js Seperti fungsi: _RenderControls, _RenderFormInput, _EventListener, _UpdatePricedan lainnya. JS terlihat besar. Tetapi memiliki banyak kode di sekitar rendering gambar swatch yang diambil melalui AJAX. Anda mungkin tidak membutuhkannya, lebih mudah diterapkan.

Di sini, opsi (atribut super dan produk terkait) tag html (swatch divs) dibuat dan dimanipulasi. Harga juga ditangani di sini. Dalam kasus Anda, Anda akan memiliki dropdown.

Anda harus menulis modul Anda sendiri untuk menerapkan semua hal di atas. Secara teoritis Anda dapat menambahkan opsi apa pun dari semua jenis produk (bundel, dikelompokkan, ..). Biaya adalah kinerja, karena Anda harus memuat lebih banyak data ke dalam model ke setiap produk pada halaman kategori yang memiliki opsi.

Sebagai alternatif, Anda dapat mencoba mengatur ke produk swatch non-visual yang dapat dikonfigurasi / mudah dikonfigurasi (tanpa gambar).

Untuk produk yang dapat dikonfigurasi: Anda harus mengatur tipe atribut " Swatch Teks " dan memodifikasi template untuk menampilkan swatch (Ini default pada Magento 2), jika diinginkan, ini adalah yang paling sederhana, atau memperluas fungsi swatch melalui modul, yang menambahkan baru opsi pada tipe atribut dan buat templat baru untuk opsi itu.

Dalam Daftar Menu kiri -> Pergi ke bagian atribut dan klik pada Produk -> Cari Pilihan Produk Yang Anda harus menunjukkan & Klik pada atribut itu -> Pergi Ke Properti Etalase -> Dan Ubah -> di Terlihat pada Halaman Katalog di Etalase & Digunakan dalam Daftar Produk -> TIDAK ke YA.