znip Merkzettel - add text to match display of add / remove icon

losttrip · 24.06.2021 19:58:20

How would I add text to dynamically show to the right of the "add" and "remove" icons.
e.g.
Item not on list:
Icon (add) - "Add to Wish List"

Item already on list:
Icon (remove) - "Remove from Wish List"

This associated text already shows as a hover tooltip, but I want it to actually display on the webpage.

/modules/znip_merkzettel/frontend.js

[== JavaScript ==]
var mmz_merkzettel;
var mmz_merkzettel_menge;
var outform = '';

$( document ).ready(function() {
	//mmz_get_language();
	mmz_get_storage();
	mmz_get_them_items();

	$('body').append('<div id="mmz_open_merkzettel">');
	$('body').append('<div id="mmz_show_merkzettel">');
	
	$('#mmz_open_merkzettel').click(function(){	
		mmz_show_items('');		
	});
	mmz_show_open_merkzettel('show');
	
})

$(window).bind('resize orientationchange', function() {
	//wub_equalize_them_boxes();	
});


//============================================================================
//Init and check

function mmz_get_them_items() {
	//document .ready: haengt die funktion an alle h3:
	var i = 0; 
	$(mmz_jquery_string).each(function(){
	
		var iid = $(this).attr('id');
		if (iid == undefined) {
			i++;
			iid = 'mmz_id_'+i;
			$(this).attr('id',iid);
		}
		
		var titel = mmz_get_title($(this));		
		
		$(this).addClass('mmz_merkzettel_item');
		//$(this).attr('title', mmz_lang['add']);
		
		if(mmz_merkzettel.hasOwnProperty(titel)){
			$(this).addClass('mmz_selected');
			$(this).attr('title', mmz_lang['remove']);
		}
		
		$(this).click(function(){
			mmz_add_item($(this));
		});			
	});
	
	mmz_check_status();
}



function mmz_check_status() {
	$(mmz_jquery_string).each(function(){	
		var titel = mmz_get_title($(this));		
		if(mmz_merkzettel.hasOwnProperty(titel)){
			$(this).addClass('mmz_selected');
			$(this).attr('title', mmz_lang['remove']);
		} else {
			$(this).removeClass('mmz_selected');
			$(this).attr('title', mmz_lang['add']);
		}
	});
	//mmz_show_open_merkzettel('show');
}


//============================================================================
//Add, manage and delete items

function mmz_add_item(ths) {

	var titel = mmz_get_title(ths);
	var preis = mmz_get_preis(ths);
		
	if ($(ths).hasClass('mmz_selected')) {
		delete mmz_merkzettel[titel];		
	} else {		
		var nr = $(ths).attr('id');
		var url = window.location.href.split('#')[0];		
		mmz_merkzettel[titel] = url+'#'+nr;
		if (preis > -1) {mmz_merkzettel_preis[titel] = preis;}
		
	}
	mmz_check_status();
	mmz_set_storage();
	mmz_show_items();
}



function  mmz_change_menge(ths) {
	var menge = $(ths).val();
	var titel = $(ths).closest('tr').find('a').text();
	mmz_merkzettel_menge[titel] = menge;
	mmz_set_storage();
	mmz_show_items();
	//console.log('mmz_merkzettel_menge: '+JSON.stringify(mmz_merkzettel_menge));
}

function mmz_merkzettel_itemdel(ths) {
	var dings = $(ths).closest('tr').find('a').text();
	//console.log('dings'+dings);
	delete mmz_merkzettel[dings];
	mmz_show_items();
	mmz_check_status();
	mmz_set_storage();
}

function mmz_delete_all_items() {
	var really = confirm(mmz_lang['remove_confirm']);	
	if (really == true) {
		mmz_merkzettel = {} ;
		mmz_storage_clear();
		mmz_merkzettel_close();
		$('#minimerkzettel h3.mmz_selected').removeClass('mmz_selected');
		mmz_check_status();
		
	}	
}

//============================================================================
//various helpers
function mmz_get_title(ths) {
	var titel = $(ths).attr('data-mmz');
	if (titel == undefined) { titel = $(ths).text();}
	//console.log(titel);
	return ( page_id +'; '+titel);
}

function mmz_get_preis(ths) {
	var preis = $(ths).attr('data-mmz_preis');
	if (preis == undefined) { preis = -1;} 
	//console.log(titel);
	return parseFloat(preis);
}



