You are on page 1of 8

//photo bullets

"use strict";
var analyticsCategory = "gift-guide";
var analyticsLabel = "";
/* eslint-disable no-inner-declarations */
console.log('hello');

const page = {
ubicacion: 'filtro superior',
familia: 'the-gift-guide',
linea: window.viewObjectsJson ? window.viewObjectsJson.catalogParameters.idShop
: 'she',
sitcky: 'no sticky'
}; //active item

$('[data-id="[id]"] .vsv-box-item').each(function () {

const subFamilia = $(this).attr('data-subfamily');

const id = $(this).attr('data-filter');
this.addEventListener('click', function(e){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();

$('.vsv-title').removeClass('vsv-active');
$(this).find('.vsv-title').addClass('vsv-active');
/*$('.vsv-appear').removeClass('vsv-brand-highlighted-sticky');*/
const current = document.querySelector('a[data-filter="' + id + '"]');

if (current) {
current.classList.add('vsv-brand-highlighted-sticky');
}

page.subFamilia = subFamilia;
page.position = $(this).attr('data-position');
CatalogSubscriber.emitter('plp.setFilter', id, page);
});
// Deja eso para cuando si tengan las friendlys de esto
// const id = $(this).attr('data-url').split('_')[1]
// $(this).attr('data-filter', id)

$(this).hover(function (e) {
if (e.type === 'mouseenter') {
analyticsVerne({ category: analyticsCategory, action: 'hover', label:
analyticsLabel + subFamilia });
}
});
});

window.listenFilter = function listenFilter() {

//active item
$('.vsv-appear').each(function () {
const id = $(this).attr('data-filter');// Deja eso para cuando si tengan
las friendlys de esto
const subFamilia = $(this).attr('data-subfamily');
// const id = $(this).attr('data-url').split('_')[1]
// $(this).attr('data-filter', id)
// Deja esto por si piden analitica
// if (id === window.vsvfilterId) {
// $(this).addClass('vsv-brand-highlighted')
// document.querySelector('.menu-shops-sticky').scrollLeft =
this.getBoundingClientRect().x - 10
// }

this.addEventListener('click', function(e){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
$('.vsv-appear').removeClass('vsv-brand-highlighted-sticky');
document.querySelector('a[data-filter="' + id +
'"]').classList.add('vsv-brand-highlighted-sticky');
page.subFamilia = subFamilia;
page.position = $(this).attr('data-position');
document.querySelector('.menu-shops-sticky').style.opacity = '0'
CatalogSubscriber.emitter('plp.setFilter', id, page);
});
});
};

if (window.dataLayerV2Json && window.dataLayerV2Json.page) {


let currentID = window.location.pathname.split('_')[1]
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const colecciones = urlParams.get('colecciones');
currentID = currentID + '?colecciones=' + colecciones;
console.log('El current ID es', currentID)
if ($('[data-filter="' + currentID + '"]').length) {
$('.vsv-title-circle').removeClass('vsv-active');
$('.vsv-active').removeClass('vsv-active');
const seeCurrent = $('[data-filter="' + currentID + '"]');
$(seeCurrent.children()[0]).addClass('vsv-active');
const index = seeCurrent.index();
}
}

/*if (dataLayerV2Json.page.productListName.split(":")[0] === 'mujer' ||


dataLayerV2Json.page.productListName.split(":")[0] === 'she') {
console.log('estamos en mujer');
//var womanID = "d18329732";
} else if (dataLayerV2Json.page.productListName.split(":")[0] === 'hombre' ||
dataLayerV2Json.page.productListName.split(":")[0] === 'he') {
console.log('estamos en hombre');
} else if (dataLayerV2Json.page.productListName.split(":")[0] === 'chica' ||
dataLayerV2Json.page.productListName.split(":")[0] === 'teena') {
console.log('estamos en teenA');
} else if (dataLayerV2Json.page.productListName.split(":")[0] === 'nina' ||
dataLayerV2Json.page.productListName.split(":")[0] === 'nina') {
console.log('estamos en nina');
} else if (dataLayerV2Json.page.productListName.split(":")[0] === 'bebe-nina' ||
dataLayerV2Json.page.productListName.split(":")[0] === 'bebe-nina') {
console.log('estamos en bebe-nina');
} else if (dataLayerV2Json.page.productListName.split(":")[0] === 'casa' ||
dataLayerV2Json.page.productListName.split(":")[0] === 'home') {
console.log('estamos en casa');
}*/

