kaspar-naaber/edicy_to_voog_migration_tasklist.md

## edicy_to_voog_migration_tasklist.md

      
    Raw
  

              edicy_to_voog_migration_tasklist.md
            
          
    Edicy -> Voog migration tasklist

Basic stuff


Let support team do the magic from clientbase side.
Wait until the site is running on Voog...

If site is running on Voog, proceed with the following tasks.

Pull template to your computer and make it a git repo (optional but reccomended).
Make an "initial commit" to save the current stage (if you decided to pull the template).

Note: Push after each modification so it is easy to fall back into earlier version if something goes terribly wrong.


Add common JS and styles

Common JS

Add {% sitejs_include %} to each layout:
* Note: It is probably a good idea to add it into a JS component in components folder which in most cases is included into each layout. The component is usally named: JS, javascripts, site-javascripts, template-javascripts or something like that.
Comment: Not needed anymore because it is added automatically.
Common styles


Add the following CSS to each template that has editable content area:

Note: This will add the default styles for content area images (margins for positioning, visible title etc).
Note: In most cases it should be added into the main css file whic is usually named: stylseheet.css, main.css, application.css or something like that.
Note: If template uses *.min.css instead, then you should also update the minified stylesheet.


/* Image container styles */
.edy-positionable-container-center:first-child,
.edy-positionable-container-left-block:first-child,
.edy-positionable-container-right-block:first-child,
.edy-texteditor-container-wrapper-center:first-child,
.edy-texteditor-container-wrapper-left-block:first-child,
.edy-texteditor-container-wrapper-right-block:first-child {
  margin-top: 0;
}

.edy-positionable-container-center:last-child,
.edy-positionable-container-left-block:last-child,
.edy-positionable-container-right-block:last-child,
.edy-texteditor-container-wrapper-center:last-child,
.edy-texteditor-container-wrapper-left-block:last-child,
.edy-texteditor-container-wrapper-right-block:last-child {
  margin-bottom: 0;
}

/* USE WITH CAUTION! Most of the time the top and bottom margins looks nice but it might break the layout in some cases. */
.edy-positionable-container-center,
.edy-positionable-container-left-block,
.edy-positionable-container-right-block,
.edy-texteditor-container-wrapper-center,
.edy-texteditor-container-wrapper-left-block,
.edy-texteditor-container-wrapper-right-block {
  margin-top: 20px;
  margin-bottom: 20px;
}

.edy-positionable-container-left,
.edy-texteditor-container-wrapper-left {
  margin-right: 20px;
}

.edy-positionable-container-right,
.edy-texteditor-container-wrapper-right {
  margin-left: 20px;
}

.edy-image-container-with-title:after {
  display: block;
  padding: 4px;
  font-size: 12px;
  line-height: 1.3em;
  content: attr(data-title);
}


Replace http://static.edicy.com URL-s with {{ site.static_asset_host }} (if there's any).

Search updates

If site has search box enabled then do the following:

Add the following code into each template's <head> tag:

Note: In most cases it is a good idea to add it into head component which might be named: html-head, siteheader, header (or something like that).
Note: Make sure that you are updating the component that is included into <head> tag in layouts, not the visible header itself.


{% if site.search.enabled %}
  <link rel="stylesheet" href="{{ site.static_asset_host }}/libs/edicy-search/latest/edicy-search.css">
{% endif %}


Test if search box is using the Voog's default search with its styles.

If not then test if search input is wrapped into a <form> with class="edys-search"
If it still doesn't work then it need a deeper debugging. Debug or ask for help. :)


Index the content:
By default the search indexes the entire page. So you might see the site's main menu items in the search results. Adding data-search-indexing-allowed="true" to the content area wrappers will fix that problem. data-search-indexing-allowed="false" will help to unindex some content inside the wrapper that is indexed. Some examples:


<html>
<head>
  <!-- Nothing to index inside the head tag. ;) -->
</head>

<body>
  <div>This div shouldn't be indexed</div>
  <div data-search-indexing-allowed="true">{% content %}</div>
</body>
</html>

<html>
<head>
  <!-- Nothing to index inside the head tag. ;) -->
</head>

<body>
  <div>This div shouldn't be indexed</div>
  <div data-search-indexing-allowed="true">
    <div>{% content %}</div>
    
    <div data-search-indexing-allowed="false">This element here is not indexed but the sibling elments are.</div>
    
    <div>{% content name="important_stuff" %}</div>
  </div>
</body>
</html>

Final steps


Check out each page (or at least one page for each layout) to see if it gives any server errors, JS errors or something is visually broken. Debug and fix if needed. Common problems are:

CMS add buttons are positioned badly: horizontal menus are mostly messed up beacause of the  floating <li> elements. Replacing it with display: inline-block; might help.
Custom sliders are broken: They probably try to read data from the content area gallery which class names might differ and the JS is not finding the proper data.
Image drop areas are not working: In Edicy they used to save the data into content area and hide it. JS might not find the proper element. Try to fix the current system or convert data saving to custom data if it seems to be a quicker way to fix it.
Content area image styles are messed up: Edicy content areas used the <img> element. Voog converts them to more complicated <picture> tag that has the <img> somewhere inside it. Edicy templates images are ofter styled with img {} selector. These styles should be converter to .image-container {}.
Liquid has syntax errors: Inspect the code and fix syntax errors.


Pray that the site keeps working ant the client is not going to give us an angry call. ;)