Add module.

composer.json

@@ -0,0 +1,26 @@
+{
+  "name": "ctidigital/module-catalogjs",
+  "description": "Adds models that are triggered when a customer selects options on the product page.",
+  "version": "1.0.3",
+  "keywords": [
+    "magento 2"
+  ],
+  "require": {
+    "magento/magento-composer-installer": "*"
+  },
+  "suggest": {
+
+  },
+  "type": "magento2-module",
+  "license": [
+
+  ],
+  "autoload": {
+    "files": [
+      "registration.php"
+    ],
+    "psr-4": {
+      "CtiDigital\\CatalogJS\\": ""
+    }
+  }
+}

etc/module.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
+    <module name="CtiDigital_CatalogJS" setup_version="1.0.0">
+        <sequence>
+            <module name="Magento_Catalog" />
+        </sequence>
+    </module>
+</config>

readme.md

@@ -0,0 +1,99 @@
+# 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
+
+The following section documents the observers that are available and how you may use them.
+
+## configurable-option
+
+### 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
+
+The following values can be subscribed to on the `configurable-option` model.
+
+```
+simpleProduct // The currently selected simple product ID
+```
+
+### Usage
+
+```javascript
+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
+
+### Purpose
+
+The qty observer will be updated every time a customer changes the quantity box and will return the value they've entered.
+
+### Available Values
+
+The following values can be subscribed to on the `qty` model.
+
+```
+qty // The current quantity specified by the customer
+```
+
+### Usage
+
+```javascript
+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
+        }
+    });
+});
+```

registration.php

@@ -0,0 +1,6 @@
+<?php
+\Magento\Framework\Component\ComponentRegistrar::register(
+    \Magento\Framework\Component\ComponentRegistrar::MODULE,
+    'CtiDigital_CatalogJS',
+    __DIR__
+);

view/frontend/layout/catalog_product_view.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <body>
+        <referenceBlock name="content">
+            <block class="Magento\Framework\View\Element\Template" name="catalogjs.qty" template="CtiDigital_CatalogJS::qty-observer.phtml" />
+        </referenceBlock>
+    </body>
+</page>

view/frontend/requirejs-config.js

@@ -0,0 +1,9 @@
+var config = {
+    config: {
+        mixins: {
+            'Magento_ConfigurableProduct/js/configurable': {
+                'CtiDigital_CatalogJS/js/mixins/configurable': true
+            }
+        }
+    }
+};

view/frontend/templates/qty-observer.phtml

@@ -0,0 +1,14 @@
+<script type="text/x-magento-init">
+    {
+        "*": {
+            "Magento_Ui/js/core/app": {
+                "components": {
+                    "qty-observer": {
+                        "component": "CtiDigital_CatalogJS/js/component/qty-observer",
+                        "qty_element": "#qty"
+                    }
+                }
+            }
+        }
+    }
+</script>

view/frontend/web/js/component/qty-observer.js

@@ -0,0 +1,25 @@
+define([
+    'jquery',
+    'uiComponent',
+    'ko',
+    'CtiDigital_CatalogJS/js/model/qty'
+], function($, Component, ko, qtyObserver) {
+    'use strict';
+
+    return Component.extend({
+        initialize: function() {
+            this._super();
+            this.updateQtyObs($(this.qty_element));
+            this.subscribeToQuantityBoxUpdate();
+        },
+        updateQtyObs: function (e) {
+            if (e.target) {
+                var e = $(e.target);
+            }
+            qtyObserver.qty(parseInt(e.val()));
+        },
+        subscribeToQuantityBoxUpdate: function() {
+            $(this.qty_element).on("change paste keyup select", $.proxy(this.updateQtyObs, this));
+        }
+    });
+});

view/frontend/web/js/mixins/configurable.js

@@ -0,0 +1,16 @@
+define([
+    'jquery',
+    'CtiDigital_CatalogJS/js/model/configurable-option'
+], function($, configurableOption) {
+    'use strict';
+
+    return function (widget) {
+        $.widget('mage.configurable', widget, {
+            _configureElement: function(element) {
+                this._super(element);
+                configurableOption.simpleProduct(this.simpleProduct);
+            }
+        });
+        return $.mage.configurable;
+    }
+});

view/frontend/web/js/model/configurable-option.js

@@ -0,0 +1,9 @@
+define([
+    'ko'
+], function(ko) {
+    'use strict';
+    let simpleProduct = ko.observable('');
+    return {
+        simpleProduct: simpleProduct
+    };
+});

view/frontend/web/js/model/qty.js

@@ -0,0 +1,10 @@
+define(
+    ['ko'],
+    function (ko) {
+        'use strict';
+        let qty = ko.observable('');
+        return {
+            qty: qty
+        };
+    }
+);