Configuring multiple RF licences

The price of RF image files is by default determined by the size of the file that a user wants to buy. In XS version 29, it is possible to create multiple RF licences. This article explains how you can configure this option.

Edit the licence names

First, you need to change the names of the licences that you want to make available. The names are defined in the constants file constants-rf.txt. Go to Site configuration and click on Constants in the sidebar. Find the file constants-rf.txt in the dropdown box and click on its name. The file has the following constants:

pricelabel0=Editorial online
pricelabel1=Editorial print
pricelabel2=Commercial online
pricelabel3=Commercial print
pricelabel4=Personal use

The values for the above labels are just examples. You can use 5 different licences for which you can configure different prices. If you want to use fewer options, then enter a – as the value. For example, if you don’t want to use the 5th one then use
pricelabel4=-
The value – will automatically hide the licence on the client facing pages. You must also check the box above the columns that you want to use.

Editorial and Commercial licences
The fist two columns are reserved for Editorial type licences, and the second two columns are reserved for Commercial type licenses. For example Editorial Print, Editorial Online, Commercial Print and Commercial Online. The fifth column is reserved for a generic/other licence. Note that this is only relevant if you want to automatically make licences unavailable if a file is only available for Editorial or Commercial use.

When you are done, click Save local copy.

If you website uses multiple locales, then make sure to edit the constants files for each locale.

Entering prices

In the administrator dashboard, click on Price calculator. Then click File collections in the sidebar. Either create a new RF collection, or edit an existing one. In the properties dialog, you’ll see 5 price columns for each file size.

The labels above the price columns are the names that you have entered in your constants files. Hover over the column name to display the full name. You can now enter prices for each of the licences. On the client facing pages, the user will be able to select both a licence and a file size. The combination of both determines the price. When you are done click Save at the bottom of the dialog. If you have other RF collections, then edit the prices for those as well before you continue.

Enabling multiple licences on the client facing pages

Once you are done with the actions described in the previous paragraphs (all options must have prices), you can enable the function. Go to Site configuration and click on Metadata display in the sidebar. Then open the section Collection file size settings. Check the box Use multiple pricing option and click Save at the bottom.

Using custom templates

If you want to change how the “select licence” options appear on the client facing pages, then you can create custom page fragments. This requires skills in HTML, Javascript/JQuery and CSS. There are custom template options for the version used on preview pages (also the modal preview) and for the cart.

Here’s how to customise the template used for previews. Go to the code editor and in the dropdown at the top, select “RF multi licence head (66)” in the “preview” group. Click on Load example and select the first file in the dialog. Then click Use code. The default code – shown below – will show in the editor. This fragment is inserted into a table. It has two rows and the Javascript that handles when a different radiobutton is selected (to choose a different licence option). If you understand the Javascript, then you can change the code as required. You don’t have to use radiobuttons but you do need to make sure that your script updates the attribute “priceoption” when a user selects a different option.
Note that the HTML uses classes that will automatically hide any of the licence options that you don’t want to use (the ones with a – value in the constants file as explained above).

Preview pages and modal previews

<!-- custom version for previews -->
<tr>
	<td colspan="2" class="selectlicencelabel rflicence">
		<p class="fieldlabel"><?xs constant('cSelectRFLicence','rf') ?></p>
	</td>
</tr>
<tr>
	<td colspan="2" class="selectlicencebuttons rflicence">
		<div class="rfpn0 rfpl<?xs constant('pricelabel0','rf') ?>"><input type="radio" name="rfpn" value="0"> <span class="rfpn0"><?xs constant('pricelabel0','rf') ?></span>/div>
		<div class="rfpn1 rfpl<?xs constant('pricelabel1','rf') ?>"><input type="radio" name="rfpn" value="1"> <span class="rfpn1"><?xs constant('pricelabel1','rf') ?></span></div>
		<div class="rfpn2 rfpl<?xs constant('pricelabel2','rf') ?>"><input type="radio" name="rfpn" value="2"> <span class="rfpn2"><?xs constant('pricelabel2','rf') ?></span></div>
		<div class="rfpn3 rfpl<?xs constant('pricelabel3','rf') ?>"><input type="radio" name="rfpn" value="3"> <span class="rfpn3"><?xs constant('pricelabel3','rf') ?></span></div>
		<div class="rfpn4 rfpl<?xs constant('pricelabel4','rf') ?>"><input type="radio" name="rfpn" value="4"> <span class="rfpn4"><?xs constant('pricelabel4','rf') ?></span></div>

<script language="JavaScript">

// check if file is available for editorial/commercial use and disable radio button if necessary
var x=previewcfg.content.media[0];
if((x.ce+x.ed)!==0) {
  if(x.ce===0) {
    $(".licenceradio.rfmcommercial").attr("disabled",true).attr("checked",false);
  }
  if(x.ed===0) {
    $(".licenceradio.rfmeditorial").attr("disabled",true).attr("checked",false);
  }
};

