Skip to content

Commit

Permalink
Merge pull request #6152 from vuestorefront/docs-47/gtm
Browse files Browse the repository at this point in the history
Add gtm and hubspot to VSF1 docs
  • Loading branch information
lukaszjedrasik authored Aug 4, 2021
2 parents 4a3b546 + 1070342 commit 915c33f
Show file tree
Hide file tree
Showing 3 changed files with 169 additions and 2 deletions.
17 changes: 15 additions & 2 deletions docs/.vuepress/config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
const GTM_TAG = 'GTM-WMDC3CP';

module.exports = {
base: '/v1/',
port: 8081,
Expand All @@ -8,10 +10,21 @@ module.exports = {
},
head: [
['link', { rel: 'icon', href: '/favicon.png' }],
['script', { src: 'https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.12.1/diff2html.min.js'}]
['script', { src: 'https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.12.1/diff2html.min.js'}],
// HubSpot
['script', { async: true, defer: true, src: 'https://js.hs-scripts.com/8443671.js', id: 'hs-script-loader' }],
// Google Tag Manager
['script', {}, [`
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','${GTM_TAG}');
`]]
],
themeConfig: {
repo: 'DivanteLtd/vue-storefront',
GTM_TAG,
repo: 'vuestorefront/vue-storefront',
docsDir: 'docs',
editLinks: true,
sidebarDepth: 3,
Expand Down
3 changes: 3 additions & 0 deletions docs/.vuepress/theme/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
extend: '@vuepress/theme-default'
};
151 changes: 151 additions & 0 deletions docs/.vuepress/theme/layouts/Layout.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<template>
<div
class="theme-container"
:class="pageClasses"
@touchstart="onTouchStart"
@touchend="onTouchEnd"
>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe
:src="`https://www.googletagmanager.com/ns.html?id=${ $site.themeConfig.GTM_TAG }`"
height="0"
width="0"
style="display:none;visibility:hidden">
</iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->

<Navbar
v-if="shouldShowNavbar"
@toggle-sidebar="toggleSidebar"
/>

<div
class="sidebar-mask"
@click="toggleSidebar(false)"
/>

<Sidebar
:items="sidebarItems"
@toggle-sidebar="toggleSidebar"
>
<template #top>
<slot name="sidebar-top" />
</template>
<template #bottom>
<slot name="sidebar-bottom" />
</template>
</Sidebar>

<Home v-if="$page.frontmatter.home" />

<Page
v-else
:sidebar-items="sidebarItems"
>
<template #top>
<slot name="page-top" />
</template>
<template #bottom>
<slot name="page-bottom" />
</template>
</Page>
</div>
</template>

<script>
import Home from '@theme/components/Home.vue'
import Navbar from '@theme/components/Navbar.vue'
import Page from '@theme/components/Page.vue'
import Sidebar from '@theme/components/Sidebar.vue'
import { resolveSidebarItems } from '@vuepress/theme-default/util'
export default {
name: 'Layout',
components: {
Home,
Page,
Sidebar,
Navbar
},
data () {
return {
isSidebarOpen: false
}
},
computed: {
shouldShowNavbar () {
const { themeConfig } = this.$site
const { frontmatter } = this.$page
if (
frontmatter.navbar === false
|| themeConfig.navbar === false) {
return false
}
return (
this.$title
|| themeConfig.logo
|| themeConfig.repo
|| themeConfig.nav
|| this.$themeLocaleConfig.nav
)
},
shouldShowSidebar () {
const { frontmatter } = this.$page
return (
!frontmatter.home
&& frontmatter.sidebar !== false
&& this.sidebarItems.length
)
},
sidebarItems () {
return resolveSidebarItems(
this.$page,
this.$page.regularPath,
this.$site,
this.$localePath
)
},
pageClasses () {
const userPageClass = this.$page.frontmatter.pageClass
return [
{
'no-navbar': !this.shouldShowNavbar,
'sidebar-open': this.isSidebarOpen,
'no-sidebar': !this.shouldShowSidebar
},
userPageClass
]
}
},
mounted () {
this.$router.afterEach(() => {
this.isSidebarOpen = false
})
},
methods: {
toggleSidebar (to) {
this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
this.$emit('toggle-sidebar', this.isSidebarOpen)
},
// side swipe
onTouchStart (e) {
this.touchStart = {
x: e.changedTouches[0].clientX,
y: e.changedTouches[0].clientY
}
},
onTouchEnd (e) {
const dx = e.changedTouches[0].clientX - this.touchStart.x
const dy = e.changedTouches[0].clientY - this.touchStart.y
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
if (dx > 0 && this.touchStart.x <= 80) {
this.toggleSidebar(true)
} else {
this.toggleSidebar(false)
}
}
}
}
}
</script>

0 comments on commit 915c33f

Please sign in to comment.