BETA MODUL: Artikelbild mittels Attribut wechseln

[Ladiva]

Das is egal ob ich nur eines oder mehrere hochlade.. mal geht es und mal wieder nicht..

[hedon02]

Bloede Frage aber, das sind auch alles .jpg Dateien?

Gruss

[Ladiva]

nein, es ware alles PNG´s, aber die hatter ja auch hochgeladen und in Jpg´s umbenannt.

ich habe es aber auch mit jpg´s getestet die nimmt er dann auch nicht.

[Ladiva]

So, es muss am Modul liegen. Das Modul speichert ja die Bilder genauso wie normalerweise die Produkbilder gespeichert werden, lediglich mit der Dateinamenerweiterung mit der OptionsID und der MerkmalID.

Da der Shop aber alle Produktbilder anstandslos Speichert, die Bilder dieses Moduls aber nicht, scheint der Fehler doch dort zu liegen.

Das Merkwürdige ist nur das ich zwar Bilder löschen kann damit, aber eben nicht hochladen. die ersten ~50 Bilder hat er anstandlos hochgeladen und seitdem geht nichts mehr.

Gruß

[Headline]

Tolle Sache funktioniert alles einwandfrei.
Hab aber mal eine Frage:
Was mache ich, wenn ich für einen Artikel mehrere Attribute habe, die gleichzeitig ausgewählt werden können?
Kann ich auch mehrere Bilder anzeigen lassen?

Beispiel:
Artikel sieht mit diesem Attribut von vorne so aus und mit diesem Attribut für die Rückseite so?
Oder von der Seite so?

Hedon hat hier einmal einen Ansatz geliefert, den ich aber nicht nachvollziehen kann. Vielleicht kann mir ja jemand auf die Sprünge helfen.

Hier der Link auf die Forumsseite: Konfigurator Einbindung auf Seite
Hoffe Ihr könnt mir weiter helfen.
Danke Euch schon im voraus.

P.S.: Ich verstehe ja html, css und etwas php doch vieles bleibt mir leider noch verborgen.

[hedon02]

Hallo,

dafuer braeuchtest Du wohl eine Attributmatrix, aehnlich dieser hier: MODUL: jQuery Attribute Matrix mit Bildern & Cloud Zoom

Das ist aber eine recht komplizierte Sache. Es gibt gute Anbieter von solchen Modulen, da sparst Du  am Ende Zeit und Nerven ohne Ende  .

Googel einfach mal  nach "AJAX Attribut Matrix mit Attribut Bildern"

Gruesse

[Headline]

Hallo hedon,
danke für Deine Antwort. Aber du bist doch der Author, oder mit (Co) Author von dem Link den ich gepostest habe. Habe mir mal die Seite von Sims angeschaut und da funktioniert es doch auch. Also habe ich etwas verpasst, oder unterliege ich einem Denkfehler in Deinen Anweisungen, oder hat Sims einen anderen Weg gewählt?
Firebug bringt mich da auch nicht weiter, weil alle Abfragen als html gelistet werden. OK der Aufruf ist in PHP natürlich for each und ich weiß immer noch nicht wo das JS eigentlich eingebettet wird.
Am Anfang hast Du mal geschrieben, daß das mit wenig jquery gelöst werden kann.
JS ist aber nicht unbedingt meine Lieblingssprache. Verstehe davon nur Bruchteile, oder logischen Bestand, aber sonst Pffff!
Wäre nett, wenn Du dich nochmal melden könntest.
Oder anderes gefragt: Kannst Du so etwas programmieren?

Naja, Zeit und nerven Sparen ist Klasse, aber ich will ja auch etwas lernen.

[hedon02]

