Bildaustausch bei Attributsauswahl

[infamous]

Da ich im Forum nichts dazu finden konnte (vielleicht war ich auch einfach zu blöd zum Suchen, aber ich fand nur Beiträge, bei denen es darum ging, das Hauptproduktbild zu ändern), habe ich durch einen JavaScript bei der Auswahl von Attributen eine kleine Vorschau auf der Produkt-Info-Seite eingebaut, wie unter goo.gl/HIKcE zu sehen. Wenn ihr eine Gurtbandfarbe, Zierborte oder Unterfütterung auswählt, werden die "Bitte wählen Sie"-Bilder unten rechts durch die Vorschau ersetzt.

Dafür habe ich in der "product_options_dropdown.html"

Code: PHP  [Auswählen]

<select name="id[{$options_data.ID}]">

durch

Code: PHP  [Auswählen]

<select onchange="bild_wechsel{$options_data.ID}(this)" name="id[{$options_data.ID}]">

ersetzt.

In der "general.js.php" habe ich dann das entsprechende Script eingebaut:

Code: Javascript  [Auswählen]

<script type="text/javascript">
<!--
function bild_wechselX(select){
 document.getElementById("ID_vom_Bild").src = ('images/Unterordner/' + select.options[select.options.selectedIndex].value + '.jpg' )
 return true;
}
// -->
</script>

Funktioniert soweit prima, nur habe ich das Problem, dass es immer einen JavaScript-Fehler gibt, wenn eine Auswahl getroffen wird, bei der kein Bildwechsel vorgesehen ist. Wird z. B. der Halsumfang verändert, wird bei meiner Lösung onchange="bild_wechsel15(this)" ausgeführt, nur gibt es keine Funktion mit diesem Namen.

Habt ihr eine Idee, wie sich das eleganter realisieren lässt?

Ich meine, zur Not kann ich damit leben, da es nicht mehr als eine Unschönheit ist, aber wenn es die Chance auf eine unkomplizierte Optimierung gibt, bin ich für alles offen.

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

[infamous]

Hat sich erledigt, bin nach etwas Nachdenken selbst auf eine Lösung gekommen, indem ich die "product_options_dropdown.html" wie folgt angepasst habe:

Code: PHP  [Auswählen]

  {if $options_data.ID =='2'}    
    <select onchange="bild_wechsel{$options_data.ID}(this)" name="id[{$options_data.ID}]">
      {foreach key=key_data item=item_data from=$options_data.DATA}
        <option value="{$item_data.ID}">{$item_data.TEXT} {if $item_data.PRICE !='' }{$item_data.PREFIX} {$item_data.PRICE}{/if} &nbsp;</option>
      {/foreach}
    </select>

  {elseif $options_data.ID =='6'}    
    <select onchange="bild_wechsel{$options_data.ID}(this)" name="id[{$options_data.ID}]">
      {foreach key=key_data item=item_data from=$options_data.DATA}
        <option value="{$item_data.ID}">{$item_data.TEXT} {if $item_data.PRICE !='' }{$item_data.PREFIX} {$item_data.PRICE}{/if} &nbsp;</option>
      {/foreach}
    </select>

  {elseif $options_data.ID =='14'}    
    <select onchange="bild_wechsel{$options_data.ID}(this)" name="id[{$options_data.ID}]">
      {foreach key=key_data item=item_data from=$options_data.DATA}
        <option value="{$item_data.ID}">{$item_data.TEXT} {if $item_data.PRICE !='' }{$item_data.PREFIX} {$item_data.PRICE}{/if} &nbsp;</option>
      {/foreach}
    </select>

  {else}    
    <select name="id[{$options_data.ID}]">
      {foreach key=key_data item=item_data from=$options_data.DATA}
        <option value="{$item_data.ID}">{$item_data.TEXT} {if $item_data.PRICE !='' }{$item_data.PREFIX} {$item_data.PRICE}{/if} &nbsp;</option>
      {/foreach}
    </select>
  {/if}

Nicht elegant, aber effektiv.

[Tomcraft]

Schau mal was die Forensuche nach "Bild Wechsel Option" ergeben hat.

Hier der direkte Link zu einem Beitrag zum Thema von mir: Bildwechsel bei Änderung der Variation
Direkter Link zum Modul: MODUL: Attribute mit Grafiken

Grüße

Torsten

[infamous]

Jetzt, wo du es erwähnst, erinnere ich mich, dass ich bei meiner Suche über den Thread auch schon gestolpert bin.

