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
{{title}}
{{description}}
Galeria
{{#gallery}}
Opcionais
-
{{#options}}
- {{ title}} {{/options}}
PREÇO:
{{ price}}
Marca:
{{ brand}}
Modelo:
{{ brand_model}}
Ano:
{{ year_model}}
Quilometragem:
{{ odometer}}
Combustível:
{{ fuel}}
Portas:
{{ door}}
Cor:
{{ color}}
Câmbio:
{{ transmission}}