README

《CatalogJS》模块在产品页面上创建了多个JavaScript观察者。通过监听这些观察者，您的脚本可以响应特定的事件。

主要用例是找出客户在可配置产品上选择了哪个选项，以便您的组件可以执行自己的操作。例如，您可能想显示有关所选简单产品选项的一些特定信息。

观察者

以下部分记录了可用的观察者以及如何使用它们。

configurable-option

目的

每当客户更新可配置选项时，可配置选项观察者将更新。观察者将返回所选简单产品ID。在您的UI组件中，您可以对包含简单产品信息的JSON对象进行搜索，或者您可以发起AJAX请求来获取有关ID的信息。

可用的值

以下值可以在configurable-option模型上订阅。

simpleProduct // The currently selected simple product ID

用法

define([
    'jquery',
    'uiComponent',
    'CtiDigital_CatalogJS/js/model/configurable-option'
], function($, Component, configurableOption) {
    'use strict';
    
    return Component.extend({
        selectedProduct: undefined,
        
        initialize: function() {
            this._super();
            this.subscribeToConfigurableOptionChange();
        },
        subscribeToConfigurableOptionChange: function() {
            let _this = this;
            configurableOption.simpleProduct.subscribe(function(simpleProduct) {
                _this.selectedProduct = simpleProduct;
                _this.myCustomMethod();
            });
        },
        myCustomMethod: function() {
            // Access this.selectedProduct to perform some sort of action
        }
    });
});

qty

目的

每当客户更改数量框时，数量观察者将更新并返回他们输入的值。

可用的值

以下值可以在qty模型上订阅。

qty // The current quantity specified by the customer

用法

define([
    'jquery',
    'uiComponent',
    'CtiDigital_CatalogJS/js/model/qty'
], function ($, Component, qtyObserver) {
    'use strict';
    
    return Component.extend({
        qty: 1,
        
        initialize: function() {
            this._super();
            this.subscribeToQtyChange();
        },
        subscribeToQtyChange: function() {
            let _this = this;
            qtyObserver.qty.subscribe(function(qty) {
                _this.qty = qty;
                _this.myCustomMethod();
            });
        },
        myCustomMethod: function() {
            // Access this.qty to retrieve the current quantity
        }
    });
});