Wenn ich mich richtig erinnere ist das Ganze bei Ihm ja hardcodiert. Solange Du für jede Ansicht ein eigenes Attribut anlegst, kannst Du auch das Modul dieses Threads verwenden.
Also  z.B.:
Du hast eine Vorder-(Poduktbild_1 => Hauptbild) und eine Rückansicht (Produktbild_2 => more_pics) von einem Handy z.B. Diese beiden haben die Option Farbe-Vorderseite respektive Farbe-Rückseite.

Die eigentlichen Produktbilder stehen Dir in der "product_info_blabla.html"  als "{$PRODUCTS_IMAGE}"  und "{$PRODUCTS_IMAGE_1}" zur Verfügung. Du müsstest also nur das Javascript dieses Moduls so umbauen,  dass nicht immer "{$PRODUCTS_IMAGE}"  ersetzt wird, sondern mit dem 1. "select" das {$PRODUCTS_IMAGE} und  mit dem  2. "select" das {$PRODUCTS_IMAGE_1}.

Ist halt eine ganz spezifische Frage was Du da wirklich möchtest. Je flexibler desto schwieriger umzusetzen  ist  es.

Viele Grüsse

[Headline]

Hallo Hedon,
hab mir mal mein graues lichtes Haar gerauft. Wenn ich dich richtig verstehe setze ich in meine "product_info_v1.html erstmal den Aufruf für weitere Produktbilder mit:

{if $PRODUCTS_IMAGE_1 != ''}
<div><img src="{$PRODUCTS_IMAGE_1}" alt="{$PRODUCTS_NAME}" /></div>
{/if}
Das kann ich also für JEDES Attribut wiederholen mit: IMAGE_2, IMAGE_3 usw.?
Soweit sogut, den container kann ich ja über CSS an jeder beliebiger Stelle plazieren.
Auch kein Problem als auch mit z-index über dem orginal Produktbild.
Woher weiß ich denn, welche ID das andere Attribut hat, um PRODUCT_IMAGE_1 anzusprechen. mich verwirrt das JS in meiner "produkt_options_dropdown_ai.html"
Hier mal der Quellcode dazu:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="product_info"}
<!-- Attribut_Bilder -->
<script>
var ori_image = '{$PRODUCTS_IMAGE}';
var ori_popup = '{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}';
</script>
<!-- attribut_bilder -->

{$FORM_ACTION}
<h1>{$PRODUCTS_NAME}</h1>

<div id="productinfowrap">
<table><tr><td style="padding-right:20px;">
        {if $PRODUCTS_IMAGE!=''}