//============================================================================
//listing
function mmz_show_items(mode) {
	if (mode == undefined) {mode = '';}
	
	var out = ''; 


	
	
	
	//Schleife; alle durch
	
	var preis_sum_all = 0;
	Object.keys(mmz_merkzettel).forEach(function(key) {
	
		if (mmz_mengezeigen == true) {
			var menge = mmz_merkzettel_menge[key];
			if (menge == undefined) {menge= 1;}
			mengetag = '<td><input type="text" value="'+menge+'" onkeyup="mmz_change_menge(this);" /></td>'; 
		} else {
			mengetag = '';
		}
		
		var preis_sum = ''; var preistag = '';  var preis_sumtag = ''; var preistag_form ='';
		if (mmz_preiszeigen == true) {
			var preis = mmz_merkzettel_preis[key];
			if (preis == undefined || preis <= 0 || menge < 1) {
				preis = ''; 
				preis_sum_all = -1;								
			} else {
				preistag = mmz_preiswaehrung+' '+preis;
				if (menge > 0) { 
					preis_sum = menge * preis; 
					preis_sumtag = mmz_preiswaehrung+preis_sum; 
					if (preis_sum_all > -1) {preis_sum_all += preis_sum}
				} else {
					//Wenn auch nur 1 Preis fehlt, wird keine Summe gebildet:
					preis_sum_all = -1;
				}				
			}
			preistag_form = preistag+ ' | '+preis_sumtag;			
			preistag = '<td class="preis">'+preistag+'</td><td class="preis preis_sum">'+preis_sumtag+'</td>';
						
		}
		
		
		var ln = '<tr>'+mengetag+'<td><a href="'+mmz_merkzettel[key]+'">'+key+'</a></td>'+preistag+'<td><span onclick="mmz_merkzettel_itemdel(this);"></span></td></tr>';
		out = ln + out;
  		
		var lnform = 'P'+key;
		if (mmz_mengezeigen == true) { lnform = menge+' x '+ lnform;}
		if (mmz_preiszeigen == true) { lnform += ' | ' + preistag_form;}
		lnform = lnform.replace(/&nbsp;/g, ' ' );
		lnform = lnform.replace(/&euro;/g, 'EUR' );
		outform = lnform+ "\n" + outform;
  
  
  		//console.log(key, mmz_merkzettel[key]);
	});
	if (preis_sum_all < 0) {preis_sum_all = 'k.A';}
	
	var mengetag = ''; var mengeth1 = ''; var mengelast = '';
	if (mmz_mengezeigen == true) {
		mengeth1 = '<td>'+mmz_lang['tdmenge']+'</td>';  mengelast = '<td></td>';
	}
	
	var preistag = ''; var preisth1 = ''; var preislast = '';
	if (mmz_preiszeigen == true) {
		preisth1 = '<td class="preis">'+mmz_lang['tdstk']+'</td><td class="preis preis_sum">'+mmz_lang['tdsum']+'</td>';  
		preislast = '<td></td><td class="preis preis_sum">'+mmz_preiswaehrung+preis_sum_all+'</td>';
	} else {
		mmz_lang['tdsumtitle'] = '';
	}
	
	//First and last <tr>
	var th1 = ''; var thlast = ''; var general_hint = '';
	if (mmz_preiszeigen == true) {
		th1 = '<tr class="th1">'+mengeth1+'<td>'+mmz_lang['tdtitel']+'</td>'+preisth1+'<td>&nbsp;</td></tr>';
		if (preis_sum_all > 0) {thlast = '<tr class="thlast"><td></td><td style="text-align:right;">'+mmz_lang['tdsumtitle']+'</td>'+preislast+'<td>&nbsp;</td></tr>';}
		general_hint =  '<div class="general_hint">'+mmz_lang['general_hint']+'</div>';
	}
	
	//all output
	if (out == '') {out = '<p>'+mmz_lang['dein_merkzettel_leer']+'</p>'; } else {	out = '<table>'+th1+out+thlast+'</table><a class="goto_form" href="'+mmz_form_link+'">'+mmz_lang['goto_form']+'</a><p class="remove_all" onclick="mmz_delete_all_items();">'+mmz_lang['remove_all']+'</p>';}
	out = '<a class="merkzettel_close" onclick="mmz_merkzettel_close();"></a><h4>'+mmz_lang['dein_merkzettel']+'</h4>' + out;

	
	if (mode == '') {
		mmz_show_open_merkzettel('hide');
		$('#mmz_show_merkzettel').html(out + general_hint);
		$('#mmz_show_merkzettel').show(500);
	}
	
	if (mode == 'outform') {
		outform = mmz_lang['mein_merkzettel']+ "\n" +outform;
		return outform;
	}
	
}

