Skip to content

ECTO-2150 - Add yearly variant to listing #112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kaigossel merged 1 commit into from
Sep 9, 2025
Merged

ECTO-2150 - Add yearly variant to listing #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion composer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "swag/swag-extension-store",
"version": "4.0.5",
"version": "4.1.0",
"description": "SWAG Extension Store",
"type": "shopware-platform-plugin",
"license": "MIT",
Expand Down
91 changes: 54 additions & 37 deletions ...administration/src/module/sw-extension-store/component/sw-extension-listing-card/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default {
template,

inject: [
'shopwareExtensionService',
'extensionStoreService',
],

props: {
Expand All @@ -25,51 +25,36 @@ export default {
return Shopware.Filter.getByName('asset');
},

previewMedia() {
const image = Utils.get(this.extension, 'images[0]', null);

if (!image) {
const previewImage = this.assetFilter('/swagextensionstore/administration/static/img/theme/default_theme_preview.jpg');
return {
'background-image': `url('${previewImage}')`,
};
calculatedPrice() {
if (!this.recommendedVariant) {
return null;
}

return {
'background-image': `url('${image.remoteLink}')`,
'background-size': 'cover',
};
return Utils.format.currency(
this.pricePerMonth,
'EUR',
2,
);
},

recommendedVariant() {
return this.shopwareExtensionService.orderVariantsByRecommendation(this.extension.variants)[0];
},
calculatedPriceSnippet() {
if (this.extensionStoreService.isVariantOfTypeBuy(this.recommendedVariant)) {
return 'sw-extension-store.general.labelPriceOneTime';
}

hasActiveDiscount() {
return this.shopwareExtensionService.isVariantDiscounted(this.recommendedVariant);
},
if (this.extension.variants.length > 1) {
return 'sw-extension-store.general.labelFromPricePerMonth';
}

discountClass() {
return {
'sw-extension-listing-card__info-price-discounted': this.hasActiveDiscount,
};
return 'sw-extension-store.general.labelPricePerMonth';
},

calculatedPrice() {
if (!this.recommendedVariant) {
return null;
}
hasActiveDiscount() {
return this.extensionStoreService.isExtensionDiscounted(this.extension.variants);
},

return this.$t(
'sw-extension-store.general.labelPrice',
{
price: Utils.format.currency(
this.shopwareExtensionService.getPriceFromVariant(this.recommendedVariant),
'EUR',
),
},
this.shopwareExtensionService.mapVariantToRecommendation(this.recommendedVariant),
);
isFree() {
return this.extensionStoreService.isVariantOfTypeFree(this.recommendedVariant);
},

isInstalled() {
Expand All @@ -88,6 +73,38 @@ export default {

return !!extension.storeLicense;
},

priceClass() {
return {
'sw-extension-listing-card__info-price-discounted': this.hasActiveDiscount,
};
},

pricePerMonth() {
if (!this.recommendedVariant) {
return null;
}

const perMonth = this.extensionStoreService.isVariantOfTypeRent(this.recommendedVariant);

return this.extensionStoreService.getPriceFromVariant(this.recommendedVariant, perMonth);
},

recommendedVariant() {
const variants = this.extension.variants;

if (variants.length === 1) {
return variants[0];
}

const variant = this.extensionStoreService.orderVariantsByPricePerMonth(variants)[0];

if (!variant) {
return null;
}

return variant;
},
},

methods: {
Expand Down
67 changes: 40 additions & 27 deletions ...w-extension-store/component/sw-extension-listing-card/sw-extension-listing-card.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,21 @@
{% block sw_extension_listing_card %}
<div class="sw-extension-listing-card" @click="openDetailPage">
{% block sw_extension_listing_card_content %}
{% block sw_extension_listing_card_preview %}
<div class="sw-extension-listing-card__preview" :style="previewMedia">
{% block sw_extension_listing_card_preview_type_label %}
<sw-extension-type-label
:type="extension.type"
class="sw-extension-listing-card__extension-type-label"
{% block sw_extension_listing_card_info_grid %}
<div class="sw-extension-listing-card__info-grid">
{% block sw_extension_listing_card_info_icon %}
<sw-extension-icon
class="sw-extension-listing-card__info-icon"
:src="extension.icon"
/>
{% endblock %}
</div>
{% endblock %}

{% block sw_extension_listing_card_info_grid %}
<div class="sw-extension-listing-card__info-grid">
{% block sw_extension_listing_card_info_name %}
<p class="sw-extension-listing-card__info-name">
{{ extension.label }}
</p>
{% endblock %}

{% block sw_extension_listing_card_info_description %}
<p class="sw-extension-listing-card__info-description is--wrap-content">
{{ extension.shortDescription }}
</p>
{% endblock %}

{% block sw_extension_listing_card_info_rating %}
<div class="sw-extension-listing-card__info-rating">
<sw-extension-rating-stars
Expand All @@ -40,26 +30,49 @@
</div>
{% endblock %}

{% block sw_extension_listing_card_label_display %}
<sw-extension-store-label-display
v-if="extension.labels.length > 0"
:labels="extension.labels"
class="sw-extension-listing-card__label-display"
/>
{% endblock %}

{% block sw_extension_listing_card_info_description %}
<p class="sw-extension-listing-card__info-description is--wrap-content">
{{ extension.shortDescription }}
</p>
{% endblock %}

{% block sw_extension_listing_card_info_price %}
<div class="sw-extension-listing-card__info-price">
<template v-if="isInstalled">
{{ $t('sw-extension-store.component.sw-extension-listing-card.labelInstalled') }}
<strong>{{ $t('sw-extension-store.component.sw-extension-listing-card.labelInstalled') }}</strong>
</template>

<template v-else-if="isLicensed">
{{ $t('sw-extension-store.component.sw-extension-listing-card.labelLicensed') }}
<strong>{{ $t('sw-extension-store.component.sw-extension-listing-card.labelLicensed') }}</strong>
</template>

<span v-else :class="discountClass">{{ calculatedPrice }}</span>
</div>
{% endblock %}
<template v-else-if="isFree">
<strong>{{ $t('sw-extension-store.general.labelFree') }}</strong>
</template>

{% block sw_extension_listing_card_label_display %}
<sw-extension-store-label-display
v-if="extension.labels.length > 0"
:labels="extension.labels"
class="sw-extension-listing-card__label-display"
/>
<template v-else>
<span
v-if="hasActiveDiscount"
class="sw-extension-listing-card__info-price-badge-sale"
>
{{ $t('sw-extension-store.general.labelSale') }}
</span>

<i18n-t :keypath="calculatedPriceSnippet" tag="span" :class="priceClass">
<template #price>
<strong>{{ calculatedPrice }}</strong>
</template>
</i18n-t>
</template>
</div>
{% endblock %}
</div>
{% endblock %}
Expand Down
104 changes: 60 additions & 44 deletions ...ule/sw-extension-store/component/sw-extension-listing-card/sw-extension-listing-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,6 @@
}
}

.sw-extension-listing-card__preview {
width: 100%;
aspect-ratio: 4 / 3;
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 8%);
}

&__extension-type-label {
position: absolute;
bottom: 8px;
Expand All @@ -37,13 +30,24 @@
padding: 16px;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-template-rows: auto auto auto auto 1fr;
grid-row-gap: 4px;
grid-template-areas:
"name name"
"description description"
"rating price"
"label-display label-display";
"icon"
"name"
"rating"
"label-display"
"description"
"price";
height: 254px;

.sw-extension-listing-card__info-icon {
border-radius: 8px;
grid-area: icon;
height: 56px;
margin-bottom: 16px;
width: 56px;
}

.sw-extension-listing-card__info-name {
grid-area: name;
Expand All @@ -56,13 +60,38 @@
@include truncate;
}

.sw-extension-listing-card__info-rating {
grid-area: rating;
display: flex;
align-items: center;
font-size: $font-size-xxs;

& > * {
margin-right: 1ex;
}

.sw-extension-rating-stars__star {
cursor: pointer;
}

&-count {
color: $color-gray-500;
margin-top: 2px;
}
}

.sw-extension-listing-card__label-display {
grid-area: label-display;
margin-bottom: 4px;
margin-top: 4px;
}

.sw-extension-listing-card__info-description {
$line-height-description: $line-height-xs;

grid-area: description;
font-size: $font-size-xxs;
line-height: $line-height-description;
color: $color-gray-500;
height: calc($line-height-description * 2);
overflow: hidden;
position: relative;
Expand All @@ -80,45 +109,32 @@
}
}

.sw-extension-listing-card__info-rating {
grid-area: rating;
display: flex;
align-items: center;
.sw-extension-listing-card__info-price {
grid-area: price;
font-size: $font-size-xxs;

& > * {
margin-right: 1ex;
strong {
font-size: $font-size-xs;
font-weight: $font-weight-semi-bold;
}

.sw-extension-rating-stars__star {
cursor: pointer;
}

&-count {
color: $color-gray-500;
margin-top: 2px;
&-badge-sale {
background-color: $color-crimson-400;
border-radius: $border-radius-pill;
color: $color-white;
display: inline-block;
font-weight: $font-weight-medium;
height: $line-height-xs;
line-height: $line-height-xs;
margin-right: 2px;
padding: 0 5px;
}
}

.sw-extension-listing-card__info-price {
grid-area: price;
justify-self: end;
font-size: $font-size-xxs;
font-weight: $font-weight-semi-bold;
text-align: right;

.sw-extension-listing-card__info-price-discounted {
color: $color-crimson-400;

s {
margin-left: 4px;
&-discounted {
strong {
color: $color-crimson-400;
}
}
}

.sw-extension-listing-card__label-display {
grid-area: label-display;
margin-top: 4px;
}
}
}
Loading
Loading