<!-- attribut_bilder class="productimage" durch id="products_image"  in folgender Zeile ersetzen -->

                <a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE}" class="thickbox" id="products_popup" rel="{$PRODUCTS_ID}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" id="products_image" />{if $PRODUCTS_POPUP_LINK!=''}<br/>{#text_zoom#}{/if}</a>


        {/if}</td><td>
          <div id="productinfoprice">

                        <p class="productprice"><strong>{$PRODUCTS_PRICE}</strong></p>
                        <p class="taxandshippinginfo" style="white-space:nowrap">{$PRODUCTS_TAX_INFO}{if $PRODUCTS_SHIPPING_LINK}{$PRODUCTS_SHIPPING_LINK}{/if}</p>
                        {if $SHIPPING_NAME}<p class="shippingtime"><strong>{#text_shippingtime#}</strong>{if $SHIPPING_IMAGE}<img src="{$SHIPPING_IMAGE}" alt="{$SHIPPING_NAME}" />{/if} {$SHIPPING_NAME}</p>
                       {/if}
                        {if $PRODUCTS_VPE}
                        <div class="hrlightgrey"></div>{$PRODUCTS_VPE}{/if}
                        {if $MODULE_graduated_price !=''}<div class="hrlightgrey"></div>{$MODULE_graduated_price}{/if}
                        {if $PRODUCTS_DISCOUNT!=''}<div class="hrlightgrey"></div>{$PRODUCTS_DISCOUNT}{/if}
                        {if $PRODUCTS_FSK18=='true'}<div class="hrlightgrey"></div><img src="{$tpl_path}img/fsk18.gif" alt="" style="cursor:default" />{/if}
                        {if $PRODUCTS_MODEL!=''}<div class="hrlightgrey"></div>
                        <strong>{#model#}</strong> {$PRODUCTS_MODEL}{/if}
                       {if $PRODUCTS_URL != ''}
                        <div class="hrlightgrey"></div><div style="padding-top:5px;">{$PRODUCTS_URL}</div>
                        {/if} <br />
                        <div style="margin-top:10px"></div>
                        {$PRODUCTS_PRINT}

                {if $PRODUCTS_DATE_AVIABLE != ''}<p>{$PRODUCTS_DATE_AVIABLE}</p>{/if}
        </div>
        <div style="clear:both;"></div>
    </td></tr></table>
        {if $MODULE_product_options !=''}
        <div class="productoptions">{$MODULE_product_options}</div>{/if}
<!-- BOF - Tomcraft - 2009-11-28 - Included xs:booster //-->
        {if $XTB_REDIRECT_USER_TO=='product'}<div style='width:400px;padding:10px;color:white;background-color:green;'><strong>Sie haben die eBay Auktion gewonnen!</strong><br/>Bitte wählen Sie nun noch die gewünschten Produkteigenschaften und legen Sie den Artikel danach in den Warenkorb, um mit der Zahlung fortzufahren und das Produkt versandfertig zu machen!</div>{/if}
<!-- EOF - Tomcraft - 2009-11-28 - Included xs:booster //-->
        <div class="addtobasket">
        <table border="0" cellspacing="0" cellpadding="2">
                  <tr>
                    <td style="width:100%; padding-right:5px;">{$ADD_QTY}</td>
                    <td>{$ADD_CART_BUTTON}</td>
                  </tr>
        </table>
        </div>
        {if $PRODUCTS_DESCRIPTION !=''}<div>{$PRODUCTS_DESCRIPTION}</div>{/if}
</div>

{if $more_images|@count > 0}
<!-- More Pictures -->
<div class="morepics">
{foreach item=more_images_data from=$more_images}
<a class="thickbox" rel="{$PRODUCTS_ID}" title="{$PRODUCTS_NAME}" href="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"popup_images"}"><img align="left" src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a>
{/foreach}
</div>
<div style="clear:both;"></div>
{/if}


{$FORM_END}
<!-- Attribut_Bilder -->
<script type="text/javascript">
        if (document.getElementById) {literal}{{/literal}
                change_all_attributes();
        {literal}}{/literal}
</script>
<!-- attribut_bilder -->

{if $MODULE_products_media != ''}{$MODULE_products_media}{/if}
{if $MODULE_products_reviews != ''}{$MODULE_products_reviews}{/if}
{if $MODULE_cross_selling != ''}{$MODULE_cross_selling}{/if}
{if $MODULE_reverse_cross_selling != ''}{$MODULE_reverse_cross_selling}{/if}
{if $MODULE_also_purchased != ''}{$MODULE_also_purchased}{/if}
{if $PRODUCTS_ADDED != ''}<p class="productinfoproductadded">{$PRODUCTS_ADDED}</p>{/if}
{$PRODUCT_NAVIGATOR}

Das JS beginnt doch in Zeile75 und endet in Zeile77 Richtig?

Sicherheitshalber sende ich meine product_info.html gleich mal mit.
Da würde ich

{if $PRODUCTS_IMAGE_1 != ''}
<div><img src="{$PRODUCTS_IMAGE_1}" alt="{$PRODUCTS_NAME}" /></div>
{/if}

in Zeile 25 nach dem {/if} einfügen:
Auch soweit richtig?

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="product_info"}
<!-- Attribut_Bilder -->
<script>
var ori_image = '{$PRODUCTS_IMAGE}';
var ori_popup = '{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}';
</script>
<!-- attribut_bilder -->

{$FORM_ACTION}
<h1>{$PRODUCTS_NAME}</h1>

<div id="productinfowrap">
<table><tr><td style="padding-right:20px;">
        {if $PRODUCTS_IMAGE!=''}

<!-- attribut_bilder class="productimage" durch id="products_image"  in folgender Zeile ersetzen -->

                <a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE}" class="thickbox" id="products_popup" rel="{$PRODUCTS_ID}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" id="products_image" />{if $PRODUCTS_POPUP_LINK!=''}<br/>{#text_zoom#}{/if}</a>






        {/if}</td><td>
          <div id="productinfoprice">

                        <p class="productprice"><strong>{$PRODUCTS_PRICE}</strong></p>
                        <p class="taxandshippinginfo" style="white-space:nowrap">{$PRODUCTS_TAX_INFO}{if $PRODUCTS_SHIPPING_LINK}{$PRODUCTS_SHIPPING_LINK}{/if}</p>
                        {if $SHIPPING_NAME}<p class="shippingtime"><strong>{#text_shippingtime#}</strong>{if $SHIPPING_IMAGE}<img src="{$SHIPPING_IMAGE}" alt="{$SHIPPING_NAME}" />{/if} {$SHIPPING_NAME}</p>
                       {/if}
                        {if $PRODUCTS_VPE}
                        <div class="hrlightgrey"></div>{$PRODUCTS_VPE}{/if}
                        {if $MODULE_graduated_price !=''}<div class="hrlightgrey"></div>{$MODULE_graduated_price}{/if}
                        {if $PRODUCTS_DISCOUNT!=''}<div class="hrlightgrey"></div>{$PRODUCTS_DISCOUNT}{/if}
                        {if $PRODUCTS_FSK18=='true'}<div class="hrlightgrey"></div><img src="{$tpl_path}img/fsk18.gif" alt="" style="cursor:default" />{/if}
                        {if $PRODUCTS_MODEL!=''}<div class="hrlightgrey"></div>
                        <strong>{#model#}</strong> {$PRODUCTS_MODEL}{/if}
                       {if $PRODUCTS_URL != ''}
                        <div class="hrlightgrey"></div><div style="padding-top:5px;">{$PRODUCTS_URL}</div>
                        {/if} <br />
                        <div style="margin-top:10px"></div>
                        {$PRODUCTS_PRINT}

                {if $PRODUCTS_DATE_AVIABLE != ''}<p>{$PRODUCTS_DATE_AVIABLE}</p>{/if}
        </div>
        <div style="clear:both;"></div>
    </td></tr></table>
        {if $MODULE_product_options !=''}
        <div class="productoptions">{$MODULE_product_options}</div>{/if}
<!-- BOF - Tomcraft - 2009-11-28 - Included xs:booster //-->
        {if $XTB_REDIRECT_USER_TO=='product'}<div style='width:400px;padding:10px;color:white;background-color:green;'><strong>Sie haben die eBay Auktion gewonnen!</strong><br/>Bitte wählen Sie nun noch die gewünschten Produkteigenschaften und legen Sie den Artikel danach in den Warenkorb, um mit der Zahlung fortzufahren und das Produkt versandfertig zu machen!</div>{/if}
<!-- EOF - Tomcraft - 2009-11-28 - Included xs:booster //-->
        <div class="addtobasket">
        <table border="0" cellspacing="0" cellpadding="2">
                  <tr>
                    <td style="width:100%; padding-right:5px;">{$ADD_QTY}</td>
                    <td>{$ADD_CART_BUTTON}</td>
                  </tr>
        </table>
        </div>
        {if $PRODUCTS_DESCRIPTION !=''}<div>{$PRODUCTS_DESCRIPTION}</div>{/if}
</div>

{if $more_images|@count > 0}
<!-- More Pictures -->
<div class="morepics">
{foreach item=more_images_data from=$more_images}
<a class="thickbox" rel="{$PRODUCTS_ID}" title="{$PRODUCTS_NAME}" href="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"popup_images"}"><img align="left" src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a>
{/foreach}
</div>
<div style="clear:both;"></div>
{/if}


{$FORM_END}
<!-- Attribut_Bilder -->
<script type="text/javascript">
        if (document.getElementById) {literal}{{/literal}
                change_all_attributes();
        {literal}}{/literal}
</script>
<!-- attribut_bilder -->

{if $MODULE_products_media != ''}{$MODULE_products_media}{/if}
{if $MODULE_products_reviews != ''}{$MODULE_products_reviews}{/if}
{if $MODULE_cross_selling != ''}{$MODULE_cross_selling}{/if}
{if $MODULE_reverse_cross_selling != ''}{$MODULE_reverse_cross_selling}{/if}
{if $MODULE_also_purchased != ''}{$MODULE_also_purchased}{/if}
{if $PRODUCTS_ADDED != ''}<p class="productinfoproductadded">{$PRODUCTS_ADDED}</p>{/if}
{$PRODUCT_NAVIGATOR}

Oder ist das JS in der product_info.html von Zeile 79 bis 81 verantwortlich?

Wie gesagt, JS ist nicht unbedingt mein Revier!

Hab ich eigentlich im Backend für jede Ansicht ein eigenes Attribut angelegt?

Hier mal ein paar Bilder meines Backends:
[ Für Gäste sind keine Dateianhänge sichtbar ]
und noch eins
[ Für Gäste sind keine Dateianhänge sichtbar ]
Wo muß ich denn jetzt was ändern?

Wäre ja schon froh, wenn ich halb soviel wüsste wie Du!

Dank Dir schonmal.

[Headline]

@hedon

Hallo ich lern ja noch, wie jeden Tag etwas dazu.
Bin aber eher der Designer und Gestalter.
Deine Idee mit dem Script ändern finde ich ja super. Wenn man zwei Atrribute ändern kann man doch auch mehrere ändern oder nicht?
3 würden mir ja schon reichen.
Aber wo genau wird denn im JS was geändert?
Produktinfo und Produktoptions HTML Dateien sind in meinen AUgen unterschiedlich, obwohl sie doch gleich seien sollten. Und was besagt eigentlich der Befehl

Code: Javascript  [Auswählen]

{literal}}{/literal}

?

Hier mal meine beiden Javascripts.
product_options_dropdown.html:

Code: Javascript  [Auswählen]

<script>
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 = '{$INFO_IMAGE_PATH|replace:"info_images":"popup_images"}'+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>

und product_info_v1.html:

Code: Javascript  [Auswählen]

<script>
var ori_image = '{$PRODUCTS_IMAGE}';
var ori_popup = '{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}';
</script>

Ist denn mein Denkansatz richtig oder falsch?
Hab ich hier etwas übersehen?

Oder kann mir sonst jemand dabei helfen?
I really do not understand JS I guess

[hedon02]

Es können doch schon beliebig viele Attribute geändert werden. Wie das Modul grundsätzlich funktioniert  habe ich weiter vorn im Thread schon einmal versucht zu erklären.

Wenn  Du wenig  Ahnung von Javascript hast, und das trotzdem probieren willst, dann kann  ich  eigentlich nur  empfehlen das Modul auf Basis von jquery umzuschreiben. Das geht dort viel einfacher und verständlicher.

{literal}}{/literal}  ist für Javascript das direkt in die html-Dateien geschrieben wird und vermeidet, dass die  Klammer  } als smarty interpretiert wird.

