ng-easycommerce-v18 0.0.1

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/block-banner-box-ec/block-banner-box-ec.component.html

@@ -0,0 +1,113 @@
+@if(banners.length){
+    <section [ngClass]="trimClassBlock(meta.code) + ' container-fluid'" 
+    [style.background-color]="meta.styles?.backgroundColor"
+    [style.background-image]="meta.styles?.backgroundImage ? 'url(' + mediaUrl + meta.styles?.backgroundImage +')' : 'inherit'">
+
+        <div class="block-boxes" style="background-color: white;">
+            @if(meta.name){
+                <div class="row">
+                    a
+                    <div class="col-12 mt-4">
+                        <h2 class="font-weight-normal font-gd">
+                            <span>{{meta.name}}</span>
+                        </h2>
+                    </div>
+                </div> 
+            }
+          
+            @if(meta.styles && meta.styles.carrousel == false){
+                <!-- Si es formato fijo -->
+                <div class="banner-content">
+                    <div class="row g-0">
+                        @for (banner of banners; track $index) {
+                        <div [ngClass]="'item '+'col-md-6 '+'col-lg-'+(12/banners.length) " [id]="$index">
+                            <img class="img-fluid" [src]=" mediaBannerUrl+getImage(banner)" alt="" />
+                            <div class="position-absolute w-100 top-0 start-0 h-100">
+                                <h2 [ngClass]="'item-title px-2 item-position-vertical-'+ (banner.styles?.description?.position)"
+                                [style.color]="(banner.styles?.description?.color) ? banner.styles?.description?.color : '#000'">
+                                    {{banner.title}}
+                                </h2>
+                                @if(banner.subtitle){
+                                    <p [style.color]="(banner.styles?.description?.color) ? banner.styles?.description?.color : '#000' "
+                                    [class]="'px-4 item-subtitle item-position-vertical-' + (banner.styles?.description?.position)">
+                                        {{banner.subtitle}}
+                                    </p>
+                                }
+                            </div>
+                            <div [class]="'item-position-vertical-' + (banner.styles?.button?.position)">
+                                @if(banner.styles?.button?.text){
+                                    <a href="{{banner.url}}" [class]="'item-button btn btn-light'">
+                                        {{banner.styles.button.text}}
+                                    </a>
+                                }
+                            </div>
+                        </div>
+                        }
+                    </div>
+                </div>
+            }@else {
+               <!-- Si es Carrousel -->
+               <swiper-container init="false" [id]="meta?.code">
+                @for (banner of banners; track $index) {
+                    <!-- Si es de Categorias -->
+                    @if (banner.taxons[0]) {
+                    <swiper-slide>
+
+                        <a class="banner-content carrousel item" (click)='redirectRoute(banner.taxons[0].slug)' [routerLink]="['/collection/categories/', banner.taxons[0].slug]" routerLinkActive="router-link-active"  style="text-decoration: none; cursor: pointer; background-color: white;">
+                            <div class="image-container">
+                                <img [src]="mediaBannerUrl+getImage(banner)" alt="Banner Image" class="banner-image">
+                            </div>
+                            @if(banner.title){
+                                <h2 [class]="'box-text item-title-full px-2 item-position-vertical-'+ (banner.styles?.description?.position)"
+                                    style="color:#fff">
+                                    {{banner.title}}
+                                </h2>
+                            }
+                            @if(banner.taxons && banner.taxons.length){
+                                <h5 class="item-subtitle-full item-position-vertical-center text-center box-text">
+                                    {{banner.translations.es_AR.title}}
+                                </h5>
+                            }
+                            @if(banner.subtitle){
+                                <p [style.color]="(banner.styles?.description?.color) ? banner.styles?.description?.color : '#000' "
+                                    [class]="'box-text px-4 item-subtitle-full item-position-vertical-' + (banner.styles?.description?.position)">
+                                    {{banner.subtitle}}
+                                </p>
+                            }
+                        </a>
+                    </swiper-slide>
+                    } @else {
+                        <swiper-slide>
+
+                            <a class="banner-content carrousel item" style="cursor: pointer;">
+                                <div class="image-container">
+                                    <img [src]="mediaBannerUrl+getImage(banner)" alt="Banner Image" class="banner-image">
+                                </div>
+                                @if(banner.title){
+                                    <h2 [class]="'box-text item-title-full px-2 item-position-vertical-'+ (banner.styles?.description?.position)"
+                                        style="color:#fff">
+                                        {{banner.title}}
+                                    </h2>
+                                }
+                                @if(banner.taxons && banner.taxons.length){
+                                    <h5 class="item-subtitle-full item-position-vertical-center text-center box-text">
+                                        {{banner.translations.es_AR.title}}
+                                    </h5>
+                                }
+                                @if(banner.subtitle){
+                                    <p [style.color]="(banner.styles?.description?.color) ? banner.styles?.description?.color : '#000' "
+                                        [class]="'box-text px-4 item-subtitle-full item-position-vertical-' + (banner.styles?.description?.position)">
+                                        {{banner.subtitle}}
+                                    </p>
+                                }
+                            </a>
+                        </swiper-slide>
+                    }
+                    
+                }
+               </swiper-container> 
+            }
+        </div>
+
+    </section>
+}

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/block-banner-box-ec/block-banner-box-ec.component.scss

