Merge branch 'develop' into release/1.0.0-rc.9

docs/guide/override-queries.md

@@ -4,80 +4,93 @@ To override one or multiple queries without creating a custom composable for eac
 
 ## Examples
 
+Below is the example on how to override the default query for `productList`.
+
 ### Overriding query
-In this example we will override `products` query by adding `image` field and one `custom_attribute`.
+
+In this example we will override `products` query by adding `cld_data` field that will retrieve Cloudinary image data from Magento.
+
+::: warning
+In order to query `cld_data`, you need to have [Cloudinary Magento extension](https://cloudinary.com/documentation/magento_integration) installed in your Magento project.
+:::
 
 ---
-Because queries can be long so it will be best to keep all custom queries in a dedicated directory.
-Inside the theme's root create `customQueries` directory, then copy `productList.ts` file from api-client lib into the created directory. Now you can easily modify the query inside your custom queries catalog. As we wanted to add `image` and `custom_attribute`file after the modification will look like the following example:
-```typescript
-import gql from 'graphql-tag';
-
-export default gql`
-  query productsList($search: String = "", $filter: ProductAttributeFilterInput, $pageSize: Int = 10, $currentPage: Int = 1, $sort: ProductAttributeSortInput) {
-    products(search: $search, filter: $filter, pageSize: $pageSize, currentPage: $currentPage, sort: $sort) {
-      aggregations {
-        attribute_code
-        label
-        options {
+
+1. Inside the theme's root let's create a `customQueries` directory, and [copy the content of the default `productsList` query from `vuestorefront/magento2/packages/api-client/src/api/products/productsList.ts` file](https://github.com/vuestorefront/magento2/blob/main/packages/api-client/src/api/products/productsList.ts) into the newly created directory.
+
+You can modify the query inside this file by adding `cld_data` with fields to the existing query as below:
+
+  ```typescript
+  import gql from 'graphql-tag';
+
+  export default gql`
+    query productsList($search: String = "", $filter: ProductAttributeFilterInput, $pageSize: Int = 10, $currentPage: Int = 1, $sort: ProductAttributeSortInput) {
+      products(search: $search, filter: $filter, pageSize: $pageSize, currentPage: $currentPage, sort: $sort) {
+        aggregations {
+          attribute_code
           label
-          value
-          count
+          options {
+            label
+            value
+            count
+          }
         }
-      }
-      items {
-        ...
-        image {
-          url
-          position
-          disabled
-          label
+        items {
+          //...
+          cld_data {
+            image
+            thumbnail
+          }
+          //...
         }
-        custom_attribute
-        ...
-      }
-      page_info {
-        current_page
-        page_size
-        total_pages
+        page_info {
+          current_page
+          page_size
+          total_pages
+        }
+        total_count
       }
-      total_count
     }
-  }
-`;
-
-```
-
-Once you prepared custom query you must register it so the application will know where it is and how to use it. Inside the theme's `middleware.config.js`, under `integrations.magento` add `customQueries` field. Import your custom query and configure it as in the following example:
-
-```js
-import customProductsQuery from './customQueries/productList';
-
-const config = require('./config.js');
-const cookieNames = require('./enums/cookieNameEnum');
-
-module.exports = {
-  integrations: {
-    magento: {
-      customQueries: {
-        /** ********************
-         ** HERE : use the default query key to override it.
-         ********************** */
-        products: ({ query, variables }) => {
-          return { query: customProductsQuery, variables }; // Your custom query
+  `;
+
+  ```
+
+::: warning
+Make sure you have `graphgl-tag` installed as dependency prior using this sample code.
+:::
+
+2. In `middleware.config.js`, import the modified query
+
+  ```js
+  import customProductsQuery from './customQueries/productList';
+  ```
+
+3.  Add a new property field `customQueries` under `integrations.magento` with the following code:
+
+  ```js
+    module.exports = {
+      integrations: {
+        magento: {
+          customQueries: {
+            /* This is where we override the default query */
+            products: (context) => ({
+              ...context,
+              query: customProductsQuery,  // Your custom query
+            })
+          },
+          //...
         },
       },
-      ...
-    },
-  },
-};
+    };
 
-### Important notes
-
-**Only** attributes presented on `ProductInterface` are accessible via GraphQL without any additional modification on the Magento side.
+4. Now you can restart your dev environment and view the updated data queried.
 
-**Important**
+::: warning
+`thumbnail` is a must-have field to query. It is used for our default image rendering (for Nuxt image). DO NOT remove it from the query in any circumstance.
+:::
 
-Keep in mind that only attributes present on `ProductInterface` are accessible via GraphQL without any additional modification on the Magento side. To be able to get any custom attributes you must extend GraphQL schema in the Magento2. Follow [Magento 2 documentation](https://devdocs.magento.com/guides/v2.4/graphql/develop/extend-existing-schema.html) to achieve that.
+### Important notes
 
+**Only** attributes presented on `ProductInterface` are accessible via GraphQL without any additional modification on the Magento side.
 
+To be able to get any custom attributes you must extend GraphQL schema in the Magento2. Follow [Magento 2 documentation](https://devdocs.magento.com/guides/v2.4/graphql/develop/extend-existing-schema.html) to achieve that.

packages/theme/components/CartSidebar.vue

@@ -293,7 +293,7 @@ import {
   useContext,
   onMounted,
 } from '@nuxtjs/composition-api';
-import { debounce } from 'lodash-es';
+import _debounce from 'lodash.debounce';
 import { cartGetters } from '~/getters';
 import {
   useUiState,
@@ -396,7 +396,7 @@ export default defineComponent({
         title: 'Product removed',
       });
     };
-    const delayedUpdateItemQty = debounce(
+    const delayedUpdateItemQty = _debounce(
       (params) => updateItemQty(params),
       1000,
     );

packages/theme/components/Header/SearchBar/SearchBar.vue

@@ -53,7 +53,7 @@ import { SfButton, SfSearchBar } from '@storefront-ui/vue';
 import {
   defineComponent, ref, watch, useRoute,
 } from '@nuxtjs/composition-api';
-import { debounce } from 'lodash-es';
+import debounce from 'lodash.debounce';
 import { clickOutside } from '~/utilities/directives/click-outside/click-outside-directive';
 import SvgImage from '~/components/General/SvgImage.vue';
 import { useProduct } from '~/modules/catalog/product/composables/useProduct';

packages/theme/helpers/integrationPlugin/_proxyUtils.ts

@@ -1,6 +1,6 @@
 import { IncomingMessage } from 'node:http';
 import { Context as NuxtContext } from '@nuxt/types';
-import { merge } from 'lodash-es';
+import merge from 'lodash.merge';
 
 export type ApiClientMethod = (...args: any) => Promise<any>;
 

packages/theme/jest.config.js

@@ -40,7 +40,7 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
 
   transformIgnorePatterns: [
-    'node_modules/(?!(@storefront-ui)|vee-validate/dist/rules|nouislider|lodash-es)',
+    'node_modules/(?!(@storefront-ui)|vee-validate/dist/rules|nouislider)',
   ],
 
   testMatch: ['<rootDir>/**/__tests__/**/*spec.[jt]s?(x)'],

packages/theme/modules/catalog/category/composables/useFacet/perPageOptions.ts

@@ -1 +1 @@
-export const PerPageOptions = [10, 20, 50];
+export const perPageOptions = [10, 20, 50];

packages/theme/modules/catalog/category/composables/useFacet/sortingOptions.ts

@@ -1,3 +1,13 @@
+export interface SortingModel {
+  selected: string,
+  options: SortingOption[]
+}
+
+export interface SortingOption {
+  label: string,
+  value: SortingOptionsValuesEnum
+}
+
 export enum SortingOptionsValuesEnum {
   DEFAULT = '',
   NAME_ASC = 'name_ASC',
@@ -6,12 +16,7 @@ export enum SortingOptionsValuesEnum {
   PRICE_DESC = 'price_DESC',
 }
 
-export interface SortingOptionsInterface {
-  label: string,
-  value: SortingOptionsValuesEnum
-}
-
-export const SortingOptions: SortingOptionsInterface[] = [
+export const sortingOptions: SortingOption[] = [
   {
     label: 'Sort: Default',
     value: SortingOptionsValuesEnum.DEFAULT,

packages/theme/package.json

@@ -49,7 +49,9 @@
     "graphql-tag": "^2.12.6",
     "is-https": "^4.0.0",
     "isomorphic-dompurify": "^0.18.0",
-    "lodash-es": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
+    "lodash.merge": "^4.6.2",
+    "lodash.unescape": "^4.0.1",
     "nuxt": "^2.15.8",
     "nuxt-i18n": "^6.28.0",
     "omit-deep": "^0.3.0",
@@ -68,7 +70,9 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/user-event": "^14.2.0",
     "@testing-library/vue": "^5.8.3",
-    "@types/lodash-es": "^4.17.6",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/lodash.merge": "^4.6.7",
+    "@types/lodash.unescape": "^4.0.7",
     "@vue/test-utils": "^1.3.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^27.4.6",

packages/theme/plugins/dompurify.ts

@@ -1,4 +1,4 @@
-import { unescape } from 'lodash-es';
+import _unescape from 'lodash.unescape';
 import DOMPurify from 'isomorphic-dompurify';
 import type { Plugin } from '@nuxt/types';
 
@@ -9,7 +9,7 @@ declare module 'vue/types/vue' {
 }
 
 const plugin : Plugin = (_, inject) => {
-  inject('dompurify', (html: string): string => unescape(DOMPurify.sanitize(html)));
+  inject('dompurify', (html: string): string => _unescape(DOMPurify.sanitize(html)));
 };
 
 export default plugin;