By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy

 
Skip to Content

Customize the Omni CMS + Destiny One Catalog Connector

With Melody, there are two ways to customize your Omni CMS + Destiny One catalog connector tiles. You can change just the CSS or make changes to the full Javascript framework (Vue).

Whichever you choose, design one catalog connector tile per layout. And be sure you don't remove the catalog connector JavaScript references.

Customize Using CSSLink to this section

Use our starter CSS to style your catalog connector tiles.

You can either upload this file to the _resources/catalog-connectors folder or paste the contents into Melody Styles > Custom CSS. Then reference the styling in the tile.

Customize Using VueLink to this section

You can customize every part of the catalog connector using our individual starter code examples. In each starter code example, use the <endpoint-table> tag with the :data property to print out the available data points. 

Follow both JavaScript and Vue standards so the JavaScript can interact with the HTML correctly. The setup method is not required but, if desired, can help with extending the functionality. You can also customize the shopping cart.

Certificate Detail

See the Certificate Detail starter code.

ItemObject
All Destiny One certificate datacertificate
Fetched course datacourse

Components

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

Connector-provided functions

  • Function signatures are available in the starter code.
functions

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

status

The state of any course that is being loaded

courseStatus

Certificate Search

See the Certificate Search starter code.

ItemObject
All Destiny One certificates returned by the searchcertificates

Components

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

Connector-provided functions

  • Function signatures are available in the starter code.
functions

The state of the view as a whole.

status

The state of the current search

searchStatus

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

filterOptions

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).
currentFilters

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

  • It has 3 properties: numPages, currentPage and numTotalCertificates
pagination

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

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

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.
keyword

Course Detail

See the Course Detail starter code

ItemObject
All Destiny One course detail datacourse
All Destiny One course section datasections

Components

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

Connector-provided functions

  • Function signatures are available in the starter code.
functions

The state of the view as a whole.

status

Course Search

See the Course Search starter code.

ItemObject
All Destiny One courses returned by the searchcourses

Components

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

Connector-provided functions

  • Function signatures are available in the starter code.
functions

The state of the view as a whole.

status

The state of the current search.

searchStatus

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

filterOptions

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).
currentFilters

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

  • It has 3 properties: numPages, currentPage and numTotalCertificates
pagination

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

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

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.
keyword

Program Area

See the Program Area starter code.

ItemObject
All Destiny One program areasprogramArea
All Destiny One certificates that are a part of the given program areacertificates
All Destiny One courses that are a part of the given program areacourses

Components

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

Connector-provided functions

  • Function signatures are available in the starter code.
functions

The state of the view as a whole.

status

Program Area List

See the Program Area List starter code.

ItemObject
All Destiny One program areasprogramAreas

Components

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

Connector-provided functions

  • Function signatures are available in the starter code.
functions

The state of the view as a whole.

status

Program Stream

See the Program Stream starter code.

ItemObject
All Destiny One program areasprogramStream
All Destiny One certificates that are a part of the given program streamcertificates
All Destiny One courses that are a part of the given program streamcourses

Components

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

Connector-provided functions

  • Function signatures are available in the starter code.
functions

The state of the view as a whole.

status

General

JavaScriptConfiguration
CMSStartD1Connector
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 Destiny One Course ID
  • certificateCode: String
    • A specific Destiny One Certificate Code
  • programAreaCode: String
    • A specific Destiny One Program Area Code
  • programStreamCode: String
    • A specific Destiny One 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.
d1ConnectorViewLoaded
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 }));
		});
    } 
});

Shopping Cart

ObjectConfiguration
CMSStartD1Connector
  • 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>

Status Object

A status object contains two properties that indicate the status of a view or something that is being loaded.

PropertyDescription
state

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

errorMessage

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

Components

Any connector-provided components are exposed to views via a components object. All views have this object, for future-proofing, but most views do not contain any components.

ObjectDescription
<component :is="components.NAME"></component>

Replace NAME with the component to be used