TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template

[Karl1]

Hallo Zusammen,

@Chris - Schreinermeister:
So wie du das machst wird das nicht funktionieren, weil du aus einem Tab-Content heraus einen Tab steuern willst.
Versuche mal in den Tab Produktbeschreibung einen Link einzubauen z.B.

Code: PHP  [Auswählen]

<a id="deinLink " class="btn btn-default" href="#" role="button">Link</a>

und nimm in die general_bottom.js.php in document.ready folgenden Schnipsel auf

Code: Javascript  [Auswählen]

$('#deinLink').click(function (e) {
  e.preventDefault();
  $('#cross_sell').tab('show');
})

Habs nicht getestet, sollte aber funktionieren.

@vilsa:
Die Datei stars_rating.png muss nicht nur im Ordner templates/bootstrap3/img, sondern bei eingeschalteter Komprimierung auch im Ordner templates/bootstrap3/css/img.

@m.susok:
Den Sprachstring findest du in lang/german/modules/order_total/ot_shipping.php
define('MODULE_ORDER_TOTAL_SHIPPING_TITLE', 'Versandkosten');
Allerdings bin ich mir nicht sicher, ob eine Änderung nur auf "versandkostenfrei" Auswirkung hat.

Gruß Karl

[m.susok]

@m.susok:
Den Sprachstring findest du in lang/german/modules/order_total/ot_shipping.php
define('MODULE_ORDER_TOTAL_SHIPPING_TITLE', 'Versandkosten');
Allerdings bin ich mir nicht sicher, ob eine Änderung nur auf "versandkostenfrei" Auswirkung hat.

Das wars, danke für die schnelle Hilfe.

[bitlover]

Hallo Karl

Zuerst mal vielen Dank für deine tolle Arbeit zu diesem Template.
Leider habe nirgens einen Hinweis gefunden wie ich bei diesem Template ein Background image einbaue.
Vielleicht kann mir jemanden ein Hint geben wo ich entsprechende Hinweise finde.

Schon mal besten Dank dafür.

[Schreinermeister]

Hallo Karl1,

ich habs versucht umzusetzen.
Da ich mit dem Java-Zeugs auf Kriegsfuß stehe bin ich mir nicht sicher ob ichs richtig eingebaut habe. 

Soweit ich es erkennen kann wird beim erzeugen des Links das  #cross_sell nicht angefügt.
Beim click auf dem Button wir "nur" die Seite selbst aufgerufen.

[Karl1]

Hallo Chris,
ich sollte wohl doch keine "Schnellschüsse" loslassen.

Richtig wäre folgendes:
In den Tab-Content der Beschreibung baust du folgenden Button ein

Code: PHP  [Auswählen]

{if isset($MODULE_cross_selling) && $MODULE_cross_selling != '' || (isset($MODULE_reverse_cross_selling) && $MODULE_reverse_cross_selling != '')}
<button id="deinLink" class="btn btn-default" type="button">Link</button>
{/if}

und nimmst in die general_bottom.js.php in document.ready folgenden Schnipsel auf

Code: Javascript  [Auswählen]

$('#deinLink').click(function (e) {
  e.preventDefault();
  $('#bs_tabs a[href="#cross_sell"]').tab('show');
})

Andere Überlegung:
Du könntest doch auch den Tab und den Tab-Content "Cross-Selling" löschen und dafür diesen Text ans Ende der Produktbeschreibung setzen.
Damit muss der Kunde nichtmal auf einen Button klicken.

Gruß Karl

[Karl1]

Hallo bitlover,
ein Hintergrundbild kannst du bei jedem Template per CSS einfügen.

Leg das Bild in den Ordner templates/bootstrap3/img/ und templates/bootstrap3/css/img/ (wichtig bei eingeschalteter Komprimierung).
Anschließend schreibst du deine Styles in die templates/bootstrap3/stylesheet.css.

Gruß Karl

[Schreinermeister]

Hallo Karl1,

Danke für deine schnelle Reaktion.

Leider hab ich's nach deinen Vorgaben nicht hinbekommen.

Den Link zum Cross_selling - Tab möchte ich individuell einsetzen.
Daher hab ich nun folgende Lösung aus deinen Vorgaben erarbeitet.

in der jeweiligen Artikelbeschreibung an der gewünschten Stelle

Code: PHP  [Auswählen]

<p><a id="empfehunglink" role="button"><strong>Hier finden Sie Zubehör und Empfehlungen zu diesem Artikel </strong></a></p>

und in der general_bottom.js.php in document.ready wie von dir vorgeschlagen

Code: PHP  [Auswählen]

