feat(category-nuxt): navigation, cmsComponents

packages/default-theme/components/CmsPage.vue

@@ -0,0 +1,32 @@
+<template>
+ <div class="cms-page">
+ <SwSlots
+ :content="cmsSection"
+ v-for="cmsSection in cmsSections"
+ :key="cmsSection.id"
+ />
+ </div>
+</template>
+
+<script>
+import SwSlots from "./cms/elements/SwSlots";
+
+export default {
+ components: {
+ SwSlots
+ },
+ props: {
+ content: {
+ type: Object,
+ default: () => ({})
+ }
+ },
+ computed: {
+ cmsSections() {
+ return this.content && this.content.sections ? this.content.sections : [];
+ }
+ }
+};
+</script>
+
+<style lang="scss" scoped></style>

packages/default-theme/components/HelloWorld.vue

@@ -0,0 +1,146 @@
+<template>
+ <div class="hello">
+ <h1>{{ msg }}</h1>
+ <p>
+ For a guide and recipes on how to configure / customize this project,<br />
+ check out the
+ <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
+ >vue-cli documentation</a
+ >.
+ </p>
+ <h3>Installed CLI Plugins</h3>
+ <ul>
+ <li>
+ <a
+ href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+ target="_blank"
+ rel="noopener"
+ >babel</a
+ >
+ </li>
+ <li>
+ <a
+ href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
+ target="_blank"
+ rel="noopener"
+ >pwa</a
+ >
+ </li>
+ <li>
+ <a
+ href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
+ target="_blank"
+ rel="noopener"
+ >router</a
+ >
+ </li>
+ <li>
+ <a
+ href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
+ target="_blank"
+ rel="noopener"
+ >vuex</a
+ >
+ </li>
+ <li>
+ <a
+ href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+ target="_blank"
+ rel="noopener"
+ >eslint</a
+ >
+ </li>
+ <li>
+ <a
+ href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest"
+ target="_blank"
+ rel="noopener"
+ >unit-jest</a
+ >
+ </li>
+ </ul>
+ <h3>Essential Links</h3>
+ <ul>
+ <li>
+ <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
+ </li>
+ <li>
+ <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
+ >Forum</a
+ >
+ </li>
+ <li>
+ <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
+ >Community Chat</a
+ >
+ </li>
+ <li>
+ <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
+ >Twitter</a
+ >
+ </li>
+ <li>
+ <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
+ </li>
+ </ul>
+ <h3>Ecosystem</h3>
+ <ul>
+ <li>
+ <a href="https://router.vuejs.org" target="_blank" rel="noopener"
+ >vue-router</a
+ >
+ </li>
+ <li>
+ <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
+ </li>
+ <li>
+ <a
+ href="https://github.com/vuejs/vue-devtools#vue-devtools"
+ target="_blank"
+ rel="noopener"
+ >vue-devtools</a
+ >
+ </li>
+ <li>
+ <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
+ >vue-loader</a
+ >
+ </li>
+ <li>
+ <a
+ href="https://github.com/vuejs/awesome-vue"
+ target="_blank"
+ rel="noopener"
+ >awesome-vue</a
+ >
+ </li>
+ </ul>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "HelloWorld",
+ props: {
+ msg: String
+ }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+ margin: 40px 0 0;
+}
+ul {
+ list-style-type: none;
+ padding: 0;
+}
+li {
+ display: inline-block;
+ margin: 0 10px;
+}
+a {
+ color: #42b983;
+}
+</style>

packages/default-theme/components/SwProductCart.vue

@@ -0,0 +1,46 @@
+<template>
+ <router-link :to="{ name: 'product', params: { id: product.id } }">
+ <SfProductCard
+ :title="product.name || ''"
+ :image="getImageUrl"
+ :regular-price="getUnitPrice"
+ :isOnWishlist="false"
+ @click:wishlist="toggleWishlist"
+ class="products__product-card"
+ />
+ </router-link>
+</template>
+
+<script>
+import { SfProductCard } from "@storefront-ui/vue";
+
+export default {
+ components: {
+ SfProductCard
+ },
+ data() {
+ return {};
+ },
+ props: {
+ product: {
+ type: Object,
+ default: () => ({})
+ }
+ },
+ computed: {
+ getUnitPrice() {
+ return (
+ this.product.calculatedPrice && this.product.calculatedPrice.unitPrice
+ );
+ },
+ getImageUrl() {
+ return this.product.cover ? this.product.cover.media.url : "";
+ }
+ },
+ methods: {
+ toggleWishlist() {}
+ }
+};
+</script>
+
+<style lang="scss" scoped></style>

packages/default-theme/components/TopNavigation.vue