Ich habe mal vor einiger  Zeit so etwas angefangen, das ist kein "ready-to-use" Code aber eine Basis wie man mit "selects" Bilder ändern könnte. Vielleicht hilft es Dir ja.

Code: Javascript  [Auswählen]

/* <![CDATA[ */
$(function() {
  /* aktuelles Produktbild - Pfad auslesen, Dateinendung entfernen und in var speichern */
  var $source_productimg = $("#describe_seite3 > a > img").attr("src").replace('.jpg','');
  var $original_productimg = $("#describe_seite3 > a > img");
  /* - Ansprechen des richtigen Dropdownfeldes ueber dessen Id - manuelle Anpassung notwendig!!  */    
  $("#select_id-1").change(function() {
        /* - auf die options-value/text Werte einzeln bzw. das aktuelle Element zugreifen */
        $('#select_id-1 option:selected').each(function(){
          /* - daraus Variable erstellen - ausgelesen werden kann options-value ( .val() ) oder options-text ( .text() ) */
          var $option_value = $(this).val();
          /* - Abfrage ob "bitte waehlen" selectiert ist (value="0"), wenn ja dann kein get-request absenden nach bild*/
          if ($option_value == '0') {
                $("#describe_seite3").html($original_productimg);
          /* - ansonsten neuen Bilderpfad zusammensetzen aus Produktbild-Pfad + Options-value */
          } else {       
                var $option_image = $("<img />", { src: $source_productimg + "_" + $option_value + ".jpg" });
                $("#describe_seite3").html($option_image);
          }
          /* - falls das neue Options-Bild nicht vorhanden sein sollte, dann gib das Ursprungs-Produktbild aus */
          $("#describe_seite3 img").error(function() {
                $("#describe_seite3").html($original_productimg);
          });
        });
  });
});
/*]]>*/