var brandID = window.dataLayerV2Json.page.brandID;


switch(brandID){
case "she":
console.log('estamos en she');
var womanID = "d18329732";
console.log(womanID);
break;
case "he":
console.log('estamos en he');
var manID = "d18330454";
console.log(manID);
break;
case "chica":
console.log('estamos en chica');
var teenID = "d13895168";
console.log(teenID);
break;
case "nina":
console.log('estamos en nina');
var kidsID = "d77681496";
console.log(kidsID);
break;
case "bebe-nina":
console.log('estamos en bebe-nina');
var babyID = "d71052910";
console.log(babyID);
break;
case "home":
console.log('estamos en home');
var homeID = "d17463928";
console.log(homeID);
break;
}

function onChange() {
const id = window.location.pathname.split('_')[1];

if (!$('[data-filter="' + id + '"]').length) {
$('.vsv-active').removeClass('vsv-active');
const seeAll = $('[data-filter="d19669160"]').children()[0];
$(seeAll).addClass('vsv-active');
}

$('.vsv-box-item').each(function (index) {
if (this.getAttribute('data-filter') === id) {
//$('.vsv-title-circle').removeClass('vsv-active');
const vsvImage = $(this).children()[0];
$(vsvImage).removeClass('vsv-active');
$(vsvImage).addClass('vsv-active');
nextIndex = index;
}
});
}
const changeObserver = new MutationObserver(onChange);

if (document.querySelector('#title')) {
changeObserver.observe(document.querySelector('#title'), {
subtree: true,
attributes: true,
characterData: true
});
}

function list1(eid){

const id = eid;
let nextIndex;
const itemActive = $('[data-filter="' + id + '"]');
if (!itemActive.length) {
$('.vsv-active').removeClass('vsv-active');
const seeAll = $('[data-filter="d19669160"]').children()[0];
$(seeAll).addClass('vsv-active');
}
else{
if (itemActive.attr('data-filter') === id) {
$('.vsv-title-circle').removeClass('vsv-active');
const vsvImage = itemActive.children()[0];
$(vsvImage).addClass('vsv-active');
}
}

const current = document.querySelector('a[data-filter="' + id + '"]');

if (current) {
document.querySelector('.menu-shops-sticky').scrollLeft =
current.getBoundingClientRect().x - 10;
$('a[data-filter]').removeClass('vsv-brand-highlighted-sticky');
current.classList.add('vsv-brand-highlighted-sticky');
setTimeout(function () {
window.scrollTo({ top: 1 })
})
}
}
document.querySelector('body').addEventListener('plp.setFilter', function (event) {
list1(event.detail);
});

/*----------------------------------------*/

