Будет ли код, работающий в шаблоне AMP Start, также работать из коробки в amp-story?Какие изменения необходимы?
Например, упростит ли эта Форма поиска, используемая в Adventures, шаблон AMP Start, работу в amp-story?Если нет, то почему бы и нет?
AMP Start - Создание отзывчивых, молниеносных AMP-страниц с нашими шаблонами и компонентами
https://www.ampstart.com/templates
<!-- Search Form -->
<div class="travel-hero-search">
<label class="travel-input-icon travel-shadow flex col-12 relative rounded">
<input class="travel-input travel-input-big travel-input-clear border block col-12 rounded" list="locations" type="text" name="query" placeholder="Where would you like to go?" on="
change:AMP.setState({
fields_query: event.value,
fields_query_live: event.value,
fields_query_edited: query_query != event.value
});
input-debounced:AMP.setState({
fields_query_live: event.value
});
" value="" [value]="fields_query">
<amp-list layout="flex-item" src="/api/places?types=(regions)&types=(cities)&input=" [src]="'/api/places?types=(regions)&types=(cities)&input=' + fields_query_live">
<template type="amp-mustache">
<datalist id="locations">
{{#predictions}}
<option value="{{description}}">
{{/predictions}}
</option></datalist>
</template>
</amp-list>
<div class="travel-hero-search-dates flex my2 justify-around">
<label class="travel-date-input relative bold flex-auto" [class]="'travel-date-input relative bold flex-auto' + (fields_departure ? ' travel-date-input-touched' : '')">
<input class="block relative p0 z1" type="date" placeholder="yyyy-mm-dd" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="yyyy-mm-dd" name="departure" on="
change:AMP.setState({
fields_departure: true,
fields_departure_edited: true
})
">
<a href="travel-results.amp" class="ampstart-btn travel-input-big rounded center bold white block col-12" on="
tap:AMP.setState({
ui_reset: false,
ui_filterPane: false,
query_query: fields_query,
fields_query_edited: false,
query_departure: fields_departure,
fields_departure_edited: false,
query_return: fields_return,
fields_return_edited: false,
query_maxPrice: fields_maxPrice,
fields_maxPrice_edited: false,
query_city: fields_city,
fields_city_edited: false,
query_type: fields_type,
fields_type_edited: false,
query_sort: fields_sort,
fields_sort_edited: false,
})
">
Find Adventures & Tours
</a>
<!--/ Search Form -->