Я зараз працюю над новою темою Magento 2. Для цієї теми я хочу показати всі параметри продукту (спеціальні параметри та параметри форми, що можна налаштувати продукт) у списку продуктів. Таким чином користувач може швидко додати продукти до свого кошика.
Я спробував додати product.info
блок catalog_category_view.xml
і встановити продукт для цього блоку. Параметри відображаються для кожного продукту, проблема полягає в тому, що показана опція лише з першого продукту. Тому всі інші продукти мають такі варіанти.
--- ОНОВЛЕННЯ ---
Мені вдалося показати варіанти товару, але ціни не оновлюються. Чи може хтось вказати мені в правильному напрямку?
<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>
Я також реалізував getJsonConfig
функцію у власному класі ListProduct.