Skip to content
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

[Experiment] New hero #454

Closed
wants to merge 4 commits into from
Closed

[Experiment] New hero #454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
38d3157
Add price, oldPrice
Feb 22, 2024
63c590c
add css
Feb 24, 2024
495ffe5
update spacing between elements
Feb 26, 2024
51e7df3
fix npm lint issues
Feb 27, 2024
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
91 changes: 80 additions & 11 deletions solutions/blocks/hero/hero.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,10 @@ main .hero h1 {
margin: 0 0 25px;
}

main .hero.new-hero-exp01 h1 {
margin: 0 0 10px;
}

main .hero h2 {
font-size: 18px;
color: var(--text-color);
Expand All @@ -158,6 +162,12 @@ main .hero h4 {
margin: 0 0 9px;
}

main .hero.new-hero-exp01 h4 {
font-size: 16px;
line-height: 28px;
margin: 31px 0 14px;
}

main .hero.black-background h1,
main .hero.black-background h2,
main .hero.black-background h4 {
Expand All @@ -178,14 +188,6 @@ main .hero p {
margin: 0;
}

main .hero h1 + p {
margin: 8px 0 0;
color: #616161;
font-size: var(--hero-font-size-xxs);
font-weight: var(--font-weight-bold);
line-height: 1.5;
}

main .hero.comparison p {
font-size: 18px;
font-weight: 400;
Expand All @@ -197,6 +199,12 @@ main .hero.comparison p {
margin: 24px 0 0;
}

main .hero.new-hero-exp01 h1 + p {
font-size: 24px;
line-height: 28px;
margin: 0 0 10px;
}

main .hero.black-background h1 + p {
color: var(--text-dark-color);
}
Expand Down Expand Up @@ -242,6 +250,13 @@ main .hero a.button.modal {
justify-content: center;
align-items: center;
}

main .hero.new-hero-exp01 a.button {
min-width: 146px;
padding: 9px 23px;
margin: 8px 39px 0 0;
}

}

main .hero a.button span.button-text {
Expand All @@ -252,7 +267,6 @@ main .hero a.button span.button-text {
font-weight: var(--font-weight-bold);
}


main .hero .discount-bubble {
background: #2cb43d;
border-radius: 50%;
Expand Down Expand Up @@ -429,6 +443,21 @@ main .hero .hero-awards li::after {
margin: 0;
}

main .hero.new-hero-exp01 p {
font-size: 16px;
line-height: 18px;
margin: 6px 0 0;
}

main .hero.new-hero-exp01 p em a {
font-size: 16px;
line-height: 18px;
color: #000;
font-style: normal;
text-decoration: underline;

}

main .hero .hero-picture picture img {
display: block;
padding-left: 0;
Expand All @@ -452,6 +481,11 @@ main .hero .hero-awards li::after {
padding: 0 20px 0 0;
}

main .hero.new-hero-exp01 .hero-content > div {
width: 48%;
padding: 0 20px 0 0;
}

main .hero.comparison .hero-content > div {
width: 65%;
padding: 40px 0 0;
Expand Down Expand Up @@ -503,11 +537,27 @@ main .hero .hero-awards li::after {
font-size: 56px;
}

main .hero.new-hero-exp01 h1 {
color: #006DFF;
font-size: 40px;
}

main .hero.new-hero-exp01 h1 strong {
font-weight: var(--font-weight-regular);

}

main .hero .hero-picture picture img {
display: block;
padding-left: 25%;
}

main .hero.new-hero-exp01 .hero-picture picture img {
display: block;
padding-left: 0;
object-fit: fill;
}

main .hero .discount-bubble {
width: 83px;
height: 83px;
Expand All @@ -521,10 +571,29 @@ main .hero .hero-awards li::after {
font-size: 14px;
}

main .hero .hero-content {
min-height: 725px;
main .hero.new-hero-exp01 .hero-content {
min-height: 498px;
max-width: var(--section-large-desktop-max-width);
padding-left: var(--section-large-desktop-padding);
padding-right: var(--section-large-desktop-padding);
}

}


main .hero.new-hero-exp01 .nanoblock span.old-price del {
font-size: 16px;
line-height: 18px;
}

main .hero.new-hero-exp01 .nanoblock strong {
font-size: 40px;
line-height: 45px;
}

main .hero.new-hero-exp01 .nanoblock em {
font-size: 12px;
line-height: 14px;
position: relative;
top: -21px;
}
111 changes: 110 additions & 1 deletion solutions/blocks/hero/hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import {
renderNanoBlocks,
fetchProduct,
} from '../../scripts/utils/utils.js';

import { trackProduct } from '../../scripts/scripts.js';
import { ProductCard } from '../products/products.js';
/**
* Builds hero block and prepends to main in a new section.
* @param {Element} element The container element
Expand Down Expand Up @@ -60,6 +61,79 @@ createNanoBlock('discount', (code, variant) => {
return root;
});

/**
* Nanoblock representing the new product price
* @param mv The modelview holding the state of the view
* @param text The text located before the price
* @param monthly Show the monthly price if equal to 'monthly'
* @returns Root node of the nanoblock
*/
function renderPrice(mv, text = '', monthly = '') {
// TODO simplify CSS
const root = createTag(
'div',
{
class: 'price',
},
`<strong>${mv.model.basePrice}</strong>`,
);

const priceElt = root.querySelector('strong');

mv.subscribe(() => {
if (monthly.toLowerCase() === 'monthly') {
if (mv.model.discountedPrice) {
priceElt.innerHTML = `${text} ${mv.model.discountedMonthlyPrice} ${mv.model.currency} <sup>/mo</sup>`;
} else {
priceElt.innerHTML = `${text} ${mv.model.monthlyBasePrice} ${mv.model.currency} <sup>/mo</sup>`;
}
} else if (mv.model.discountedPrice) {
priceElt.innerHTML = `${text} ${mv.model.discountedPrice} ${mv.model.currency}`;
} else {
priceElt.innerHTML = `${text} ${mv.model.basePrice} ${mv.model.currency}`;
}

trackProduct(mv.model);
});

return root;
}

/**
* Nanoblock representing the old product price
* @param mv The modelview holding the state of the view
* @param text The text located before the price
* @param monthly Show the monthly price if equal to 'monthly'
* @returns Root node of the nanoblock
*/
function renderOldPrice(mv, text = '', monthly = '') {
// TODO simplify CSS
const root = createTag(
'div',
{
class: 'price',
},
`<span class='old-price'>${text} <del>${mv.model.basePrice ?? ''} ${mv.model.currency ?? ''}</del>`,
);

const oldPriceElt = root.querySelector('span');

mv.subscribe(() => {
if (mv.model.discountedPrice) {
oldPriceElt.innerHTML = monthly.toLowerCase() === 'monthly'
? `${text} <del>${mv.model.monthlyBasePrice} ${mv.model.currency}<sup>/mo</sup></del>`
: `${text} <del>${mv.model.basePrice} ${mv.model.currency}</del>`;
oldPriceElt.style.visibility = 'visible';
} else {
oldPriceElt.style.visibility = 'hidden';
}
});

return root;
}
createNanoBlock('price', renderPrice);
createNanoBlock('oldPrice', renderOldPrice);

/**
* decorates hero block
* @param {Element} block The hero block element
Expand All @@ -79,6 +153,41 @@ export default async function decorate(block) {
// Apply a CSS class to each selected <ul> element
ulsWithPicture.forEach((ul) => ul.classList.add('hero-awards'));

[...block.children].forEach((row) => {
if (row.classList.contains('hero-content')) {
[...(row.children)].forEach((col) => {
// col.classList.add('product-card');
// block.appendChild(col);
// checl if the column has a hero class name

const mv = new ProductCard(col);
renderNanoBlocks(col, mv);

// get the parent node of the em
const emParent = row.querySelector('.price.nanoblock em');
emParent.prepend(' / ');

// get the parent node of the strong
const strongParent = row.querySelector('.price.nanoblock strong').parentNode;

if (strongParent) {
emParent.parentElement.remove();
strongParent.appendChild(emParent);
}

// listen to ProductCard change and update the buttons pointing to the store url
mv.subscribe((card) => {
col.querySelectorAll('.button-container a').forEach((link) => {
if (link && link.href.startsWith('https://www.bitdefender.com.au/site/Store/buy')) {
link.href = card.url;
}
});
});
});
}
// row.remove();
});

renderNanoBlocks(block);

// move discount bubble inside the closest button
Expand Down
5 changes: 1 addition & 4 deletions solutions/blocks/products/products.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ function toModel(productCode, variantId, v) {
* This class is also repsonsible for fetching the product variants
* from the remote service and presenting them to the view.
*/
class ProductCard {
export class ProductCard {
constructor(root) {
this.root = root;
this.listeners = [];
Expand Down Expand Up @@ -368,11 +368,8 @@ export default function decorate(block) {
[...(row.children)].forEach((col) => {
col.classList.add('product-card');
block.appendChild(col);

const mv = new ProductCard(col);

renderNanoBlocks(col, mv);

// listen to ProductCard change and update the buttons pointing to the store url
mv.subscribe((card) => {
col.querySelectorAll('.button-container a').forEach((link) => {
Expand Down
Loading