MODUL: product_options_selection.html mit jQuery

[bully807]

So ich habe es gelöst falls jemand auch daran gedacht hat hier die Änderung in der OPtions Datei

Code: PHP  [Auswählen]

<div id="radios">
  {foreach name=outer item=options_data from=$options}
 
  <div class="radio"><b>{$options_data.NAME}:</b>
   
  {foreach key=key_data name=key_data item=item_data from=$options_data.DATA}
    <input id="{$item_data.ID}" type="radio" name="id[{$options_data.ID}]" value="{$item_data.ID}" {if $smarty.foreach.key_data.first}checked="checked" {/if}   {if $options_data.HAS_IMAGE} onchange="change_ai({$options_data.ID}, this.value)"{/if} />
    <label for="{$item_data.ID}"><img src="images/product_images/info_images/{$item_data.IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" id="products_image" /></label>
   
  {/foreach}
</div>
  {/foreach}
</div>

Gruß
Bully

[bully807]

leider tritt nun das nexte Problem auf da ich bei einer Option ein Bild angezeigt haben möchte und bei der anderen Option den Text habe ich eine Schleife gebaut

Code: PHP  [Auswählen]

{if $options!=''}
<script type="text/javascript">
function change_ai(option, attribute) {literal}{{/literal}
        if (!document.getElementById) return;

        var t_img = '';
        var t_pop = '';
        var images = new Array();
        {foreach name=outer item=options_data from=$options}
        {if $options_data.HAS_IMAGE}
        images[{$options_data.ID}] = new Array();
        {foreach key=key_data item=item_data from=$options_data.DATA}
                images[{$options_data.ID}][{$item_data.ID}] = '{$item_data.IMAGE}';
        {/foreach}
        {/if}
        {/foreach}

        if (images[option] && images[option][attribute] != '') {literal}{{/literal}
                t_img = '{$INFO_IMAGE_PATH}'+images[option][attribute];
                t_pop = '{$POPUP_IMAGE_PATH}'+images[option][attribute];
        {literal}}{/literal} else {literal}{{/literal}
                t_img = ori_image;
                t_pop = ori_popup;
        {literal}}{/literal}
        document.getElementById('products_image').src = t_img;
        document.getElementById('products_popup').href = t_pop;

{literal}}{/literal}

function change_all_attributes() {literal}{{/literal}
        {foreach name=outer item=options_data from=$options}
        var sel_index = document.getElementById("cart_quantity").elements["id[{$options_data.ID}]"].selectedIndex;
        change_ai({$options_data.ID}, document.getElementById("cart_quantity").elements["id[{$options_data.ID}]"].options[sel_index].value);
        {/foreach}
{literal}}{/literal}
</script>

<div id="radios">
  {foreach name=outer item=options_data from=$options}
  {if $options_data.NAME == 'Kettelung Farbe'}    
  <div class="radio"><b>{$options_data.NAME}:</b>
   
  {foreach key=key_data name=key_data item=item_data from=$options_data.DATA}
    <input id="{$item_data.ID}" type="radio" name="id[{$options_data.ID}]" value="{$item_data.ID}" {if $smarty.foreach.key_data.first}checked="checked" {/if}   />
    <label for="{$item_data.ID}"><img src="images/product_images/info_images/{$item_data.IMAGE}" /></label>
   
  {/foreach}
</div>

 
{else}

<div id="radios">
  {foreach name=outer item=options_data from=$options}
 
  <div class="radio"><b>{$options_data.NAME}:</b>
   
  {foreach key=key_data name=key_data item=item_data from=$options_data.DATA}
    <input id="{$item_data.ID}" type="radio" name="id[{$options_data.ID}]" value="{$item_data.ID}" {if $smarty.foreach.key_data.first}checked="checked" {/if}   {if $options_data.HAS_IMAGE} onchange="change_ai({$options_data.ID}, this.value)"{/if} />
    <label for="{$item_data.ID}">{$item_data.TEXT}</label>
   
  {/foreach}
</div>

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

leider zeigt es mir da eine weiße Seite an.

könnte mir einer die vielen Bäume entfernen damit ich den Wald sehe???

Danke für Eure Hilfe

[h-h-h]

Code: Javascript  [Auswählen]

