Listagem de produtos Magento2 - Mostrar opções de produtos

10

Estou trabalhando em um novo tema Magento 2 no momento. Para este tema, quero mostrar todas as opções do produto (opções personalizadas e opções do produto configurável) na lista de produtos. Dessa forma, o usuário pode adicionar rapidamente produtos ao carrinho.

Tentei adicionar o product.infobloco catalog_category_view.xmle definir o produto para esse bloco. As opções são mostradas para cada produto, o problema é que a opção mostrada é apenas do primeiro produto. Portanto, todos os outros produtos têm essas opções.

--- ATUALIZAÇÃO ---

Consegui mostrar as opções do produto, mas os preços não são atualizados. Alguém pode me apontar na direção certa?

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

Também implementei a getJsonConfigfunção na minha própria classe ListProduct.

Silvan
fonte
magento.stackexchange.com/questions/100801/… Como obter opções personalizadas, também pode levá-lo a opções regulares. Adicione ao carrinho na lista de categorias: magento.stackexchange.com/a/125813/69
B00MER 03/04
o que é value_index e option_type_id no seu código. value_index é o índice do valor da opção e option_type_id é o ID da opção
Sarvesh Tiwari 28/17
Estou recebendo erro indefinido variáveis $ customOptions você pode verificar e reverter me eu estou esperando sua resposta
Sarvesh Tiwari

Respostas:

1

Você pode tomar como exemplo o módulo Magento_Swatch.

O bloco Magento\Swatches\Block\Product\Renderer\Listing\Configurableé adicionado ao bloco com o nome category.product.type.details.renderers.

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

O modelo inicializa o JS usado nas amostras: 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 tudo o que é importante é feito na amostra JS. https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js como funções: _RenderControls, _RenderFormInput, _EventListener, _UpdatePricee outros. O JS parece grande. Mas há muito código para renderizar imagens de amostras que são buscadas via AJAX. Você provavelmente não precisa, é mais fácil de implementar.

Aqui, as opções (super atributos e produtos associados) tags html (swatches divs) são criadas e manipuladas. O preço também é tratado aqui. No seu caso, você terá menus suspensos.

Você precisaria escrever seu próprio módulo para implementar tudo acima. Teoricamente, você pode adicionar opções de todos os tipos de produtos (pacote, agrupado, ..). O custo é o desempenho, pois você precisará carregar mais dados nos modelos para todos os produtos em uma página de categoria com opções.

Como alternativa, você pode tentar definir as amostras não visuais configuráveis ​​/ simples dos produtos associados (sem imagens).

obscurecer
fonte
0

Para produtos configuráveis: você deve definir o tipo de atributo " Amostra de texto " e modificar o modelo para exibir as amostras (é padrão no Magento 2), se desejado, essa é a amostra mais simples ou pode ser ampliada por funcionalidade através de um módulo, que adiciona uma nova opção no tipo de atributo e crie um novo modelo para essa opção.

St3phan
fonte
Esta não parece ser a melhor opção, veja minha pergunta atualizada, apenas os preços não funcionam no momento.
quer
0

Na seção Lista de menus à esquerda -> Ir para o atributo e clique em Produto -> Opção de pesquisa de produto que você precisa mostrar e clique nesse atributo -> Ir para Propriedades da montra -> E alterar -> em Visível nas páginas do catálogo na montra e usado na Lista de produtos -> NÃO a SIM.

Abhishek
fonte