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.info
bloco catalog_category_view.xml
e 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 getJsonConfig
função na minha própria classe ListProduct.