$('#deinLink').click(function (e) {
  e.preventDefault();
  $('#bs_tabs a[href="#cross_sell"]').tab('show');
})

nun sollte es klappen.

Schön wäre noch wenn ein Anker (ich glaub das heißt so) gesetzt werden könnte, damit wenn der Link weit unten in der Produktbeschreibung steht, das Fenster bis zur Tableiste hochspringt.

Da sich die Zubehörartikel nicht selten ändern oder bisher genutzte entfallen, nutze ich den cross_selling Tab gerne dafür. Wird eine Zubehör-Artikel deaktiviert oder gelöscht ist dieser bei allen betroffenen Haupt-Artikel nicht mehr verfügbar. Wenn ich die Zubehörartikel in der jeweiligen Artikelbeschreibung einfügen würde, müsste ich bei Änderungen bei jedem Haupt-Artikel einzeln durchführen. ( Da würde ich schnell die Übersicht verlieren )  

Weiterhin lassen sich gleiche Zubehörgruppen rel. leicht per SQL auf andere Artikel übertragen.

Danke für deine schnelle, professionelle und unermüdliche Hilfe.

Gruß Chris

[wagners]

[...]
Da sich die Zubehörartikel nicht selten ändern oder bisher genutzte entfallen, nutze ich den cross_selling Tab gerne dafür. Wird eine Zubehör-Artikel deaktiviert oder gelöscht ist dieser bei allen betroffenen Haupt-Artikel nicht mehr verfügbar. Wenn ich die Zubehörartikel in der jeweiligen Artikelbeschreibung einfügen würde, müsste ich bei Änderungen bei jedem Haupt-Artikel einzeln durchführen. ( Da würde ich schnell die Übersicht verlieren )  
[...]

Er meinte, dass der Inhalt aus dem Cross-Selling-Tab im Tab für die Artikelbeschreibung geladen wird. Nicht, dass du Zubehöre künftig direkt in die Artikelbeschreibung mit reinschreiben sollst. Dann wäre der Aufwand und die Pflege natürlich enorm - aber so ändert sich ja administrativ gesehen nichts für dich.

Nachtrag (Umsetzung):

Wenn du den Vorschlag mal ausprobieren möchtest, brauchst du im product_info-Template bloß diesen Teil

Code: PHP  [Auswählen]

                        {if isset($MODULE_cross_selling) && $MODULE_cross_selling != '' || (isset($MODULE_reverse_cross_selling) && $MODULE_reverse_cross_selling != '')}<div role="tabpanel" class="tab-pane active" id="cross_sell">{if isset($MODULE_cross_selling) && $MODULE_cross_selling != ''}{$MODULE_cross_selling}{/if}{if isset($MODULE_reverse_cross_selling) && $MODULE_reverse_cross_selling != ''}{$MODULE_reverse_cross_selling}{/if}</div>{/if}

so auskommentieren:

Code: PHP  [Auswählen]

                        {*if isset($MODULE_cross_selling) && $MODULE_cross_selling != '' || (isset($MODULE_reverse_cross_selling) && $MODULE_reverse_cross_selling != '')}<div role="tabpanel" class="tab-pane active" id="cross_sell">{if isset($MODULE_cross_selling) && $MODULE_cross_selling != ''}{$MODULE_cross_selling}{/if}{if isset($MODULE_reverse_cross_selling) && $MODULE_reverse_cross_selling != ''}{$MODULE_reverse_cross_selling}{/if}</div>{/if*}

Gleiches auch für den eigentlichen Tab:

