Squarespace

Sinusuportahan ng Squarespace ang custom HTML at JavaScript, ibig sabihin maaari mong i-embed ang anumang Wink web component nang direkta sa iyong site nang walang plugin. Ipinapakita ng gabay na ito kung paano i-load ang Wink scripts sa buong site at pagkatapos ay ilagay ang mga component sa mga indibidwal na pahina.

I-load ang Wink scripts sa buong site

Ang pagdagdag ng mga script sa global footer at header ng iyong site ay nangangahulugang available ang Wink sa bawat pahina nang hindi inuulit ang setup.

Sa Squarespace editor, pumunta sa Settings → Advanced → Code Injection.

Sa Header field, idagdag ang stylesheet:

<link rel="stylesheet" href="https://elements.wink.travel/styles.css">

Sa Footer field, idagdag ang script at application loader (palitan ang YOUR_CLIENT_ID ng iyong Wink Client ID):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

I-click ang Save.

Magdagdag ng component sa isang pahina

Kapag na-load na ang mga script globally, maaari kang maglagay ng anumang Wink component sa anumang pahina gamit ang Code Block.

Buksan ang pahina na nais mong i-edit.
I-click ang Edit at magdagdag ng bagong Code block kung saan mo nais lumabas ang component.

I-paste ang component HTML, halimbawa isang content loader:

<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>

I-click ang Apply pagkatapos ay Save.

Mga available na component

Component	HTML tag	Layunin
Content loader	`<wink-content-loader>`	Ipakita ang mga hotel card, grids, mapa
Lookup	`<wink-lookup>`	Search bar para sa mga destinasyon
Search button	`<wink-search-button>`	Buksan ang itinerary picker
Account button	`<wink-account-button>`	Sign in / user menu
Itinerary button	`<wink-itinerary-button>`	Ipakita ang kasalukuyang itinerary
Itinerary picker	`<wink-itinerary-picker>`	Buong itinerary form
Shopping cart	`<wink-shopping-cart-button>`	Cart summary button

Tingnan ang Web Components para sa buong attribute reference ng bawat component.