Gesamtes "div class" klickbar machen ?

[rjung]

Hallo,

nachdem ich nun versucht habe meinen Shop Design Technisch etwas frischen Wind zu verpassen ( ja ist noch nicht ganz fertig ) habe ich ein paar Leute mal Testen lassen. Insgesamt scheint er wohl recht flott und soweit ich es beurteilen kann auch relativ fehlerfrei zu laufen.

Allerdings bekam ich mehrfach die Anregung ( vor allen von Mobilen Nutzern ) die Boxen beim Überfahren komplett anklickbar zu machen. So das nicht direkt aufs Bild oder den "Details" Button geklickt werden muss. Die Einzelnen Links in dem Boxen zu Versandkosten usw. müssen natürlich erhalten bleiben.

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

Nun habe ich mal ganz einfach versucht das <div class="listingbox"> mit einem <a href="{$module_data.PRODUCTS_LINK}"> zu versehen und am ende der Boxansicht mit einem  </a> wieder zu schleßen. Klar klappt nicht ...

in der Stylesheet.css hatte ich ich auch eingetragen

Code: PHP  [Auswählen]

.listingbox a {
  display: block;
  width: 100%;
  height: 100%; */
  cursor: pointer;
}

wird auch nichts.

Bin ich denn Überhaupt auf dem richtigen Weg ??

Hier ein Auszug aus der product_listing_include.html

Code: PHP  [Auswählen]

 {foreach name=aussen item=module_data from=$module_content}
  <div class="listingbox"><a href="{$module_data.PRODUCTS_LINK}">
    <div class="lb_inner">
    <div class="lb_title"><h2><a href="{$module_data.PRODUCTS_LINK}">{$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}" /></a>
        <noscript><a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME|onlytext}" /></a></noscript>
      {else}
      {/if}
      </div>
      <div class="lb_desc">{if $module_data.PRODUCTS_SHORT_DESCRIPTION}{$module_data.PRODUCTS_SHORT_DESCRIPTION|strip_tags|truncate:200:"...":true}{/if}</div>
      <div class="lb_shipping">
        {if $module_data.t10_isCategory}
      {$module_data.PRODUCTS_DESCRIPTION}
    {else}
     {if $module_data.PRODUCTS_QUANTITY > 0 || ($module_data.PRODUCTS_QUANTITY == 0 && !$module_data.PRODUCTS_SHIPPING_NAME|strpos:"Tage")}  
     {if $module_data.PRODUCTS_SHIPPING_NAME}{#text_shippingtime#} {if $module_data.PRODUCTS_SHIPPING_IMAGE}<span class="lb_shipping_image"><img src="{$module_data.PRODUCTS_SHIPPING_IMAGE}" alt="{$module_data.PRODUCTS_SHIPPING_NAME|onlytext}" /></span>{/if}{$module_data.PRODUCTS_SHIPPING_NAME_LINK}{else}&nbsp;{/if} {/if}{/if}</div>
     <div class="lb_price">
        {foreach name=inner item=price_data from=$module_data.PRODUCTS_PRICE_ARRAY}
          {include file="module/includes/price_box.html"}
        {/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>
      {if $module_data.PRODUCTS_PRICE_ARRAY.0.PRODUCTS_PRICE_FLAG != 'NotAllowed'}
        <div class="lb_tax">{$module_data.PRODUCTS_TAX_INFO}{$module_data.PRODUCTS_SHIPPING_LINK}</div>
      {/if}
      <div class="lb_buttons cf"><div class="cssButtonPos7_1">{$module_data.PRODUCTS_BUTTON_DETAILS}</div>{if $module_data.PRODUCTS_BUTTON_BUY_NOW || ($module_data.PRODUCTS_FSK18 != '0' && $smarty.const.SHOW_BUTTON_BUY_NOW != 'false')}<div class="cssButtonPos7_1">{$module_data.PRODUCTS_BUTTON_BUY_NOW}</div>{/if}</div>
      </div>
      </a>
  </div>

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

[hpzeller]

Du willst a-Tags in a-Tags verschachteln, das geht aber so nicht. Lösungsmöglichkeiten findest du z.B. hier -> https://css-tricks.com/nested-links/

Gruss
Hanspeter

[web-looks]

Du könntest das mit jQuery machen:

Code: Javascript  [Auswählen]

$(document).ready(function(){
  $(".listingbox").on('click', function(e) {
    if (!$(e.target).is('a')) {
      var productLink = $(this).find('h2 > a').attr('href');
      if (productLink != undefined) window.location.href = productLink;
    }
  });
});

Vorher Deinen ersten Versuchen mit <a> als Container wieder entfernen.

Über e.target wird geprüft, welches Element geklickt wurde. Nur wenn es sich nicht um einen Link handelt, wird das Skript ausgeführt. So funktionieren auch die Versandkosten Popups weiterhin.

[rjung]

Große Klasse, Vielen Dank.

So schaut es jetzt aus und scheint ohne Probeme zu funktionieren.

die product_listing_include.html

Code: PHP  [Auswählen]

if (!isset($STARTPAGE) && $smarty.const.PRODUCT_LIST_BOX == 'true') || ($STARTPAGE == 'true' && $smarty.const.PRODUCT_LIST_BOX_STARTPAGE == 'true')}
  {* BOXANSICHT *}
  {foreach name=aussen item=module_data from=$module_content}
  <div class="listingbox">
  <script>
 $(document).ready(function(){
  $(".listingbox").on('click', function(e) {
    if (!$(e.target).is('a')) {
      var productLink = $(this).find('h2 > a').attr('href');
      if (productLink != undefined) window.location.href = productLink;
    }
  });
});
  </script>
    <div class="lb_inner">
    <div class="lb_title"><h2><a href="{$module_data.PRODUCTS_LINK}">{$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}" /></a>
        <noscript><a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME|onlytext}" /></a></noscript>
      {else}....

und in der stylesheet.css noch ergänzt

Code: PHP  [Auswählen]

.lb_inner {
  border: 1px solid #ddd;
 padding: 10px 10px 5px 10px;
  min-height:300px;
  border-radius: 25px;
  cursor: pointer;
}

[web-looks]

Gern geschehen! 

So wie Du das Skript eingebaut hast, wird es aber mehrmals in den Quelltext geschrieben. Einmal mit jeder Produktbox. Setze das mal lieber in die general_bottom.js.php oder wenn es die nicht gibt, dann general.js.php. Zu finden hier: /templates/mein_template/javascript/

[rjung]

Ok, Danke,

hab es ans Ende in die general.js.php gepackt. Wieder was gelernt.

Was macht eigentlich den Unterschied zwischen der general.js.php und der general_bottom.js.php ?

Wird das Script in der general.js.php am Anfang und in der general_bottom.js.php am Ende geladen ?

Grüße
René

[web-looks]

Ja genau, so ist es. general.js wird im head-Bereich geladen und die general_bottom am Ende des body. Um den Seitenaufbau zu beschleunigen, kann man die unwichtigen Skripte ans Ende setzen. Meistens muss im head nur die jQuery Bibliothek geladen werden.