/**
* Gets information from the 'basketProductCodes' or 'affinityProductCodes' cookie.
* Used for dynamic teasers showing recommendations.
*/
o2.dynamicTeaser = function () {
var settings = {
containerTxtArea: 'div.txt-area',
headlineGroupVariantName: 'HeadlineGroup',
imageMedVariant: 'ImageMed',
tileAreaVariant: 'TileArea',
handy: 'myhandy',
tarif: 'card',
subsidy: 'subsidy',
device_id: 'device_id',
tariff_id: 'tariff_id',
blueM: '2272',
blueL: '2273',
tariffSpecialCondition1: 'bv=62000200',
blueSelect1: '2274',
blueSelect2: '2276',
tariffSpecialCondition2: 'voucher_code=minuten2012',
firstHeadlineText: 'Im Paket',
handyFirstHeadlineText: 'Bestseller',
tariffFirstHeadlineText: 'Bestseller',
maxTextHeight: 72,
maxTextLength: 15
};
var firstHeadlineTxtTmpl = '
{{html firstHeadlineText.subO2()}}
';
var headlineGroupTmpl = '{{if headline2Text}}{{html headline2Text.subO2()}}{{/if}}{{html hardwareTitle.subO2()}}{{if tariffTitle}}
+ {{html tariffTitle.subO2()}}{{/if}}
';
var shopApiUrl = window.location.protocol + '//' + window.location.host + '/api/shop';
/**
* tsrDynamicType - handy, tariff or bundle
* type - hardware or tariff
* targetGroup - privatkunden, studenten etc.
* portalId - articleId or tariffCode
* variantName - the variantName used by the shop API, for example HeadlineGroup
*/
var fillShopApiParams = function (tsrDynamicType, type, targetGroup, portalId, variantName) {
if (tsrDynamicType === 'handy' && variantName === 'ImageMed') {
// in case of handy teaser, render the TileArea instead of the ImageMed. The TileArea includes the disturber.
return {
type: type,
portalId: targetGroup + ':' + portalId,
variantName: 'TileArea'
};
} else {
return {
type: type,
portalId: targetGroup + ':' + portalId,
variantName: variantName
};
}
};
/**
* basketProducts - the 'basketProductCodes' cookie
* type - 'myhandy' or 'tarif'
*
*/
var splitCookieParams = function (basketProducts, type) {
//get the first parameter with value 'handy'
var regExprForType = new RegExp('p[\\d]t=' + type);
var resultHandyArray = basketProducts.match(regExprForType);
var resultTargetGrArray = basketProducts.match(/dtg=[\w]*/);
//select the right offer for 'tariff' and 'handy'
var arrElement;
if (resultHandyArray !== null && resultHandyArray.length > 0) {
var position = resultHandyArray[0].match(/\d/);
if (position !== null && position.length > 0) {
var regExpr = new RegExp('p' + position[0] + 'i=[\\d\\s\\|\]*');
var regExprForOfferName = new RegExp('p' + position[0] + '=[\\w-]*');
//p1i=4510 090173 00
//p1=privatkunden-o2-blue-all-in-s
var resultIdArray = basketProducts.match(regExpr);
var resultOfferNameArray = basketProducts.match(regExprForOfferName);
if (resultIdArray !== null && resultIdArray.length > 0) {
var split = resultIdArray[0].split('=');
var productId = split[1];
if (type === settings.handy) {
type = 'hardware';
}
if (type === settings.tarif) {
type = 'tariff';
}
arrElement = {pid: productId, ptype: type, targetGroup: '', offerName: ''};
if (resultOfferNameArray !== null && resultOfferNameArray.length > 0) {
var splitOfferName = resultOfferNameArray[0].split('=');
arrElement.offerName = splitOfferName[1];
}
if (resultTargetGrArray !== null && resultTargetGrArray.length > 0) {
var splitTargetGr = resultTargetGrArray[0].split('=');
arrElement.targetGroup = splitTargetGr[1];
}
}
}
}
return arrElement;
};
/**
* parses the cookie information in order to get the first valid handy or tariff or handy + tariff in the cart
*
* tsrDynamicType - handy, tariff or bundle
* cookieName - basketProductCodes or affinityProductCodes
*/
var parseCookie = function (tsrDynamicType, cookieName) {
var basketProducts;
if (cookieName === 'basketProductCodes') {
basketProducts = o2.base64Decode($.cookie('basketProductCodes'));
}
if (cookieName === 'affinityProductCodes') {
basketProducts = o2.base64Decode($.cookie('affinityProductCodes'));
}
// the result array has either one object (in case of a handy or a tariff teaser) or
// two objects (in case of a bundle teaser) - the first one contains information of the handy and the second one information of the tariff
var arr = [];
if (tsrDynamicType === 'handy') {
arr[0] = splitCookieParams(basketProducts, settings.handy);
} else if (tsrDynamicType === 'tariff') {
arr[0] = splitCookieParams(basketProducts, settings.tarif);
} else if (tsrDynamicType === 'bundle') {
arr[0] = splitCookieParams(basketProducts, settings.handy);
if (typeof arr[0] !== 'undefined') {
arr[1] = splitCookieParams(basketProducts, settings.tarif);
if (typeof arr[1] === 'undefined') {
arr = [];
}
} else {
arr = [];
}
//check for subsidy in case no handy+tariff match was found
if (arr.length === 0) {
arr[0] = splitCookieParams(basketProducts, settings.subsidy);
if (typeof arr[0] !== 'undefined' && arr[0].ptype === settings.subsidy) {
var subsidyTargetGr = '';
var resultTargetGrArray = basketProducts.match(/dtg=[\w]*/);
if (resultTargetGrArray !== null && resultTargetGrArray.length > 0) {
var splitTargetGr = resultTargetGrArray[0].split('=');
subsidyTargetGr = splitTargetGr[1];
}
// productId = '4511 050000 00|1900'
var splitSubsidy = arr[0].pid.split('|');
if (splitSubsidy.length === 2) {
var subsidyHandyId = splitSubsidy[0];
arr[0] = {
pid : subsidyHandyId,
ptype : 'hardware',
targetGroup : subsidyTargetGr
};
var subsidyTarifId = splitSubsidy[1];
arr[1] = {
pid : subsidyTarifId,
ptype : 'tariff',
targetGroup : subsidyTargetGr
};
}
}
}
}
//in case of handy or tariff teaser -> check if the result undefined is
if (typeof arr[0] === 'undefined') {
arr = [];
}
return arr;
};
/**
* tarifId - the tariff id, that is to be checked if it has some special conditions
*/
var tarifSpecialConditionCheck = function (tarifId) {
if (tarifId === settings.blueL || tarifId === settings.blueM) {
return '&' + settings.tariffSpecialCondition1;
} else if (tarifId === settings.blueSelect1 || tarifId === settings.blueSelect2) {
return '&' + settings.tariffSpecialCondition2;
} else {
return '';
}
};
/**
* dynamicTsrId - the dynamic Teaser ID
* tariffHeadline - the tariff HeadLine Text (optional)
* hardwareHeadline - the hardware HeadLine Text
*/
var cutTooLongText = function (dynamicTsrId, tariffHeadline, hardwareHeadline) {
var dynamicTeaser = $('div#' + dynamicTsrId + ' div.txt-area');
var hardwareTitleHeight = $('h3 > span:first', dynamicTeaser).height();
if (tariffHeadline.length > 0) {
var tariffLineHeight = $('h3 > span:last', dynamicTeaser).height();
if ((hardwareTitleHeight + tariffLineHeight >= settings.maxTextHeight)) {
dynamicTeaser.find('h3 span:last').html('+ ' + tariffHeadline.cutString(settings.maxTextLength).subO2());
}
} else {
if ((hardwareTitleHeight >= settings.maxTextHeight)) {
dynamicTeaser.find('h3 span:first').html(hardwareHeadline.cutString(settings.maxTextLength).subO2());
}
}
};
/**
* tsrDynamicType - the teaser type (handy, tariff or bundle)
* dynamicTsrId - the dynamic Teaser ID
* paramsForShopApiCallArr - parameters for shop API
*
*/
var loadHardwareImage = function (tsrDynamicType, dynamicTsrId, paramsForShopApiCallArr) {
var $imgTeaserDevice = 'div#' + dynamicTsrId + ' img.teaserDevice';
var $imgTeaserProduct = 'div#' + dynamicTsrId + ' img.teaserProduct';
if (tsrDynamicType !== 'tariff') {
$.ajax({
type : 'GET',
url : shopApiUrl,
data: fillShopApiParams(tsrDynamicType, paramsForShopApiCallArr.ptype, paramsForShopApiCallArr.targetGroup, paramsForShopApiCallArr.pid, settings.imageMedVariant),
success : function (hardwareImage) {
if (tsrDynamicType === 'bundle') {
if ($($imgTeaserDevice).length === 0) {
$('div#' + dynamicTsrId).prepend(hardwareImage).find('img:first').addClass("teaserDevice");
}
} else {
if ($($imgTeaserProduct).length === 0) {
$('div#' + dynamicTsrId).prepend(hardwareImage).find('img:first').addClass("teaserProduct");
}
}
}
});
} else {
if ($($imgTeaserProduct).length === 0) {
$('div#' + dynamicTsrId).prepend('').find('img:first').addClass("teaserProduct");
}
}
};
/**
* Renders the short description for handy or tariff teaser in width 6
* tsrDynamicType - the teaser type (handy, tariff or bundle)
* dynamicTsrId - the corresponding teaser id
* paramsForShopApiCallArr - parameters for shop API
*
*/
var renderShortDescription = function (tsrDynamicType, dynamicTsrId, paramsForShopApiCallArr) {
if ($('div#' + dynamicTsrId).parent('div').attr('class') === 'col6') {
$.ajax({
type : 'GET',
url : shopApiUrl,
data: fillShopApiParams(tsrDynamicType, paramsForShopApiCallArr[0].ptype, paramsForShopApiCallArr[0].targetGroup, paramsForShopApiCallArr[0].pid, 'ShortDescription'),
success : function (dataHandy) {
var shortDescription = dataHandy;
$('div#' + dynamicTsrId + ' div.txt-area h3').after('' + shortDescription + '
');
},
error: function () {
$.ajax({
type : 'GET',
url : shopApiUrl,
data: fillShopApiParams(tsrDynamicType, paramsForShopApiCallArr[0].ptype, 'privatkunden', paramsForShopApiCallArr[0].pid, 'ShortDescription'),
success : function (dataProduct) {
$('div#' + dynamicTsrId + ' div.txt-area h3').after('' + dataProduct + '
');
}
});
}
});
}
};
/**
* Handles the details link and the sum link for bundle teaser
* dynamicTsrId - the corresponding teaser id
* paramsForShopApiCallArr - parameters for shop API
*
*/
var handleLinksBundle = function (dynamicTsrId, paramsForShopApiCallArr) {
//handle special conditions by some tariffs
var specialConditionParam = tarifSpecialConditionCheck(paramsForShopApiCallArr[1].pid);
//handle details link and sum link
var tsrLinkParams = '?device_id=' + paramsForShopApiCallArr[0].pid.replaceAll(' ', '+') + '&offer_name=' + paramsForShopApiCallArr[1].offerName;
var tsrLinkHref = $('div#' + dynamicTsrId + ' a.tsr-lnk').attr('href');
var detailsLinkHref = $('div#' + dynamicTsrId + ' div.txt-area ul.related-links a').attr('href');
if (tsrLinkHref.indexOf('?') > 0) {
tsrLinkHref = tsrLinkHref.substr(0, tsrLinkHref.indexOf('?'));
}
$('div#' + dynamicTsrId + ' a.tsr-lnk').attr('href', tsrLinkHref + tsrLinkParams + specialConditionParam);
if (detailsLinkHref.indexOf('?') > 0) {
detailsLinkHref = detailsLinkHref.substr(0, detailsLinkHref.indexOf('?'));
}
$('div#' + dynamicTsrId + ' div.txt-area ul.related-links a').attr('href', detailsLinkHref + tsrLinkParams + specialConditionParam);
};
/**
* Renders the teaser content (headline, image, link target) for a bundle (handy + tariff).
*/
var renderTeaserBundleContent = function (hardwareHeadline, dynamicTsrId, paramsForShopApiCallArr, dataTariff) {
var $containerH2 = 'div#' + dynamicTsrId + ' div.txt-area h2';
var $containerH3 = 'div#' + dynamicTsrId + ' div.txt-area h3';
var firstHeadlineTextHtml = $.tmpl('firstHeadlineTxtTmpl', {
firstHeadlineText: settings.firstHeadlineText
});
if ($($containerH2).length > 0) {
$($containerH2).remove();
}
// replace the default text for the first headline text with 'Im Paket'
$('div#' + dynamicTsrId + ' div.txt-area').prepend(firstHeadlineTextHtml);
var tariffHeadline = $('h1', dataTariff).text();
if ($($containerH3).length > 0) {
$($containerH3).remove();
}
var headLineTemplate = $.tmpl('headlineGroupTmpl', {
hardwareTitle: hardwareHeadline,
tariffTitle: tariffHeadline
});
if ($($containerH2).length > 0) {
$($containerH2).after(headLineTemplate);
} else {
$('div#' + dynamicTsrId + ' div.txt-area').append(headLineTemplate);
}
// cut the text that is too long
cutTooLongText(dynamicTsrId, tariffHeadline, hardwareHeadline);
$('h3', $('div#' + dynamicTsrId + ' div.txt-area')).removeAttr('style');
};
/**
* Handles the details link and the sum link for handy and tariff teaser
* dynamicTsrId - the corresponding teaser id
* paramsForShopApiCallArr - parameters for shop API
*
*/
var handleLinksNonBundle = function (tsrDynamicType, dynamicTsrId, paramsForShopApiCallArr) {
// handle details link and sum link
if (tsrDynamicType === 'handy') {
// the offer name looks like this 'privatkunden-samsung-galaxy-s4-weiss-myhandy-24x25,00euro' -> we need 'samsung-galaxy-s4-weiss'
// or the offer name looks like this 'privatkunden-samsung-galaxy-s4-weiss' -> we need 'samsung-galaxy-s4-weiss'
var offerName = paramsForShopApiCallArr[0].offerName;
//substring the target group from the name
offerName = offerName.substr(offerName.indexOf('-') + 1, offerName.length);
if (offerName.indexOf('myhandy') > 0) {
offerName = offerName.substr(0, offerName.indexOf('myhandy') - 1);
}
// /eshop/handy/samsung-galaxy-s4-weiss
var tsrLinkHref = '/eshop/handy/' + offerName;
if (typeof paramsForShopApiCallArr[0].targetGroup !== 'undefined' && paramsForShopApiCallArr[0].targetGroup !== 'privatkunden') {
// /eshop/studenten-handy/samsung-galaxy-s4-weiss
tsrLinkHref = '/eshop/' + paramsForShopApiCallArr[0].targetGroup + '-handy/' + offerName;
}
//handle the sum link
$('div#' + dynamicTsrId + ' a.tsr-lnk').attr('href', tsrLinkHref);
//handle the details button
$('div#' + dynamicTsrId + ' div.txt-area ul.related-links a').attr('href', tsrLinkHref);
}
if (tsrDynamicType === 'tariff') {
var tariffOfferName = paramsForShopApiCallArr[0].offerName;
//substring the target group from the name
tariffOfferName = tariffOfferName.substr(tariffOfferName.indexOf('-') + 1, tariffOfferName.length);
// /eshop/tarif/detail/privatkunden/o2-blue-all-in-m-top-bundle/tarif-ohne-handy/
var tariffTsrLinkHref = '/eshop/tarif/detail/' + paramsForShopApiCallArr[0].targetGroup + '/' + tariffOfferName + '/tarif-ohne-handy/';
//set the sum link
$('div#' + dynamicTsrId + ' a.tsr-lnk').attr('href', tariffTsrLinkHref);
//set the details button
$('div#' + dynamicTsrId + ' div.txt-area ul.related-links a').attr('href', tariffTsrLinkHref);
}
};
/**
* Renders the handy or tariff teaser content (headline group, image (with disturber), link target and short description) for handy or tariff.
*/
var renderTeaserNonBundleContent = function (tsrDynamicType, hardwareHeadline, dynamicTsrId, paramsForShopApiCallArr) {
var $containerH2 = 'div#' + dynamicTsrId + ' div.txt-area h2';
var $containerH3 = 'div#' + dynamicTsrId + ' div.txt-area h3';
var firstHeadlineTextHtml;
if (tsrDynamicType === 'handy') {
firstHeadlineTextHtml = $.tmpl('firstHeadlineTxtTmpl', {
firstHeadlineText: settings.handyFirstHeadlineText
});
}
if (tsrDynamicType === 'tariff') {
firstHeadlineTextHtml = $.tmpl('firstHeadlineTxtTmpl', {
firstHeadlineText: settings.tariffFirstHeadlineText
});
}
if ($($containerH2).length > 0) {
$($containerH2).remove();
}
// replace the default text for the first headline text with 'Handy' or 'Tarif'
$('div#' + dynamicTsrId + ' div.txt-area').prepend(firstHeadlineTextHtml);
if ($($containerH3).length > 0) {
$($containerH3).remove();
}
var headLineTemplate = '';
if (tsrDynamicType === 'tariff') {
headLineTemplate = $.tmpl('headlineGroupTmpl', {
headline2Text: 'Unsere Tarif-Empfehlung für Sie: ',
hardwareTitle: hardwareHeadline
});
} else {
headLineTemplate = $.tmpl('headlineGroupTmpl', {
headline2Text: 'Unsere Empfehlung für Sie: ',
hardwareTitle: hardwareHeadline
});
}
if ($($containerH2).length > 0) {
$($containerH2).after(headLineTemplate);
} else {
$('div#' + dynamicTsrId + ' div.txt-area').append(headLineTemplate);
}
// cut the text that is too long, set the tariff headline to empty string
cutTooLongText(dynamicTsrId, '', hardwareHeadline);
$('h3', $('div#' + dynamicTsrId + ' div.txt-area')).removeAttr('style');
renderShortDescription(tsrDynamicType, dynamicTsrId, paramsForShopApiCallArr);
};
/**
* Fills the teaser with content using the information from the cookie (deviceId, offer name, target group).
* First render the links, than the headline group, than optional the short description, than the image (and the disturber)
*/
var initTeaser = function (dynamicTsrId, tsrDynamicType, cookieName) {
var paramsForShopApiCallArr = parseCookie(tsrDynamicType, cookieName);
if (paramsForShopApiCallArr.length === 1 || paramsForShopApiCallArr.length === 2) {
// compile and apply the template
$.template('headlineGroupTmpl', headlineGroupTmpl);
$.template('firstHeadlineTxtTmpl', firstHeadlineTxtTmpl);
$.ajax({
type : 'GET',
url : shopApiUrl,
data: fillShopApiParams(tsrDynamicType, paramsForShopApiCallArr[0].ptype, paramsForShopApiCallArr[0].targetGroup, paramsForShopApiCallArr[0].pid, settings.headlineGroupVariantName),
success : function (dataHandy) {
var hardwareHeadline = $('h1', dataHandy).text();
if (paramsForShopApiCallArr.length === 2) {
handleLinksBundle(dynamicTsrId, paramsForShopApiCallArr);
$.ajax({
type : 'GET',
url : shopApiUrl,
data: fillShopApiParams(tsrDynamicType, paramsForShopApiCallArr[1].ptype, paramsForShopApiCallArr[1].targetGroup, paramsForShopApiCallArr[1].pid, settings.headlineGroupVariantName),
success : function (dataTariff) {
// call for teaser bundle (handy + tariff)
renderTeaserBundleContent(hardwareHeadline, dynamicTsrId, paramsForShopApiCallArr, dataTariff);
},
error: function () {
$.ajax({
type : 'GET',
url : shopApiUrl,
data: fillShopApiParams(tsrDynamicType, paramsForShopApiCallArr[1].ptype, 'privatkunden', paramsForShopApiCallArr[1].pid, settings.headlineGroupVariantName),
success : function (dataTariff) {
// call for teaser bundle (handy + tariff)
renderTeaserBundleContent(hardwareHeadline, dynamicTsrId, paramsForShopApiCallArr, dataTariff);
}
});
}
});
} else {
handleLinksNonBundle(tsrDynamicType, dynamicTsrId, paramsForShopApiCallArr);
// call for handy teaser or tariff teaser
renderTeaserNonBundleContent(tsrDynamicType, hardwareHeadline, dynamicTsrId, paramsForShopApiCallArr);
}
//loads the product image
loadHardwareImage(tsrDynamicType, dynamicTsrId, paramsForShopApiCallArr[0]);
},
error: function () {
$.ajax({
type : 'GET',
url : shopApiUrl,
data: fillShopApiParams(tsrDynamicType, paramsForShopApiCallArr[0].ptype, 'privatkunden', paramsForShopApiCallArr[0].pid, settings.headlineGroupVariantName),
success : function (dataHandy) {
var hardwareHeadline = $('h1', dataHandy).text();
handleLinksNonBundle(tsrDynamicType, dynamicTsrId, paramsForShopApiCallArr);
// call for handy teaser or tariff teaser
renderTeaserNonBundleContent(tsrDynamicType, hardwareHeadline, dynamicTsrId, paramsForShopApiCallArr);
//loads the product image
loadHardwareImage(tsrDynamicType, dynamicTsrId, paramsForShopApiCallArr[0]);
}
});
}
});
}
};
/**
* The init function checks if there is a dynamic teaser on the page and renders the teaser with some cookie information.
* There are two types of dynamic cookie teaser (basket and affinity), marked with js-tsr-basket and js-tsr-affinity.
* For the basket dynamic teaser is used the basketProductCodes cookie and for the affinity dynamic teaser is used the affinity cookie.
* The dynamic teaser renders handy, tariff or bundle(handy + tariff) information.
*
*/
var init = function () {
var el = $("div.js-tsr-basket");
$.each(el, function (i) {
var tsrDynamicType = $(this).attr('data-type');
var dynamicTsrId = $(this).parents('div.tsr.pure').attr('id');
if (typeof tsrDynamicType !== 'undefined' && typeof dynamicTsrId !== 'undefined' && $.cookie('basketProductCodes') !== null) {
initTeaser(dynamicTsrId, tsrDynamicType, 'basketProductCodes');
}
});
//fall back for the current bundle teaser
var fallBackDynamicTsrId = $('div.tsr-dynamic').parents('div.tsr.pure').attr('id');
if (typeof fallBackDynamicTsrId !== 'undefined' && $.cookie('basketProductCodes') !== null) {
initTeaser(fallBackDynamicTsrId, 'bundle', 'basketProductCodes');
}
var elAffinity = $("div.js-tsr-affinity");
$.each(elAffinity, function (i) {
var tsrDynamicType = $(this).attr('data-type');
var dynamicTsrId = $(this).parents('div.tsr.pure').attr('id');
if (typeof tsrDynamicType !== 'undefined' && typeof dynamicTsrId !== 'undefined' && $.cookie('affinityProductCodes') !== null) {
initTeaser(dynamicTsrId, tsrDynamicType, 'affinityProductCodes');
}
});
};
return {
init: init
};
}();