@@ -0,0 +1,12 @@
+.banner-container {
+    text-align: center;
+}
+
+.banner-image {
+    display: block;
+    margin: 0 auto;
+}
+
+.item-subtitle-full {
+    margin-top: 10px; /* Ajusta el margen según sea necesario */
+}

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/block-banner-box-ec/block-banner-box-ec.component.ts

@@ -0,0 +1,100 @@
+import { AsyncPipe, CommonModule } from '@angular/common';
+import { afterNextRender, Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input, signal } from '@angular/core';
+import { BlockEcComponent } from '../../abstractions-components';
+import { AnalyticsService } from '../../../ec-services';
+import { register, SwiperContainer } from 'swiper/element';
+import { SwiperOptions } from 'swiper/types';
+import { RouterModule } from '@angular/router';
+
+register()
+/**
+ * Componente para manejar los banner de tipo box.
+ * @class BlockBannerBoxEcComponent
+ * @extends {BlockEcComponent}
+ */
+@Component({
+	selector: 'app-block-banner-box-ec',
+	standalone: true,
+	imports: [CommonModule, RouterModule],
+	templateUrl: './block-banner-box-ec.component.html',
+	styleUrl: './block-banner-box-ec.component.scss',
+	schemas:[CUSTOM_ELEMENTS_SCHEMA]
+})
+export class BlockBannerBoxEcComponent extends BlockEcComponent {
+	/**
+	 * Banners de tipo Box.
+	 */
+	@Input({
+		required: true
+	}) banners: any;
+	/**
+	 * Datos del bloque que contiene a los banners
+	 */
+	@Input({ required: true }) meta: any;
+	/**
+	 * Servicio para Analytics
+	 */
+	private analyticsService = inject(AnalyticsService)
+	/**
+	 * Signal utlizado para guarda el contenedor del carrusel
+	 */
+	swiperElement = signal<SwiperContainer | null>(null)
+	
+	/**
+	 * Ejecuta el método `afterNextRender`para cargar las configuraciones necesarias 
+	 * para el carrusel del banners. Esto debe ser asi debido a que ya debe estar presente
+	 * en el Dom el element `<swiper-container>` para poder configurarlo.
+	 */
+	constructor() {
+		super()
+		afterNextRender(() => {
+			const swiperElemConstructor = document.querySelector('#'+this.meta?.code)
+			Object.assign(swiperElemConstructor!, this.swiperOptions())
+			this.swiperElement.set(swiperElemConstructor as SwiperContainer)
+			//swiperElemConstructor?.initialize();
+			this.swiperElement()?.initialize();
+		})
+	}
+	/**
+	 * Método original en: {@link BlockEcComponent}
+	 */
+	override swiperOptions ():SwiperOptions {
+		return {
+            slidesPerView: 1,
+            autoplay: true,
+            loop: true,
+            speed: 1050,
+            pagination: false,
+            navigation: true,
+            autoHeight: true,
+            breakpoints: {
+                0: {
+                    slidesPerView: 1
+                },
+                576:{
+                    slidesPerView: 2 
+                },
+                768: {
+                    slidesPerView: 4,
+                },
+                992: {
+                    slidesPerView: 5,
+                },
+                1200: {
+                    slidesPerView: 5,
+                }
+            }
+        }
+	}
+	/**
+	 * Aplica el evento `select_promotion` junto con el banner que interactua.
+	 * @param banner 
+	 */
+	selectPromotion(banner: any): void {
+		this.analyticsService.callEvent('select_promotion', banner)
+	}
+
+	redirectRoute(url: string): void {
+		// this.router.navigate(['/collection/categories'])
+	  }
+}

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/block-banner-full-ec/block-banner-full-ec.component.html

