Thema: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

fritten_fahrer · **am:** 23. Januar 2020, 07:27:24

Hallo zusammen,

besteht die Möglichkeit die "Listingbox" im ganzen als Link zum anklicken darzustellen?

Shopversion v2.0.5.0
Modified Template Responsive

Gruß
Chris

Linkback: https://www.modified-shop.org/forum/index.php?topic=40749.0

AGI · **Antwort #1 am:** 23. Januar 2020, 07:57:58

Guten Morgen Chris,

klar geht das, beispielsweise mit Javascript:

Code: Javascript [Auswählen]

$(function() {
$('.listingcontainer .listingbox, .listingcontainer_full .listingbox').on('click',function(e) {
var a = $(this).find("a[href]:first");
if(a.length) {
window.location = $(a).attr('href');
return false;
}
});
}

Man müsste Klicks auf weitere Links, Input oder andere Elemente noch abfangen, um diese nicht umzuleiten.
Für die Beantwortung deiner Frage reicht das Snippet aber aus.

Viele Grüße
Andreas

fritten_fahrer · **Antwort #2 am:** 23. Januar 2020, 13:15:47

Hallo Andreas,

vielen Dank für deine Antwort. Wo genau wird dieser Code eingebaut? Wie verhält sich das wenn Javascript im Browser nicht aktiviert ist?

In dem Container ist am Ende zusätzlich die Verlinkung für die Versandkosten.

Gruß
Chris

hpzeller · **Antwort #3 am:** 23. Januar 2020, 15:35:45

Hallo Chris,

erstelle die Datei templates/tpl_modified_responsive/javascript/extra/listingbox.js.php mit folgendem Inhalt.

Code: PHP [Auswählen]

<?php
/* --------------------------------------------------------------
$Id: litingbox.js.php 1 2020-01-23 15:00:20 hpzeller $

Copyright (c) 2020 hpzeller https://www.modified-shop.org/forum/index.php?action=profile;u=21463
--------------------------------------------------------------
Released under the GNU General Public License
--------------------------------------------------------------*/

/* --------------------------------------------------------------
Function:
Listingboxen im ganzen als Link zum anklicken
https://www.modified-shop.org/forum/index.php?topic=40749.msg370257#msg370257
--------------------------------------------------------------*/
?>
<script>
$(function() {
$(".cboxElement").on("click", function() {
$(".cboxElement").data("clicked", true);
});
$(".listingcontainer .listingbox, .listingcontainer_full .listingbox").on( "click", function(e) {
var a = $(this).find("a[href]:first");
if($(".cboxElement").data("clicked")) {
$(".cboxElement").data("clicked", false);
}
else if(a.length) {
window.location = $(a).attr("href");
return false;
}
});
});
</script>

PS.
Ohne JavaScript funktioniert Obiges natürlich nicht.

Gruss
Hanspeter

fritten_fahrer · **Antwort #4 am:** 23. Januar 2020, 17:13:16

Hallo Hanspeter,

vielen Dank. Das funktioniert sehr gut. Folgende zwei Fragen hätte ich noch dazu:

1. Ist es möglich den Cursor als Hand anzuzeigen wie bei Verlinkungen?

2. Wenn Javascript deaktiviert ist, greifen dann wieder die Verlinkungen die hinterlegt sind?

Danke und viele Grüße
Chris

hpzeller · **Antwort #5 am:** 23. Januar 2020, 18:07:39

Zitat von: fritten_fahrer am 23. Januar 2020, 17:13:16

[...]
1. Ist es möglich den Cursor als Hand anzuzeigen wie bei Verlinkungen?
[...]

Ersetze den geposteten Code mit diesem Code.

Code: PHP [Auswählen]

<?php
/* --------------------------------------------------------------
$Id: litingbox.js.php 1 2020-01-23 15:00:20 hpzeller $

Copyright (c) 2020 hpzeller https://www.modified-shop.org/forum/index.php?action=profile;u=21463
--------------------------------------------------------------
Released under the GNU General Public License
--------------------------------------------------------------*/

/* --------------------------------------------------------------
Function:
Listingboxen im ganzen als Link zum anklicken
https://www.modified-shop.org/forum/index.php?topic=40749.msg370257#msg370257
--------------------------------------------------------------*/
?>
<script>
$(function() {
$(".listingbox .lb_inner").hover(function(){
$(this).css("cursor", "pointer");
});
$(".cboxElement").on("click", function() {
$(".cboxElement").data("clicked", true);
});
$(".listingcontainer .listingbox, .listingcontainer_full .listingbox").on( "click", function(e) {
var a = $(this).find("a[href]:first");
if($(".cboxElement").data("clicked")) {
$(".cboxElement").data("clicked", false);
}
else if(a.length) {
window.location = $(a).attr("href");
return false;
}
});
});
</script>

Zitat von: fritten_fahrer am 23. Januar 2020, 17:13:16

[...]
2. Wenn Javascript deaktiviert ist, greifen dann wieder die Verlinkungen die hinterlegt sind?
[...]

Ja

Gruss
Hanspeter

fritten_fahrer · **Antwort #6 am:** 23. Januar 2020, 18:27:15

Hanspeter, ich danke dir vielmals. Es funktioniert einwandfrei.
Ich möchte nicht umverschämt sein. Aber eine Letzte Frage hätte ich noch. Geht das in Javascript auch das der "Title" bei Mouseover erscheint?

Viele Grüße
Chris

hpzeller · **Antwort #7 am:** 23. Januar 2020, 19:34:36

Ersetze den geposteten Code mit diesem Code, danach sollte beim hovern als Titel "Details" neben der Hand angezeigt werden.

Code: PHP [Auswählen]

<?php
/* --------------------------------------------------------------
$Id: litingbox.js.php 1 2020-01-23 15:00:20 hpzeller $

Copyright (c) 2020 hpzeller https://www.modified-shop.org/forum/index.php?action=profile;u=21463
--------------------------------------------------------------
Released under the GNU General Public License
--------------------------------------------------------------*/

/* --------------------------------------------------------------
Function:
Listingboxen im ganzen als Link zum anklicken
https://www.modified-shop.org/forum/index.php?topic=40749.msg370257#msg370257
--------------------------------------------------------------*/
?>
<script>
$(function() {
$(".listingbox .lb_inner").css("cursor", "pointer").attr("title", $(".listingbox .lb_inner .cssButton").attr("title"));
$(".cboxElement").on("click", function() {
$(".cboxElement").data("clicked", true);
});
$(".listingcontainer .listingbox, .listingcontainer_full .listingbox").on( "click", function(e) {
var a = $(this).find("a[href]:first");
if($(".cboxElement").data("clicked")) {
$(".cboxElement").data("clicked", false);
}
else if(a.length) {
window.location = $(a).attr("href");
return false;
}
});
});
</script>

Gruss
Hanspeter

fritten_fahrer · **Antwort #8 am:** 23. Januar 2020, 22:02:39

Das hat nicht funktioniert.

Viele Grüße
Chris

hpzeller · **Antwort #9 am:** 23. Januar 2020, 23:26:28

Merkwürdig, bei mir funktioniert es.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Gruss
Hanspeter

fritten_fahrer · **Antwort #10 am:** 23. Januar 2020, 23:30:39

Liegt wahrscheinlich daran das ich in der Box etwas verändert habe:

Code: PHP [Auswählen]

{foreach name=aussen item=module_data from=$module_content}
<div class="listingbox">
<div class="lb_inner">
<div class="lb_title"><h2><a href="{$module_data.PRODUCTS_LINK}" title="{$module_data.PRODUCTS_NAME|onlytext}">{$module_data.PRODUCTS_NAME}</a></h2></div>
<div class="lb_image">
{if $module_data.PRODUCTS_IMAGE != ''}
<a href="{$module_data.PRODUCTS_LINK}"><img class="unveil" src="{$tpl_path}css/images/loading.gif" data-src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME|onlytext}" title="{$module_data.PRODUCTS_NAME|onlytext}" /></a>
<noscript><a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME|onlytext}" title="{$module_data.PRODUCTS_NAME|onlytext}" /></a></noscript>
{else}
 