Code: PHP  [Auswählen]

                        {*if (isset($MODULE_cross_selling) && $MODULE_cross_selling != '') || (isset($MODULE_reverse_cross_selling) && $MODULE_reverse_cross_selling != '')}<li role="presentation"><a href="#cross_sell" role="tab" data-toggle="tab">{#cross_selling#}</a></li>{/if*}

und diesen Teil:

Code: PHP  [Auswählen]

                        {if $PRODUCTS_DESCRIPTION != ''}<div role="tabpanel" class="tab-pane active" id="prod_desc"><h4 class="detailbox">{#products_desc#}</h4><div itemprop="description">{$PRODUCTS_DESCRIPTION}</div></div>{/if}

wie folgt abändern:

Code: PHP  [Auswählen]

                        {if $PRODUCTS_DESCRIPTION != ''}<div role="tabpanel" class="tab-pane active" id="prod_desc"><h4 class="detailbox">{#products_desc#}</h4><div itemprop="description">{$PRODUCTS_DESCRIPTION}</div>{if isset($MODULE_cross_selling) && $MODULE_cross_selling != ''}<br />{$MODULE_cross_selling}{/if}{if isset($MODULE_reverse_cross_selling) && $MODULE_reverse_cross_selling != ''}<br />{$MODULE_reverse_cross_selling}{/if}</div>{/if}

[Karl1]

Guten Morgen Chris,
genauso, wie "wagners" das geschrieben hat, habe ich das gemeint.
Den Cross-Selling-Tab auskommentieren oder löschen und dafür den Cross-Selling-Content in den Beschreibungs-Tab laden.
Die Pflege der Produkte ändert sich dadurch nicht.

Deine Lösung wird nicht funktionieren, denn dein Link hat die ID "empfehunglink" (da fehlt ein "l") und jQuery wartet auf das Klicken der ID "deinLink" - die ID's müssen übereinstimmen.

Wie du in meinem Vorschlag sehen kannst habe ich keinen a-Tag sondern einen button-Tag benutzt.
Beim a-Tag springt bei mir die Seite nach oben, beim button-Tag bleibt die Seite am oberen Ende des Cross-Selling-Tabs stehen.

Gruß Karl

[Schreinermeister]

Hallo Karl1
Hallo wagners

da hatte ich wohl was falsch verstanden 

Ich hatte natürlich #deinLink umbenannt. Der Link zum Tab cross_selling funktionierte auch soweit. 

Nun habe ich euren Vorschlag mal versuchsweise eingebaut und bin überzeugt das dies die bessere Variante ist. 

Danke nochmals für die Unterstützung.
Gruß Chris

[Rocket3]

@vilsa:
Die Datei stars_rating.png muss nicht nur im Ordner templates/bootstrap3/img, sondern bei eingeschalteter Komprimierung auch im Ordner templates/bootstrap3/css/img.

Hallo Karl1

habe die stars_rating.png und später auch die stars_0-5.png nach Ordner templates/bootstrap3/css/img kopiert, aber sobald ich die css-komprimierung einschalte, sind die Sterne weg und die Bewertung geht nicht.

Andere komprimierungen funktionieren (GZip, HTML, JavaScript).
Neuste Version von modified, sowie bootstrap3.

[Karl1]

Hallo Rocket3,
du hast das Bild im Ordner templates/bootstrap3/css/images und nicht in templates/bootstrap3/css/img.

Hier nochmal das Template mit den zwischenzeitlichen Aktualisierungen.

Gruß Karl

[EDIT Tomcraft 29.01.2019: Template in Beitrag 1 aktualisiert.]

[Rocket3]

Hallo Karl1,

danke, werde ich heute abend neu einspielen und testen.

Gruss
Rocket3

[D.L.]

denselben Fehler hatte ich im Template Resolution Responsive von Squidio und lösen können durch die Ergänzung des umgebenden
<div id="horizontalAccordion" class="checkout_accordion">[...]</div>
in \module\checkout_payment_block.html

("horizontalAccordion" wird so wie auch in tpl_modified für die Accordion Funktion benötigt)

Hallo hpzeller

dank deiner Hinweise hab ichs gefunden.

Bei den PayPal-Modul  paypalplus  muss der Schalter für "Accordion / Tabs" auf ja stehen. 
[ Für Gäste sind keine Dateianhänge sichtbar ]

Im Template tpl_modified  funktionierts dann ohne Probleme. 

im Bootstrap3  wird die paymentwall angezeigt solange der Radiobutten bei PayPal PLUS ausgewält ist.
Wenn der Raidobutton eine anderen Zahlart ausgewählt wurde und danch der Pulldown-Pfeil bei PayPal PLUS angelickt wird öffnet sich der entsprechende Bereich aber die paymentwall wird nicht angezeigt.
Sobald ich dann manuell den Raidobutten bei PayPal-Plus anklicke erscheint die paymentwall.

PS:
Radio mit zugehörigem Label funktionieren im Bootstrap3 Template von Karl  bei allen Zahlungsarten im Zahlarten-Accordion getrennt vom Dropdownpfeil (finde ich auch besser als im tpl_modified wo sie nicht getrennt sind).

Radio = selektiert und öffnet oder schliesst
Dropdownpfeil = öffnet oder schliesst

dies schein nun doch am Template zu hängen.

Gruß Chris.

[Leinenflechterei]

Hallo zusammen!

Wie bekomme ich es hin, dass das logo_head.png auch in der mobilen Ansicht zu sehen ist?

Hier der Vergleich...

...am Rechner:
[ Für Gäste sind keine Dateianhänge sichtbar ]

... und auf dem Smartphone:
[ Für Gäste sind keine Dateianhänge sichtbar ]