Versions Compared

Version Old Version 2 New Version 3
Changes made by

Philip Weiger (Unlicensed)

Philip Weiger (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
  1. Open the page where you want to integrate the Cart Widget in your Wordpress backend.

  2. Switch to the HTML editor.

  3. Add the following stylesheet and script at the top:

    <link rel="stylesheet" href="https://secure.affilibank.de/apps/widget/dist/affilicon.cart-widget.min.css">
    <script src="https://secure.affilibank.de/apps/widget/dist/affilicon.cart-widget.min.js"></script>


  4. Directly below add the script to configure your widget. 

    In our example we only used 'countryId' and 'vendor'.
    You can use more options, for example 'cartMaxWidth' and more. (You can find all configuration options here: Cart Widget technical integration.)
    <script>
     window.affilicon = {
     countryId: 'de',
     vendor: 'sebi'
     }
    </script>


  5. Add an image of your product and a description of your product with regular HTML.

    <img class="alignnone wp-image-14336 size-thumbnail" src="https://www.affilicon.net/wp-content/uploads/2017/03/umrella-dots-15833_640-150x150.jpg" alt="Pinker Regenschirm mit Punkten" width="150" height="150" />
    <strong>Pinker Regenschirm (Beispiel-Produkt)</strong>
    <p style="text-align: center;">14,90 €</p>

    Image Added


  6. Combine your product with the "Add to cart"-Button. It is very important that you use the right product ID. Otherwise clicking the button adds the wrong product or no product at all to the shopping cart.
    Your button ID is defined in your affilicon account. In our example the price on the website is '14,90 €'. Always keep in mind: the product price you configure in your account and the product price on your website has to be equal.
    The price you have defined in your account will be shown in the shopping cart and will be charged.

    <add-to-cart-button product-id="15558"></add-to-cart-button>


  7. Repeat step 5 and 6 as often as you need, to add your products to your website.

  8. Add the cart container at the bottom of your source code:

    <cart-container></cart-container>

    Image Added