$(document).ready(function() {
var brandID = window.dataLayerV2Json.page.brandID
var productListName = window.dataLayerV2Json.page.productListName
var current = document.querySelector('a[data-brand="' + brandID + '"]')
if (brandID === "kids"){
if(productListName.split(':')[0] === "nina" || productListName.split(':')
[0] === "nino"){
current = document.querySelector('a[data-brand="nina"]')
brandID = "nina";
}else{
current = document.querySelector('a[data-brand="bebe-nina"]')
brandID = "bebe-nina";
}
}
if (brandID === "teen"){
current = document.querySelector('a[data-brand="chica"]')
brandID = "chica";
}
if (current) {
current.classList.add('vsv-brand-highlighted')
}

if (Array.from(document.body.classList).includes('isMobile')) {
const menu = document.createElement('div')
menu.classList.add('menu-shops-sticky')
menu.innerHTML = `
<a data-brand="she" class="vsv-appear" href="https://shop.mango.com/redirect.faces?
op=conta&seccion=GiftGuide_she&tiendaid=she" style="animation-delay: .1s;">%
%traduccion4%%</a>
<a data-brand="he" class="vsv-paises-nohe vsv-appear"
href="https://shop.mango.com/redirect.faces?
op=conta&seccion=GiftGuide_he&tiendaid=he"
style="animation-delay: .3s;">%%traduccion5%%</a>
<a data-brand="chica" class="vsv-paises-noteen vsv-appear"
href="https://shop.mango.com/redirect.faces?
op=conta&seccion=GiftGuide_teena&tiendaid=teen"
style="animation-delay: .5s;">%%traduccion6%%</a>
<a data-brand="nina" class="vsv-paises-nonina vsv-appear"
href="https://shop.mango.com/redirect.faces?
op=conta&seccion=GiftGuide_nina&tiendaid=kids"
style="animation-delay: .7s;">%%traduccion7%%</a>
<a data-brand="bebe-nina" class="vsv-paises-nobabynina vsv-appear"
href="https://shop.mango.com/redirect.faces?
op=conta&seccion=GiftGuide_babynina&tiendaid=kids"
style="animation-delay: .9s;">%%traduccion8%%</a>
<a data-brand="home" class="vsv-paises-nocasa vsv-appear"
href="https://shop.mango.com/redirect.faces?
op=conta&seccion=GiftGuide_home&tiendaid=home"
style="animation-delay: .9s;">%%traduccion9%%</a>
`
menu
.querySelector('a[data-brand="' + brandID + '"]')
.classList.add('vsv-brand-highlighted-sticky')
var didAppend = false
var timeout = false
function doSticky() {
var targetNode = document.querySelector('.orders-filters')
if (didAppend) {
targetNode.style = 'height: 55px;'
targetNode.querySelector('button').style =
'opacity: 0; transform: translateY(50px);'
targetNode.querySelector('.grid').style =
'opacity: 0; transform: translateY(50px);'
}
if (targetNode.classList.contains('orders-filters--fixed')) {
targetNode.style = 'height: 110px; top:50px'
targetNode.querySelector('button').style =
'transition: opacity .5s; opacity: 1; transform:
translateY(50px)'
targetNode.querySelector('.grid').style =
'transition: opacity .5s; opacity: 1; transform:
translateY(50px)'
}
if (
targetNode &&
Array.from(targetNode.classList).includes('orders-filters--fixed')
) {
menu.style.opacity = 1
if (!didAppend) {
didAppend = true
targetNode.style.cssText = 'transition: height .3s;'
targetNode.querySelector('button').style =
'transform: translateY(50px);'
targetNode.querySelector('.grid').style =
'transform: translateY(50px);'
targetNode.appendChild(menu)
}
} else {
if (menu.parentElement === targetNode) {
targetNode.removeAttribute('style')
targetNode.querySelector('button').removeAttribute('style')
targetNode.querySelector('.grid').removeAttribute('style')
targetNode.removeChild(menu)
didAppend = false
}
}
}
window.addEventListener('scroll', doSticky)
}

//Menu y cambio de imagen por lineas


if(window.shopJson){
if ($('body').hasClass('isTablet') || $('body').hasClass('isMobile')) {
if ($('body').hasClass('isTablet')) {
setTimeout(function() {
headerController.transparentH(false, 'black')
}, 100)
}
} else {
newHeaderController.transparentH(true, 'white')
}
}

})

$(document).scroll(function() {
if(window.shopJson !== undefined){
if (
$(window).scrollTop() >=
$('.img-responsive').height() - $('#navMain').height()
) {
if (
$('body').hasClass('iDevice') ||
$('body').hasClass('isTablet') ||
$('body').hasClass('isMobile')
) {
if ($('body').hasClass('isTablet')) {
headerController.transparentH(false, 'white')
}
} else {
newHeaderController.transparentH(false, 'white')
}
} else {
if ($('body').hasClass('isMobile')) {
} else if ($('body').hasClass('isTablet')) {
headerController.transparentH(true, 'white')
} else {
newHeaderController.transparentH(true, 'white')
}
}
}

})

//filtro por países y lineas


var gup = function(name) {
var decoded = window.location.href.replace(/&/g, '&')
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]')
var regexS = '[\\?&]' + name + '=([^&#]*)'
var regex = new RegExp(regexS)
var results = regex.exec(decoded)

return results ? results[1] : null


}

