Я сейчас работаю над новой темой 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.
Ответы:
Вы можете взять в качестве примера модуль Magento_Swatch.
Блок
Magento\Swatches\Block\Product\Renderer\Listing\Configurableдобавляется в блок с именемcategory.product.type.details.renderers.Как здесь: https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/layout/catalog_category_view.xml
Шаблон инициализирует JS, используемый для образцов: Magento_Swatches :: product / list / renderer.phtml
https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml
И все важное сделано в образце JS. https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js Как функции:
_RenderControls,_RenderFormInput,_EventListener,_UpdatePriceи другие. JS выглядит большим. Но в нем много кода для рендеринга образцов изображений, получаемых через AJAX. Возможно, вам это не нужно, это легче реализовать.Здесь параметры (супер атрибуты и связанные продукты) html-теги (образцы div) создаются и обрабатываются. Цена обрабатывается и здесь. В вашем случае у вас будут выпадающие списки.
Вам нужно написать свой собственный модуль для реализации всего вышеперечисленного. Теоретически вы можете добавить любые варианты из всех типов продуктов (связка, группировка, ..). Стоимость - это производительность, поскольку вам нужно будет загружать больше данных в модели для каждого продукта на странице категории, в которой есть опции.
В качестве альтернативы вы можете попытаться установить для настраиваемых / простых сопутствующих продуктов невизуальные образцы (без изображений).
источник
Для настраиваемых продуктов: Вы должны установить тип атрибута « Образец текста » и изменить шаблон так, чтобы отображать образец (это по умолчанию в Magento 2), при желании это самый простой образец или образец расширенной функциональности через модуль, который добавляет новый Опция на тип атрибута и создайте новый шаблон для этой опции.
источник
В левом списке меню -> раздел «Перейти к атрибуту» и выберите «Продукт» -> «Поиск варианта продукта», который необходимо отобразить, и щелкните этот атрибут -> «Перейти к свойствам витрины» -> «И изменить» -> в разделе «Видимый» на страницах каталога в витрине магазина и используется в списке товаров -> НЕТ ДА.
источник