Replace frontpage hero images with image slider

Implement Swiper

CODE_OF_CONDUCT.md

@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+-   Using welcoming and inclusive language
+-   Being respectful of differing viewpoints and experiences
+-   Gracefully accepting constructive criticism
+-   Focusing on what is best for the community
+-   Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
+-   The use of sexualized language or imagery and unwelcome sexual attention or
+    advances
+-   Trolling, insulting/derogatory comments, and personal or political attacks
+-   Public or private harassment
+-   Publishing others' private information, such as a physical or electronic
+    address, without explicit permission
+-   Other conduct which could reasonably be considered inappropriate in a
+    professional setting
 
 ## Our Responsibilities
 
@@ -68,9 +68,9 @@ members of the project's leadership.
 ## Attribution
 
 This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+available at <https://www.contributor-covenant.org/version/1/4/code-of-conduct.html>
 
 [homepage]: https://www.contributor-covenant.org
 
 For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq
+<https://www.contributor-covenant.org/faq>

CONTRIBUTING.md

@@ -7,14 +7,14 @@ Please note we have a code of conduct, please follow it in all your interactions
 
 ## Pull Request Process
 
-1. Ensure any install or build dependencies are removed before the end of the layer when doing a 
-   build.
-2. Update the README.md with details of changes to the interface, this includes new environment 
-   variables, exposed ports, useful file locations and container parameters.
-3. Increase the version numbers in any examples files and the README.md to the new version that this
-   Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
-4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 
-   do not have permission to do that, you may request the second reviewer to merge it for you.
+1.  Ensure any install or build dependencies are removed before the end of the layer when doing a 
+    build.
+2.  Update the README.md with details of changes to the interface, this includes new environment 
+    variables, exposed ports, useful file locations and container parameters.
+3.  Increase the version numbers in any examples files and the README.md to the new version that this
+    Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
+4.  You may merge the Pull Request in once you have the sign-off of two other developers, or if you 
+    do not have permission to do that, you may request the second reviewer to merge it for you.
 
 ## Code of Conduct
 
@@ -32,22 +32,22 @@ orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+-   Using welcoming and inclusive language
+-   Being respectful of differing viewpoints and experiences
+-   Gracefully accepting constructive criticism
+-   Focusing on what is best for the community
+-   Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
-advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
+-   The use of sexualized language or imagery and unwelcome sexual attention or
+    advances
+-   Trolling, insulting/derogatory comments, and personal or political attacks
+-   Public or private harassment
+-   Publishing others' private information, such as a physical or electronic
+    address, without explicit permission
+-   Other conduct which could reasonably be considered inappropriate in a
+    professional setting
 
 ### Our Responsibilities
 
