From bbfd7c7ae99953dab7dc366d23ef3cdedbae3475 Mon Sep 17 00:00:00 2001 From: Piotr Karwatka Date: Thu, 4 Jun 2020 09:17:33 +0200 Subject: [PATCH 01/24] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index df1c28594..3c74c364f 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ New default template theme for [Vue Storefront](https://github.com/DivanteLtd/vue-storefront), based on [Storefront UI](https://storefrontui.io/). 90% of the Capybara code is closed in the [Storefront UI library](https://github.com/DivanteLtd/storefront-ui). Thanks to it, Capybara can maintain its flexibility, but minimize the risk of errors. - **🔨 Current status: Developer's preview** + **🔨 Current status: Production Ready** We have prepared [short introduction](https://github.com/DivanteLtd/vsf-capybara/blob/develop/CODING_STANDARDS.md) to our coding standards and conventions we are using in Capybara theme. From 5bc308c2f072a149f6604a32343eae8e7d0cb5bc Mon Sep 17 00:00:00 2001 From: Aishwary Shrivastava Date: Fri, 3 Jul 2020 11:08:25 +0530 Subject: [PATCH 02/24] Fixed: Error page on mobile and desktop (#398-Adjust-error-page) Error page was of too much height, due to which "Back" and "Returned to Home" were not visible without scrolling. Found that margin on error image was very high, adjusted the margin for .error class from '2xl * 3' to 'xl * 2' . --- CHANGELOG.md | 1 + components/molecules/m-error.vue | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index db34754a1..525f6c7f1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed / Improved - Update sfui version to 0.7.11 +- Adjusted the error page (#398) ## [1.0.1] - 2020.06.02 diff --git a/components/molecules/m-error.vue b/components/molecules/m-error.vue index 641c46019..96edb5938 100644 --- a/components/molecules/m-error.vue +++ b/components/molecules/m-error.vue @@ -51,7 +51,7 @@ export default { padding: 0 1.25rem; &__image, &__message { - margin: calc(var(--spacer-2xl) * 3) 0; + margin: calc(var(--spacer-xl) * 2) 0; text-align: center; --heading-border: none; } From 21dc8a7ace058f9738cafd89a9cc33d616ba9625 Mon Sep 17 00:00:00 2001 From: Mohammad Kathawala Date: Fri, 3 Jul 2020 13:51:37 +0530 Subject: [PATCH 03/24] Updated READ.me file to include missing step in installation. --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index bbf9f0c59..14dc376d3 100644 --- a/README.md +++ b/README.md @@ -72,7 +72,10 @@ To be able to use new Capybara theme in your Vue Storefront installation, you ne ``` git submodule update --init --remote ``` - +1. Generate `local.json` file from script `generate-local-config.js`: + ``` + node src/themes/vsf-capybara/scripts/generate-local-config.js + ``` 1. Update Vue Storefront configuration by copying `local.json` file from `vsf-capybara` to root `config` directory. 1. Update TypeScript compiler option in `tsconfig.json` in root directory: change value for `compilerOptions`**.**`paths`**.**`theme/*` from default theme `["src/themes/default/*"]` to brand new Capybara theme: `["src/themes/capybara/*"]`. 1. Download all dependencies and start development server: From 89b5d2a9805408f96b1dc24371e8d8fa938bb59b Mon Sep 17 00:00:00 2001 From: Deepak Dixit Date: Mon, 6 Jul 2020 16:29:29 +0530 Subject: [PATCH 04/24] Used sku instead of product_id while preparing order line items product detail. --- components/organisms/o-my-account-order-details.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/organisms/o-my-account-order-details.vue b/components/organisms/o-my-account-order-details.vue index ef3d93d66..54bef91f7 100644 --- a/components/organisms/o-my-account-order-details.vue +++ b/components/organisms/o-my-account-order-details.vue @@ -195,7 +195,7 @@ export default { searchQuery = searchQuery.applyFilter({ key: 'configurable_children.sku', value: { 'in': arrayOfSKUs } }) this.$store.dispatch('product/list', { query: searchQuery, start: 0, size: this.order.items.length, updateState: false }, { root: true }).then((resp) => { resp.items.forEach(responseItem => { - let relatedProduct = this.order.items.find(item => { return item.product_id === responseItem.id }) + let relatedProduct = this.order.items.find(item => { return item.sku === responseItem.sku }) this.products.push(Object.assign({}, relatedProduct, responseItem)) }) }) From cc83bccd740f8e2ed53df5abdd131596b61c9c0c Mon Sep 17 00:00:00 2001 From: Deepak Dixit Date: Thu, 9 Jul 2020 17:04:24 +0530 Subject: [PATCH 05/24] Replaced deprecated action product/list call with findProducts --- components/molecules/m-related-products.vue | 2 +- components/organisms/o-my-account-order-details.vue | 2 +- store/homepage.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/molecules/m-related-products.vue b/components/molecules/m-related-products.vue index 2700610d9..0d7fee1d0 100644 --- a/components/molecules/m-related-products.vue +++ b/components/molecules/m-related-products.vue @@ -66,7 +66,7 @@ export default { } let relatedProductsQuery = prepareRelatedQuery(key, sku); - const response = await this.$store.dispatch('product/list', { + const response = await this.$store.dispatch('product/findProducts', { query: relatedProductsQuery, size: 8, prefetchGroupProducts: false, diff --git a/components/organisms/o-my-account-order-details.vue b/components/organisms/o-my-account-order-details.vue index ef3d93d66..8ed592831 100644 --- a/components/organisms/o-my-account-order-details.vue +++ b/components/organisms/o-my-account-order-details.vue @@ -193,7 +193,7 @@ export default { let searchQuery = new SearchQuery() searchQuery = searchQuery.applyFilter({ key: 'configurable_children.sku', value: { 'in': arrayOfSKUs } }) - this.$store.dispatch('product/list', { query: searchQuery, start: 0, size: this.order.items.length, updateState: false }, { root: true }).then((resp) => { + this.$store.dispatch('product/findProducts', { query: searchQuery, start: 0, size: this.order.items.length, updateState: false }, { root: true }).then((resp) => { resp.items.forEach(responseItem => { let relatedProduct = this.order.items.find(item => { return item.product_id === responseItem.id }) this.products.push(Object.assign({}, relatedProduct, responseItem)) diff --git a/store/homepage.ts b/store/homepage.ts index 5607cec17..18a3e53f8 100644 --- a/store/homepage.ts +++ b/store/homepage.ts @@ -10,7 +10,7 @@ export const homepageStore = { async fetchNewCollection ({ commit, dispatch }) { const newProductsQuery = prepareQuery({ queryConfig: 'newProducts' }) - const newProductsResult = await dispatch('product/list', { + const newProductsResult = await dispatch('product/findProducts', { query: newProductsQuery, size: 8, sort: 'created_at:desc' @@ -22,7 +22,7 @@ export const homepageStore = { commit('SET_NEW_COLLECTION', configuredProducts) }, async loadBestsellers ({ commit, dispatch }) { - const response = await dispatch('product/list', { + const response = await dispatch('product/findProducts', { query: prepareQuery({ queryConfig: 'bestSellers' }), size: 8, sort: 'created_at:desc' From 3fc77cf4b7ce0b95d561698c3ad9864f88706e6f Mon Sep 17 00:00:00 2001 From: Aishwary Shrivastava Date: Mon, 13 Jul 2020 11:26:11 +0530 Subject: [PATCH 06/24] Improved: Size of Products in bestsellers section (#382-bestseller-products-size) Removed the CSS properties which were forcing all the section on home page, to have padding on mobile view, which cause less space for them to occupy. --- pages/Home.vue | 2 -- 1 file changed, 2 deletions(-) diff --git a/pages/Home.vue b/pages/Home.vue index 8a725204e..6b6382fb3 100644 --- a/pages/Home.vue +++ b/pages/Home.vue @@ -174,8 +174,6 @@ export default { } } .section { - padding-left: var(--spacer-xl); - padding-right: var(--spacer-xl); @include for-desktop { padding-left: 0; padding-right: 0; From 4959a13adbb73bdec3ca43574f1485ceac33c2b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Smyrek?= Date: Wed, 15 Jul 2020 14:50:40 +0200 Subject: [PATCH 07/24] 377: Stock issue --- components/molecules/m-product-add-to-cart.vue | 2 +- pages/Product.vue | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/components/molecules/m-product-add-to-cart.vue b/components/molecules/m-product-add-to-cart.vue index 199d016a3..7140b98c0 100644 --- a/components/molecules/m-product-add-to-cart.vue +++ b/components/molecules/m-product-add-to-cart.vue @@ -69,7 +69,7 @@ export default { return !!this.qtyValidationError || this.stock.isLoading || !this.isAvailable }, isAvailable () { - return this.isOnline && !!this.stock.max && this.isSimpleOrConfigurable + return !this.isOnline || !!this.stock.max || !this.stock.manageQuantity || !this.isSimpleOrConfigurable }, isSimpleOrConfigurable () { return ['simple', 'configurable'].includes( diff --git a/pages/Product.vue b/pages/Product.vue index 1b0c6e583..f835102f7 100644 --- a/pages/Product.vue +++ b/pages/Product.vue @@ -88,7 +88,8 @@ export default { return { stock: { isLoading: false, - max: 0 + max: 0, + manageQuantity: true } }; }, @@ -203,7 +204,8 @@ export default { product: this.getCurrentProduct, qty: this.getCurrentProduct.qty }); - this.stock.max = res.qty; + this.manageQuantity = res.isManageStock; + this.stock.max = res.isManageStock ? res.qty : null; } finally { this.stock.isLoading = false; } From fc1538125d4f65b0facbf05f0fa006f64c5a21ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Smyrek?= Date: Wed, 15 Jul 2020 14:54:13 +0200 Subject: [PATCH 08/24] Changelog update --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ed0840d8..3fd576d3d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed / Improved - Adjusted the error page (#398) +- Fixed `isAddToCartDisabled` computed property (#377) ## [1.0.2] - 03.07.2020 From 18073f28c957a813fd2e125fe898ec30a0735b7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Smyrek?= Date: Wed, 15 Jul 2020 15:02:33 +0200 Subject: [PATCH 09/24] 393: Use short description in PDP top section --- CHANGELOG.md | 1 + components/molecules/m-product-short-info.vue | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ed0840d8..e964e0da4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed / Improved - Adjusted the error page (#398) +- Use short description in PDP top section (#393) ## [1.0.2] - 03.07.2020 diff --git a/components/molecules/m-product-short-info.vue b/components/molecules/m-product-short-info.vue index a408e9ec3..39e4745ba 100644 --- a/components/molecules/m-product-short-info.vue +++ b/components/molecules/m-product-short-info.vue @@ -26,7 +26,10 @@ {{ $t("Read all {count} review", { count: reviewsCount }) }} -
+
From bd519b4aca4a530aedb7d005f6cd76f145a50d25 Mon Sep 17 00:00:00 2001 From: Aishwary Shrivastava Date: Thu, 16 Jul 2020 10:53:57 +0530 Subject: [PATCH 10/24] Added: attribute tab on product page (#386-Missing-Attributes-tab-product-page) Added a Sfab for product attribute if its available --- .../molecules/m-product-additional-info.vue | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/components/molecules/m-product-additional-info.vue b/components/molecules/m-product-additional-info.vue index 5d4f4bea9..fff98a3f1 100644 --- a/components/molecules/m-product-additional-info.vue +++ b/components/molecules/m-product-additional-info.vue @@ -7,13 +7,6 @@ >
-
@@ -32,6 +25,15 @@ + + + From bc1161c79e0cb3fb4a90c64568e9220240707bdc Mon Sep 17 00:00:00 2001 From: Aishwary Shrivastava Date: Thu, 16 Jul 2020 11:04:22 +0530 Subject: [PATCH 11/24] Replaced SfTab "Attributes" with "Additional Information" in product page --- components/molecules/m-product-additional-info.vue | 2 +- resource/i18n/en-US.csv | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/components/molecules/m-product-additional-info.vue b/components/molecules/m-product-additional-info.vue index fff98a3f1..62426f7b5 100644 --- a/components/molecules/m-product-additional-info.vue +++ b/components/molecules/m-product-additional-info.vue @@ -25,7 +25,7 @@ - + Date: Fri, 17 Jul 2020 09:30:39 +0200 Subject: [PATCH 12/24] 381: Update filters bar on category page --- components/atoms/a-sort-icon.vue | 16 ++++++++++++ pages/Category.vue | 42 ++++++++++++++++++++++++++++++-- 2 files changed, 56 insertions(+), 2 deletions(-) create mode 100644 components/atoms/a-sort-icon.vue diff --git a/components/atoms/a-sort-icon.vue b/components/atoms/a-sort-icon.vue new file mode 100644 index 000000000..03ce3933f --- /dev/null +++ b/components/atoms/a-sort-icon.vue @@ -0,0 +1,16 @@ + + + diff --git a/pages/Category.vue b/pages/Category.vue index eac98195b..e3b244a9c 100644 --- a/pages/Category.vue +++ b/pages/Category.vue @@ -16,7 +16,7 @@ class="sf-button--text navbar__filters-button" @click="isFilterSidebarOpen = true" > - + {{ $t("Filters") }}
- {{ $t("Sort By") }}: + {{ $t("Sort By") }}: @@ -45,6 +46,13 @@
+ + {{ $t('Sort by') }} + +
{{ $t("Products found") }}: @@ -196,6 +204,7 @@ import { localizedRoute, currentStoreView } from '@vue-storefront/core/lib/multistore'; +import ASortIcon from 'theme/components/atoms/a-sort-icon'; import { SfIcon, SfList, @@ -250,6 +259,7 @@ export default { name: 'CategoryPage', components: { LazyHydrate, + ASortIcon, SfIcon, SfList, SfColor, @@ -653,12 +663,25 @@ export default { fill: var(--c-primary); } } + @include for-mobile { + --button-text-transform: uppercase; + font-size: var(--font-xs); + &.sort-by__button { + order: 1; + } + } + } + &__filters-icon { + margin: 0 var(--spacer-sm) 0 0; } &__label { font-family: var(--font-family-secondary); font-weight: var(--font-normal); color: var(--c-text-muted); margin: 0 var(--spacer-2xs) 0 0; + @include for-mobile { + font-size: var(--font-xs); + } } &__select { --select-padding: 0 var(--spacer-lg) 0 var(--spacer-2xs); @@ -669,6 +692,21 @@ export default { display: flex; align-items: center; margin: 0 auto 0 var(--spacer-2xl); + + // This is needed to hide SfSelect main element on mobile view. + // This code can be removed when SfSelect supports better customization. + @include for-mobile { + position: absolute; + width: 0; + height: 0; + overflow: hidden; + --select-dropdown-z-index: 2; + ::v-deep .sf-select__cancel { + margin: 16px; + box-shadow: 4px 12px 24px rgba(119, 121, 122, 0.25); + --button-width: calc(100% - 32px); + } + } } &__counter { font-family: var(--font-family-secondary); From 539b2d25eaebf0965a7c8d6d01cb1efea90c92f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Smyrek?= Date: Fri, 17 Jul 2020 09:34:39 +0200 Subject: [PATCH 13/24] Changelog update --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ed0840d8..2ccca657c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed / Improved - Adjusted the error page (#398) +- Update filters bar on category page (#381) ## [1.0.2] - 03.07.2020 From 63ffa20fda762f43683ac6feb97a2833e904fd1c Mon Sep 17 00:00:00 2001 From: Mohammad Kathawala Date: Mon, 20 Jul 2020 16:32:29 +0530 Subject: [PATCH 14/24] Fixed extra margin of add to cart component on product details page. --- components/organisms/o-product-details.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/organisms/o-product-details.vue b/components/organisms/o-product-details.vue index fc867bd13..539aa6887 100644 --- a/components/organisms/o-product-details.vue +++ b/components/organisms/o-product-details.vue @@ -176,9 +176,11 @@ export default { } } &__add-to-cart { - margin: var(--spacer-base) var(--spacer-sm) 0; + @include for-mobile { + margin: var(--spacer-sm) var(--spacer-sm) 0; + } @include for-desktop { - margin-top: var(--spacer-2xl); + margin-top: var(--spacer-sm); } } &__guide, From 9c965017b1786ff09d8f92a93384bcb70103bf2d Mon Sep 17 00:00:00 2001 From: Dmitry Schegolikhin Date: Fri, 7 Aug 2020 10:50:14 +0400 Subject: [PATCH 15/24] #436 Fixed selected size option on product page. --- CHANGELOG.md | 1 + .../molecules/m-product-options-configurable.vue | 10 ++++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e23ae0751..6ec6468bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Use short description in PDP top section (#393) - Fixed `isAddToCartDisabled` computed property (#377) - Update filters bar on category page (#381) +- Corrected displayed the selected size option on product page (#436) ## [1.0.2] - 03.07.2020 diff --git a/components/molecules/m-product-options-configurable.vue b/components/molecules/m-product-options-configurable.vue index e111175e7..d9d7fc079 100644 --- a/components/molecules/m-product-options-configurable.vue +++ b/components/molecules/m-product-options-configurable.vue @@ -40,8 +40,9 @@