<div id="radios">
  {foreach name=outer item=options_data from=$options}
  {if $options_data.NAME == 'Kettelung Farbe'}    
  <div class="radio"><b>{$options_data.NAME}:</b>
   
  {foreach key=key_data name=key_data item=item_data from=$options_data.DATA}
    <input id="{$item_data.ID}" type="radio" name="id[{$options_data.ID}]" value="{$item_data.ID}" {if $smarty.foreach.key_data.first}checked="checked" {/if}   />
    <label for="{$item_data.ID}"><img src="images/product_images/info_images/{$item_data.IMAGE}" /></label>
####################### hier muss das {/if} hin, welches am Ende zu viel ist.
  {/foreach}
</div>

Bitte gebe uns deinen vorherigen Code ohne die extra Schleifen mit einer genauen Beschreibung deines Vorhabens, ich meine so beim groben überlesen, dass das so nicht funktioniert, da var sel_index[einen key benötigt] und vorher als array definiert werden muss. Kann den Code hier auf meinem Thinkpad gerade nur schwer lesen im Forum.

Viele Grüße,
h-h-h

[bully807]

Hallo h-h-h

zum Vorhaben ich habe zwei Optionen, einmal Kettelung und einmal Qualität.

Die Option Kettelung hat die attribute rot, schwarz, gelb usw.
diese möchte ich gern als Bild auf den Auswahl Buttons wiedergeben, damit der Kunde die Farben und die Kombination (Farbe Kettelung/Farbe Matte) richtig erkennen kann und durch klicken auf das Bild die Auswahl tätigen kann.
 ( ich glaube noriddle oder matt hatten mich darauf hingewiesen das es besser für den Kunden sei)

Die Option Qualität hat die arttibute:  sprint, ralley, usw.
die möchte als Text auf den Buttons ausgeben, da hier das Attributbild mittels Modul "Attributbilder mit automatischer Preisaktualisierung für modified-shop" beim Produktbild ausgegeben wird.

anbei der Code in Original

Code: PHP  [Auswählen]

{if $options!=''}
<script type="text/javascript">
function change_ai(option, attribute) {literal}{{/literal}
        if (!document.getElementById) return;

        var t_img = '';
        var t_pop = '';
        var images = new Array();
        {foreach name=outer item=options_data from=$options}
        {if $options_data.HAS_IMAGE}
        images[{$options_data.ID}] = new Array();
        {foreach key=key_data item=item_data from=$options_data.DATA}
                images[{$options_data.ID}][{$item_data.ID}] = '{$item_data.IMAGE}';
        {/foreach}
        {/if}
        {/foreach}

        if (images[option] && images[option][attribute] != '') {literal}{{/literal}
                t_img = '{$INFO_IMAGE_PATH}'+images[option][attribute];
                t_pop = '{$POPUP_IMAGE_PATH}'+images[option][attribute];
        {literal}}{/literal} else {literal}{{/literal}
                t_img = ori_image;
                t_pop = ori_popup;
        {literal}}{/literal}
        document.getElementById('products_image').src = t_img;
        document.getElementById('products_popup').href = t_pop;

{literal}}{/literal}

function change_all_attributes() {literal}{{/literal}
        {foreach name=outer item=options_data from=$options}
        var sel_index = document.getElementById("cart_quantity").elements["id[{$options_data.ID}]"].selectedIndex;
        change_ai({$options_data.ID}, document.getElementById("cart_quantity").elements["id[{$options_data.ID}]"].options[sel_index].value);
        {/foreach}
{literal}}{/literal}
</script>

<div id="radios">
  {foreach name=outer item=options_data from=$options}
 
  <div class="radio"><b>{$options_data.NAME}:</b>
   
  {foreach key=key_data name=key_data item=item_data from=$options_data.DATA}
    <input id="{$item_data.ID}" type="radio" name="id[{$options_data.ID}]" value="{$item_data.ID}" {if $smarty.foreach.key_data.first}checked="checked" {/if}   {if $options_data.HAS_IMAGE} onchange="change_ai({$options_data.ID}, this.value)"{/if} />
    <label for="{$item_data.ID}"><img src="images/product_images/info_images/{$item_data.IMAGE}" /></label>
   
  {/foreach}
</div>
  {/foreach}
</div>
{/if}

P.S. Shop version ist die Aktuellste. vorgestern geladen, auch auf wunsch von o.g. Mitgliedern 

