Implementation of Viabill Pricetags on websites

Du er her:
Anslået læsetid: 1 min

To get viabill pricetags on your webshop, you need to insert a few code snippets.

  • A Javascript inserted on the webpage.
  • DIV elements used as a container for the actual pricetag (typically placed below the price of the item).

Please take a look at the code example here.

TIP You can open the file with notepad, if you do not have an editor for viewing source code.

In the code there find the following line of code:

$request['token'] = "PutYourMerchantTokenHere";

Replace the value with your merchant token found under Integration settings in our admin portal.

Now when you run the code it will make a call to our webservice endpoint and retrieve the appropriate javascript in base64 and then decode it and strip the quotes and then execute the javascript on the page.

The javascript from the webservice call that when decoded will be executed on the page from which the call is made, will look like this, except SHOPSPECIFIC is replaced with your specific id at viabill.

<⁢⁢script> (function(){ var o=document.createElement('script'); o.type='text/javascript'; o.async=true; o.src='https://pricetag.viabill.com/script/SHOPSPECIFIC'; var s=document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(o,s); })(); ⁢</script>

To verify that it work you can try and create a pricetag DIV element explained further down.

The pricetag DIV element contains the following attributes:

Attribute Value Description
class viabill-pricetag The class which javascript looks for
data-view
  • product
  • list
  • basket
  • payment
Indicate pricetag type
data-price 10,00 , 10.00 Indicate price with a “,” or a “.”
data-dynamic-price Query selector A Query selector for the element that contains the price of the product.
data-dynamic-price-triggers Query selector If the price is variable then it is possible to trigger an vb-update-price event.

If the “data-price” attribute is set the dynamic attributes are ignored.

When the script is enabled it will review the page to look for pricetag DIV elements. DIV elements tells the javascript where to insert a pricetag and how it should look. A pricetag typically looks like this:

<div class='viabill-pricetag' data-view='product' data-price='42'></div>

A pricetag with dynamic attributes could look like this:

<div class='viabill-pricetag' data-view="list" data-dynamic-price=".productpreview|.price" data-dynamic-price-triggers="#webshop_content .filters input"></div>

The two DIV elements above will yield a pricetag which look like this:

viabill_default_list_pricetag.PNG

To get one of the below pricetags, change the data-view attribute on the DIV element.

viabill_default_pricetags_all.PNG