Start work on implementing Swiper

Author: w3bdesign

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,64 @@
 
 # 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
+-   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 +80,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(
@@ -68,10 +68,11 @@ export default {
         if (debug) {
           console.error(error)
         }
+
         // 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 })
         }
       },
     },