@@ -0,0 +1,111 @@
+@if(banners.length > 0) {
+    <section [ngClass]="trimClassBlock(meta?.code)+' container-fluid px-0'"
+        [style.background-color]="meta.styles?.backgroundColor"
+        [style.background-image]="meta.styles?.backgroundImage ? 'url(' + mediaUrl + meta.styles?.backgroundImage +')' : 'inherit'">
+
+        @if (banners.length == 1) {
+            <!-- si es formato fijo -->
+            <div class="row justify-content-center">
+                @let banner = banners[0];
+                @if(!banners.styles?.button?.text){
+                    <!-- banner sin boton -->
+                    <a [href]="banner.url" >
+                        <div class="item col-12">
+                            <img class="img-fluid" [src]="mediaBannerUrl + getImage(banner)" alt="">
+                            <div class="position-absolute w-100 h-100 start-0 top-0">
+                                @if(banner.title){
+                                    <h2 [class]="'item-title-full px-2 item-position-vertical-' + (banner.styles?.description?.position)"
+                                    [style.color]="(banner.styles?.description?.color) ? banner.styles?.description?.color : '#fff' ">
+                                        {{banner.title}}
+                                    </h2>
+                                }
+                                @if(banner.subtitle){
+                                    <p [style.color]="(banner.styles?.description?.color) ? banner.styles?.description?.color : '#000' "
+                                    [class]="'px-4 item-subtitle-full item-position-vertical-' + (banner.styles?.description?.position)">
+                                        {{banner.subtitle}}
+                                    </p>
+                                }
+                            </div>
+                        </div>
+                    </a>
+                }@else {
+                    <!-- banner fijo con boton -->
+                    <div class="item col-12">
+                        <img class="img-fluid" [src]="mediaBannerUrl + getImage(banner)" alt="">
+                        <div class="position-absolute w-100 h-100 start-0 top-0">
+                            @if(banner.title){
+                                <h2 [class]="'item-title-full px-2 item-position-vertical-' + (banner.styles?.description?.position)"
+                                [style.color]="(banner.styles?.description?.color) ? banner.styles?.description?.color : '#000' ">
+                                    {{banner.title}}
+                                </h2>
+                            }
+                            @if(banner.subtitle){
+                                <p 
+                                [style.color]="(banner.styles?.description?.color) ? banner.styles?.description?.color : '#000' "
+                                [class]="'px-4 item-subtitle-full item-position-vertical-' + (banner.styles?.description?.position)">
+                                    {{banner.subtitle}}
+                                </p>
+                            <div [class]="'item-position-vertical-' + (banner.styles?.button?.position)">
+                                @if(banner.styles?.button?.text){
+                                <a href="{{banner.url}}"
+                                    [class]="'item-button-full btn btn-light '">
+                                        {{banner.styles.button.text}}
+                                    </a> 
+                                }
+                                
+                            </div>
+                            }
+                        </div>
+                    </div>
+                }
+            </div>
+        }@else {
+            <!-- si es carrousel -->
+            <!--  @if(swiperElement() != null){ -->
+                <swiper-container init="false" [id]="meta?.code">
+                @for (banner of banners; track $index) {
+                    <swiper-slide>
+                        <div class="item">
+                            @if (!banner.styles?.button?.text) {
+                                <!-- banner sin boton -->
+                                @if(banner.url){
+                                    <a [href]="banner.url" class="">
+                                        <img [src]="mediaBannerUrl + getImage(banner)" alt="" class="img-fluid w-100" />
+                                    </a>
+                                }@else {
+                                    <img [src]="mediaBannerUrl + getImage(banner)" alt=""  class="img-fluid w-100" />
+                                }
+                            }@else {
+                                <!-- banner con boton -->
+                                <img [src]="mediaBannerUrl + getImage(banner)" alt="" />
+                                <div class="position-absolute w-100 h-100 start-0 top-0">
+                                    @if(banner.title){
+                                        <h2 [class]="'item-title-full px-2 item-position-vertical-'+ (banner.styles?.description?.position)"
+                                            [style.color]="(banner.styles?.description?.color) ? banner.styles?.description?.color : '#000' ">
+                                            {{banner.title}}
+                                        </h2>
+                                    }
+                                    @if(banner.subtitle){
+                                        <p [style.color]="(banner.styles?.description?.color) ? banner.styles?.description?.color : '#000' "
+                                            [class]="'px-4 item-subtitle-full item-position-vertical-' + (banner.styles?.description?.position)">
+                                            {{banner.subtitle}}
+                                        </p>
+                                    }
+                                    <div [class]="'item-position-vertical-' + (banner.styles?.button?.position)">
+                                        @if(banner.styles?.button?.text){
+                                            <a href="{{banner.url}}" [class]="'item-button-full btn btn-light'">
+                                                {{banner.styles.button.text}}
+                                            </a>
+                                        }
+                                    </div>
+                                </div>
+                            }
+                        </div>
+                    </swiper-slide>
+                }
+            </swiper-container>
+            <!--  } -->
+            
+        }
+    </section>
+}

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/block-banner-full-ec/block-banner-full-ec.component.ts

