The Dc-Dealcards Component

Description

Dealcards

The Dealcards component displays a list of any number of special offers in a particular category. These are usually highly discounted and are created by trading through the Deals Adminpanel.

Technical documentation

Here you can read the technical documentation

Screenshots

The desktop view of dc-dealcards.

The mobile view of dc-dealcards.

Meta

Maintainer	berlin-team-aventoms@tui.info
Locales	de-DE

Usage

Add the following script tag (or something similar) to your web page to have the component load. Note: This is required only once per webpage, even when you embed multiple instances of the component.

<script src="https://api.tui.com/ml/dc-dealcards/ui/" async defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the component to show. You can create multiple instances of the component. Remember to replace VALUE with actual valid values for the given attribute.

<div class="tui-component tui-component-tui-component-dc-dealcards"
	data-class="VALUE"
	data-lang="VALUE"
	data-currency="VALUE"
	data-brand="VALUE"
	data-tenant="VALUE"
	data-categoryId="VALUE">
</div>

Examples

• This is an example for a Dealcards integration for a special category

  <div class="tui-component tui-component-tui-component-dc-dealcards"
  	data-lang="de-DE"
  	data-currency="EUR"
  	data-brand="tui"
  	data-tenant="TUICOM"
  	data-categoryId="4e94a950-7644-11e9-b125-6b8c257f090d">
  </div>
  

ATTENTION: This is a legacy component. The tag name must be set as class name (as in the example above), and attributes must be prefixed with data-.

Read more about using components ›

Attributes

This component can be configured with the following attributes:

Name	Description	Allowed Values	Default	Required
class	The Cottonball need the document tag classes.	tui-component		yes
scope	With the scope attribute you can use the component more than once on the same page if you want that.	yourScopeName		no
lang	Set the language of the component	de-DE		yes
currency	You can change the currency symbol of the deals	EUR, CHF		yes
brand	changes the look of the deals	tui		yes
tenant	the tanant has effect of the behavior of the CTA. e.g. irisplus will send an event with dealdata instead of linking to PT4	tuicom, tuiat, tuich, irisplus		yes
categoryId	uuid, defines which deals will be displayed. you can get the uuid from the adminpanel	uuid from adminpanel		yes
filterItems	Indicates which filters affects the deals. You can use more than one in a comma separated string. (To display the filters, you need another component (tui-component-filter).	searchScope, destination, boardType, recommendation, price, category		no

Events