Detalhes do Integrador

Exibir detalhes do veículo do integrador

HTML

<amp-list height="700"
		  layout="fixed-height"
		  src="/api/vehicle/integrator/AaTsNsmP4lEOXtTorEbiiX3w/QUERY_PARAM(id)"
		  single-item
		  >
	<template type="amp-mustache">
		{{#vehicle}}
		<h1>{{title}}</h1>
		<hr />
		<div class="row">
			<div class="col-lg-6">
				<p>{{description}}</p>
				<h3>Galeria</h3>
				<hr />
				{{#gallery}}
				<amp-img src="https://integrador.reweb.com.br/upload/gallery/{{ file}}" width="150" height="100" style="cursor: pointer;" lightbox></amp-img>
				{{/gallery}}
				<h3>Opcionais</h3>
				<hr />
				<ul>
					{{#options}}
					<li>{{ title}}</li>
					{{/options}}
				</ul>
			</div>
			<div class="col-lg-3">
				<span class="price">
					PREÇO: 
					{{ price}}
				</span>
				<div class="row">
					<span class="col-lg-6">
						<strong>Marca:</strong>
					</span>
					<span class="col-lg-6">
						{{ brand}}
					</span>
				</div>
				<div class="row">
					<span class="col-lg-6">
						<strong>Modelo:</strong>
					</span>
					<span class="col-lg-6">
						{{ brand_model}}
					</span>
				</div>
				<div class="row">
					<span class="col-lg-6">
						<strong>Ano:</strong>
					</span>
					<span class="col-lg-6">
						{{ year_model}}
					</span>
				</div>
				<div class="row">
					<span class="col-lg-6">
						<strong>Quilometragem:</strong>
					</span>
					<span class="col-lg-6">
						{{ odometer}}
					</span>
				</div>
				<div class="row">
					<span class="col-lg-6">
						<strong>Combustível:</strong>
					</span>
					<span class="col-lg-6">
						{{ fuel}}
					</span>
				</div>
				<div class="row">
					<span class="col-lg-6">
						<strong>Portas:</strong>
					</span>
					<span class="col-lg-6">
						{{ door}}
					</span>
				</div>
				<div class="row">
					<span class="col-lg-6">
						<strong>Cor:</strong>
					</span>
					<span class="col-lg-6">
						{{ color}}
					</span>
				</div>
				<div class="row">
					<span class="col-lg-6">
						<strong>Câmbio:</strong>
					</span>
					<span class="col-lg-6">
						{{ transmission}}
					</span>
				</div>
			</div>
			<div class="col-lg-3">
				<form method="post" class="row vehicle-detail-form" action-xhr="https://api.amp.reweb.io/api/lead/register" target="_top">
					<input type="hidden" name="meio_captacao" value="SITE_LP_AMP_COTACAO_USADOS" />						
					<input type="hidden" name="utm_source" value="QUERY_PARAM(utm_source)" data-amp-replace="QUERY_PARAM">
					<input type="hidden" name="midia" value="QUERY_PARAM(m)" data-amp-replace="QUERY_PARAM">
					<input type="hidden" name="referencia_externa" value="EXTERNAL_REFERRER" data-amp-replace="EXTERNAL_REFERRER">
					<input type="hidden" name="referencia_documento" value="DOCUMENT_REFERRER" data-amp-replace="DOCUMENT_REFERRER">						
					<div class="col-lg-12">
						<h3>Cotação:</h3>
						<hr />
						<div submitting>
							<template type="amp-mustache">
								<span class="col-lg-12 alert alert-info">
									Enviando formulário...
								</span>
							</template>
						</div>
						<div submit-success>
							<template type="amp-mustache">
								<span class="col-lg-12 alert alert-success">
									{{ message}}
								</span>
							</template>
						</div>
						<div submit-error>
							<template type="amp-mustache">
								<span class="col-lg-12 alert alert-danger">
									{{ message}}
								</span>
							</template>
						</div>	
						<div class="form-group">
							<label for="nome">Nome</label>
							<input type="text" class="form-control"name="nome" id="nome">
						</div>
						<div class="form-group">
							<label for="email">Email</label>
							<input type="text" class="form-control" name="email" id="email">
						</div>
						<div class="form-group">
							<label for="telefone">Telefone</label>
							<input type="text" class="form-control" name="telefone" id="telefone">
						</div>
						<div class="form-group">
							<label for="modelo">Modelo</label>
							<input type="text" class="form-control" name="modelo" id="modelo" value="{{ title}}" readonly>
						</div>
						<button type="submit" class="btn btn-primary">Enviar</button>								
					</div>
				</form>						
			</div>
		</div>
		{{/vehicle}}
	</template>						
</amp-list>

COMPONENTS

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>	
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

STYLES

<style amp-custom>
    .lightbox {
		background: rgba(0,0,0,0.8);
		width: 100%;
		height: 100%;
		position: absolute;
		display: flex;
		z-index:99999999999;
		overflow: auto;
    }
    .lightbox .btn-close {
		border-radius: 6px 6px 0 0;
	}
    .lightbox h1 {
		margin:0;
	}
    .lightbox .content {
		width:100%;
		background: #fff;
		padding: 50px;
		border-radius: 10px 0 10px 10px;
		margin-bottom: 50px;
    }	
	.price {
		display: block;
		padding: 15px;
		background-color: #000;
		color: #fff;
		font-weight: bold;
		margin-bottom: 15px;
	}
	.vehicle-detail-form {
		background-color: #f4f4f4;
		padding-right: 15px;
		padding-bottom: 15px;	
	}
	.vehicle-detail-form h3 {
		text-transform: uppercase;
		text-align: center;
		font-weight: bold;
	}	
</style>

LIVE DEMO