Neu SWATCHES Variantenbild und Wert

[der.wollladen]

Guten Tag liebe Community,

ich bin dabei meinen JTL Shop 4 einzurichten und hänge bei der Artikeldetailseite fest.

Wir verkaufen Wolle in verschiedenen Farben. Somit möchte ich mit Hilfe von SWATCHES die verschiedenen Farbmöglichkeiten gern übersichtlich darstellen.

In unserem vorherigen Gambio - Shop konnte ich dies einfach über ein Plugin lösen und die Bilder mit einer Bildunterschrift des dazugehörigen Variantenwertes anlegen.

Ist dies auch Swatches und ggf. einer Templateanpassung bzw. einem Plugin möglich?


Hier das Beispiel: https://www.der-wollladen.com/de/HAPPINESS.html


Wäre für jede Hilfe dankbar.

Gerriet

 

[strommi]

Hallo. Wieso denn die Mühe mit nem 3 er Shop? Mühe und Zeit sowie Kosten in ein veraltetes System stecken?

Gesendet von meinem SNE-LX1 mit Tapatalk

 

[der.wollladen]

Hallo Strommi,

vielen Dank für die schnelle Antwort.

Hier hat sich ein Fehler eingeschlichen. Es handelt sich natürlich um JTL Shop 4.

 

[strommi]

Variationen anlegen und dem Artikel zuordnen. Hier kann man dann die Bilder hinterlegen.

Gesendet von meinem SNE-LX1 mit Tapatalk

 

[FPrüfer]

Hallo,

Ist dies auch Swatches und ggf. einer Templateanpassung bzw. einem Plugin möglich?

Ja, dass ist mit Swatches möglich. Siehe z.B. hier: https://demo.jtl-shop.blackbike-forest.de/Herren-Boxen-kurze-Hose
Wie @strommi schon sagte, in der Wawi eine Variante mit dem entsprechenden Typ anlegen und den Werten die passenden Bilder zuordnen. Die Anzeige im Shop erfolgt dann nach einem Abgleich automatisch. Wenn du Bild UND Wert angezeigt haben möchtest, dann lässt sich das über eine kleine Templateanpassung lösen.

 

[der.wollladen]

Guten Tag, vielen Dank für die Antworten.

Die passenden Bilder habe ich bereits in den Variationen des Vaters und den Var.Kombis hinterlegt.

Dies funktioniert auch sehr gut.

Nun möchte ich noch eine Templateanpassung machen, welche Bild und Wert anzeigt. Hierbei soll außerdem beim Wert nur die letzten 4 Stellen ausgegeben werden.

Hätte hierfür jemand einen Tipp für mich ?

VG

 

[strommi]

Versteh ich im Moment nicht

Gesendet von meinem SNE-LX1 mit Tapatalk

 

[FPrüfer]

Hallo,

Nun möchte ich noch eine Templateanpassung machen, welche Bild und Wert anzeigt. Hierbei soll außerdem beim Wert nur die letzten 4 Stellen ausgegeben werden.

Wenn du nicht bereits hast, dann leg dir bitte zuerst ein Child-Template an. Als Kopiervorlage würde ich dir die Evo-Child-Vorlage empfehlen. Dort legst du dann ein Verzeichnis productdetails und darin die Datei variation.tpl mit folgendem Inhalt an:

{extends file="{$parent_template_path}/productdetails/variation.tpl"}

{block name="productdetails-info-variation-swatch"}
<label class="variation block btn btn-default{if $bSelected} active{/if}{if $Variationswert->notExists} not-available{/if}"
        data-type="swatch"
        data-original="{$Variationswert->cName}"
        data-key="{$Variationswert->kEigenschaft}"
        data-value="{$Variationswert->kEigenschaftWert}"
        for="{if $modal}modal-{elseif isset($smallView) && $smallView}a-{$Artikel->kArtikel}{/if}vt{$Variationswert->kEigenschaftWert}"
        {if !empty($Variationswert->cBildPfadMini)}
            data-list='{prepare_image_details item=$Variationswert json=true}'
        {/if}
        {if $Variationswert->notExists}
            title="{lang key='notAvailableInSelection'}"
            data-title="{$Variationswert->cName} - {lang key='notAvailableInSelection'}"
            data-toggle="tooltip"
        {elseif $Variationswert->inStock}
            data-title="{$Variationswert->cName}"
        {else}
            title="{lang key='ampelRot'}"
            data-title="{$Variationswert->cName} - {lang key='ampelRot'}"
            data-toggle="tooltip"
            data-stock="out-of-stock"
        {/if}
        {if isset($Variationswert->oVariationsKombi)}
            data-ref="{$Variationswert->oVariationsKombi->kArtikel}"
        {/if}>
    <input type="radio"
           class="control-hidden"
           name="eigenschaftwert[{$Variation->kEigenschaft}]"
           id="{if $modal}modal-{elseif isset($smallView) && $smallView}a-{$Artikel->kArtikel}{/if}vt{$Variationswert->kEigenschaftWert}"
           value="{$Variationswert->kEigenschaftWert}"
           {if $bSelected}checked="checked"{/if}
           {if $smarty.foreach.Variationswerte.index === 0 && !$showMatrix} required{/if}
           />
    <span class="label-variation">
        {if !empty($Variationswert->cBildPfadMini)}
            <img src="{$Variationswert->cBildPfadMini}" alt="{$Variationswert->cName|escape:'quotes'}"
                 data-list='{prepare_image_details item=$Variationswert json=true}'
                 title="{$Variationswert->cName}" />
        {else}
            {$Variationswert->cName}
        {/if}
    </span>
    <div>
        <span class="label-variation">{$Variationswert->cName|substr:-4}</span>
    </div>
