feat(theme-base): theme base package as a foundation for custom themes

packages/default-theme/helpers/formatPrice.js

@@ -0,0 +1,20 @@
+import currency from "currency.js"
+
+const defaultFormatPriceOptions = {
+ pattern: `# !`,
+ separator: ` `,
+ decimal: `,`,
+ symbol: `€`,
+ formatWithSymbol: true,
+}
+
+export function formatPrice(price, options) {
+ if (typeof price !== "number") {
+ return
+ }
+
+ return currency(
+ price,
+ Object.assign(defaultFormatPriceOptions, options)
+ ).format()
+}

packages/default-theme/helpers/index.js

@@ -10,16 +10,7 @@ const defaultFormatPriceOptions = {
  formatWithSymbol: true,
 }
 
-export function formatPrice(price, options) {
- if (typeof price !== "number") {
- return
- }
-
- return currency(
- price,
- Object.assign(defaultFormatPriceOptions, options)
- ).format()
-}
+export { formatPrice } from "./formatPrice"
 
 export const getSortingLabel = (sorting) => {
  if (!sorting || !sorting.field) {

packages/nuxt-module/plugins/price-filter.js

@@ -1,7 +1,7 @@
 import Vue from "vue";
 import { provide } from "@vue/composition-api";
 import { useCurrency } from "@shopware-pwa/composables";
-import { formatPrice } from "@/helpers";
+import { formatPrice } from "@/helpers/formatPrice";
 
 export default ({ app }) => {
  app.setup = () => {

packages/theme-base/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+node_modules_dev
+lerna-debug.log
+dist
+.DS_Store
+.yalc
+yalc.lock

packages/theme-base/package.json

@@ -0,0 +1,17 @@
+{
+ "name": "@shopware-pwa/theme-base",
+ "version": "0.0.1",
+ "author": "patzick <13100280+patzick@users.noreply.github.com>",
+ "license": "MIT",
+ "baseTheme": "",
+ "private": true,
+ "scripts": {
+ "build": "shopware-pwa build-theme",
+ "dev": "shopware-pwa dev-theme",
+ "postinstall": "yarn build && cd ./dist && yarn link",
+ "release": "yarn build && cd ./dist && yarn publish"
+ },
+ "dependencies": {
+ "currency.js": "^2.0.3"
+ }
+}

packages/theme-base/src/app/router.scrollBehavior.js

@@ -0,0 +1,7 @@
+export default function (to, from, savedPosition) {
+ if (savedPosition) {
+ return savedPosition;
+ } else {
+ return { x: 0, y: 0 };
+ }
+}

packages/theme-base/src/assets/scss/main.scss

@@ -0,0 +1,77 @@
+@import "@/assets/scss/variables.scss";
+
+// Global styles for theme
+
+html {
+ overflow-x: hidden;
+ height: 100vh;
+ overflow: auto;
+ scroll-behavior: smooth;
+}
+
+a {
+ text-decoration: none;
+ color: var(--c-link);
+ &:hover {
+ color: var(--c-link-hover);
+ }
+}
+
+/*Header styles*/
+h1 {
+ font-family: var(--font-family-secondary);
+ font-size: var(--h1-font-size);
+ font-weight: var(--h1-font-weight);
+ line-height: 1.6;
+ margin: 0;
+}
+
+h2 {
+ font-family: var(--font-family-secondary);
+ font-size: var(--h2-font-size);
+ font-weight: var(--h2-font-weight);
+ line-height: 1.6;
+ margin: 0;
+}
+
+h3 {
+ font-family: var(--font-family-secondary);
+ font-size: var(--h3-font-size);
+ font-weight: var(--h3-font-weight);
+ line-height: 1.6;
+ margin: 0;
+}
+
+h4 {
+ font-family: var(--font-family-secondary);
+ font-size: var(--h4-font-size);
+ font-weight: var(--h4-font-weight);
+ line-height: 1.6;
+ margin: 0;
+}
+
+h5 {
+ font-family: var(--font-family-secondary);
+ font-size: var(--h5-font-size);
+ font-weight: var(--h5-font-weight);
+ line-height: 1.6;
+ margin: 0;
+}
+
+body {
+ padding: 0;
+ margin: 0;
+ min-height: 100vh;
+ font-family: var(--font-family-primary);
+ font-weight: var(--font-light);
+ font-size: var(--font-size-base);
+ line-height: 1.6;
+}
+
+#__nuxt {
+ height: 100vh;
+}
+
+#__layout {
+ height: 100%;
+}

packages/theme-base/src/assets/scss/variables.scss

@@ -0,0 +1,20 @@
+$tablet: 768px;
+
+// Global variables for theme
+#__nuxt {
+ --boxed-mode-max-width: 1366px;
+ --bottom-navigation-height: 3.35rem;
+}
+
+@mixin for-tablet {
+ @media screen and (min-width: $tablet) {
+ @content;
+ }
+}
+
+@mixin sizing-mode-boxed {
+ @include for-desktop {
+ max-width: var(--boxed-mode-max-width);
+ margin: 0 auto;
+ }
+}

packages/theme-base/src/cms/cmsMap.json

@@ -0,0 +1,5 @@
+{
+ "sections": {},
+ "blocks": {},
+ "elements": {}
+}

packages/theme-base/src/helpers/formatPrice.js

@@ -0,0 +1,20 @@
+import currency from "currency.js";
+
+const defaultFormatPriceOptions = {
+ pattern: `# !`,
+ separator: ` `,
+ decimal: `,`,
+ symbol: `€`,
+ formatWithSymbol: true,
+};
+
+export function formatPrice(price, options) {
+ if (typeof price !== "number") {
+ return;
+ }
+
+ return currency(
+ price,
+ Object.assign(defaultFormatPriceOptions, options)
+ ).format();
+}

packages/theme-base/src/layouts/default.vue

@@ -0,0 +1,20 @@
+<template>
+ <div>
+ <h1>
+ Welcome in your Blank Shopware PWA template. It is a base for your own
+ theme.
+ </h1>
+ <nuxt />
+ </div>
+</template>
+
+<script>
+export default {
+ components: {},
+ setup(props, { root }) {
+ return {};
+ },
+};
+</script>
+
+<style lang="scss" scoped></style>

packages/theme-base/src/locales/de-DE.json

@@ -0,0 +1 @@
+{}

packages/theme-base/src/locales/en-GB.json

@@ -0,0 +1 @@
+{}

packages/theme-base/src/logic/useLocales.js

@@ -0,0 +1,28 @@
+import { computed } from "@vue/composition-api";
+import languagesMap from "sw-plugins/languages";
+import { getApplicationContext } from "@shopware-pwa/composables";
+
+export const useLocales = (rootContext) => {
+ const { i18n, router } = getApplicationContext(
+ rootContext,
+ "useUICheckoutPage"
+ );
+
+ const availableLanguages = computed(() => Object.values(languagesMap) || []);
+ const currentLocale = computed(() => i18n.locale);
+
+ const changeLocale = async (localeCode) => {
+ if (localeCode === i18n.locale) return;
+ if (localeCode === i18n.fallbackLocale) {
+ router.push(rootContext.$route.fullPath.replace(/^\/[^\/]+/, ""));
+ } else {
+ router.push(`/${localeCode}${rootContext.$route.fullPath}`);
+ }
+ };
+
+ return {
+ availableLanguages,
+ changeLocale,
+ currentLocale,
+ };
+};

packages/theme-base/src/pages/_.vue

@@ -0,0 +1,4 @@
+<script>
+import Pages from "@/pages/_lang/_";
+export default Pages;
+</script>

packages/theme-base/src/pages/_lang/_.vue

@@ -0,0 +1,17 @@
+<template>
+ <h2>You can show your CMS page overriding "src/pages/_lang/_.vue" file.</h2>
+</template>
+<script>
+export default {
+ name: "DynamicRoute",
+ components: {},
+ watchQuery(newQuery, oldQuery) {
+ // Only execute component methods if currency changed
+ return newQuery.currencyId !== oldQuery.currencyId;
+ },
+ asyncData: async ({ params, app, error: errorView, query }) => {
+ return {};
+ },
+};
+</script>
+<style lang="scss" scoped></style>

packages/theme-base/src/store/index.js

@@ -0,0 +1,49 @@
+export const state = () => ({
+ cart: null,
+ page: null,
+ user: null,
+ sessionContext: null,
+ locales: ["en-GB", "de-DE"],
+ locale: "en-GB",
+ initialListings: {},
+ appliedListings: {},
+});
+
+export const mutations = {
+ SET_CART(state, cart) {
+ state.cart = cart;
+ },
+ SET_PAGE(state, page) {
+ state.page = page;
+ },
+ SET_USER(state, user) {
+ state.user = user;
+ },
+ SET_SESSION_CONTEXT(state, sessionContext) {
+ state.sessionContext = sessionContext;
+ },
+ SET_LANG(state, locale) {
+ if (state.locales.includes(locale)) {
+ state.locale = locale;
+ }
+ },
+ SET_INITIAL_LISTING(state, { listingKey, initialListing }) {
+ state.initialListings = Object.assign({}, state.initialListings, {
+ [listingKey]: initialListing,
+ });
+ },
+ SET_APPLIED_LISTING(state, { listingKey, appliedListing }) {
+ state.appliedListings = Object.assign({}, state.appliedListings, {
+ [listingKey]: appliedListing,
+ });
+ },
+};
+
+export const getters = {
+ getCart: (state) => state.cart,
+ getPage: (state) => state.page,
+ getUser: (state) => state.user,
+ getSessionContext: (state) => state.sessionContext,
+ getInitialListings: (state) => state.initialListings,
+ getAppliedListings: (state) => state.appliedListings,
+};

scripts/dev.js

@@ -25,16 +25,26 @@ const target = args._.length
  : "shopware-6-client";
 const chokidar = require("chokidar");
 
-chokidar
- .watch([path.join(__dirname, "..", "packages", target, "src")], {
- ignoreInitial: true,
- })
- .on("all", async (event) => {
- execa("yarn", ["build", target], {
- stdio: "inherit",
- });
+const packagePath = path.join(__dirname, "..", "packages", target);
+const pkg = require(path.join(packagePath, "package.json"));
+
+if (pkg.scripts && pkg.scripts.dev) {
+ execa("yarn", ["dev"], {
+ stdio: "inherit",
+ cwd: packagePath,
  });
+} else {
+ chokidar
+ .watch([path.join(packagePath, "src")], {
+ ignoreInitial: true,
+ })
+ .on("all", async (event) => {
+ execa("yarn", ["build", target], {
+ stdio: "inherit",
+ });
+ });
 
-execa("yarn", ["build", target], {
- stdio: "inherit",
-});
+ execa("yarn", ["build", target], {
+ stdio: "inherit",
+ });
+}

scripts/release.js

@@ -216,11 +216,18 @@ async function publishPackage(pkgName, version, runIfNotDry) {
  if (skippedPackages.includes(pkgName)) {
  return;
  }
- const pkgRoot = getPkgRoot(pkgName);
+ let pkgRoot = getPkgRoot(pkgName);
  const pkgPath = path.resolve(pkgRoot, "package.json");
  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
  if (pkg.private) {
- return;
+ // if package is private and has dist folder with package.json it tries to publish from dist folder
+ const pkgDistRoot = path.resolve(pkgRoot, "dist");
+ const pkgDistPath = path.resolve(pkgDistRoot, "package.json");
+ if (!fs.existsSync(pkgDistPath)) return;
+ const distPackage = JSON.parse(fs.readFileSync(pkgDistPath, "utf-8"));
+ if (distPackage.private) return;
+
+ pkgRoot = pkgDistRoot;
  }
 
  const releaseTag = isCanaryRelease ? "canary" : null;