Allerdings war die Lösung für mich untauglich, weil ich nicht nur eine handvoll Farben, sondern knapp 200 durch Bilder dargestellte Optionen in verschiedenen Artikelmerkmalen brauchte. Nicht nur, dass das auf der Seite chaotisch aussehen würde, auch der manuelle Upload der Bilder über den Adminbereich hätte mich an den Rande des Nervenzusammenbruchs gebracht.

So konnte ich einfach alle Bilder automatisch umbenennen und ins entsprechende Unterverzeichnis legen.

Aber trotzdem danke für den Hinweis!

[Tomcraft]

Und wie schaut das jetzt bei dir auf der Seite aus? Hast du mal einen Screenshot?

Das Ergebnis ist doch letzten Endes gleich.

Grüße

Torsten

[infamous]

Und wie schaut das jetzt bei dir auf der Seite aus? Hast du mal einen Screenshot?
[...]

Kannst du dir live unter http://goo.gl/HIKcE ansehen. Wenn du eine Zierborte, Gurtbandfarbe oder Unterfütterung auswählst, ändert sich automatisch das entsprechende Vorschaubild unten rechts.

[Tomcraft]

So meintest du das also... ich meine, dass wir dafür hier auch schon eine Lösung im Forum hatten, aber du hast es ja nun auch schon hinbekommen.

Grüße

Torsten

[Nice_Stuff]

Hallo infamous !

Dein Script interessiert mich sehr, da ich schon lange so etwas suche.

Leider ist das hier nicht ganz ausführlich angezeigt, könntest du das hier noch mal im vollen Umfang posten bitte.

Recht herzlichen Dank.

[Tomcraft]

Der Code wir einfach gegen den vorhandenen Code ausgetauscht, der standardmäßig so aussieht:

Code: PHP  [Auswählen]

        <select name="id[{$options_data.ID}]" id="{$options_data.ID}">
          {foreach key=key_data item=item_data from=$options_data.DATA}
            <option value="{$item_data.ID}">&nbsp;{$item_data.TEXT} {if $item_data.PRICE != ''}{$item_data.PREFIX} {$item_data.PRICE}{/if}&nbsp; </option>
          {/foreach}
        </select>

Grüße

Torsten

[Nice_Stuff]

Hallo Tomcraft, danke so ähnlich hab ich es dann auch übernommen

Leider habe ich jetzt noch ein Problem mit der foreach-Schleife. Vielleicht kannst du mir da weiter helfen:

Der Code:

Code: PHP  [Auswählen]

{foreach name=outer item=options_data from=$options}
                 
        <table width="48%" style="margin:10px 5px 10px 5px; border:1px #000000 solid; float:left;">
        <tr><td colspan="2" style="background-color:lightgrey;" name="{$options_data.ID}"><b style="float:left; padding-left:5px; font-size:16px;">{$options_data.NAME}:</b></td></tr>
        <td>
         
        <script type="text/javascript">
        <!--
        function bild_wechsel{$options_data.ID}(select)
                {literal}{{/literal}
                 document.getElementById({$options_data.ID}).src = ('images/product_images/product_options/' + select.options[select.options.selectedIndex].value + '_0.jpg' )
                 return true;
                {literal}}{/literal}
        // -->
        </script>

        <select onchange="showPrice(document.getElementById('cart_quantity')); bild_wechsel{$options_data.ID}(this);" name="id[{$options_data.ID}]" style="width:220px;">
       
        {foreach key=key_data item=item_data from=$options_data.DATA}
        <option value="{$item_data.ID}">{$item_data.TEXT} {if $item_data.PRICE !='' }{$item_data.PREFIX} {$item_data.PRICE}{/if}</option>
        {/foreach}
        </select>
        </td>
        <td><img src="images/product_images/product_options/{$item_data.ID}_0.jpg" onerror="this.src='images/product_images/product_options/noimage_0.jpg';" name="{$options_data.ID}" height="80px" id="{$options_data.ID}" /></td>
        </table>
               
{/foreach}

Das Problem ist folgendes. Bei der Artikelauswahl, oder auch Refresh der Seite zeigt er mir immer das letzte Bild an und hält sich nicht an die Sortierung der Optionen. Bei Bildwechsel klapt es den wieder. Ist klar das er beim foreach immer den letzten Eintrag anzeigt, doch wie gelingt es mir das er sich an den dementsprechenden 1 value orientiert und mir das entsprechende Bild anzuzeigen. Kannst du mir einen Tipp geben, wie ich das lösen kann? Vielen Dank.

[Nice_Stuff]

Hab soweit eine Lösung gefunden, bin aber noch nicht ganz zufrieden. Wenn kein Bild vorhanden ist, soll es die noimage.jpg anzeigen, was er auch über den onerror macht. Nur leider bekomme ich den href nicht dazu, den entsprechenden Pfart auf das noimage.jpg Bild zu leiten. Die thickbox greift dann immer ins leere, weil das Bild nicht vorhanden ist. Die Image-Ausgabe erkennt das, nur leider die href-Ausgabe nicht.