var vsv_paises_nohe =
['528','508','484','448','078','740','612','083','684','743','676','669','608','736
','044','095','096','074','090','602','284','236','302','322','372','276','216','37
3','204','288','248','388','680'];
var vsv_paises_nonina =
['528','508','492','484','413','448','456','809','077','083','684','743','676','669
','608','736','680','073','044','096','074','602','284','236','302','322','372','21
6','204','288','248','388'];
var vsv_paises_nonino =
['528','508','492','484','413','448','456','809','077','083','684','743','676','669
','608','736','680','073','044','096','074','602','284','236','302','322','372','21
6','204','288','248','388'];
var vsv_paises_nobabynina = ['708','700','413', '448', '456', '400', '528', '516',
'508', '512', '500', '504', '492', '484', '800', '809', '077', '696', '720', '740',
'616', '612', '079', '083', '684', '743', '716', '676', '662', '728', '669', '608',
'736', '680', '690', '073', '044', '095', '096', '074', '090', '602', '208', '330',
'284', '236', '302', '272', '322', '372', '276', '346', '216', '373', '204', '288',
'248', '388', '212'];
var vsv_paises_nobabynino = ['708','700','413', '448', '456', '400', '528', '516',
'508', '512', '500', '504', '492', '484', '800', '809', '077', '696', '720', '740',
'616', '612', '079', '083', '684', '743', '716', '676', '662', '728', '669', '608',
'736', '680', '690', '073', '044', '095', '096', '074', '090', '602', '208', '330',
'284', '236', '302', '272', '322', '372', '276', '346', '216', '373', '204', '288',
'248', '388', '212'];
var vsv_paises_noteen =
['528','508','492','484','413','448','456','809','077','720','083','684','743','676
','708','669','608','736','680','073','044','096','074','602','284','236','302','32
2','372','216','204','288','248','388'];
var vsv_paises_nocasa =
['528','516','508','512','480','500','475','496','432','520','504','492','524','484
','474','413','404','436','448','478','456','428','458','416','412','442','400','80
0','809','077','078','640','696','720','076','740','664','700','616','612','624','6
28','079','636','083','684','604','743','701','667','716','676','649','662','708','
644','632','706','728','669','608','736','680','052','647','081','690','070','043',
'073','093','044','024','095','037','096','074','015','090','602','075','094','022'
,'023','019','330','284','236','302','272','322','220','372','276','346','216','373
','204','288','248','388','212'];
var vsv_pais = ""

if(!gup('pais') && (window.shopJson !== undefined)){


vsv_pais = window.shopJson.country.code
}else if(gup('pais')){
vsv_pais = gup('pais')
}else{
vsv_pais = "001"
}

var vsv_findNoHe = vsv_paises_nohe.find(function(num) {


return num === vsv_pais
})
var vsv_findNoNina = vsv_paises_nonina.find(function(num) {
return num === vsv_pais
})
var vsv_findNoNino = vsv_paises_nonino.find(function(num) {
return num === vsv_pais
})
var vsv_findNoBabyNina = vsv_paises_nobabynina.find(function(num) {
return num === vsv_pais
})
var vsv_findNoBabyNino = vsv_paises_nobabynino.find(function(num) {
return num === vsv_pais
})
var vsv_findNoTeen = vsv_paises_noteen.find(function(num) {
return num === vsv_pais
})
var vsv_findNoCasa = vsv_paises_nocasa.find(function(num) {
return num === vsv_pais
})

if (vsv_findNoHe !== undefined) {


$('[data-id="[id]"] .vsv-paises-nohe').remove()
}
if (vsv_findNoNina !== undefined) {
$('[data-id="[id]"] .vsv-paises-nonina').remove()
}
if (vsv_findNoNino !== undefined) {
$('[data-id="[id]"] .vsv-paises-nonino').remove()
}
if (vsv_findNoBabyNina !== undefined) {
$('[data-id="[id]"] .vsv-paises-nobabynina').remove()
}
if (vsv_findNoBabyNino !== undefined) {
$('[data-id="[id]"] .vsv-paises-nobabynino').remove()
}
if (vsv_findNoTeen !== undefined) {
$('[data-id="[id]"] .vsv-paises-noteen').remove()
}
if (vsv_findNoCasa !== undefined) {
$('[data-id="[id]"] .vsv-paises-nocasa').remove()
}

You might also like