Content Comparison

...

The integrated shopping cart works with websockets and iframes. The Add-Product widget sends a request to the AffiliCon system. AffiliCon then informs the Cart widget of the change. The Cart Widget then asks the AffiliCon API for the new values.

Technical Integration

The shopping cart is integrated by iframes. These can be positioned anywhere in the shop or in the product landing page.

Add-Product Widget

Use the following code to integrate:

<iframe style="width: 200px; height: 100px;" src="https://secure.affilibank.de/widget/cart/add?productId={Produkt-Id}&countryId={Country-Id}&customStyles={Custom-Styles}" width="400" height="250" frameborder="0"></iframe>

Following placeholders need to be substituted:

...

{Produkt-Id}

...

Product id is shown in product list of your vendor account.

...

{Country-Id}

...

The language to translate the add-product widget into.

...

{Custom-Styles}

...

Cart Widget

Use the following code to integrate. Use the styling attributes bottom: 0px; right: 0px; to determine the position of the widget.

<iframe id="cartWidget" style="position: fixed; z-index: 9999; bottom: 0px; right: 0px;" src="https://secure.affilibank.de/widget/cart?countryId={Country-Id}&vendor={Vendor}&formConfig={Form-Configuration}&customStyles={Custom-Styles}" frameborder="0"></iframe>

Following placeholders need to be substituted:

...

{Vendor}

...

The name / id of the vendor on the platform

...

{Country-Id}

...

The country id in this case determines the country for the delivery address. The value added tax is also initially calculated using this parameter. Can be changed again in the order form

...

{Form-Configuration}

...

If you want to assign a configuration of an existing product to the order form in the checkout, enter the product ID of the corresponding product for the formConfig parameter.

...

{Custom-Styles}

...

To prevent the Cart widget from covering the target page with a transparent element in the folded-in state, a Javascript must be installed in the target page.

<script src="https://secure.affilibank.de/_files/js/cart_widget.js"></script>

Custom Styles

In order to ensure that vendors have the opportunity to define custom styles for specific elements, it is possible to specify custom styles in the URL of the iframe. At the moment the following element can be styled:

...

product-name

...

product-price

...

add-to-cart-button

...

buy-now-button

The mapping of the element keys to the elements is illustrated in the following diagrams:

Image RemovedImage Removed

The custom styles should be specified in the JSON-format, for example as follows:

{
  "buy-now-button": {
    "background-color": "red"
  },
  "add-to-cart-button": {
    "color": "green",
    "background-color": "yellow"
  },
  "product-name": {
    "color": "blue"
  },
  "product-price": {
    "color": "magenta"
  }
}

Some of the possible properties are:

...

color

...

background-color

...

font-size

...

In this fashion you can specify any CSS property of the element.

In order to pass these properties to the iframe, they have to be serialized (URL-encoded). For example, one can use the following tool: http://www.url-encode-decode.com/. On the left side one specifies the custom styles as in the code block above, then clicks "Encode URL", and then one gets a serialized string on the right hand side. Then one has to copy the string and pass it as the customStyles parameter to the iframe (see break-down of the iframe URL above for reference).

The resulting URL could the look somewhat like this:

...

...

See Cart Widget technical integration.