{/if}
</div>

{if $module_data.PRODUCTS_SHORT_DESCRIPTION}
<div class="short_desc"><a href="{$module_data.PRODUCTS_LINK}" title="{$module_data.PRODUCTS_NAME|onlytext}">{$module_data.PRODUCTS_SHORT_DESCRIPTION}</a></div>
{/if}



<div class="right">
<div class="lb_price">
{foreach name=inner item=price_data from=$module_data.PRODUCTS_PRICE_ARRAY}

{if $price_data.PRODUCTS_PRICE_PLAIN != 0 && $price_data.PRODUCTS_PRICE_FLAG != 'Special'}
{include file="module/includes/price_box.html"}
{elseif $price_data.PRODUCTS_PRICE_FLAG == 'Special' && $price_data.PRODUCTS_PRICE_SPECIAL_PRICE|substr:0:-3|intval != '' && $price_data.PRODUCTS_PRICE_SPECIAL_PRICE|substr:0:-3|intval != 0}
{include file="module/includes/price_box.html"}
{else}
{#text_price_on_request#}
{/if}
{/foreach}
{if $module_data.PRODUCTS_PRICE_ARRAY.0.PRODUCTS_PRICE_FLAG != 'NotAllowed'}
{*{if $module_data.PRODUCTS_VPE}<div class="lb_vpe">{$module_data.PRODUCTS_VPE}</div>{/if}*}
{/if}
</div>

<div class="lb_tax">{$module_data.PRODUCTS_TAX_INFO}</div>
{if $module_data.PRODUCTS_PRICE_ARRAY.0.PRODUCTS_PRICE_FLAG != 'NotAllowed'}
<div class="lb_tax">{$module_data.PRODUCTS_SHIPPING_LINK}</div>
{/if}

{*{if $MODULE_QUANTITY_STATUS!=''}
<div style="float:right">
{if $MODULE_QUANTITY_LIGHT_STATUS=='true'}
{#text_stock#}
{if $module_data.PRODUCTS_QUANTITY >= $MODULE_QUANTITY_GREEN}
<img src="/images/icons/ampel_gruen.jpg" style="position:relative;top:2px;margin:0 0 0 3px;" alt="{#text_green#}" title="{#text_green#}" />
{/if}
{if $module_data.PRODUCTS_QUANTITY < $MODULE_QUANTITY_GREEN and $module_data.PRODUCTS_QUANTITY >= $MODULE_QUANTITY_YELLOW}
<img src="/images/icons/ampel_gelb.jpg" style="position:relative;top:2px;margin:0 0 0 3px;" alt="{#text_yellow#}" title="{#text_yellow#}" />
{/if}
{if $module_data.PRODUCTS_QUANTITY <= $MODULE_QUANTITY_RED}
<img src="/images/icons/ampel_rot.jpg" style="position:relative;top:2px;margin:0 0 0 3px;" alt="{#text_red#}" title="{#text_red#}" />
{/if}
{else}
{#text_stock#}{$module_data.PRODUCTS_QUANTITY}
{/if}
</div>
{/if}*}
</div>


{*{if $module_data.PRODUCTS_BUTTON_BUY_NOW || ($module_data.PRODUCTS_FSK18 != '0' && $smarty.const.SHOW_BUTTON_BUY_NOW != 'false')}

{foreach name=inner item=price_data from=$module_data.PRODUCTS_PRICE_ARRAY}

{if $price_data.PRODUCTS_PRICE_PLAIN != 0 && $price_data.PRODUCTS_PRICE_FLAG != 'Special'}
<div class="cssButtonPos11">{$module_data.PRODUCTS_BUTTON_BUY_NOW}</div>

{elseif $price_data.PRODUCTS_PRICE_FLAG == 'Special' && $price_data.PRODUCTS_PRICE_SPECIAL_PRICE|substr:0:-3|intval != '' && $price_data.PRODUCTS_PRICE_SPECIAL_PRICE|substr:0:-3|intval != 0}
<div class="cssButtonPos11">{$module_data.PRODUCTS_BUTTON_BUY_NOW}</div>
{/if}
{/foreach}

{/if}*}


</div>
</div>
{/foreach}

Habe z.B. noch eine zusätzliche Klasse "short_desc" für die Kurzbeschreibung eingefügt.

hpzeller · **Antwort #11 am:** 23. Januar 2020, 23:39:45

Ja, du hast

Code: XML [Auswählen]

{*{if $module_data.PRODUCTS_BUTTON_BUY_NOW || ($module_data.PRODUCTS_FSK18 != '0' && $smarty.const.SHOW_BUTTON_BUY_NOW != 'false')}

{foreach name=inner item=price_data from=$module_data.PRODUCTS_PRICE_ARRAY}

{if $price_data.PRODUCTS_PRICE_PLAIN != 0 && $price_data.PRODUCTS_PRICE_FLAG != 'Special'}
<div class="cssButtonPos11">{$module_data.PRODUCTS_BUTTON_BUY_NOW}</div>

{elseif $price_data.PRODUCTS_PRICE_FLAG == 'Special' && $price_data.PRODUCTS_PRICE_SPECIAL_PRICE|substr:0:-3|intval != '' && $price_data.PRODUCTS_PRICE_SPECIAL_PRICE|substr:0:-3|intval != 0}
<div class="cssButtonPos11">{$module_data.PRODUCTS_BUTTON_BUY_NOW}</div>
{/if}
{/foreach}

{/if}*}

auskommentiert, dann findet mein JavaScript das Attribut titel natürlich nicht.

Gruss
Hanspeter

fritten_fahrer · **Antwort #12 am:** 23. Januar 2020, 23:47:37

Okay, ich verstehe. Ist der Button nicht vorhanden kann er das Attribut Titel nicht ziehen.

Da hilft es quasi auch nicht das ich den Artikelnamen, das Bild und die Kurzbeschreibung verlinkt habe und hier auch das Attribut Titel hinterlegt ist?

hpzeller · **Antwort #13 am:** 23. Januar 2020, 23:59:32

Du kannst die Folgende Zeile aus meinem letzten Code den ich gepostet habe

Code: XML [Auswählen]

$(".listingbox .lb_inner").css("cursor", "pointer").attr("title", $(".listingbox .lb_inner .cssButton").attr("title"));

mit dieser ersetzen.

Code: XML [Auswählen]

$(".listingbox .lb_inner").css("cursor", "pointer").attr("title", "<?php echo TEXT_INFO_DETAILS ?>");

Gruss
Hanspeter

fritten_fahrer · **Antwort #14 am:** 24. Januar 2020, 00:01:22

Es funktioniert. Vielen Dank für deine Bemühungen

.

Viele Grüße
Chris

Thema: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

fritten_fahrer

Frage: Kann man die "Listinbox" im ganzen klickbar machen?

AGI

Re: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

fritten_fahrer

Re: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

hpzeller

Re: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

fritten_fahrer

Re: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

hpzeller

Re: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

fritten_fahrer

Re: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

hpzeller

Re: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

fritten_fahrer

Re: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

hpzeller

Re: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

fritten_fahrer

Re: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

hpzeller

Re: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

fritten_fahrer

Re: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

hpzeller

Re: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

fritten_fahrer

Re: Frage: Kann man die "Listinbox" im ganzen klickbar machen?

Teile Thema

Ähnliche Themen

Gesamtes "div class" klickbar machen ?

Buttonproblem unter Opera 11.10 - Button "Jetzt bestellen" wird nicht angezeigt/klickbar

Noch einer, der den ganzen Tag mit "Moin" grüßt...

Frage zu "Neuen Artikeln" und "Angeboten" nach Update auf 3.0.2.