@@ -0,0 +1,77 @@
+import { afterNextRender, afterRender, Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input, OnInit, signal } from '@angular/core';
+import { IBlock } from '../../../interfaces';
+import { BlockEcComponent } from '../../abstractions-components';
+import { register, SwiperContainer } from 'swiper/element/bundle';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { AnalyticsService } from '../../../ec-services';
+
+register();
+/**
+ * Componente para manejar los banners de tipo full
+ * @extends {BlockEcComponent}
+ * @implements {OnInit}
+ * @class BlockBannerFullEcComponent
+ */
+@Component({
+	selector: 'app-block-banner-full-ec',
+	standalone: true,
+	imports: [CommonModule,RouterLink],
+	schemas:[CUSTOM_ELEMENTS_SCHEMA],
+	templateUrl: './block-banner-full-ec.component.html',
+	styleUrl: './block-banner-full-ec.component.scss'
+})
+export class BlockBannerFullEcComponent extends BlockEcComponent implements OnInit {
+	/**
+	 * Banners tipo full
+	 */
+	@Input({
+		required: true
+	}) banners: any;
+	/**
+	 * Datos del bloque que contiene a los banners
+	 */
+	@Input({ required: true }) meta: any;
+	/**
+	 * Servicio para Analytics
+	 */
+	private analyticsService = inject(AnalyticsService)
+	/**
+	 * Signal utlizado para guarda el contenedor del carrusel
+	 */
+	swiperElement = signal<SwiperContainer | null>(null)
+	/**
+	 * Método original en: {@link BlockEcComponent}
+	 * @param banner 
+	 * @returns 
+	 */
+	public override getImage = (banner: any) => this.getBannerImage(banner);
+	/**
+	 * Se mappea los banners para sumarle el objeto de translations y que
+	 * sean mas amigables para su uso.
+	 */
+	ngOnInit(): void {
+		this.banners = this.banners.map((banner: any) => { return { ...banner, ...banner.translations[this.apiConsts.LOCALE] } })
+	}
+	/**
+	 * Ejecuta el método `afterNextRender`para cargar las configuraciones necesarias 
+	 * para el carrusel del banners. Esto debe ser asi debido a que ya debe estar presente
+	 * en el Dom el element `<swiper-container>` para poder configurarlo.
+	 */
+	constructor(){
+		super()
+		afterNextRender(() => {
+			const swiperElemConstructor = document.querySelector('#'+this.meta?.code)	
+			Object.assign(swiperElemConstructor!,this.swiperOptions())
+			this.swiperElement.set(swiperElemConstructor as SwiperContainer)
+			this.swiperElement()?.initialize();
+		})
+	}
+	/**
+	 * Aplica el evento `select_promotion` junto con el banner que interactua.
+	 * @param banner 
+	 */
+	selectPromotion(banner:any):void {
+        this.analyticsService.callEvent('select_promotion', banner)
+    }
+}

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/block-form-contact-ec/block-form-contact-ec.component.html

