Skip to content

Latest commit

 

History

History
89 lines (71 loc) · 5.85 KB

duplicating-mmx-components.md

File metadata and controls

89 lines (71 loc) · 5.85 KB
Raw

Duplicating MMX Components

This repo shows how to duplicate an existing Flex Component so it can be customized with your own desired functionality.

Process

TLDR: Here's a diff of the following process

Get the base component

  1. Navigate to Miva Admin > User Interface > Flex Components
  2. Check the desired component (ex. mmx-featured-product)
  3. Click the "Download Component" button

Make the component your own

  1. Extract the downloaded component (ex. mmx-featured-product.tar.bz2) Example
  2. Rename the component's folder with its own unique name Example
  3. In flex.json, change the code, name, version, & resourcegroup_code to unique values Example
  4. In flex.json, change managed from true to false Example
  5. Optionally, change the src/images/preview.svg Example
  6. Remove the JavaScript or provide a unique alternative
    1. If updating with a unique alternative:
      1. Change the flex.json > scripts filepath and resource_code to a unique value Example
      2. Change the JavaScript file's class & tag name Example
      3. Change init.mvt to load your resource Example
      4. Change instance.mvt to use your web-component Example
      5. Remove/update the flex.json > scripts > attributes for the integrity attribute Example
    2. If removing:
      1. Remove the corresponding flex.json > scripts > attributes item
      2. Remove the corresponding src/js/*.js file
  7. Remove the CSS or provide a unique alternative
    1. If updating with a unique alternative:
      1. Change the flex.json > styles filepath and resource_code to a unique value Example
      2. Change init.mvt to load your resource Example
      3. Update the JS file's styleResourceCodes to use your CSS Example
      4. Remove/update the flex.json > styles > attributes for the integrity attribute Example
      5. Optionally, update any of the CSS contents for your customizations Example
      6. Optionally, update the component's CSS class namespace. For example:
        1. The JavaScript file's render() function would be updated from <div ... class="mmx-featured-product ..."> to <div ... class="dup-featured-product ...">
        2. and all the .mmx-featured-product selectors in the CSS file would become .dup-featured-product
    2. If removing:
      1. Remove the corresponding flex.json > styles > attributes item
      2. Remove the corresponding src/css/*.css file
  8. Optionally, change any other files of the component to add your custom functionality (ex. init.mvt, instance.mvt, flex.json properties, other CSS & JS files, etc.)
  9. Review and confirm/update the flex.json > depends & flex.json > conflicts values

Import your component

  1. tar your directory Example
    1. $ cd dup-featured-product && tar -cvjSf ../dup-featured-product.tar.bz2 *
  2. Navigate to Miva Admin > User Interface > Flex Components
  3. Click the "Upload Component" button
  4. Upload your dup-featured-product.tar.bz2 file

View your component in Page Builder

  1. Navigate to Miva Admin > User Interface > Content Management
  2. Create/edit a page
  3. Click the "Add Component" button
  4. Select your custom component

Iterate and improve your component

  1. $ mmt checkout ... your remote
  2. Edit the properties, scripts, styles, and templates of your component:
    1. css/dup-featured-product.css
    2. js/dup-featured-product.js
    3. properties/flex/dup-featured-product.json
    4. templates/flex-initialization-template-dup-featured-product.mvt
    5. templates/flex-instance-template-dup-featured-product.mvt
  3. $ mmt push --notes "updated foo" to push your changes up
  4. Preview your changes and repeat mmt pushes until you are finished

Distribute your component

  1. Navigate to Miva Admin > User Interface > Flex Components
  2. Check the desired component (ex. dup-featured-product)
  3. Click the "Download Component" button
  4. Take the downloaded dup-featured-product.tar.bz2 and import it into a client store

Alternative Process

  1. Start with a basic component (ex. mmx-example)
  2. mmt checkout an existing component as a reference
  3. Copy over the flex.json settings, properties, scripts, styles, and templates to your component
  4. Tar and distribute the component