</label>
{/block}

Der Block wurde hier zum größten Teil aus dem Original des Evo-Templates kopiert. Lediglich die Zeile

{include file="productdetails/variation_value.tpl" hideVariationValue=true}

wurde durch den relevanten Teil:

<div>
    <span class="label-variation">{$Variationswert->cName|substr:-4}</span>
</div>

ersetzt.

 

[der.wollladen]

Guten Tag,

vielen Dank für die schnelle Hilfe.

VG

 

[strommi]

Danke auch beschäftige mich seit ein paar Tagen mit dem Thema Templates unter jtl

Gesendet von meinem SNE-LX1 mit Tapatalk

 

[olli33]

Hallo Zusammen,

vielen Dank schon mal für diesen Ansatz. Ich sitze gerade vor einem ähnlichen Problem dass bei einem jetzigen Gambio Shop Bilder bei den Variationen (drop/down) angezeigt werden. Das ganze funktioniert auch mit dem JTL Shop 4 (Child Theme ist angelegt). Ich würde allerdings gerne immer das Bild vom Vater angezeigt lassen und die Einblendung der Variantenbilder darunter/daneben anzeigen lassen. Also Hauptbild vom Vater bleibt stehen, beim Mouse on Over beim Swatch oder Wahl im Drop-Down wird das entsprechende Vorschaubild der Variante angezeigt aber bitte daneben oder darunter. Aktuell wird es ja an der selben Position eingeblendet.

Wenn eine Variante dann final ausgewählt wird, werden die Bilder die der Var-Kombi hinterlegt sind natürlich geladen.

Wenn ich ihr einen Ansatz & Idee bekommen könnte, wäre das super.
Danke!
Olli

 

[zhelyde]

Hallo,

Ja, dass ist mit Swatches möglich. Siehe z.B. hier: https://demo.jtl-shop.blackbike-forest.de/Herren-Boxen-kurze-Hose
Wie @strommi schon sagte, in der Wawi eine Variante mit dem entsprechenden Typ anlegen und den Werten die passenden Bilder zuordnen. Die Anzeige im Shop erfolgt dann nach einem Abgleich automatisch. Wenn du Bild UND Wert angezeigt haben möchtest, dann lässt sich das über eine kleine Templateanpassung lösen.

In dem Shop gibt's einen Fehler. Sobald man die Größe wählt, wird die Farbname nicht mehr wiedergeben.

 

[zhelyde]

Ein sehr gute css Entwickler von https://css-umsetzung.de/ hat uns einen slider mit schönen swatches programmiert. Wer Interesse hat sollte sich bei ihm melden. Es gibt noch ein klitze kleines Problemchen, die er bestimmt noch löst.
Und das wichtigste ist - ihr braucht die swatch Bilder in der Wawi nicht hinterlegen. Dies wird aus dem Shop Bild1 genommen.

zu schauen hier https://www.italyshop24.com/Made-in-Italy-Damen-echt-Leder-Rucksack-Backpack-Lederrucksack

 

[Wolle Kreativ]

Hallo FPrüfer,

dank deiner Anleitung konnte ich das Nova ebenfalls die Anpassung vornehmen.

Der Code sieht bei mir so aus:
{extends file="{$parent_template_path}/productdetails/variation.tpl"} {block name='productdetails-variation-swatch-include-variation-value'} {include file='productdetails/variation_value.tpl' hideVariationValue=true} <div> <span class="label-variation">{$Variationswert->cName|substr:4}</span> </div> {/block}

Ich bekomme es leider nicht hin, nur die ERSTEN 4 Zeichen ANZEIGEN zu lassen. Das Kürzen am Anfang oder Ende funktioniert.

Hat jemand eine Idee und kann mir helfen?

 

[blackgren]

Hi,

probiers mal damit wie hier in dem Bsp.



VG

 

[Wolle Kreativ]

Damit funktioniert es wie es soll.

Danke für den Tipp.