Skip to content

yireo-training/vsf-yireo-theme

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

Vue Storefront 1 - parent/child theme

A parent/child theme mechanism for Vue Storefront 1.

Installation

Fork this repository under your own GitHub account and clone it to the src/themes/ folder - for instance src/themes/example.

Within the theme folder src/themes/example, run the following command:

yarn add @yireo/vsf1-webpack-inheritance-plugin

Next, create a file theme.json with the following content. A sample is provided in theme.json.dist:

{
    "parent": "capybara"
}

Copy index.js.dist to index.js IF (!) you want to have a clean start. Or study its contents. These files are not a drop-in click-click solution. They require you to be a Vue Storefront 1 developer that knows how to customize a Vue Storefront 1 theme. Otherwise copy the file from the parent theme, modify its paths (import) to be correctly pointing to the right files, and hack the demo.

Copy the file router/index.js.dist to router/index.js IF (!) you want to have the routing this way. See the comment above.

Copy over the following folders from your parent theme to this child theme:

  • assets/
  • css/
  • resource/
  • templates/

Additional step for the Default Theme

Create a webpack.config.js file with the following contents:

const InheritancePlugin = require('@yireo/vsf1-webpack-inheritance-plugin');
const themeJson = require('./theme.json');

module.exports = function (config, {isClient}) {
  if (!config.resolve.plugins) config.resolve.plugins = [];
  config.resolve.plugins.push(new InheritancePlugin({parent: themeJson.parent}));
  
  return config;
};

Edit index.js so that it matches your theme:

import { themeEntry } from '../default';

Edit router/index.js so that it matches your theme:

import routes from '../../default/router';

Additional step for the Capybara Theme

Copy webpack.config.js from Capybara to your theme. Edit the file webpack.config.js so that the Webpack plugin is added.

In the top:

const InheritancePlugin = require("@yireo/vsf1-webpack-inheritance-plugin");
const themeJson = require("./theme.json");

In the bottom:

  ...

  if (!mergedConfig.resolve.plugins) mergedConfig.resolve.plugins = [];
  mergedConfig.resolve.plugins.push(new Vsf1ThemeInheritancePlugin({parent: themeJson.parent}));

  return mergedConfig;
};

Do make sure to copy the file config/modules.ts from Capybara into your custom theme.

Usage: Components

You can copy any component file (like pages/Home.vue) from the parent theme to the child theme. This should automatically be resolved correctly.

Usage: Routing

It is strongly advised to import the parent routes in your own route file router/index.js. Next you can make simply modifications:

import routes from '../../default/router';
const Foobar = () => import(/* webpackChunkName: "vsf-foobar" */ 'theme/pages/Foobar.vue')

routes.push({ name: 'foobar', path: '/foobar', component: Home, alias: '/foobar.html' });

export default routes;

Usage: CSS & assets & resources

CSS & assets & resources are not resolved automatically. But if you are extending upon Capybara, you will only need to copy a single file css/main.scss with a single line of code, and then you're good to go.

About

Example theme with few tricks to minimize overrides

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published