function  mmz_show_open_merkzettel(mode) {
	var keys = Object.keys(mmz_merkzettel);	
	if (keys.length < 1) {mode = 'hide';}	
	if (mode == 'hide') {
		$('#mmz_open_merkzettel').hide(0);
	} else {
		$('#mmz_open_merkzettel').show(500);
	}
}


function mmz_merkzettel_close() {
	$('#mmz_show_merkzettel').hide(500);
	mmz_show_open_merkzettel('show');
	
}







//============================================================================
//connection to form

function mmz_merkzettel_to_form() {
	if (typeof(mmz_form_field_jquery_string) != 'undefined') {
		outform = mmz_show_items('outform');
		$(mmz_form_field_jquery_string).val(outform);	
	}
}



//============================================================================
//Local storage:
function mmz_get_storage() {
	mmz_merkzettel = JSON.parse(localStorage.getItem('mmz_merkzettel'));
	if (mmz_merkzettel == null) { mmz_merkzettel = {} ; }
	
	mmz_merkzettel_menge = JSON.parse(localStorage.getItem('mmz_merkzettel_menge'));
	if (mmz_merkzettel_menge == null) { mmz_merkzettel_menge = {} ; }
	
	mmz_merkzettel_preis = JSON.parse(localStorage.getItem('mmz_merkzettel_preis'));
	if (mmz_merkzettel_preis == null) { mmz_merkzettel_preis = {} ; }
	
	//console.log('mmz_merkzettel_menge: '+JSON.stringify(mmz_merkzettel_menge));
	
	mmz_merkzettel_to_form();	
}

function mmz_set_storage() {
	localStorage.setItem('mmz_merkzettel', JSON.stringify(mmz_merkzettel));
	localStorage.setItem('mmz_merkzettel_menge', JSON.stringify(mmz_merkzettel_menge));
	localStorage.setItem('mmz_merkzettel_preis', JSON.stringify(mmz_merkzettel_preis));
	
	//console.log('mmz_merkzettel_menge: '+JSON.stringify(mmz_merkzettel_menge));
}

function mmz_storage_clear() {
	localStorage.setItem('mmz_merkzettel', null);
	//Menge wird NICHT geloescht!
}


//=====================================
function mmz_get_language() {

	
}

losttrip · 25.06.2021 00:38:43

When I say I want the text to "dynamically" show, I just mean it will change to match the icon state. I am fine if the text is hard-coded in the frontend.js file. It will not need to be accessed or changed. I just can't figure out where I can add this text in this file.

florian · 25.06.2021 05:37:52

The most easy way is to add two lines to the /modules/znip_merkzettel/frontend.css

.mmz_merkzettel_item:before {content: "add to wishlist "; }
.mmz_merkzettel_item.mmz_selected:before {content: "remove from wishlist "; }

choppopo · 25.06.2021 09:15:46

You should NOT modify any module files, not even the frontend.css
If there is an update, your changes are gone - or you have an updated module with an old frontend.css

Put those changes into your template css or use the module:
https://addons.wbce.org/pages/addons.ph … m&item=136
to overwrite the frontend.css

florian · 25.06.2021 10:52:38

Funny that it's just you who is warning to modify the module's files in such an alarming way...
your merkzettel module is not officially available any more, so how likely is it that there will be any updates?
Even if there would be an update: losstrip is no newbie, so I guess he knows what to do in that case.

losttrip · 25.06.2021 12:59:42

Thank you for your answer, endless commitment and constant support florian.
Thank you for your warning and creatively useful (unfortunately retracted sad ) modules Chio.

I Wish my question hadn't led to a negative interaction.

All the best to you both. Take care.

WBCE CMS Forum

#1 24.06.2021 19:58:20

znip Merkzettel - add text to match display of add / remove icon

#2 25.06.2021 00:38:43

Re: znip Merkzettel - add text to match display of add / remove icon

#3 25.06.2021 05:37:52

Re: znip Merkzettel - add text to match display of add / remove icon

#4 25.06.2021 09:15:46

Re: znip Merkzettel - add text to match display of add / remove icon

#5 25.06.2021 10:52:38

Re: znip Merkzettel - add text to match display of add / remove icon

#6 25.06.2021 12:59:42

Re: znip Merkzettel - add text to match display of add / remove icon

Board footer