@@ -0,0 +1,62 @@
+@if(block){
+<div [class]="trimClassBlock(block.code) + ' container-fluid'">
+    <div class="row justify-content-center">
+        <div class="col-12 col-md-12">
+            <div class="row w-100 m-auto">
+                <h5>{{block.name || 'Dejanos tu consulta'}}</h5>
+                <p class="w-100">{{ block.description || 'Completa el siguiente formulario y responderemos tu consulta a la brevedad' }}</p>
+            </div>
+            <form [formGroup]="form()" (submit)="onSubmit($event)" class="position-relative" ><!-- (submit)="toastCompleteForm($event)" -->
+                @if(block.sendName){
+                    <div class="form-group">
+                        <label class="sr-only" for="nombre">Nombre</label>
+                        <input formControlName="name" type="text"
+                            class="form-control form-control-sm required" id="nombre" placeholder="Nombre">
+                    </div>
+                }
+                @if(block.sendEmail){
+                    <div class="form-group">
+                        <label class="sr-only" for="mail">Email</label>
+                        <input formControlName="email" type="email"
+                            class="form-control form-control-sm required" id="mail" placeholder="Email">
+                    </div>
+                }
+                @if(block.sendTelephone){
+                    <div class="form-group">
+                        <label class="sr-only" for="telefono">Teléfono</label>
+                        <input formControlName="telephone" type="text"
+                            class="form-control form-control-sm required" id="telefono" placeholder="Teléfono">
+                    </div>
+                }
+                @if(block.sendSubject){
+                    <div class="form-group">
+                        <label class="sr-only" for="subject">Asunto</label>
+                        <input formControlName="subject" type="text"
+                            class="form-control form-control-sm required" id="subject" placeholder="Asunto">
+                    </div>
+                }
+                @if(block.sendBody){
+                    <div class="form-group">
+                        <label class="sr-only" for="mensaje">Mensaje</label>
+                        <textarea formControlName="body" name="mensaje" id="mensaje " cols="30"
+                            rows="5" placeholder="Dejanos tu mensaje"
+                            class="form-control form-control-sm required"></textarea>
+                    </div>
+                }
+                <div class="boxContenidoCapcha mb-3">
+                    <div class="contenedorCaptcha">
+                        <re-captcha-ec formControlName="recaptcha"></re-captcha-ec>
+                    </div>
+                </div>
+
+                <button type="submit" class="btn btn-dark text-uppercase px-5"
+                    [disabled]="form().invalid">ENVIAR</button>
+                @if(loading){
+                     <app-loading-section-ec />
+                }
+            </form>
+        </div>
+
+    </div>
+</div>
+}

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/block-form-contact-ec/block-form-contact-ec.component.ts

