Customize the CMS Snap Display Connector for Extended Education

Components

• No components are currently passed to this view. See Components for more details on use.

Connector-provided functions

• Function signatures are available in the starter code.

The state of the view as a whole. See Status Object for more details on use.

The state of any course that is being loaded

Components

• This view contains a Pagination component. See Components for more details on use.

Connector-provided functions

• Function signatures are available in the starter code.

The state of the view as a whole.

• See Status Object for more details on use.

The state of the current search

A Vue ref object containing all the information about available search filters and their options

A Vue reactive object indicating the values of each search filter as they exist on the page. Updating a filter (even without searching) updates these values.

• Should be bound to inputs via Vue’s v-model directive (see starter code for examples).

An object of Vue computed properties containing information useful in creating pagination.

• It has 3 properties: numPages, currentPage and numTotalCertificates

A Vue ref boolean indicating if a search has been performed.

• Is "false" before the first search and "true" thereafter.

A Vue ref string indicating the current value of the main search input field.

• Should be bound to an input via Vue’s v-model directive.

Components

• No components are currently passed to this view. See Components for more details on use.

Connector-provided functions

• Function signatures are available in the starter code.

The state of the view as a whole.

• See Status Object for more details on use.

Components

• This view contains a Pagination component. See Components for more details on use.

Connector-provided functions

• Function signatures are available in the starter code.

The state of the view as a whole.

• See Status Object for more details on use.

The state of the current search.

A Vue ref object containing information about available search filters and their options.

A Vue reactive object indicating the values of each search filter as they exist on the page. Updating a filter (even without searching) updates these values.

• Should be bound to inputs via Vue’s v-model directive (see starter code for examples).

An object of Vue computed properties containing information useful in creating pagination.

• It has 3 properties: numPages, currentPage and numTotalCertificates

A Vue ref boolean indicating if a search has been performed.

• Is "false" before the first search and "true" thereafter.

A Vue ref string indicating the current value of the main search input field.

• Should be bound to an input via Vue’s v-model directive.

Components

• No components are currently passed to this view. See Components for more details on use.

Connector-provided functions

• Function signatures are available in the starter code.

The state of the view as a whole.

• See Status Object for more details on use.

Components

• No components are currently passed to this view. See Components for more details on use.

Connector-provided functions

• Function signatures are available in the starter code.

The state of the view as a whole.

• See Status Object for more details on use.

Components

• No components are currently passed to this view. See Components for more details on use.

Connector-provided functions

• Function signatures are available in the starter code.

The state of the view as a whole.

• See Status Object for more details on use.

Required

• el
  • The specific element to attach the catalog connector to it.
  • Example: document.getElementID('destiny-output')
• config
  • A reference to the CMSConfigObject, this is provided during implementation.

Optional

• setup: Function
  • Ability to write custom JavaScript to interact with Vue HTML, only used when using the flexible tiles.

• courseId: String
  • A specific Modern Campus Lifelong Learning Extended Education Course ID
• certificateCode: String
  • A specific Modern Campus Lifelong Learning Extended Education Certificate Code
• programAreaCode: String
  • A specific Modern Campus Lifelong Learning Extended Education Program Area Code
• programStreamCode: String
  • A specific Modern Campus Lifelong Learning Extended Education Program Stream Code
• standalone: Boolean
  • Determine if the page should be only controlled by the provided courseId, certificateCode, programAreaCode, or programStreamCode.
    • Set it to true to ignore the query string and use one of those values.

• excludeCSS: Boolean
  • Don’t add the default catalog connector CSS to the page.

Using the default output from catalog connector

JavaScript event that is thrown after the catalog connector has loaded. Use this event listener to add functionality for when the catalog connector is using the default design.

document.addEventListener("d1ConnectorViewLoaded", () =>{
                // ENTER YOUR CODE
});

Using the flexible output from catalog connector

vue.watch(status, () => {
    if (status.state === 'ready') {
		vue.nextTick(() => {
			// fire event here 
			document.dispatchEvent(new CustomEvent('d1ConnectorViewLoaded', { bubbles: true }));
		});
    } 
});

• hideCart: Boolean
  • Remove the cart from the header. Designed to be used when utilizing the standalone cart

Embed Code for Standalone Shopping Cart

The standalone cart will update as items are added to the cart. You can also style the cart, as applicable.

<div id="cms-standalone-d1-connector-cart"></div>
<script src="[PATH_TO_CONFIG_FILE]/config.js"></script>
<script src="https://cdn.melody.moderncampus.net/catalog-connectors/destiny-one/v1/d1-cart.js"></script>
<script>
  new CMSStandaloneD1ConnectorCart({
    config: CMSConfigObject.destinyOne,
  });
</script>

Can be “loading", "error" or "ready"

Is an empty string unless state is "error". Then it will be a string containing the error

Replace NAME with the component to be used