Ich habe schon unzählige versuche unternommen, nur leider fällt mir dazu nichts passendes mehr ein.

Hier mal der Code:

Code: PHP  [Auswählen]

{foreach name=outer item=options_data from=$options}
                 
        <table width="48%" style="margin:10px 5px 10px 5px; border:1px #000000 solid; float:left;">
        <tr><td colspan="2" style="background-color:lightgrey;" name="{$options_data.ID}"><b style="float:left; padding-left:5px; font-size:16px;">{$options_data.NAME}:</b></td></tr>
        <td>
         
        <script type="text/javascript">
        <!--
        function bild_wechsel{$options_data.ID}(select)
        {literal}{{/literal}
                 document.getElementById('box_{$options_data.ID}').href = ('images/product_images/product_options/' + select.options[select.options.selectedIndex].value + '_0.jpg' );
                 document.getElementById('img_{$options_data.ID}').src = ('images/product_images/product_options/' + select.options[select.options.selectedIndex].value + '_0.jpg' );
                 return true;
        {literal}}{/literal}   
        // -->
        </script>

        <select onchange="showPrice(document.getElementById('cart_quantity')); bild_wechsel{$options_data.ID}(this);" name="id[{$options_data.ID}]" style="width:220px;">
        {foreach key=key_data item=item_data from=$options_data.DATA}
        <option value="{$item_data.ID}">{$item_data.TEXT} {if $item_data.PRICE !='' }{$item_data.PREFIX} {$item_data.PRICE}{/if}</option>
        {/foreach}
        </select>
        </td>
        <td>
        {php}$c = 0;{/php}
        {foreach key=key_data item=item_data from=$options_data.DATA}
        <a href="images/product_images/product_options/{$item_data.ID}_0.jpg" class="thickbox" id="box_{$options_data.ID}">
        <img src="images/product_images/product_options/{$item_data.ID}_0.jpg" onerror="this.src='images/product_images/product_options/noimage_0.jpg';" height="80px" id="img_{$options_data.ID}" />
        </a>
        {php}
        $c++;
        if ( $c >= 1) break;{/php}
        {/foreach}
        </td>
        </table>
               
{/foreach}

Vielleicht hat hier noch jemand einen guten Tipp für mich Danke...

[noRiddle (revilonetz)]

Verstehe nicht ganz was du möchtest und mit
"Die Image-Ausgabe erkennt das, nur leider die href-Ausgabe nicht."
meinst.

Wechselst du bei Optionsauswahl das Bild ?
Welche Thickbox-Version benutzt du ?

Tipp:
Da die Thickbox (auch meine "Thickbox animiert", im Forum zu finden) das href für das größere Bild bei Seitenaufruf in eine Variable speichert, steht nach Onpage-Änderung durch Javascript das neue href nicht zur Verfügung.
Das kann man ändern indem man (für die nicht komprimierte Version) das hier sucht

Code: Javascript  [Auswählen]

$(this).click(function(){
    tb_show(t,a,g);
    this.blur();
    return false;
});

und in das ändert

Code: Javascript  [Auswählen]

$(this).click(function(){
    tb_show(t,this.href||this.alt,g);
    this.blur();
    return false;
});

Gruß,
noRiddle

[Nice_Stuff]

Hallo !

Ich poste mal den Quellen-Code. Da erkennt man das besser.

Code: XML  [Auswählen]