Den Code schreibst Du nicht in die html-Dateien, sondern in die "javascript/general.js.php".

Gruesse

[Ladiva]

Hallo,

ich muss das nochmal hochholen.. ich hatte lange weile und mich nochmal mit der Technik beschäftigt..

ich habe in einem Attribut etliche Optionswerte (Farben). Pro Artikel werden nur ein Bruchteil davon benötigt, allerdings müssen die Werte ja vollständig angelegt sein und es werden nur die jeweils benötigten aktiviert und mit Bild versehen.

Soweit alles okay, ich kann in allen Artikeln die Optionswerte anlegen und auch Bilder dazu hochladen - aber nur bei den ersten 50 Werten. was darüber liegt kann ich zwar aktivieren und nutzen, das Bild dafür speichert er leider nicht.
Ich vermute daher das irgendwo eine Begrenzung sein muss, ich finde sie aber leider nicht...

Gruß

[Ladiva]

Und ich nochmal...

Ein frohes Neues erstmal.

Also eine Begrenzung scheint es nicht zu geben, ich konnte das ganze nochmal ein wenig eingrenzen.

Und zwar ist es so:

Editiere ich für einen Artikel die Attribute dann kann ich für die ersten 50 Angezeigten ein Bild hochladen - egal für welches der 50 attribute und egal in welcher Reihenfolge und auch egal wieviele Bilder. Das funktioniert aber nur bei den ersten 50.

Ändere ich allerdings die Reihenfolge, also das ich zum Beispiel statt nach Options ID dann nach Optionsname sortieren lasse, dann kann ich wiederrum die dann angezeigten ersten 50 Attribute mit Bildern Willkürlich versehen...

Gruß Matthias

[Ladiva]

Hat schon jemand das Modul bei der Aktuellen 1.06 eingebaut? Ich bin gerade dabei, allerdings komme ich mit dem Einfügen des 2. Teils in die new_attributes_include.php nicht klar da diese anscheinend jetzt anders aussieht...

Gruß

EDIT: Habs hinbekommen und funktioniert auch mit der 1.06.
EDIT 2: Auch das Problem mit dem Hochladen der Attributbilder hat sich gelöst.

[Gradler]

Dann wäre es doch schön, wenn Du andere die auch irgendwann vor dem gleichen Problem stehen an Deiner Lösung teilhaben läßt.

Gerd