When developing a store or email theme for your MyCashflow online store, you can make your work much easier by synchronizing changes to your local theme files with your online store's file directory automatically. You can do it conveniently by using the mycashflow-sync tool.
Attributes
mycashflow-sync is a Node.js-based command line tool that lets you sync the theme files on your computer and in the online store directory either automatically or manually.
The synchronization is bidirectional, meaning that the tool can upload and download files between the local environment and the online store. The synchronization is based on file age: the newer file overwrites the older one. The program will never delete any files.
If necessary, the program can also automatically convert SASS files into CSS styles before synchronization.
In addition, mycashflow-sync will display a preview of the theme under development (Browsersync) whenever a synchronization is performed.
Requirements
You can use the tool on any operating system that has Node.js (version >= 9) and the npm package management installed.
The theme under development needs to be in development mode for synchronization to work. Development mode is enabled by specifying the attribute mode:'development'{MinifyCSS} and {MinifyJS} tags.
The online store must have an FTP connection that you can enable by installing the Web Designer extension.
Installation and activation
Open the terminal and install mycashflow-sync by using the following command:
npm install -g mycashflow-syncOnce the tool is installed, you can use the following commands to create a new theme folder, navigate to it and define the theme synchronization settings:
mkdir themefolder
cd themefolder
mycashflow-sync initThe program will ask you for the following information (compulsory in bold):
- FTP server and port (use the default values)
- User ID
- Password
The FTP username and password are available in the Web Designer extension settings.
- Default address of the online store (e.g. https://STORENAME.mycashflow.fi)
- Theme folder location
E.g. themes/shop/themefolder or themes/email/themefolder
If there is no theme folder in the online store's file directory, create the theme folder first and include its name in the synchronization settings.
- SASS source folder in relation to the root folder of the theme (e.g. styles/scss)
If you define a SASS folder,
mycashflow-syncconverts SASS files to CSS styles automatically, whenever synchronization is performed.If you don't use SASS styles, you can leave the SASS and CSS fields empty.
- CSS style folder (e.g. styles)
mycashflow-syncwill place SASS files converted into CSS styles into this folder automatically.
After configuring the synchronization settings, you can perform manual synchronization or set the tool to watch changes in the theme files.
If necessary, you can change the synchronization settings by editing the sync.json configuration file created in the theme folder. Below is an example of possible settings:
{
"ftp": {
"host": "ftp.mycashflow.fi",
"port": 21,
"user": "<username>",
"pass": "<password>"
},
"sync": {
"url": "https://STORENAME.mycashflow.fi",
"path": "themes/shop/themefolder",
"ignore": [
"./ignored/directory",
"./*.scss",
"./*.css.map"
]
},
"sass": {
/*
*Enter here the location of the style file folders
*in relation to the theme's root folder
*/
"source": "styles/scss",
"dest": "styles"
}
}In the ignore table, you can specify files or file types that should not be synchronized.
Browser preview (Browsersync)
Whenever synchronization is performed, mycashflow-sync displays a browser preview of the online store, created with the Browsersync tool.
If you have entered the online store's address using the https:// prefix in the synchronization settings, most probably your browser will display a warning about an insecure connection. Skip the warning to see the preview.
Updating the mycashflow-sync tool
To upgrade mycashflow-sync to the latest version, enter the following command below in the terminal:
npm update -g mycashflow-syncIf you want to update mycashflow-sync to a version that is not the latest version, you can use the command below (replace the number sequence at the end with the version number you want):
npm install -g mycashflow-sync@0.5.4Synchronization of theme files
Once you have defined theme-specific synchronization settings, you can synchronize the local and remote files using the following command:
mycashflow-sync syncIn this way, the latest version of each file will overwrite the older one and all new files will be added if they are missing from the server or local folder.
The synchronization is bidirectional, meaning that that the tool can upload files to the server and download them to the local environment.
The newer version of the file overwrites the older version regardless of which one is in the local directory and which on the online store's server.
The synchronization will never delete any files.
Watching changes
The following command lets you set mycashflow-sync to watch changes in theme files and perform the synchronization automatically whenever a file is modified:
mycashflow-sync watchIn this way, you won't have to run the synchronization command every time you edit a file and the changes will become visible in the theme as soon as you've saved the file.
mycashflow-sync watches changes both in local and remote files.
Using the mycashflow-sync tool with email themes
If you want to use the mycashflow-sync tool with the default email theme, you'll need to run the build and sync in different terminal windows.
Limitations
mycashflow-syncdoes not convert the email theme's SASS files to CSS. The conversion of SASS styles is handled with the email theme'sbuildcommand.- Browsersync does not work with email themes (the tool does not process Interface tags but displays them as such).
Here's how to use the mycashflow-sync tool for synchronizing email templates:
