Neu per Plugin Variationen ein/ausblenden (Javascript/Jquery)

dercoderkm

Offizieller Servicepartner
SPBanner
21. Dezember 2019
54
12
Firma
Made in Dortmund
Moin,

Gerne möchte ich per Plugin bei einem Artikel eine Variation ausblenden und dieser einen Standardwert geben also eine Option vorauswählen.
Eine Option vorauswählen ist absolut kein Problem aber
wie kann ich eine Variation per Plugin/JS ein bzw. wieder einblenden?
Ich weiß natürlich wie ich per JS/Jquery Elemente ein und ausblende aber bei den Variationen gibt es keinen richtigen Selector um das zu machen..
Die Überschrift einer Variation sieht so aus:
HTML:
                        <dt>{$Variation->cName}&nbsp;
                            {if $Variation->cTyp === 'IMGSWATCHES'}
                                <span class="swatches-selected text-success" data-id="{$Variation->kEigenschaft}">
                                {foreach $Variation->Werte as $variationValue}
                                    {if isset($oVariationKombi_arr[$variationValue->kEigenschaft])
                                        && in_array($variationValue->kEigenschaftWert, $oVariationKombi_arr[$variationValue->kEigenschaft])}
                                        {$variationValue->cName}
                                        {break}
                                    {/if}
                                {/foreach}
                                </span>
                            {/if}
                        </dt>
Wie man sieht hat das Element dt keine ID und auch keinen Namen. Wie also per JS Ausblenden/Einblenden für die eine Variation.
Bei vielen Variationen hat DT auch keine ID oder einen Namen.
Das gleiche gilt für die Variation / dem Feld an sich zum auswählen / ausfüllen.
Das ganze Feld wird mit dem Tag DD umschlossen und hat auch keine klar erkennbare ID pro Variation:
HTML:
 <dd class="form-group text-left-util">
Das ist für jede Variation der Fall.

Wäre super wenn mir hier jemand helfen könnte und mir sagt wie ich das am besten mache?
Jetzt habe ich gerade die productdetails/variation.tpl so angepasst das dass Element DT die ID "UeberschriftVariation_kEigenschaft" hat so kann ich diese ansprechen.
Das gleiche gilt für den Tag DD.
Allerdings ist es ja nicht Sinn der Sache das dass Template bearbeitet werden muss für ein Plugin.
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.635
1.581
Berlin
Es ist eigentlich möglich das komplett über ein Plugin zu regeln, indem man sich an den Namen der Variation hält, du gehst also die Variationen eines Artikels durch und merkst dir die ID der Variation dessen Namen dann eben immer "Farbe" ist, dann kannst du ja über phpQuery darauf zugreifen.
 

dercoderkm

Offizieller Servicepartner
SPBanner
21. Dezember 2019
54
12
Firma
Made in Dortmund
Hi @css-umsetzung ,
auf das Feld an sich ja - aber nicht auf die Tags DD / DT um das ganze auszublenden oder übersehe ich da etwas?
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.635
1.581
Berlin
da hangelt man sich dann hoch :)

mein Code sieht da bei Varianten, wenn es Dropdowns sind etwas anders aus, die 96 ist die ID der Variante.

JavaScript:
$("dt:nth-child(" + $("[name='eigenschaftwert[96]']").closest("dd").index() + ")").slideUp();
$("[name='eigenschaftwert[96]']").closest("dd").slideUp();


Und das war jetzt mein html code dazu:

HTML:
<div class="row variations switch-variations">
                    
<div class="col ">
                    <dl>
                    
                    <dt>Größe&nbsp;</dt>
<dd class="form-group text-left-util"><div class="dropdown bootstrap-select show-tick form-control custom-select"><select name="eigenschaftwert[95]" title="Bitte wählen Sie eine Variation." required="" class="form-control custom-select selectpicker" data-size="10" tabindex="-98"><option class="bs-title-option" value=""></option>
    <option value="368" class="variation" data-content="<span data-value='368'>S</span>" data-type="option" data-original="S" data-key="95" data-value="368" data-ref="600">S</option>
<option value="369" class="variation" data-content="<span data-value='369'>M</span>" data-type="option" data-original="M" data-key="95" data-value="369" data-ref="603">M</option>
<option value="370" class="variation" data-content="<span data-value='370'>L</span>" data-type="option" data-original="L" data-key="95" data-value="370" data-ref="606">L</option>
<option value="371" class="variation" data-content="<span data-value='371'>XL</span>" data-type="option" data-original="XL" data-key="95" data-value="371" data-ref="609">XL</option>
</select><button type="button" class="btn dropdown-toggle bs-placeholder btn-light" data-toggle="dropdown" role="button" title="Bitte wählen Sie eine Variation."><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Bitte wählen Sie eine Variation.</div></div> </div></button><div class="dropdown-menu " role="combobox"><div class="inner show" role="listbox" aria-expanded="false" tabindex="-1"><ul class="dropdown-menu inner show"></ul></div></div></div></dd>
                    
                    <dt>Farbe&nbsp;</dt>
<dd class="form-group text-left-util"><div class="dropdown bootstrap-select show-tick form-control custom-select"><select name="eigenschaftwert[96]" title="Bitte wählen Sie eine Variation." required="" class="form-control custom-select selectpicker" data-size="10" tabindex="-98"><option class="bs-title-option" value=""></option>
    <option value="372" class="variation" data-content="<span data-value='372'>Rot</span>" data-type="option" data-original="Rot" data-key="96" data-value="372" data-ref="600">Rot</option>
<option value="373" class="variation" data-content="<span data-value='373'>Grau</span>" data-type="option" data-original="Grau" data-key="96" data-value="373" data-ref="601">Grau</option>
<option value="374" class="variation" data-content="<span data-value='374'>Gr&amp;uuml;n</span>" data-type="option" data-original="Grün" data-key="96" data-value="374" data-ref="602">Gr&amp;uuml;n</option>
</select><button type="button" class="btn dropdown-toggle bs-placeholder btn-light" data-toggle="dropdown" role="button" title="Bitte wählen Sie eine Variation."><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Bitte wählen Sie eine Variation.</div></div> </div></button><div class="dropdown-menu " role="combobox"><div class="inner show" role="listbox" aria-expanded="false" tabindex="-1"><ul class="dropdown-menu inner show"></ul></div></div></div></dd>
                                        </dl>
                
</div>
            
</div>
 
  • Gefällt mir
Reaktionen: dercoderkm

dercoderkm

Offizieller Servicepartner
SPBanner
21. Dezember 2019
54
12
Firma
Made in Dortmund
Danke das hat super geklappt - soviel CSS ist dann doch nicht mein Spezialgebiet :D
 
