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

構成可能な製品の場合:属性タイプ「テキストスウォッチ」を設定し、スウォッチを表示するようにテンプレートを変更する必要があります(これはMagento 2のデフォルトです)。これは、必要に応じて、最も簡単です。または、モジュールを通して機能スウォッチを拡張して、新しい属性のタイプでオプションを選択し、そのオプションの新しいテンプレートを作成します。


これは最良の選択肢ではないようです。更新された質問を参照してください。現時点では価格のみが機能しません。
Silvan 2017

0

左側のメニューリストで、[属性に移動]セクションをクリックし、[商品]をクリックします。表示する必要のある商品オプションを検索して、その属性をクリックします。製品リスト-> NOからYES。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.