Magento2 제품 목록-제품 옵션 표시


10

현재 새로운 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.stackexchange.com/questions/100801/… 사용자 정의 옵션을 사용하는 방법은 일반 옵션으로 이어질 수도 있습니다. 카테고리 목록에 장바구니에 추가 : magento.stackexchange.com/a/125813/69
B00MER

코드에서 value_index 및 option_type_id는 무엇입니까? value_index 옵션 값과 option_type_id의 지수 옵션의 ID입니다
Sarvesh Tiwari 보낸

난 당신이 확인하고 난 당신의 응답을 기다리고 저를 되돌릴 수 있습니다 오류가 정의되지 않은 $ 변수 customOptions 무엇입니까
Sarvesh Tiwari 보낸

답변:


1

Magento_Swatch 모듈을 예로들 수 있습니다.

블록 Magento\Swatches\Block\Product\Renderer\Listing\Configurable이 name으로 블록 에 추가됩니다 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 / listing / 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)가 만들어지고 조작됩니다. 가격도 여기에서 처리됩니다. 귀하의 경우 드롭 다운이 있습니다.

위의 모든 것을 구현하려면 자신의 모듈을 작성해야합니다. 이론적으로 모든 유형의 제품 (번들, 그룹, ..)에서 모든 옵션을 추가 할 수 있습니다. 옵션이있는 카테고리 페이지에서 모든 제품의 모델에 더 많은 데이터를로드해야하므로 비용은 성능입니다.

대안으로, 구성 가능 / 간단한 관련 제품 비 시각적 견본 (이미지 없음)으로 설정할 수 있습니다.


0

구성 가능한 제품의 경우 : 속성 유형 " Text Swatch "를 설정하고 견본 을 표시하도록 템플리트를 수정해야합니다 (Magento 2에서 기본값 임), 원하는 경우 가장 단순하거나 모듈을 통해 기능 견본을 확장하여 새 견본을 추가합니다. 속성 유형에서 옵션을 선택하고 해당 옵션에 대한 새 템플릿을 만듭니다.


이것은 최선의 선택이 아닌 것 같습니다. 업데이트 된 질문을 참조하십시오. 현재 가격 만 작동하지 않습니다.
Silvan

0

왼쪽 메뉴 목록-> 속성으로 이동 섹션에서 제품-> 제품 옵션 검색을 클릭하십시오. 해당 속성을 표시하고 클릭하십시오-> 상점 첫 화면 특성으로 이동-> 및 변경-> 상점 첫 화면의 카탈로그 페이지에 표시 및 사용 제품 목록에서-> NO에서 YES로.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.