-
Notifications
You must be signed in to change notification settings - Fork 102
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(default-theme): improve performance
- Loading branch information
1 parent
ad488bc
commit e9fef95
Showing
3 changed files
with
168 additions
and
148 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
164 changes: 164 additions & 0 deletions
164
packages/default-theme/src/components/card/ProductCard.vue
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,164 @@ | ||
| <template> | ||
| <SfProductCard | ||
| :title="getName" | ||
| :image="getImageUrl" | ||
| :max-rating="5" | ||
| :score-rating="getProductRating" | ||
| image-width="100%" | ||
| image-height="400" | ||
| :link="getRouterLink" | ||
| class="sw-product-card" | ||
| :show-add-to-cart-button="true" | ||
| :is-added-to-cart="isInCart" | ||
| :is-in-wishlist="isInWishlist" | ||
| @click:add-to-cart="addToCart" | ||
| @click:wishlist="toggleWishlistItem" | ||
| data-testid="product-card" | ||
| > | ||
| <template #image> | ||
| <SwImage | ||
| :src="getImageUrl" | ||
| :title="getName" | ||
| :alt="getName" | ||
| style="cursor: pointer" | ||
| width="200" | ||
| height="400" | ||
| @click.native="$router.push(getRouterLink)" | ||
| /> | ||
| </template> | ||
| <template #price> | ||
| <SfPrice | ||
| v-if="displayVariantsFromPrice" | ||
| class="sw-product-card-price sf-product-card__price variants-price" | ||
| :regular="`${$t('Variants from')} ${displayVariantsFromPrice}`" | ||
| /> | ||
| <SfPrice | ||
| v-if="displayFromPrice" | ||
| class="sw-product-card-price sf-product-card__price from-price" | ||
| :regular="`${$t('From')} ${displayFromPrice}`" | ||
| /> | ||
| <SfPrice | ||
| v-if="displaySinglePrice" | ||
| class="sw-product-card-price sf-product-card__price real-price" | ||
| :regular="displaySinglePrice" | ||
| /> | ||
| </template> | ||
| </SfProductCard> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { SfProductCard, SfPrice } from "@storefront-ui/vue" | ||
| import { useAddToCart, useWishlist } from "@shopware-pwa/composables" | ||
| import { | ||
| getProductThumbnailUrl, | ||
| getProductTierPrices, | ||
| getProductUrl, | ||
| getProductName, | ||
| getProductCalculatedPrice, | ||
| getProductCalculatedListingPrice, | ||
| getProductPriceDiscount, | ||
| getProductVariantsFromPrice, | ||
| getProductFromPrice, | ||
| getProductRealPrice, | ||
| } from "@shopware-pwa/helpers" | ||
| import getResizedImage from "@/helpers/images/getResizedImage.js" | ||
| import { toRefs, computed } from "@vue/composition-api" | ||
| import { usePriceFilter } from "@/logic/usePriceFilter.js" | ||
| import SwImage from "@/components/atoms/SwImage.vue" | ||
| export default { | ||
| components: { | ||
| SfProductCard, | ||
| SfPrice, | ||
| SwImage, | ||
| }, | ||
| setup(props) { | ||
| const { product } = toRefs(props) | ||
| const { addToCart, quantity, getStock, isInCart } = useAddToCart({ | ||
| product, | ||
| }) | ||
| const { addToWishlist, removeFromWishlist, isInWishlist } = useWishlist({ | ||
| product, | ||
| }) | ||
| const filterPrice = usePriceFilter(); | ||
| const variantsFromPrice = getProductVariantsFromPrice(props.product); | ||
| const fromPrice = getProductFromPrice(props.product); | ||
| const displayFromPrice = computed(() => { | ||
| if (fromPrice) { | ||
| return filterPrice(fromPrice) | ||
| } | ||
| }) | ||
| const displayVariantsFromPrice = computed(() => { | ||
| if (variantsFromPrice) { | ||
| return filterPrice(variantsFromPrice) | ||
| } | ||
| }) | ||
| const displaySinglePrice = computed(() => { | ||
| if (!variantsFromPrice && !fromPrice) { | ||
| const realPrice = getProductRealPrice(props.product); | ||
| return filterPrice(realPrice?.unitPrice); | ||
| } | ||
| }) | ||
| return { | ||
| quantity, | ||
| addToCart, | ||
| getStock, | ||
| isInCart, | ||
| toggleWishlistItem: () => | ||
| isInWishlist.value | ||
| ? removeFromWishlist(product.value.id) | ||
| : addToWishlist(), | ||
| isInWishlist, | ||
| displayFromPrice, | ||
| displayVariantsFromPrice, | ||
| displaySinglePrice | ||
| } | ||
| }, | ||
| props: { | ||
| product: { | ||
| type: Object, | ||
| default: () => ({}), | ||
| }, | ||
| }, | ||
| data() { | ||
| return {} | ||
| }, | ||
| computed: { | ||
| getName() { | ||
| return getProductName({ product: this.product }) | ||
| }, | ||
| getProductRating() { | ||
| return this.product && this.product.ratingAverage | ||
| }, | ||
| // should be replaced with prettyUrl attribute when pretty urls are included in product entity | ||
| getRouterLink() { | ||
| return this.$routing.getUrl(getProductUrl(this.product)) | ||
| }, | ||
| getRegularPrice() { | ||
| return ( | ||
| (this.tierPrices.length && | ||
| this.tierPrices[0] && | ||
| this.tierPrices[0].unitPrice) || | ||
| getProductCalculatedListingPrice(this.product) | ||
| ) | ||
| }, | ||
| getSpecialPrice() { | ||
| return this.tierPrices.length | ||
| ? undefined | ||
| : getProductPriceDiscount(this.product) && | ||
| getProductCalculatedPrice(this.product) | ||
| }, | ||
| tierPrices() { | ||
| return getProductTierPrices(this.product) | ||
| }, | ||
| getImageUrl() { | ||
| return getResizedImage(getProductThumbnailUrl(this.product), { | ||
| width: 200, | ||
| height: 400, | ||
| }) | ||
| }, | ||
| }, | ||
| } | ||
| </script> | ||