Ähnliche Themen
Titel Forum Antworten Datum
Neu shopapotheke per Anbindung eBay-Anbindung - Fehler und Bugs 1
Neu Umlagerung per Ameisen-Import JTL-Wawi - Fehler und Bugs 1
Neu In einen Portlet-Container im Frontend per Ajax Datennachladen (weitere anzeigen) Technische Fragen zu Plugins und Templates 1
Neu eBay Plus Angebote per Ameise steuerbar ? Eigene Übersichten in der JTL-Wawi 6
Neu Zugang zu Kategorien nur per Kennworteingabe Plugins für JTL-Shop 3
Neu Eigene Felder (Kunde) in csv-Datei per Ausgabe (Auftrag oder Lieferschein) Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 0
Neu Lieferadresse / Rechnungsadresse im Auftrag per Doppelklick wählbar machen JTL-Wawi - Ideen, Lob und Kritik 0
Datenbank-Abfrage per SQL nach Lagermenge pro Artikel & Warenbereich (WMSLager) JTL-Wawi 1.8 1
Neu Lieferantenbestellung als CSV mit selbst festgelegten Spalten per Mail senden Arbeitsabläufe in JTL-Wawi 1
Neu Benachrichtigung per Workflow bei Wareneingang User helfen Usern - Fragen zu JTL-Wawi 24
Neu Weiterleitungen direkt per Datenbank einfügen aufgrund Größe bzw. Anzahl? Betrieb / Pflege von JTL-Shop 9
Gelöst Per Workflow im Servicedesk eine Mail versenden. Gelöste Themen in diesem Bereich 4
Variationen per Ameise umbenennen JTL-Wawi 1.8 1
Workflow Auftraqspositionen per Email an Kunden senden JTL-Wawi 1.7 3
Neu Ist es möglich per Ameise Kunden zu löschen? Arbeitsabläufe in JTL-Wawi 2
Neu LS-Pos Kundenrechnung per Email Fragen rund um LS-POS 1
Neu Warenkorb per Link teilen Allgemeine Fragen zu JTL-Shop 6
Ausgabe per E-Mail geht plötzlich nicht mehr, Testmail aus Wawi aber schon JTL-Wawi 1.6 22
Beantwortet Kunde von Firma per Workflow setzen JTL-Workflows - Ideen, Lob und Kritik 1
Neu Datenbankebene per SQL löschen Eigene Übersichten in der JTL-Wawi 6
Neu Consent Status per Smarty Var abfragen Technische Fragen zu Plugins und Templates 2
Nur noch sporadischer Versand per Mail von Rechnungen, Lieferscheinen und Mahnungen nach Update auf Version 1.8. JTL-Wawi 1.8 0
Neu Kinderartikel per Ameise vom Vater lösen Arbeitsabläufe in JTL-Wawi 6
Neu Probleme bei Aufgabenplaner (Export-Manger) per Cronjob JTL-Shop - Fehler und Bugs 1
Neu EK-Preise per Workflow in Lieferantenbestellung einfügen? User helfen Usern - Fragen zu JTL-Wawi 0
Neu per Workflow: WhatsApp oder ähnliches senden User helfen Usern - Fragen zu JTL-Wawi 0
Preise per Artikel Funktionsattribut bei einzelnen Artikeln ausblenden Einrichtung JTL-Shop5 0
Neu Vorschlag: Per Workflow Tickets erstellen Servicedesk (Beta) 1
Label per Import bedienen JTL-Wawi 1.8 0
Neu Artikeländerung per Artikelnummer mit Wildcard? JTL-Ameise - Ideen, Lob und Kritik 1
Neu Neues Plugin: Google Translate / Übersetzer (DSGVO-konform und weitere Features) Plugins für JTL-Shop 1
Neu Händlerbund Plugin lässt sich nicht installieren Shop ver. 5.3.0 Plugins für JTL-Shop 1
Neu Eigene Seiten mit Plugin erstellen Technische Fragen zu Plugins und Templates 0
Neu Neues Plugin: Instagram-Feed Portlet (Als Galerie- oder Slideransicht und weitere Features) + 3x kostenlose Lizenzen Plugins für JTL-Shop 3
Neu 🌟Neues Plugin: Bounce Landingpage Plugins für JTL-Shop 5
Neu 504 Gateway Time-Out nginx bei Plugin-Updates Gelöste Themen in diesem Bereich 10
Neu Unterstützung bei JTL5-Shop-Überarbeitung gesucht - Template/Plugin uvm. Dienstleistung, Jobs und Ähnliches 1
Neu Erledigt - Plugin PayPal Checkout, Update auf 1.4.0, Komplettabsturz Plugins für JTL-Shop 1
Neu Paypal Plugin erzeugt "Quirks Mode" Betrieb / Pflege von JTL-Shop 0
Neu Mail-Versand & Plugin Doku Technische Fragen zu Plugins und Templates 2
Neu Variationen im Shop Auswahl zurücksetzen (Plugin?) Betrieb / Pflege von JTL-Shop 3
Neu NEU ✔️ PDF-Angebots-Plugin für den JTL-Shop 5 - PDF Angebote von der Produktseite oder aus dem Warenkorb heraus generieren B2C / B2B Plugins für JTL-Shop 5
Neu Neues Plugin: Hersteller Slider Portlet (Zentrierungs- oder Schwarz/Weiß-Modus, Responsive Anpassung..) inkl. 5 kostenlosen Lizenzen Plugins für JTL-Shop 4
Neu Plugin KBA Finder Implementierung/Darstellungsänderung Plugins für JTL-Shop 0
Neu Custom Template für Custom Artikel mit Plugin? Plugins für JTL-Shop 0
Neu JTL Connector Plugin Aktivierunf [Fehlermeldung] WooCommerce-Connector 1
Neu Erfahrung mit LS-Cache Plugin Technische Fragen zu Plugins und Templates 10
Neu 🌟Neues Plugin: FRASPY Altersprüfung & IdentitätsCheck Plugins für JTL-Shop 3
Neu 🎉 Neues Plugin: "Versandkosten und Lieferzeit automatisch beziehen - UPS Extension" 🎉 Plugins für JTL-Shop 2
Neu Neues Plugin: Formular Portlet (Drag&Drop Dateiupload by FilePond, Kontakt, Retoure, Reklamation, Gewerbenachweis..) Plugins für JTL-Shop 10

Ähnliche Themen