Modern Campus Catalog Emblem Modern Campus CMS Emblem Modern Campus Curriculum Emblem Modern Campus Involve Emblem Modern Campus Lifelong Learning Extended Education Emblem Modern Campus Message Emblem Modern Campus Navigate Emblem Modern Campus Schedule Emblem Modern Campus Virtual Tours & Maps Emblem Modern Campus Lifelong Learning Workforce and Community Emblem Site Menu Open Site Menu Close

Customize the CMS Snap Display Connector for Extended Education

With Layout Builder, there are two ways to customize your Modern Campus CMS + Modern Campus Lifelong Learning Extended Education 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 or reorder the catalog connector JavaScript references that were added during implementation.

Customize Using CSSLink to this section

Use our starter CSS to style your catalog connector tiles or PCFs

You can either upload this file to the _resources/catalog-connectors folder and then add the stylesheet reference to your include files used in XSL or if using Layout Builder paste the contents into Layout Builder 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.

If you add new data points to the Modern Campus Lifelong Learning Extended Education system, add them to your HTML output as well for display.

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 Modern Campus Lifelong Learning Extended Education 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 Modern Campus Lifelong Learning Extended Education 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 Modern Campus Lifelong Learning Extended Education course detail datacourse
All Modern Campus Lifelong Learning Extended Education 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 Modern Campus Lifelong Learning Extended Education 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 Modern Campus Lifelong Learning Extended Education program areasprogramArea
All Modern Campus Lifelong Learning Extended Education certificates that are a part of the given program areacertificates
All Modern Campus Lifelong Learning Extended Education 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 Modern Campus Lifelong Learning Extended Education 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 Modern Campus Lifelong Learning Extended Education program areasprogramStream
All Modern Campus Lifelong Learning Extended Education certificates that are a part of the given program streamcertificates
All Modern Campus Lifelong Learning Extended Education 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 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.
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

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