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.
Respostas:
Você pode tomar como exemplo o módulo Magento_Swatch.
O bloco
Magento\Swatches\Block\Product\Renderer\Listing\Configurableé adicionado ao bloco com o nomecategory.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).
fonte
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.
fonte
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.
fonte