[bully807]

Hallo h-h-h

ich habe heut mal versucht deine anmerkung zur Änderung anzuwenden. Leider bleibt die Seite dabei weiß.
eigentlich dachte ich ich kann es mit einer if-else-schleife lösen da ich so eine ähnliche auch im "alten" Shop habe allerdings habe ich dort die if-else-schleife mit selektion und dropdown-menü kombination.

Sprich Farbe Kettelung wird als dropdown menü angezeigt und die Qualitätsauswahl erfolgt über selektion.

dort funktioniert es. Daher dachte ich, dass es bei meiner jetzigen Anwendung auch funktioniert.

Gruß
Bully

[bully807]

Hallo werte Gemeinde.

ich habe nochmal versucht auf Basis von h-h-h ´s Modul zwei ausgaben zu definieren. sprich das eine Option als bild und eine Option als Text ausgegeben wird leider klappt es auch mit meiner neuen änderung nicht.
Vielleicht kann mir jemand einen Tipp geben anbei mein Code mit if-else-Schleife welche aber eine Weiße Seite ausgibt 

Code: PHP  [Auswählen]

{if $options!=''}
<script type="text/javascript">
function change_ai(option, attribute) {literal}{{/literal}
        if (!document.getElementById) return;

        var t_img = '';
        var t_pop = '';
        var images = new Array();
        {foreach name=outer item=options_data from=$options}
        {if $options_data.HAS_IMAGE}
        images[{$options_data.ID}] = new Array();
        {foreach key=key_data item=item_data from=$options_data.DATA}
                images[{$options_data.ID}][{$item_data.ID}] = '{$item_data.IMAGE}';
        {/foreach}
        {/if}
        {/foreach}

        if (images[option] && images[option][attribute] != '') {literal}{{/literal}
                t_img = '{$INFO_IMAGE_PATH}'+images[option][attribute];
                t_pop = '{$POPUP_IMAGE_PATH}'+images[option][attribute];
        {literal}}{/literal} else {literal}{{/literal}
                t_img = ori_image;
                t_pop = ori_popup;
        {literal}}{/literal}
        document.getElementById('products_image').src = t_img;
        document.getElementById('products_popup').href = t_pop;

{literal}}{/literal}

function change_all_attributes() {literal}{{/literal}
        {foreach name=outer item=options_data from=$options}
        var sel_index = document.getElementById("cart_quantity").elements["id[{$options_data.ID}]"].selectedIndex;
        change_ai({$options_data.ID}, document.getElementById("cart_quantity").elements["id[{$options_data.ID}]"].options[sel_index].value);
        {/foreach}
{literal}}{/literal}
</script>


/* Anzeige der Attribute als Text mit h-h-h product_options selection ala jQuery */


<div id="radios">
  {foreach name=outer item=options_data from=$options}
  {if $options_data.NAME == 'Qualität'}    
  <div class="radio"><b>{$options_data.NAME}:</b>
   
  {foreach key=key_data name=key_data item=item_data from=$options_data.DATA}
    <input id="{$item_data.ID}" type="radio" name="id[{$options_data.ID}]" value="{$item_data.ID}" {if $smarty.foreach.key_data.first}checked="checked" {/if}  {if $options_data.HAS_IMAGE} onchange="change_ai({$options_data.ID}, this.value)"{/if} />
    <label for="{$item_data.ID}">{$item_data.TEXT}</label>
{/if}
  {/foreach}
</div>

{else}


/* Anzeige der Attribute als Bild mit h-h-h product_options selection ala jQuery */

{if $options_data.NAME == 'Kettelung Farbe'}
  <div class="radio"><b>{$options_data.NAME}:</b>
   
  {foreach key=key_data name=key_data item=item_data from=$options_data.DATA}
    <input id="{$item_data.ID}" type="radio" name="id[{$options_data.ID}]" value="{$item_data.ID}" {if $smarty.foreach.key_data.first}checked="checked" {/if}  
    <label for="{$item_data.ID}"><img src="images/product_images/info_images/{$item_data.IMAGE}" /></label>
    {/if}
  {/foreach}
</div>
  {/foreach}
</div>
{/if}

Das eingefügte script ist nur zur Akutalisierung des Produkt Bildes bei Auswahl der jeweiligen Qualität.

Gruß

Bully