マゼント2

見本オプションを変更する場合、magento2のカテゴリ製品リストページで選択した単純な製品を取得する方法



When Change Swatch Option How Get Selected Simple Product Category Product Listing Page Magento 2



解決：

スウォッチレンダラーから取得するJS構成に数量を追加するプラグインを作成します

ベンダー/モジュール/etc/frontend/di.xml



  
以下のvendor  module  Plugin  Block  ConfigurableProduct  Product  View  Type  Configurable.phpに、数量スクリプトを使用してプラグインファイルを作成します。
 
jsonDecoder = $ jsonDecoder; $ this-> jsonEncoder = $ jsonEncoder; $ this-> stockRegistry = $ stockRegistry; } // Quantitites（product => qty）public function aroundGetJsonConfig（ Magento  ConfigurableProduct  Block  Product  View  Type  Configurable $ subject、 Closure $ proceed）{$ quantities = []; $ config = $ proceed（）; $ config = $ this-> jsonDecoder-> decode（$ config）; foreach（$ subject-> getAllowProducts（）as $ product）{$ stockitem = $ this-> stockRegistry-> getStockItem（$ product-> getId（）、$ product-> getStore（）-> getWebsiteId（））; $ Quantities [$ product-> getId（）] = $ stockitem-> getQty（）; } $ config ['quantities'] = $ Quantities; $ this-> jsonEncoder-> encode（$ config）;を返します。 }}
そしてあなたのphtmlは次のようになります
 
 
 
getId（）; ？>  
オーバーライドする必要のある見本から製品の数量を取得できますベンダー/magento/module-swatches/view/frontend/web/js/swatch-renderer.js関数_Rebuildは次のコードを追加します。
 
//天気商品リストページまたはビューページを確認するif（$（ 'body.catalog-product-view'）。size（）<= 0) { if( controls.size() == selected.size()){ var productQty = $widget.options.jsonConfig.quantities[this.getProduct()]; $widget.element.parents('.product-item-info').find('.classname').html(productQty); } }  
最終的にそれはのように見えます
 
_Rebuild：function（）{var $ widget = this、controls = $ widget.element.find（ '。' + $ widget.options.classes.attributeClass + '[attribute-id]'）、selected = Controls.filter（ ' [オプション選択] '）; //すべてのオプションを有効にします$ widget._Rewind（controls）; //何も選択されていない場合に実行if（selected.size（）<= 0) { return; } //Check weather product list page or view page if ($('body.catalog-product-view').size() <= 0) { if( controls.size() == selected.size()){ var productQty = $widget.options.jsonConfig.quantities[this.getProduct()]; $widget.element.parents('.product-item-info').find('.classname').html(productQty); } } // Disable not available options controls.each(function () { var $this = $(this), id = $this.attr('attribute-id'), products = $widget._CalcProducts(id); if (selected.size() === 1 && selected.first().attr('attribute-id') === id) { return; } $this.find('[option-id]').each(function () { var $element = $(this), option = $element.attr('option-id'); if (!$widget.optionsMap.hasOwnProperty(id) || !$widget.optionsMap[id].hasOwnProperty(option) || $element.hasClass('selected') || $element.is(':selected')) { return; } if (_.intersection(products, $widget.optionsMap[id][option].products).length <= 0) { $element.attr('disabled', true).addClass('disabled'); } }); }); },  
phtmlファイルにスクリプトを追加する代わりに、ここにロジックを追加できます。
 
 
 
からのjsファイルのコピーを上書きするにはベンダー/magento/module-swatches/view/frontend/web/js/swatch-renderer.jsからapp / design / VENDOR / THEME / Magento_Swatches / web / js / swatch-renderer.jsアップグレードを実行し、コンテンツをデプロイして変更を確認します
  
発見できるからのprodcutId[Magento_Root]  vendor  magento  module-swatches  view  frontend  web  js  swatch-renderer.js
 
探す_OnClick関数。
 
_OnClick：function（$ this、$ widget）{var $ parent = $ this.parents（ '。' + $ widget.options.classes.attributeClass）、$ label = $ parent.find（ '。' + $ widget.options .classes.attributeSelectedOptionLabelClass）、attributeId = $ parent.attr（ 'attribute-id'）、$ input = $ parent.find（ '。' + $ widget.options.classes.attributeInput）; if（$ widget.inProductList）{$ input = $ widget.productForm.find（ '。' + $ widget.options.classes.attributeInput + '[name =' super_attribute ['+ attributeId +'] ']'）; } if（$ this.hasClass（ 'disabled'））{return; } if（$ this.hasClass（ 'selected'））{$ parent.removeAttr（ 'option-selected'）。find（ '。selected'）。removeClass（ 'selected'）; $ input.val（ ''）; $ label.text（ ''）; } else {$ parent.attr（ 'option-selected'、$ this.attr（ 'option-id'））。find（ '。selected'）。removeClass（ 'selected'）; $ label.text（$ this.attr（ 'option-label'））; $ input.val（$ this.attr（ 'option-id'））; $ this.addClass（ 'selected'）; console.log（$ this.attr（ 'option-id'））; //ここで選択した単純な製品IDを見つけることができます} $ widget._Rebuild（）; if（$ widget.element.parents（$ widget.options.selectorProduct）.find（this.options.selectorProductPrice）.is（ '：data（mage-priceBox）'））{$ widget._UpdatePrice（）; } $ widget._LoadProductMedia（）; $ input.trigger（ 'change'）; }、
それはあなたを助けます。