// attach click handler to change prices based on selected option
$("#rfsizetable").find(".licenceradio").unbind("change").change(function(){
  var a1=parseInt($(":radio[name=licenceradio1][checked]").val());
  var a2=parseInt($(":radio[name=licenceradio2][checked]").val());
  var x=0;
  switch(a1) {
  case 0: x=(a2===0?0:1); break;
  case 1: x=(a2===0?2:3); break;
  }
  $("#rfsizetable .pricebox.price"+x).show();
  $("#rfsizetable .pricebox").not(".pricebox.price"+x).hide();
  $("#rfsizetable .addcartbutton").attr("priceoption",x);

}); 

// set default option
if((x.ce+x.ed)!==0) {
  if(x.ce===0) {
    $(".licenceradio.rfmeditorial").attr("checked",true);
  }
  if(x.ed===0) {
    $(".licenceradio.rfmcommercial").attr("checked",true);
  }
};

</script>

	</td>
</tr>

To change the code fragment used on the cart page, select file 67 in the group “Cart page fragments”. The HTML and script have xs tags to show the selected option and price.
The XS Javascript handles changes (i.e. when a different option is selected). It also cartpage.cartpricing() which will display updated prices at the bottom of the cart.
However, if you want to use a custom fragment for the cart page, then you will have to add a Javascript object to the client script in the code editor.

Cart page

<!-- custom version for cart -->
<tr>
	<td colspan="3">
		<p class="fieldlabel"><?xs constant('cSelectRFLicence','rf') ?></p>
	</td>
</tr>
<tr>
	<td colspan="3">
		<div class="rfpn0"><input type="radio" name="<?xs orderdetail('guid') ?>_rfpn" value="0" <?xs orderdetail('priceoption',{0:checked}) ?>>
			<span class="rfpn0"><?xs constant('pricelabel0','rf') ?></span></div>
		<div class="rfpn1 rfpl<?xs constant('pricelabel1','rf') ?>"><input type="radio" name="<?xs orderdetail('guid') ?>_rfpn" value="1"  <?xs orderdetail('priceoption',{1:checked}) ?>>
			<span class="rfpn1"><?xs constant('pricelabel1','rf') ?></span></div>
		<div class="rfpn2 rfpl<?xs constant('pricelabel2','rf') ?>"><input type="radio" name="<?xs orderdetail('guid') ?>_rfpn" value="2"  <?xs orderdetail('priceoption',{2:checked}) ?>>
			<span class="rfpn2"><?xs constant('pricelabel2','rf') ?></span></div>
		<div class="rfpn3 rfpl<?xs constant('pricelabel3','rf') ?>"><input type="radio" name="<?xs orderdetail('guid') ?>_rfpn" value="3"  <?xs orderdetail('priceoption',{3:checked}) ?>>
			<span class="rfpn3"><?xs constant('pricelabel3','rf') ?></span></div>
		<div class="rfpn4 rfpl<?xs constant('pricelabel4','rf') ?>"><input type="radio" name="<?xs orderdetail('guid') ?>_rfpn" value="4"  <?xs orderdetail('priceoption',{4:checked}) ?>>
			<span class="rfpn4"><?xs constant('pricelabel4','rf') ?></span></div>
	</td>
</tr>
<tr>
	<td colspan="3" style="padding-top:10px">
		<p class="fieldlabel"><?xs constant('cSelectFileSize','rf') ?></p>
	</td>
</tr>

And an example of the script that you must add to the code editor:

var xscart = {
  // called before executing the default xs cart page script (remove if not used) 
  beforecart: function() {
  },

  // called after executing the default xs cart page script (remove if not used)
  aftercart: function() {
  },
    
  // called for every order detail that has a RF file (and multiple RF licenses are configured)
  rfmultiorderdetail: function(box,data,specs) {
    if(specs.edco===1) { // apply ed/ce restrictions
      if((data.ed+data.ce)!==0) {
        if(data.ed===0) box.find(".rfmeditorial").attr("checked",false).attr("disabled",true);
        if(data.ce===0) box.find(".rfmcommercial").attr("checked",false).attr("disabled",true);
      }
   }

   box.find("input:radio").unbind("change").change(function(){
     var g=$(this).attr("name").split("_")[0];
     var x1=parseInt($(":radio[name="+g+"_rfpn_1][checked]").val());
     var x2=parseInt($(":radio[name="+g+"_rfpn_2][checked]").val());
     var v=0;
     switch(x1) {
     case 0: 
       switch(x2) {
       case 2: v=0; break;    
       case 3: v=1; break;    
       };
       break;
     case 1: 
       switch(x2) {
       case 2: v=2; break;    
       case 3: v=3; break;    
       }   
       break;
     }
     $(":radio[name="+g+"_rfpn][value="+v+"]").prop("checked",true);
     var row=$("#orderitemcontainer_"+g);
     row.find(".pricebox.price"+v).show();
     row.find(".pricebox").not(".pricebox.price"+v).hide();

     cartpage.cartpricing();
   });
 }
};

Configuring multiple RF licences

Edit the licence names

Entering prices

Enabling multiple licences on the client facing pages

Using custom templates

Share this

Related Posts

Problems with sending or receiving website e-mail

Working with synced sub websites

Configuring Stripe for online payments

Responsive images slideshow with WebP support

WebP support

Configure Google Workspace for website mail relay