<!-- Error rendering component -->
<!-- Could not render component '@legal--lightboxlegal' - component not found. -->
<!-- Error: Could not render component '@legal--lightboxlegal' - component not found.
at Object.render (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/@frctl/handlebars/src/helpers/render.js:23:19)
at Object.helperWrapper (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/promised-handlebars/index.js:130:23)
at Object.<anonymous> (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/promised-handlebars/lib/utils.js:29:28)
at Object.wrapper (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/handlebars/dist/cjs/handlebars/internal/wrapHelper.js:15:19)
at eval (eval at createFunctionContext (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:262:23), <anonymous>:11:145)
at Object.prog (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/handlebars/dist/cjs/handlebars/runtime.js:268:12)
at Object.prepareAndResolveMarkers (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/promised-handlebars/index.js:92:17)
at Object.fn (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/promised-handlebars/lib/utils.js:29:28)
at Object.<anonymous> (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/handlebars/dist/cjs/handlebars/helpers/if.js:29:22)
at Object.helperWrapper (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/promised-handlebars/index.js:130:23)
at Object.<anonymous> (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/promised-handlebars/lib/utils.js:29:28)
at Object.wrapper (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/handlebars/dist/cjs/handlebars/internal/wrapHelper.js:15:19)
at eval (eval at createFunctionContext (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:262:23), <anonymous>:10:50)
at Object.prog (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/handlebars/dist/cjs/handlebars/runtime.js:268:12)
at Object.prepareAndResolveMarkers (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/promised-handlebars/index.js:92:17)
at Object.inverse (/home/vsts/work/1/s/Project/Ecoweb/Ecoweb.Frontend/node_modules/promised-handlebars/lib/utils.js:29:28) -->
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="contact-highlight lazyload{{#if isOpening}} opening{{/if}}{{#if isUnderHeader}} under-header{{/if}}" {{#if hasID}}id="{{idComponent}}"{{/if}}>
<div class="wrap-img{{#if isVisibleAllViews}} visible-all-views{{/if}}"><img src="{{ this.data-bg }}" /></div>
<div class="row content">
{{#if isReversed}}
<div class="col-xs-12 col-ms-12 col-ms-mr col-sm-8 col-md-7 col-lg-7 col start-lg start-md start-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
{{else if isReversedWide}}
<div class="col-xs-12 col-ms-12 col-ms-mr col-sm-9 col-md-8 col-lg-8 col start-lg start-md start-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
{{else if isWide}}
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-9 col-md-8 col-lg-8 col end-lg end-md end-sm col-lg-offset-right-1 col-md-offset-right-1 col-sm-offset-right-1">
{{else if isFullWidth}}
<div class="col-xs-12 col-ms-12 col-sm-10 col-md-10 col-lg-10 col col-sm-mr-ml">
{{else}}
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-8 col-md-7 col-lg-7 col end-lg end-md end-sm col-lg-offset-right-1 col-md-offset-right-1 col-sm-offset-right-1">
{{/if}}
<form>
<div class="contact-highlight__tile{{#if isAccentBG}} accent{{/if}}{{#if isAccentDarkBG}} accent-dark{{/if}}">
<div class="contact-highlight__tile__header">
{{#if antetitulo}}
{{> @text-label-m antetitulo }}
{{/if}}
{{#if isOpening}}
{{> @title-l title-opening }}
{{else}}
{{> @title-l title }}
{{/if}}
{{#if entradilla}}
{{> @bodycopy-m entradilla }}
{{/if}}
</div>
{{#if isSitecoreForms}}
{{ render '@columns-form--threecolumns-fullwidth' }}
{{else}}
{{> @form-list-different-columns form-list }}
{{#if isLegal}}
<div class="contact-highlight__legal">
{{> @legal legal }}
</div>
{{else if isLightboxLegal}}
<div class="contact-highlight__legal">
{{ render '@legal--lightboxlegal' }}
</div>
{{/if}}
{{> @form-btn submit-btn }}
{{/if}}
</div>
</form>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{{#if isLightboxLegal}}
{{ render '@lightbox-new' lightbox1 }}
{{/if}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"isLegal": false,
"data-bg": "/dist/images/access-highlight-bg.jpg",
"title": {
"text": "Lorem ipsum dolor sit amet",
"colorDark": true
},
"legal": {
"isCheckbox": true,
"isLinkTooltip": true,
"isLink": true,
"bodycopy": {
"text": "<p>Para poder atenderte, contactaremos contigo en el teléfono y correo electrónico.</p>"
},
"link": {
"href": "#",
"text": "A long line for a link"
},
"checkbox": {
"checkbox-group": {
"field-top": false,
"checkbox-group": [
{
"id": "checkbox",
"title": "Checkbox"
}
]
},
"error-message": {
"text": "Error"
}
},
"link-tooltip": {
"title": {
"text": "Título Tooltip",
"isP": true
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
}
},
"form-list": {
"form-list": [
{
"isRequired": true,
"twocolumns": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "NOMBRE"
}
},
"input": {
"distinguisher": "name",
"id": "randomInputId21",
"type": "text",
"title": "Name",
"placeholder": ""
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"twocolumns": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "Apellidos"
}
},
"input": {
"distinguisher": "surname",
"id": "randomInputId22",
"type": "text",
"title": "Surname",
"placeholder": ""
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"twocolumns": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "EMAIL"
}
},
"input": {
"placeholder": "",
"distinguisher": "email",
"id": "randomInputId211",
"type": "text",
"title": "Email"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"twocolumns": true,
"isTwoColumn": true,
"col-1": "col-xs-5 col-ms-5 col-sm-5 col-md-6 col-lg-6",
"isRequired-1": true,
"form-select-1": {
"field-top": {
"label": {
"text": "Prefijo",
"for": "randomInputId3"
}
},
"select": {
"isOverflow": true,
"distinguisher": "prefix",
"id": "randomInputId3",
"chosen-placeholder": "Selecciona",
"validationAttributes": "minlength='3'",
"option": [
{
"id": "prefixSelectId1",
"select-name": "Prefix",
"text": "+34 Spain"
},
{
"id": "prefixSelectId2",
"select-name": "Prefix",
"text": "+44 United Kingdom"
},
{
"id": "prefixSelectId3",
"select-name": "Prefix",
"text": "+239 Sao Tome And Principe"
},
{
"id": "prefixSelectId4",
"select-name": "Prefix",
"text": "+1-268 Antigua and Barbuda"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"col-2": "col-xs-7 col-ms-7 col-sm-7 col-md-6 col-lg-6",
"isRequired-2": true,
"form-fieldset-2": {
"field-top": {
"label": {
"text": "Telefono",
"for": "phoneNumber"
}
},
"input": {
"distinguisher": "phone-number",
"id": "phoneNumber",
"type": "text",
"title": "Phone number",
"validationAttributes": "minlength='11'"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-textarea": {
"field-top": {
"label": {
"text": "AYÚDANOS A ENTENDER QUÉ NECESITAS"
}
},
"textarea": {
"distinguisher": "Mensaje",
"id": "randomInputId2111",
"type": "text",
"title": "Mensaje",
"placeholder": "",
"validationAttributes": "minlength='10' maxlength='1000'"
}
}
}
]
},
"submit-btn": {
"btn": {
"type": "submit",
"text": "Solicitar información"
}
},
"success": {
"title": {
"text": "Información enviada"
},
"description": {
"text": "<p>Si tienes una cuenta con nosotros te enviaremos un mail temporal de recuperación de contraseña. Por favor comprueba tu bandeja de entrada</p>"
}
},
"tile-highlight": {
"isSticky": true,
"text-label": {
"text": "¿No Vives en Espana y quieres comprar aquí?",
"colorLight": true
},
"title": {
"text": "Tu quieres una casa y nosotros lo hacemos posible",
"colorLight": true
},
"bodycopy": {
"text": "<p>Visita la casa personalmente antes de pagar, Conocer a quien pertenece la casa en el Registro de la Propiedad y una vez adquirida, registrar la vivienda en el Registro de la Propiedad, son pasos básicos para comprar en España.</p>",
"colorLight": true
},
"btn": {
"href": "#",
"type": "button",
"text": "Comprar casa para no residentes"
}
},
"lightbox1": {
"isLegals": true,
"modalContent1": true,
"modalID": "modalOne",
"title": {
"text": "Modal One Title"
},
"description": {
"text": "<p>Modal One Description</p>"
},
"content": {
"text": "<p>CONTENT 1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem deleniti eaque minus nam, nesciunt officia possimus tempore vel velit. Amet excepturi odit pariatur quasi quisquam saepe sequi similique voluptatibus.</p>"
}
},
"isLightboxLegal": true
}
.contact-highlight {
position: relative;
margin-bottom: 50px;
@media (--viewport-ms-max) {
margin-right: 0;
}
@media (--viewport-xs-max) {
margin-left: -20px;
margin-right: -20px;
}
@media (--viewport-ms-min) {
margin-bottom: 50px;
}
@media (--viewport-sm-min) {
margin-bottom: 50px;
}
@media (--viewport-md-min) {
}
&__tile {
margin-bottom: -50px;background-color:var(--color-accent-light); padding: 70px;
@media (--viewport-ms-max) {
padding:40px;
}
@media (--viewport-xs-max) {
padding:40px 20px;
}
.form-list{
.form-checkbox-group{ /* para forzar un enlace a los textos legales en PT */
.tooltip-label{
justify-content: flex-start;
}
}
/*input, .access-select__option, .textarea-field, .form-input__fieldset, .checkbox-label:before{border-color: var(--color-accent-dark);} LO QUITAMOS POR PETICION DE DS (CA)*/
}
&.without-tooltip-label{
.form-list{margin-top: 26px;
.tooltip-label{
display: none;
}
.form-checkbox-group{ /* para forzar un enlace a los textos legales en PT */
.tooltip-label{
justify-content: flex-start;
height: auto;
display:flex;
}
}
&__valid-indicator{
top: 21px;
}
.form-radio-group { /* Para que en el caso de campo radio siempre se muestre (CA)*/
.tooltip-label{
justify-content: flex-start;
height: auto;
display:flex;
}
}
}
}
&__header{
margin-bottom: 20px;
.text-label-m{
margin-bottom: 20px;
}
/*.title-l{
}*/
.bodycopy-m{
margin-bottom: 10px; /*margin-top: -20px;*/
margin-top: 20px;
}
}
&.accent{
background-color:var(--color-accent);
.contact-highlight__tile__header{
.text-label-m{
color: var(--color-text-light);
}
.bodycopy-m{
color: var(--color-text-light);
}
}
.form-list{
.text-label-m, .label-m{color: var(--color-text-light);}
}
.contact-form__legal{
a{
color: var(--color-text-light);
}
.link span:after{
background-color: var(--color-text-light);
}
.bodycopy-s{color: var(--color-text-light);
a{
color: var(--color-accent-dark);
}
}
}
}
&.accent-dark{
background-color:var(--color-accent-dark);
.contact-highlight__tile__header{
.text-label-m{
color: var(--color-text-light);
}
.bodycopy-m{
color: var(--color-text-light);
}
}
.form-list{
.text-label-m, .label-m{color: var(--color-text-light);}
}
.contact-form__legal{
a{
color: var(--color-text-light);
}
.link span:after{
background-color: var(--color-text-light);
}
.bodycopy-s{color: var(--color-text-light);
a{
color: var(--color-accent);
}
}
}
}
.legal__checkbox{
.checkbox-label{
background-color: var(--color-white);
margin-right: 10px;
margin-left: -12px;
width: 24px;
}
}
.recaptcha{
margin-top: 0;
align-items: flex-start;
@media only screen and (max-width: 320px) {
margin-left:-10px;
}
}
.legal{
margin-top: 20px;
a{color: var(--color-accent-dark); text-decoration:underline;}
}
.landing-legal-form{
margin-bottom: 20px;
a{color: var(--color-accent-dark); text-decoration:underline;}
}
.form-btn{
margin-top: 20px;
text-align: left;
}
}
.wrap-img{height:550px;margin-top:0;width: 100%;top:0;overflow: hidden;display: flex; align-items:flex-start;justify-content: center;
@media (--viewport-lg-min) {
height:510px;
margin-top:50px;
}
@media (--viewport-md-max) {
height:550px;
margin-top:50px;
}
@media (--viewport-sm-max) {
height:550px;
margin-top:0;
}
@media (--viewport-ms-max) {
display:none;
}
img{width: 100%;}
&.visible-all-views{
@media (--viewport-ms-max) {
display:block;
height:auto;
margin-bottom:-8px;
}
}
}
.content{
/*width: calc(100% + 30px); Lo quito porque no entiendo que aporta y genera una diferencia en fullwidth que hace que no se centre bien (CA)*/
position: relative; margin-top: -450px;
@media (--viewport-lg-min) {
margin-top:-410px;
}
@media (--viewport-md-max) {
margin-top:-450px;
}
@media (--viewport-sm-max) {
margin-top:-450px;
}
@media (--viewport-ms-max) {
margin-top:0;
}
&.visible-all-views{
@media (--viewport-ms-max) {
margin-top:0;
}
}
/* Lo quito porque no entiendo que aporta y genera una diferencia en fullwidth que hace que no se centre bien (CA)
@media (--viewport-xs-max) {
width: calc(100% + 20px);
}
*/
}
&.opening {
.content{
/*margin-top: -450px;
@media (--viewport-lg-min) {
margin-top:-410px;
}
@media (--viewport-md-max) {
margin-top:-450px;
}
@media (--viewport-sm-max) {
margin-top:-450px;
}
&.visible-all-views{
@media (--viewport-ms-max) {
margin-top:0;
}
}*/
}
.wrap-img{
margin-top: 0;
}
}
&.under-header {
margin-top: 100px;
.content{
@media (--viewport-ms-max) {
margin-top:0;
}
}
}
.splitter{
.container{
margin: 0;
padding: 0;
.splitter__wrapper{
margin: 0;
padding: 0;
background: none;
}
}
}
}
Variantes: Default, Opening, Under Header, Image visible in all views, Accent BG, Accent Dark BG, Reversed, Without tooltip labels, Wide. Se puede configurar el src de la imagen.