updating vue-storefront custom theme

updating-custom-vuesf-theme.md

For the basic approach, please follow official upgrade notes: https://github.com/DivanteLtd/vue-storefront/blob/master/doc/Upgrade%20notes.md

But if that fails, this is the way to go that worked for me.

This gist requires you to create your repository from a vue-storefront, so you know exactly when you started work on your theme. For the sake of this gist, I'll name that fork/clone of vue-storefront: your-vuesf-repo

1. open your-vuesf-repo directory, check git log for most recent non-your commits write down the SHA. In my case:

commit 114737a40eca26bbe28e779e10462ebb3a09ef8b
Author: Piotr Karwatka <pkarwatka@divante.pl>
Date:   Fri Aug 24 12:37:19 2018 +0200

    Update FAQ and Receipes.md

2. clone most recent vue-storefront repo somewhere else, can be temporary directory you can remove after getting the diff. 3a. if your theme is based on "default" vueSF theme, run: git diff 114737a40eca26bbe28e779e10462ebb3a09ef8b origin/master -- src/themes/default > vueSF.patch

3b. if your theme is based on "theme-starter" vueSF theme, run: git diff 114737a40eca26bbe28e779e10462ebb3a09ef8b origin/master -- src/themes/theme-starter > vueSF.patch

Nice! you now have a patchfile with theme-only changes now, let's update it so it updates OUR theme

4. let's say our theme is called custom-theme, so we're running: sed -i 's/src\/themes\/default/src\/themes\/custom-theme/g' vueSF.patch

5. copy the vueSF.patch to your your-vuesf-repo directory and run it via patch vueSF.patch

NOW. we have a patch for our theme which could be applied without problems if our theme was the default one. The problem is - it already has changed lines because we have customized it.

when you run: git apply --check vueSF.patch

it gets you the conflicting lines.

while most of the patch is pretty much fine, you need to manually resolve those conflicts (as with normal git conflic resolve process) In our case it was:

error: patch failed: src/themes/custom-theme/App.vue:1
error: src/themes/custom-theme/App.vue: patch does not apply
error: patch failed: src/themes/custom-theme/components/core/blocks/Checkout/Shipping.vue:254
error: src/themes/custom-theme/components/core/blocks/Checkout/Shipping.vue: patch does not apply
error: patch failed: src/themes/custom-theme/package.json:1
error: src/themes/custom-theme/package.json: patch does not apply
error: patch failed: src/themes/custom-theme/pages/Home.vue:86
error: src/themes/custom-theme/pages/Home.vue: patch does not apply
error: patch failed: src/themes/custom-theme/pages/Product.vue:1
error: src/themes/custom-theme/pages/Product.vue: patch does not apply
error: patch failed: src/themes/custom-theme/resource/head.js:8
error: src/themes/custom-theme/resource/head.js: patch does not apply
error: patch failed: src/themes/custom-theme/router/index.js:9
error: src/themes/custom-theme/router/index.js: patch does not apply
error: patch failed: src/themes/custom-theme/store/ui-store.js:2
error: src/themes/custom-theme/store/ui-store.js: patch does not apply

so on example of the first problem (error: patch failed: src/themes/custom-theme/App.vue:1) let's see what vueSF.patch says about the changes we need to apply and by checking the diff file In my case the first difference between what diff looks for and what I have in my theme is:

-import MainHeader from './components/core/blocks/Header/Header.vue'
-import MainFooter from './components/core/blocks/Footer/Footer.vue'

except I already updated those with my own theme lines:

import MainFooter from './components/theme/blocks/Footer/Footer.vue'
import MainHeader from './components/theme/blocks/Header/Header'

so I need to edit the diff file. Instead of :

-import MainHeader from './components/core/blocks/Header/Header.vue'
-import MainFooter from './components/core/blocks/Footer/Footer.vue'

it should now say:

-import MainFooter from './components/theme/blocks/Footer/Footer.vue'
-import MainHeader from './components/theme/blocks/Header/Header'

after saving the diff it and running: git apply --check vueSF.patch

I can see the problem is gone, BUT!: Please see how vueSF changed the way layout is handled. according to the whole diff file, the Header and Footer were moved somewhere else, so write that down on your TODO list, you'll have to adjust your theme to work with the new LAYOUT instead of directly defining them in App.vue. (yes, that means you'll have to do some additional work because VueSF staff changed the logic of how things work comparing to what was used in your theme).

Same stands for every --check patch error line you encounter. Naturally the more you modified your theme, the more conflicting lines you'll have.