<table style="margin:10px 5px 10px 5px; border:1px #000000 solid; float:left;" width="48%">
        <tbody><tr><td colspan="2" style="background-color:lightgrey;" name="27"><b style="float:left; padding-left:5px; font-size:16px;">Glasart:</b></td></tr>
        <tr><td>
         
        <script type="text/javascript">
        <!--
        function bild_wechsel27(select)
        {
                 document.getElementById('box_27').href = ('images/product_images/product_options/' + select.options[select.options.selectedIndex].value + '_0.jpg' );
                 document.getElementById('img_27').src = ('images/product_images/product_options/' + select.options[select.options.selectedIndex].value + '_0.jpg' );
                 return true;
        }      
        // -->
        </script>

        <select onchange="showPrice(document.getElementById('cart_quantity')); bild_wechsel27(this);" name="id[27]" style="width:220px;">
                <option value="445">Echtglas: klar hell </option>
                </select>
        </td>
        <td>
                        <a href="images/product_images/product_options/445_0.jpg" class="thickbox" id="box_27">
        <img src="images/product_images/product_options/445_0.jpg" onerror="this.src='images/product_images/product_options/noimage_0.jpg';" id="img_27" height="80px">
        </a>   
                </td>
        </tr></tbody></table>
               
 
                 
        <table style="margin:10px 5px 10px 5px; border:1px #000000 solid; float:left;" width="48%">
        <tbody><tr><td colspan="2" style="background-color:lightgrey;" name="40"><b style="float:left; padding-left:5px; font-size:16px;">Radius:</b></td></tr>
        <tr><td>
         
        <script type="text/javascript">
        <!--
        function bild_wechsel40(select)
        {
                 document.getElementById('box_40').href = ('images/product_images/product_options/' + select.options[select.options.selectedIndex].value + '_0.jpg' );
                 document.getElementById('img_40').src = ('images/product_images/product_options/' + select.options[select.options.selectedIndex].value + '_0.jpg' );
                 return true;
        }      
        // -->
        </script>

        <select onchange="showPrice(document.getElementById('cart_quantity')); bild_wechsel40(this);" name="id[40]" style="width:220px;">
                <option value="254">550 mm </option>
                </select>
        </td>
        <td>
                        <a href="images/product_images/product_options/254_0.jpg" class="thickbox" id="box_40">
        <img src="images/product_images/product_options/noimage_0.jpg" onerror="this.src='images/product_images/product_options/noimage_0.jpg';" id="img_40" height="80px">
        </a>   
                </td>
        </tr></tbody></table>

Bei ersten Attribute erkennt er anhand es Value und der Zusammensetzung des Stings zum Bildpfad, das dieses Bild vorhanden ist und zeigt das Bild an inkl. des richtigen href.

Bei zweiten Attribut setzt er den Bildpfad zusammen, img.src durch onerror erkennt dass das Bild nicht vorhanden ist und gibt das noimage.jpg aus, doch der href bleibt auf dem falschen String stehen.

[noRiddle (revilonetz)]

Ich habe, mit Verlaub, keine Lust und keine Zeit deinen (unformatierten) Code zu analysieren.
Wenn du mit onerror das Bild austauscht mußt du natürlich auch den Link ändern.
Woher soll das DOM wissen was du möchtest ?
Vorgehensweise wäre das onerror event in eine Funktion auszulagern und in dieser auch das href zu ändern.

Gruß,
noRiddle

[Nice_Stuff]

Hallo, sorry das Formatieren habe ich vergessen...

Trotzdem klappt es nicht mit dem Link...

Code: PHP  [Auswählen]

{foreach name=outer item=options_data from=$options}
<table width="48%" style="margin:10px 5px 10px 5px; border:1px #000000 solid; float:left;">
<tr>
        <td colspan="2" style="background-color:lightgrey;" name="{$options_data.ID}"><b style="float:left; padding-left:5px; font-size:16px;">{$options_data.NAME}:</b></td></tr>
        <td>
                <script type="text/javascript">
                function bild_wechsel{$options_data.ID}(select)
                        {literal}{{/literal}
                                 document.getElementById('box_{$options_data.ID}').href = ('images/product_images/product_options/' + select.options[select.options.selectedIndex].value + '_0.jpg' );
                                 document.getElementById('img_{$options_data.ID}').src = ('images/product_images/product_options/' + select.options[select.options.selectedIndex].value + '_0.jpg' );
                                 return true;
                        {literal}}{/literal}   
               
                </script>              
                <script type="text/javascript">
                function imgError(img)
                        {literal}{{/literal}
                                img.onerror = "";
                                img.src = "images/product_images/product_options/noimage_0.jpg";
                                document.getElementById('box_{$options_data.ID}').href = ('images/product_images/product_options/noimage_0.jpg');
                        {literal}}{/literal}
                </script>                      

                <select onchange="showPrice(document.getElementById('cart_quantity')); bild_wechsel{$options_data.ID}(this);" name="id[{$options_data.ID}]" style="width:220px;">
                {foreach key=key_data item=item_data from=$options_data.DATA}
                <option value="{$item_data.ID}">{$item_data.TEXT} {if $item_data.PRICE !='' }{$item_data.PREFIX} {$item_data.PRICE}{/if}</option>
                {/foreach}
                </select>
        </td>
        <td>
        {php}$c = 0;{/php}
        {foreach key=key_data item=item_data from=$options_data.DATA}
                <a href="images/product_images/product_options/{$item_data.ID}_0.jpg" class="thickbox" id="box_{$options_data.ID}">
                <img src="images/product_images/product_options/{$item_data.ID}_0.jpg" onError="imgError(this);" height="80px" id="img_{$options_data.ID}" />
                </a>   
        {php}
        $c++;
        if ( $c >= 1) break;{/php}
        {/foreach}
        </td>
</table>               
{/foreach}