@@ -0,0 +1,89 @@
+import { Component, inject, Input, signal } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import { BlocksService, FormService, ToastService } from '../../../ec-services';
+import { Router } from '@angular/router';
+import { BlockEcComponent } from '../../abstractions-components';
+import { LoadingSectionEcComponent, ReCaptchaEcComponent } from '../../widgets-ec';
+import { JsonPipe } from '@angular/common';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+	selector: 'app-block-form-contact-ec',
+	standalone: true,
+	imports: [ReactiveFormsModule, LoadingSectionEcComponent, ReCaptchaEcComponent],
+	templateUrl: './block-form-contact-ec.component.html',
+	styleUrl: './block-form-contact-ec.component.scss'
+})
+export class BlockFormContactEcComponent extends BlockEcComponent {
+	@Input({ required:true }) block:any;
+	@Input() success_message:string | undefined;
+	@Input() redirect:boolean = true;
+	@Input() subject:string | undefined;
+
+	private _contactFormService: FormService = inject(FormService)
+	private _toastService:ToastService = inject(ToastService)
+	private _formBuilder:FormBuilder = inject(FormBuilder)
+	private _router:Router = inject(Router)
+	
+	protected form_data:any = new FormData();
+
+	public loading:boolean = false;
+
+	public form = signal<FormGroup>(
+		this._formBuilder.group({
+			name: ['', []],
+            email: ['', Validators.required],
+            telephone: ['', []],
+            subject: ['', []],
+            body: ['', []],
+            attachment: [''],
+            recaptcha: [null, Validators.required], //testear este cambio de nombre
+		})
+    )
+
+	onSubmit(e:any):void{
+		this.loading = true;
+		e.preventDefault();
+		this.sendForm(this.form(), 'inquiry-sent');
+	}
+
+	sendForm(form:any, success_message:string){
+        if (form.valid && (form.value.email.includes('@'))) {
+            const formData = new FormData();
+            formData.append('mailText', form.value.body)
+            formData.append('form_code', this.block.code)
+            this.sendValue('name') && formData.append('name', this.form().get('name')?.value)
+            this.sendValue('email') && formData.append('email', this.form().get('email')?.value)
+            this.sendValue('telephone') && formData.append('telephone', this.form().get('telephone')?.value)
+            this.sendValue('subject') && formData.append('subject', this.form().get('subject')?.value)
+            this.sendValue('body') && formData.append('body', this.form().get('body')?.value)
+            this.sendValue('attachments') && formData.append('attachment', this.form().get('attachment')?.value)
+			firstValueFrom(this._contactFormService.sendResponse(formData)).then(
+                (res:any) => {
+                    this.form().reset()
+                    this._toastService.show(this.success_message || success_message);
+                    this.loading = false
+                    this.redirect && this._router.navigateByUrl('/home');
+
+                },
+                (err:any) => {
+                    this._toastService.error('inquiry-error');
+                    this.loading = false
+                }
+            );
+        } else {
+            this._toastService.error('invalid-form');
+            this.loading = false
+        }
+    }
+
+	sendValue(key:any){
+        try {
+            let keysearch = key[0].toUpperCase() + key.slice(1).toLowerCase();
+            return this.block && this.block['send' + keysearch] || false
+        } catch (error) {
+            console.error(error);
+            return false
+        }
+    }
+}

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/block-html-ec/block-html-ec.component.html

@@ -0,0 +1 @@
+<div [innerHTML]="html_content"></div>

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/block-html-ec/block-html-ec.component.ts

@@ -0,0 +1,33 @@
+import { Component, inject, Input, OnInit } from '@angular/core';
+import { BlockEcComponent } from '../../abstractions-components';
+import { DomSanitizer } from '@angular/platform-browser';
+/**
+ * Componente para manejar los Bloques de tipo HTML
+ * @extends {BlockEcComponent}
+ * @implements {OnInit}
+ */
+@Component({
+	selector: 'app-block-html-ec',
+	standalone: true,
+	imports: [],
+	templateUrl: './block-html-ec.component.html',
+	styleUrl: './block-html-ec.component.scss'
+})
+export class BlockHtmlEcComponent extends BlockEcComponent implements OnInit {
+	/**
+	 * Contenido html para sanitizar.
+	 */
+	@Input({
+		required: true,
+	}) html_content: any;
+	/**
+	 * Sanitizador de Dom elements
+	 */
+	protected sanitizer: DomSanitizer = inject(DomSanitizer)
+	/**
+	 * Se pasa el contenido de html por es sanitizador. 
+	 */
+	ngOnInit(): void {
+		this.html_content = this.sanitizer.bypassSecurityTrustHtml(this.html_content);
+	}
+}

package/projects/ng-easycommerce/src/lib/ec-components/blocks-ec/block-newsletter-ec/block-newsletter-ec.component.html

@@ -0,0 +1 @@
+<p>block-newsletter-ec works!</p>