Housing
- Introduction Setup Price Image gallery Detail request section Social Collapsibles/Accordion Mortgage calculator Properties sold nearby User analytics

websites

Housing

Introduction

This sample showcases how to build a housing page in AMP HTML. Explore how to use amp components, like amp-carousel, form and amp-list to create a housing page.

Setup

We use amp-carousel to show house images.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

We use amp-accordion to hide and show additional data about an house product.

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

We use amp-list to show a list of properties.

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

We use amp-mustache as a format template for amp-list.

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

We use amp-social-share for adding platform sharing buttons.

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

We use amp-iframe to embed a map of the house location.

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

We use amp-form to implement a mortgage calculator.

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

We use amp-fit-text to fit the title of the house page to the page.

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

We use amp-analytics to track page users.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Price

amp-fit-text can be used to fit the text to the available space. It works well for titles that vary not too much in length.

Cosy House in Central London

£430,000

London SW1A 1AA

<h1>
  <amp-fit-text class="price-heading" width="300" height="45" layout="responsive" max-font-size="45">
          Cosy House in Central London
  </amp-fit-text>
</h1>
<div class="price-description">£430,000</div>
<p class="housing-description">London SW1A 1AA</p>

Image gallery

The amp-carousel works very well for housing image galleries. Learn more about amp-carousel here.

<amp-carousel class="image-gallery" width="512" height="384" layout="responsive" type="slides">
    <amp-img src="/static/samples/img/buckingham_palace_building_1280x960.jpg" layout="fill" alt="Buckingham Palace" attribution="https://pixabay.com"></amp-img>
    <amp-img src="/static/samples/img/buckingham_palace_entrance_1280x853.jpg" layout="fill" alt="Buckingham Palace entrance" attribution="https://pixabay.com"></amp-img>
</amp-carousel>

Detail request section

These buttons are used for requesting details on the property.

Do you like this property?

Call agent Email agent

<div class="contact-section">
    <div> Do you like this property?</div>
    <div class="contact">
        <a href="tel:012 3456789">Call agent</a>
        <a href="mailto:someone@example.com">Email agent</a>
    </div>
</div>

The Social Share extension provides a common interface for share buttons. Learn more about amp-social-share here.

<p class="social-share">
    <amp-social-share type="twitter" width="60" height="44"></amp-social-share>
    <amp-social-share type="facebook" width="60" height="44" data-attribution="254325784911610"> </amp-social-share>
    <amp-social-share type="gplus" width="60" height="44"></amp-social-share>
    <amp-social-share type="email" width="60" height="44"></amp-social-share>
    <amp-social-share type="pinterest" width="66" height="44"></amp-social-share>
</p>

Collapsibles/Accordion

Use amp-accordion to hide and show additional data about your product. Learn more about amp-accordion here. Embedding Google Maps is possible via the Google Maps Embed API, see here for a sample.

Description

Ideally located near tube station
Open plan kitchen
Bicycle storage, visitors parking, communal gardens and roof terraces

View on map

Floorplan

<amp-accordion class="additional-data">
  <section>
    <h2>Description</h2>
    <ul class="description">
      <li>Ideally located near tube station</li>
      <li>Open plan kitchen</li>
      <li>Bicycle storage, visitors parking, communal gardens and roof terraces</li>
    </ul>
  </section>
  <section>
    <h2>View on map</h2>
    <amp-iframe title="Embedded Google map" width="600" height="400" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848&q=London SW1A 1AA">
    </amp-iframe>
  </section>
  <section>
    <h2>Floorplan</h2>
    <amp-img src="/static/samples/img/floorplan_518x340.jpg" width="518" height="340"></amp-img>
  </section>
</amp-accordion>

Mortgage calculator

Use amp-form to implement a mortgage calculator. Learn more about amp-form here.

Mortgage Calculator

<h2>Mortgage Calculator</h2>
<form method="GET" action="calculate-mortgage" action-xhr="calculate-mortgage-xhr" target="_top">
  <div>
    <label>
        <input type="number" name="price" maxlength="10" value="2000000" required>
      Price
    </label>
  </div>
  <div>
    <label>
      <input type="number" name="deposit" maxlength="10" value="100000" required>
      Deposit
    </label>
  </div>
  <div>
    <label>
        <input type="number" name="annual_interest" maxlength="10" value="2.5" step="0.01" required>
      Annual interest
    </label>
  </div>
  <div>
    <label>
        <input type="number" name="repayment_period" value="25" required>
      Repayment period (years)
    </label>
  </div>
  <div>
    <input type="submit" value="Calculate">
  </div>
  <div submit-success>
    <template type="amp-mustache">
      Monthly repayment {{monthly_repayment}}
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error! You entered some incorrect details {{err}}
    </template>
  </div>
</form>

Properties sold nearby

Use amp-list to show a list of properties sold nearby. Learn more about amp-list here

Properties sold nearby

<h2>Properties sold nearby</h2>
<amp-list width="auto" height="150" layout="fixed-height" src="/static/samples/json/other_properties.json" binding="no">
  <template type="amp-mustache">
    <a href="#" class="ampstart-card related m1">
      <amp-img width="122" height="100" src="https://ampbyexample.com{{src}}" alt="{{alt}}" attribution="{{attribution}}"></amp-img>
            <p>{{desc}}</p>
            <p>{{address}}</p>
            <p class="price-other">{{price}}</p>
    </a>
  </template>
  <div overflow role="button" aria-label="Show more" class="list-overflow">
    Show more
  </div>
</amp-list>

User analytics

Analytics must be configured in the body. Here we use Google Analytics to track pageviews.

<amp-analytics type="googleanalytics">
  <script type="application/json">
    {
        "vars": {
            "account": "UA-73836974-1"
        },
        "triggers": {
            "default pageview": {
                "on": "visible",
                "request": "pageview",
                "vars": {
                    "title": "Housing"
                }
            }
        }
    }
  </script>
</amp-analytics>

需要进一步说明？

如果此页面上的说明未能涵盖您的所有问题，欢迎与其他 AMP 用户取得联系，讨论您的具体用例。

前往 Stack Overflow

一项无法解释的功能？

AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。

编辑 GitHub 上的示例

Written by @aghassemi