@@ -0,0 +1,45 @@
+<template>
+ <div id="nav">
+ <nuxt-link to="/">Home</nuxt-link>
+ <nuxt-link v-for="element in navigationElements" :key="element.id" :to="`/category/${convertToSlug(element.name)}`"> | {{ element.name }}</nuxt-link>
+</div>
+</template>
+<script>
+import { getNavigation, getPage } from "@shopware-pwa/shopware-6-client";
+import slugify from "slugify"
+
+export default {
+ data: function () {
+ return {
+ navigationElements: []
+ }
+ },
+ async mounted () {
+ const { elements } = await getNavigation()
+ this.navigationElements = elements
+ },
+ methods: {
+ convertToSlug(name) {
+ return slugify(name, {
+ remove: /and|[*+~.,()'"!:@]/g
+ })
+ }
+ },
+}
+</script>
+<style lang="scss" scoped>
+@import '~@storefront-ui/vue/styles.scss';
+@import '~@storefront-ui/shared/styles/helpers/visibility';
+#nav {
+ padding: 30px;
+
+ a {
+ font-weight: bold;
+ color: #2c3e50;
+
+ &.nuxt-link-exact-active {
+ color: #42b983;
+ }
+ }
+}
+</style>

packages/default-theme/components/cms/cmsNameMapper.js

@@ -0,0 +1,18 @@
+const slotsMap = {
+ "product-box": "CmsSwProductCart",
+ "product-slider": "SwProductSlider",
+ image: "SwImage",
+ text: "SwTextSlot",
+ "vimeo-video": "SwVimeoVideo",
+ "youtube-video": "SwYoutubeVideo",
+ "product-listing": "SwProductListingSlot",
+ "category-navigation": "SwCategoryNavigationSlot"
+};
+
+export function getComponentBy(content) {
+ if (!content) return;
+ const isSlot = !!content.slot;
+ let componentName = isSlot ? slotsMap[content.type] : "SwSlots";
+ if (!componentName) componentName = "SwNoComponent";
+ return () => import(`./elements/${componentName}`);
+}

packages/default-theme/components/cms/elements/CmsSwProductCart.vue

@@ -0,0 +1,21 @@
+<template>
+ <SwProductCart :product="content.data.product" />
+</template>
+
+<script>
+import SwProductCart from "../../SwProductCart";
+
+export default {
+ components: {
+ SwProductCart
+ },
+ props: {
+ content: {
+ type: Object,
+ default: null
+ }
+ }
+};
+</script>
+
+<style lang="scss" scoped></style>

packages/default-theme/components/cms/elements/SwCategoryNavigationSlot.vue

@@ -0,0 +1,50 @@
+<template>
+ <div class="sw-category-navigation">
+ <SfAccordion :firstOpen="true" :showChevron="true">
+ <SfAccordionItem
+ v-for="accordion in navigation"
+ :key="accordion.id"
+ :header="accordion.header"
+ >
+ <template v-if="accordion.items.length > 0">
+ <SfList>
+ <SfListItem v-for="(item, j) in accordion.items" :key="j">
+ <SfMenuItem :label="item.label" :count="item.count" />
+ </SfListItem>
+ </SfList>
+ </template>
+ </SfAccordionItem>
+ </SfAccordion>
+ </div>
+</template>
+
+<script>
+import { SfList, SfAccordion, SfMenuItem } from "@storefront-ui/vue";
+export default {
+ components: {
+ SfAccordion,
+ SfList,
+ SfMenuItem
+ },
+ data() {
+ return {
+ navigationResponse: []
+ };
+ },
+ props: {
+ content: {
+ type: Object,
+ default: () => ({})
+ }
+ },
+ async mounted() {
+ },
+ computed: {
+ navigation() {
+ return this.navigationResponse;
+ }
+ }
+};
+</script>
+
+<style lang="scss" scoped></style>

packages/default-theme/components/cms/elements/SwGenericBlock.vue

@@ -0,0 +1,34 @@
+<template>
+ <component :is="getComponent" :content="content" :style="slotStyles"/>
+</template>
+
+<script>
+import { getComponentBy } from "../cmsNameMapper";
+
+export default {
+ props: {
+ content: {
+ type: Object,
+ default: () => ({})
+ }
+ },
+ computed: {
+ getComponent() {
+ return getComponentBy(this.content);
+ },
+ backgroundMediaMode() {
+ return this.content.backgroundMediaMode;
+ },
+ slotStyles() {
+ const {
+ backgroundMedia
+ } = this.content;
+ return {
+ backgroundImage: backgroundMedia ? `url(${backgroundMedia.url})` : null,
+ };
+ }
+ }
+};
+</script>
+
+<style lang="scss" scoped></style>