-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2018 from DivanteLtd/feature/1713_amp_renderer
Feature/1713 amp renderer
- Loading branch information
Showing
49 changed files
with
2,656 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <!DOCTYPE html> | ||
| <html data-vue-meta-server-rendered {{{ meta.inject().htmlAttrs.text() }}} amp> | ||
| <head><!-- index for default theme --> | ||
| {{{ meta.inject().title.text() }}} | ||
| {{{ meta.inject().meta.text() }}} | ||
| {{{ meta.inject().link.text() }}} | ||
| {{{ output.appendHead() }}} | ||
| {{{ renderStyles().replace("<style", "<style amp-custom") }}} | ||
| </head> | ||
| <body> | ||
| <!--vue-ssr-outlet--> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import { VueStorefrontModule, VueStorefrontModuleConfig } from '@vue-storefront/module' | ||
| import moduleRoutes from './router' | ||
|
|
||
| const store = { | ||
| namespaced: true, | ||
| state: { | ||
| key: null | ||
| } | ||
| } | ||
|
|
||
| const KEY = 'amp-renderer' | ||
|
|
||
| const moduleConfig: VueStorefrontModuleConfig = { | ||
| key: KEY, | ||
| router: { routes: moduleRoutes }, | ||
| store: { modules: [{ key: KEY, module: store }] } | ||
| } | ||
|
|
||
| export const AmpRenderer = new VueStorefrontModule(moduleConfig) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| { | ||
| "name": "@vue-storefront/module-amp-renderer", | ||
| "version": "1.0.0", | ||
| "description": "Google AMP Renderer for Vue Storefront", | ||
| "license": "MIT", | ||
| "main": "index.ts", | ||
| "scripts": { | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| import AmpThemeRouting from 'src/themes/default-amp/router' | ||
| export default AmpThemeRouting |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| <template> | ||
| <div class="header"> | ||
| <header | ||
| class="fixed w-100 brdr-bottom-1 bg-cl-primary brdr-cl-secondary" | ||
| :class="{ 'is-visible': navVisible }" | ||
| > | ||
| <div class="container px15"> | ||
| <div class="row between-xs middle-xs" v-if="!isCheckoutPage"> | ||
| <div class="col-sm-4 col-xs-2 middle-xs" /> | ||
| <div class="col-xs-2 visible-xs"> | ||
| <search-icon class="p15 icon pointer" /> | ||
| </div> | ||
| <div class="col-sm-4 col-xs-4 center-xs pt5"> | ||
| <div> | ||
| <logo width="36px" height="41px"/> | ||
| </div> | ||
| </div> | ||
| <div class="col-xs-2 visible-xs"> | ||
| <wishlist-icon class="p15 icon pointer" /> | ||
| </div> | ||
| <div class="col-sm-4 col-xs-2 end-xs" /> | ||
| </div> | ||
| <div class="row between-xs middle-xs px15 py5" v-if="isCheckoutPage"> | ||
| <div class="col-xs-5 col-md-3 middle-xs"> | ||
| <div> | ||
| <router-link :to="localizedRoute('/')" class="cl-tertiary links"> | ||
| {{ $t('Return to shopping') }} | ||
| </router-link> | ||
| </div> | ||
| </div> | ||
| <div class="col-xs-2 col-md-6 center-xs"> | ||
| <logo width="36px" height="41px"/> | ||
| </div> | ||
| <div class="col-xs-5 col-md-3 end-xs"> | ||
| <div> | ||
| <a v-if="!currentUser" href="#" @click.prevent="gotoAccount" class="cl-tertiary links"> | ||
| {{ $t('Login to your account') }} | ||
| </a> | ||
| <span v-else> | ||
| {{ $t('You are logged in as') }} {{ currentUser.firstname }} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </header> | ||
| <div class="header-placeholder"/> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { mapState } from 'vuex' | ||
| import CurrentPage from 'theme/mixins/currentPage' | ||
| import Header from 'theme/components/core//blocks/Header/Header' | ||
| import AccountIcon from 'theme/components/core/blocks/Header/AccountIcon' | ||
| import CompareIcon from 'theme/components/core/blocks/Header/CompareIcon' | ||
| import HamburgerIcon from 'theme/components/core/blocks/Header/HamburgerIcon' | ||
| import Logo from 'theme/components/core/Logo' | ||
| import MicrocartIcon from 'theme/components/core/blocks/Header/MicrocartIcon' | ||
| import ReturnIcon from 'theme/components/core/blocks/Header/ReturnIcon' | ||
| import SearchIcon from 'theme/components/core/blocks/Header/SearchIcon' | ||
| import WishlistIcon from 'theme/components/core/blocks/Header/WishlistIcon' | ||
| export default { | ||
| components: { | ||
| AccountIcon, | ||
| CompareIcon, | ||
| HamburgerIcon, | ||
| Logo, | ||
| MicrocartIcon, | ||
| ReturnIcon, | ||
| SearchIcon, | ||
| WishlistIcon | ||
| }, | ||
| mixins: [Header, CurrentPage], | ||
| data () { | ||
| return { | ||
| navVisible: true, | ||
| isScrolling: false, | ||
| scrollTop: 0, | ||
| lastScrollTop: 0, | ||
| navbarHeight: 54 | ||
| } | ||
| }, | ||
| computed: { | ||
| ...mapState({ | ||
| isOpenLogin: state => state.ui.signUp, | ||
| currentUser: state => state.user.current | ||
| }) | ||
| }, | ||
| beforeMount () { | ||
| window.addEventListener('scroll', () => { | ||
| this.isScrolling = true | ||
| }) | ||
| setInterval(() => { | ||
| if (this.isScrolling) { | ||
| this.hasScrolled() | ||
| this.isScrolling = false | ||
| } | ||
| }, 250) | ||
| }, | ||
| methods: { | ||
| gotoAccount () { | ||
| this.$bus.$emit('modal-toggle', 'modal-signup') | ||
| }, | ||
| hasScrolled () { | ||
| this.scrollTop = window.scrollY | ||
| if (this.scrollTop > this.lastScrollTop && this.scrollTop > this.navbarHeight) { | ||
| this.navVisible = false | ||
| } else { | ||
| this.navVisible = true | ||
| } | ||
| this.lastScrollTop = this.scrollTop | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| @import '~theme/css/variables/colors'; | ||
| @import '~theme/css/helpers/functions/color'; | ||
| $color-icon-hover: color(secondary, $colors-background); | ||
| header { | ||
| height: 54px; | ||
| top: -55px; | ||
| z-index: 2; | ||
| transition: top 0.2s ease-in-out; | ||
| &.is-visible { | ||
| top: 0; | ||
| } | ||
| } | ||
| .icon { | ||
| opacity: 0.6; | ||
| &:hover, | ||
| &:focus { | ||
| background-color: $color-icon-hover; | ||
| opacity: 1; | ||
| } | ||
| } | ||
| .right-icons { | ||
| //for edge | ||
| float: right; | ||
| } | ||
| .header-placeholder { | ||
| height: 54px; | ||
| } | ||
| .links { | ||
| text-decoration: underline; | ||
| } | ||
| @media (max-width: 767px) { | ||
| .row.middle-xs { | ||
| margin: 0 -15px; | ||
| &.py5 { | ||
| margin: 0; | ||
| } | ||
| } | ||
| .col-xs-2:first-of-type { | ||
| padding-left: 0; | ||
| } | ||
| .col-xs-2:last-of-type { | ||
| padding-right: 0; | ||
| } | ||
| a, span { | ||
| font-size: 12px; | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.