@@ -89,4 +89,5 @@ This Code of Conduct is adapted from the [Contributor Covenant][homepage], versi
 available at [http://contributor-covenant.org/version/1/4][version]
 
 [homepage]: http://contributor-covenant.org
+
 [version]: http://contributor-covenant.org/version/1/4/

README.md

@@ -9,59 +9,65 @@
 
 # This is currently a work in progress!
 
-1. Install and activate the following required plugins, in your WordPress plugin directory:
+1.  Install and activate the following required plugins, in your WordPress plugin directory:
 
-- [woocommerce](https://wordpress.org/plugins/woocommerce) Ecommerce for WordPress.
-- [wp-graphql](https://wordpress.org/plugins/wp-graphql) Exposes GraphQL for WordPress.
-- [wp-graphql-woocommerce](https://github.com/wp-graphql/wp-graphql-woocommerce) Adds WooCommerce functionality to a WPGraphQL schema.
-- [algolia-woo-indexer](https://github.com/w3bdesign/algolia-woo-indexer) Sends WooCommerce products to Algolia. Required for search to work.
-- [wp-graphql-cors](https://github.com/funkhaus/wp-graphql-cors) Ensures that CORS works correctly. Remember to add the domain to the store under `Extend "Access-Control-Allow-Origin” header`
+-   [woocommerce](https://wordpress.org/plugins/woocommerce) Ecommerce for WordPress.
+-   [wp-graphql](https://wordpress.org/plugins/wp-graphql) Exposes GraphQL for WordPress.
+-   [wp-graphql-woocommerce](https://github.com/wp-graphql/wp-graphql-woocommerce) Adds WooCommerce functionality to a WPGraphQL schema.
+-   [algolia-woo-indexer](https://github.com/w3bdesign/algolia-woo-indexer) Sends WooCommerce products to Algolia. Required for search to work.
+-   [wp-graphql-cors](https://github.com/funkhaus/wp-graphql-cors) Ensures that CORS works correctly. Remember to add the domain to the store under `Extend "Access-Control-Allow-Origin” header`
 
 Optional plugin:
 
-- [headless-wordpress](https://github.com/w3bdesign/headless-wp) Disables the frontend so only the backend is accessible. (optional)
+-   [headless-wordpress](https://github.com/w3bdesign/headless-wp) Disables the frontend so only the backend is accessible. (optional)
 
 The current release has been tested and is confirmed working with the following versions:
 
-- WordPress version 5.6.0
-- WooCommerce version 4.9.0
-- WP GraphQL version 1.1.2
-- WooGraphQL version 0.6.1 (latest development version)
-- WPGraphQL CORS version 1.1.0 (with introspection enabled)
+-   WordPress version 5.6.0
+-   WooCommerce version 4.9.0
+-   WP GraphQL version 1.1.2
+-   WooGraphQL version 0.6.1 (latest development version)
+-   WPGraphQL CORS version 1.1.0 (with introspection enabled)
 
-2. For debugging and testing, install either:
+2.  For debugging and testing, install either:
 
-   https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/ (Firefox)
+    <https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/> (Firefox)
 
-   https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm (Chrome)
+    <https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm> (Chrome)
 
-   Rename .env.example to .env so the Apollo debugger will correctly load. It will not load if the NODE_ENV variable is not correctly set.
+    Rename .env.example to .env so the Apollo debugger will correctly load. It will not load if the NODE_ENV variable is not correctly set.
 
-3. Make sure WooCommerce has some products already or import some sample products
+3.  Make sure WooCommerce has some products already or import some sample products
 
-   The WooCommerce sample products CSV file is available at `wp-content/plugins/woocommerce/sample-data/sample_products.csv` or [Sample products](sample_products/)
+    The WooCommerce sample products CSV file is available at `wp-content/plugins/woocommerce/sample-data/sample_products.csv` or [Sample products](sample_products/)
 
-   Import the products at `WP Dashboard > Tools > Import > WooCommerce products(CSV)`
+    Import the products at `WP Dashboard > Tools > Import > WooCommerce products(CSV)`
 
-4. Clone or fork the repo and modify `.env` with the URL to the GraphQL endpoint (or set environment variables in the configuration UI for your deployment solution)
-5. Start the server with `npm run dev`
-6. Enable COD (Cash On Demand) payment method in WooCommerce
-7. Add a product to the cart
-8. Proceed to checkout
-9. Fill in your details and place the order
+4.  Clone or fork the repo and modify `.env` with the URL to the GraphQL endpoint (or set environment variables in the configuration UI for your deployment solution)
+
+5.  Start the server with `npm run dev`
+
+6.  Enable COD (Cash On Demand) payment method in WooCommerce
+
+7.  Add a product to the cart
+
+8.  Proceed to checkout
+
+9.  Fill in your details and place the order
 
 ## Features
 
-- NuxtJS
-- Tailwind CSS
-- Vue Apollo with GraphQL Codegen
-- Responsive design
-- Support for simple products
-- GraphQL-based filters
-- CSS animations and transitions
-- Form handling and validation with Vue Formulate
-- Checkout process
-- Animated mobile menu
+-   NuxtJS
+-   Tailwind CSS
+-   Vue Apollo with GraphQL Codegen
+-   Vue Awesome Swiper for image slider on frontpage
+-   Responsive design
+-   Support for simple products
+-   GraphQL-based filters
+-   CSS animations and transitions
+-   Form handling and validation with Vue Formulate
+-   Checkout process
+-   Animated mobile menu
 
 ## Troubleshooting
 
@@ -75,7 +81,7 @@ Check the attributes of the products. Right now the application requires Size an
 
 ## TODO
 
-- Look into variable product support
-- Make WooCommerce session token expire and get deleted after 24 hours
-- Finish implementing Algolia search
-- Make Algolia look good on mobile
+-   Look into variable product support
+-   Make WooCommerce session token expire and get deleted after 24 hours
+-   Finish implementing Algolia search
+-   Make Algolia look good on mobile

components/Cart/ShowCartContents.vue

@@ -79,7 +79,7 @@ export default {
       result({ data, loading, networkStatus }) {
         const cartIsReady = data && networkStatus === 7
 
-        if (cartIsReady) {
+        if (cartIsReady && !loading) {
           this.loading = false
           this.remoteCart = data
           this.subTotal = data.cart.total
@@ -118,7 +118,7 @@ export default {
               },
             },
           })
-          .then(({ data }) => {
+          .then(() => {
             this.removingCartItem = false
             this.$apollo.queries.cart.refetch()
           })

components/Header/Cart.vue

@@ -52,7 +52,7 @@ export default {
       pollInterval: process.server ? undefined : 2000,
       result({ data, loading, networkStatus }) {
         const cartIsReady = networkStatus === 7
-        if (cartIsReady) {
+        if (cartIsReady && !loading) {
           this.remoteCart = data
           this.subTotal = data.cart.total
           this.cartLength = data.cart.contents.nodes.reduce(
@@ -71,7 +71,7 @@ export default {
         // Check if we are in the browser before checking localStorage
         // Will refresh the page to refetch the session from WooCommerce
         if (process.browser && !localStorage.getItem('woo-session')) {
-          window.location.reload(true)
+          this.$router.push({ path: '/', force: true })
         }
       },
     },

components/Index/Hero.vue

@@ -1,30 +1,78 @@
 <template>
   <div>
-    <div
-      id="hero"
-      class="flex w-full mx-auto mt-16 bg-right bg-cover md:pt-0 md:items-center"
-    >
+    <swiper id="hero" ref="mySwiper" :options="swiperOption">
+      <swiper-slide
+        ><img alt="Image slider slide #1" src="~assets/images/Hero.jpg" />
+        <div
+          class="flex flex-col items-start justify-center w-full mx-auto tracking-wide lg:w-1/2"
+        >
+          <span
+            class="w-full p-4 mt-4 text-center text-white bg-black text-md lg:text-2xl lg:-mt-64"
+          >
+            Modern Pillow Sample Set
+          </span>
+        </div>
+      </swiper-slide>
+      <swiper-slide
+        ><img alt="Image slider slide #2" src="~assets/images/Hero2.jpg" />
+        <div
+          class="flex flex-col items-start justify-center w-full mx-auto tracking-wide lg:w-1/2"
+        >
+          <span
+            class="w-full p-4 mt-4 text-center text-white bg-black text-md lg:text-2xl lg:-mt-64"
+          >
+            Modern Interior Sample
+          </span>
+        </div>
+      </swiper-slide>
       <div
-        class="flex flex-col items-start justify-center w-full px-6 tracking-wide lg:w-1/2"
-      >
-        <span class="p-4 my-4 text-2xl text-white bg-black rounded-lg">
-          Modern Pillow Sample Set
-        </span>
-      </div>
-    </div>
+        slot="button-prev"
+        class="swiper-button-prev"
+        @click="swiper.slidePrev(1000, false)"
+      ></div>
+      <div
+        slot="button-next"
+        class="swiper-button-next"
+        @click="swiper.slideNext(1000, false)"
+      ></div>
+    </swiper>
   </div>
 </template>
 
 <script>
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
+
+import 'swiper/swiper-bundle.min.css'
+
 export default {
   name: 'Hero',
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  data() {
+    return {
+      swiperOption: {
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+      },
+    }
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.$swiper
+    },
+  },
+  mounted() {
+    this.swiper.slideTo(2, 2000, false)
+  },
 }
 </script>
 
 <style lang="postcss" scoped>
 #hero {
-  background-image: url('~assets/images/Hero.jpg');
-  height: 24rem;
   max-width: 1350px;
 }
 </style>

nuxt.config.js

@@ -13,7 +13,7 @@ export default {
   },
   // Global page headers (https://go.nuxtjs.dev/config-head)
   head: {
-    title: 'nuxtjs-woocommerce',
+    title: 'NuxtJS WooCommerce',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
@@ -26,7 +26,10 @@ export default {
   css: ['@/assets/css/animate.min.css'],
 
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
-  plugins: ['~/plugins/vue-formulate'],
+  plugins: [
+    '~/plugins/vue-formulate',
+    { src: '~/plugins/vue-awesome-swiper', mode: 'client', ssr: false },
+  ],
 
   // Auto import components (https://go.nuxtjs.dev/config-components)
   components: true,