PHPackages                             ctidigital/module-catalogjs - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. ctidigital/module-catalogjs

ActiveMagento2-module[Utility & Helpers](/categories/utility)

ctidigital/module-catalogjs
===========================

Adds models that are triggered when a customer selects options on the product page.

1.0.3(7y ago)23.9k1JavaScript

Since Oct 16Pushed 7y ago2 watchersCompare

[ Source](https://github.com/ctidigital/magento2-catalogjs)[ Packagist](https://packagist.org/packages/ctidigital/module-catalogjs)[ RSS](/packages/ctidigital-module-catalogjs/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)Dependencies (1)Versions (2)Used By (0)

Overview
========

[](#overview)

The *CatalogJS* module creates several JavaScript observers on the product page. By listening to these observers, your script can respond to specific events.

The primary use case for this is to find out which option a customer has selected on a configurable product so that your component can perform its own action. For example you may want to display some specific information about the selected simple product option.

Observers
=========

[](#observers)

The following section documents the observers that are available and how you may use them.

configurable-option
-------------------

[](#configurable-option)

### Purpose

[](#purpose)

The configurable option observer will be updated every time a customer updates the configurable options. The observer will return the selected simple product ID. In your own UI component, you could search against a JSON object which contains the information for the simple products or you could make an AJAX request to get information about the ID.

### Available Values

[](#available-values)

The following values can be subscribed to on the `configurable-option` model.

```
simpleProduct // The currently selected simple product ID

```

### Usage

[](#usage)

```
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)

### Purpose

[](#purpose-1)

The qty observer will be updated every time a customer changes the quantity box and will return the value they've entered.

### Available Values

[](#available-values-1)

The following values can be subscribed to on the `qty` model.

```
qty // The current quantity specified by the customer

```

### Usage

[](#usage-1)

```
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
        }
    });
});
```

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity25

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity61

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

2771d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/7bbaa8fb5cb30635b640ff6cea6bc750d0ffa044a24af28d4be67a8c97699450?d=identicon)[paulpartington-cti](/maintainers/paulpartington-cti)

![](https://www.gravatar.com/avatar/f8e9f4ce6280c9066796acc48c7785a6b3150a1bc47259367b8bd9ed761fb461?d=identicon)[chevli](/maintainers/chevli)

---

Top Contributors

[![paulpartington-cti](https://avatars.githubusercontent.com/u/6105453?v=4)](https://github.com/paulpartington-cti "paulpartington-cti (2 commits)")

---

Tags

magento 2

### Embed Badge

![Health badge](/badges/ctidigital-module-catalogjs/health.svg)

```
[![Health](https://phpackages.com/badges/ctidigital-module-catalogjs/health.svg)](https://phpackages.com/packages/ctidigital-module-catalogjs)
```

###  Alternatives

[magepal/magento2-googletagmanager

Google Tag Manager (GTM) for Magento 2 with Advance Data Layer

2671.5M4](/packages/magepal-magento2-googletagmanager)[yireo/magento2-webp2

Magento 2 module to add WebP support to the Magento frontend

2091.2M7](/packages/yireo-magento2-webp2)[mageplaza/magento-2-blog-extension

Magento 2 Blog extension

123708.2k5](/packages/mageplaza-magento-2-blog-extension)[mageplaza/magento-2-seo-extension

Magento 2 SEO extension

138506.6k2](/packages/mageplaza-magento-2-seo-extension)[magepal/magento2-reindex

Reindex your Magento2 store quickly and easily from backend/admin, instead of command line.

112649.7k1](/packages/magepal-magento2-reindex)[tig/postnl-magento2

TIG Magento 2 PostNL extension

58544.2k4](/packages/tig-postnl-magento2)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)