mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
feat(demo): add bundles section to material lending page (#5677)
Co-authored-by: d.strigo <d.strigo@akveo.com>
This commit is contained in:
parent
c416d894d4
commit
50b5696c3b
5 changed files with 38 additions and 13 deletions
|
|
@ -25,6 +25,11 @@ export const BUNDLE_LICENSE = {
|
|||
developer: 'developer',
|
||||
};
|
||||
|
||||
export const STORE_PRODUCTS_URL = {
|
||||
base: 'https://store.akveo.com/collections/frontpage/products.json',
|
||||
material: 'https://store.akveo.com/collections/material-bundles/products.json',
|
||||
};
|
||||
|
||||
export class Feature {
|
||||
text: string;
|
||||
availableInPersonalLicence: boolean;
|
||||
|
|
@ -34,7 +39,6 @@ export class Feature {
|
|||
@Injectable()
|
||||
export class BundlesService {
|
||||
|
||||
private readonly STORE_PRODUCTS: string = 'https://store.akveo.com/collections/frontpage/products.json';
|
||||
private readonly STORE: string = 'https://store.akveo.com/products';
|
||||
|
||||
private features: Feature[] = [
|
||||
|
|
@ -81,8 +85,8 @@ export class BundlesService {
|
|||
return observableOf(this.features);
|
||||
}
|
||||
|
||||
getProducts(): Observable<Product[]> {
|
||||
return this.http.get(this.STORE_PRODUCTS)
|
||||
getProducts(url: string): Observable<Product[]> {
|
||||
return this.http.get(url)
|
||||
.pipe(map((result: any) => {
|
||||
return result.products.map((item: any) => {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -40,8 +40,7 @@
|
|||
<span class="package-card__price">${{ (product.variants | license:selectedLicenseType).price }}</span>
|
||||
</div>
|
||||
<a href="{{ product.storeUrl }}?utm_source=ngx_admin&utm_medium=referral&utm_campaign=akveo_store%20-%20specific%20bundle%20-%20ngx_admin%20landing&utm_content=buy_bundle_{{ selectedLicenseType }}"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton>
|
||||
class="package-card__buy-link btn">
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
|
|
@ -50,11 +49,11 @@
|
|||
</ul>
|
||||
|
||||
<div class="request-code-section">
|
||||
<a href="https://github.com/akveo/ngx-admin-bundle-support/tree/master/codeSamples" target="_blank" class="package-card__buy-link btn btn-demo" nbButton>
|
||||
<a href="https://github.com/akveo/ngx-admin-bundle-support/tree/master/codeSamples" target="_blank" class="package-card__buy-link btn">
|
||||
CODE SAMPLE
|
||||
</a>
|
||||
|
||||
<a href="https://hubs.ly/H0n5NTk0" target="_blank" class="package-card__buy-link btn btn-demo" nbButton>
|
||||
<a href="https://hubs.ly/H0n5NTk0" target="_blank" class="package-card__buy-link btn">
|
||||
BROWSE OTHER BUNDLES
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -107,7 +106,7 @@
|
|||
<p class="features__description">Need more details or have a question?</p>
|
||||
|
||||
<div class="request-code-section">
|
||||
<a href="mailto:support@akveo.com?subject=Custom bundle request" class="package-card__buy-link btn btn-demo" nbButton>
|
||||
<a href="mailto:support@akveo.com?subject=Custom bundle request" class="package-card__buy-link btn">
|
||||
CONTACT US
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -112,6 +112,7 @@
|
|||
&:active {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #000000;
|
||||
background-color: #fafafa;
|
||||
|
|
@ -258,13 +259,18 @@
|
|||
font-size: 0.75rem;
|
||||
color: #ffffff;
|
||||
text-transform: uppercase;
|
||||
background-color: #18cb90;
|
||||
box-shadow: 0 5px 29px 0 rgba(0, 219, 146, 0.32);
|
||||
background-color: nb-theme(color-active-fg);
|
||||
box-shadow: nb-theme(shadow-btn);
|
||||
border-radius: 3px;
|
||||
margin-top: 0.5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0.375rem 2.125rem 0 rgba(0, 219, 146, 0.32);
|
||||
box-shadow: nb-theme(shadow-hover-green-btn);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: nb-theme(shadow-active-green-btn);
|
||||
}
|
||||
}
|
||||
&__type {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { AfterViewInit, Component, ElementRef, EventEmitter, Inject, Output } from '@angular/core';
|
||||
import { AfterViewInit, Component, ElementRef, EventEmitter, Inject, Input, Output } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Observable } from 'rxjs';
|
||||
import { delay, filter, take } from 'rxjs/operators';
|
||||
|
|
@ -12,6 +12,7 @@ import { NB_WINDOW } from '@nebular/theme';
|
|||
|
||||
import {
|
||||
BUNDLE_LICENSE,
|
||||
STORE_PRODUCTS_URL,
|
||||
BundlesService,
|
||||
Feature,
|
||||
Product,
|
||||
|
|
@ -28,13 +29,22 @@ import { LicensePipe } from '../backend-bundles-section/license.pipe';
|
|||
export class BackendBundlesSectionComponent implements AfterViewInit {
|
||||
|
||||
@Output() loaded = new EventEmitter();
|
||||
@Input()
|
||||
set material(value: boolean | undefined) {
|
||||
if (value) {
|
||||
this.productUrl = STORE_PRODUCTS_URL.material;
|
||||
|
||||
this.getProducts();
|
||||
}
|
||||
}
|
||||
|
||||
selectedLicenseType = BUNDLE_LICENSE.personal;
|
||||
productUrl = STORE_PRODUCTS_URL.base;
|
||||
|
||||
licenses = Object.values(BUNDLE_LICENSE);
|
||||
|
||||
descriptions: Observable<Descriptions[]> = this.descriptionService.getBundleDescriptions();
|
||||
products: Observable<Product[]> = this.bundlesService.getProducts();
|
||||
products: Observable<Product[]>;
|
||||
features: Observable<Feature[]> = this.bundlesService.getFeatures();
|
||||
|
||||
constructor(private descriptionService: DescriptionsService,
|
||||
|
|
@ -43,6 +53,7 @@ export class BackendBundlesSectionComponent implements AfterViewInit {
|
|||
private el: ElementRef<HTMLElement>,
|
||||
@Inject(NB_WINDOW) private window,
|
||||
private licensePipe: LicensePipe) {
|
||||
this.getProducts();
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
|
|
@ -57,6 +68,10 @@ export class BackendBundlesSectionComponent implements AfterViewInit {
|
|||
});
|
||||
}
|
||||
|
||||
getProducts() {
|
||||
this.products = this.bundlesService.getProducts(this.productUrl);
|
||||
}
|
||||
|
||||
shouldShowOldPrice(variants: ProductVariant[], selectedLicenseType: string): boolean {
|
||||
const product = this.licensePipe.transform(variants, selectedLicenseType);
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<ngx-landing-main-info material></ngx-landing-main-info>
|
||||
<ngx-material-features></ngx-material-features>
|
||||
<ngx-landing-theme-section material></ngx-landing-theme-section>
|
||||
<ngx-backend-bundles-section [material]="true"></ngx-backend-bundles-section>
|
||||
<ngx-contact-form></ngx-contact-form>
|
||||
</nb-layout-column>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue