Für den Vertrieb anspruchsvollen Artikeln (Produkten) haben Besucher oftmals eine Frage, jedoch ist der Link für zahlreiche Besucher nicht wahrgenommen. Eine freiere Gestaltung und Positionierung wären klasse. Danke!
Oh ja Barbara, das sieht sehr schön aus. Auch das auf den Merkzettel wird so viel schneller wahrgenommen. Büdde Büdde verrate uns das Geheimis Fragen zum Produkt gibt es bei mir so ja nicht mehr, hab das mal umgemodelt leider. Ich glaub das ist jetzt bei mir für Anfragen, wenn ein Produkt verkauft wurde. Naja, schade, aber kann man nicht ändern.
Erstelle im Ordner GXModules ein neues Verzeichnis: Meins/Frage-Button/Shop/Templates/Honeygrid/Snippets/product_info/ (wer schon ein eigenen Ordner in GXModules hat (z.B. mit seinem Namen), kann das Verzeichnis ab "Frage-Button" darin erstellen) In den Verzeichnis wir die Datei product_box_bottom.html mit diesem Inhalt erstellt: HTML: {block name="snippets_product_info_product_box_bottom_wishlist"} <div class="col-xs-12 col-sm-6 col-md-12 col-lg-6 wishlist-container"> <a href="#" class="btn-wishlist" title="{$button.add_to_wishlist}">{$button.add_to_wishlist}</a> </div> {/block} {block name="snippets_product_info_product_box_bottom_tell_a_friend"} <div class="col-xs-12 col-sm-6 col-md-12 col-lg-6 product-question-container"> <button class="btn-product-question" type="button" data-gambio-widget="product_question" data-product_question-product-id="{$PRODUCTS_ID}">{$txt.text_tell_a_friend}</button> </div> {/block} Dann kommen im Style Editor unter eigenes css diese Einträge: Für den Wunschzettel: Code: .product-info .product-info-details .wishlist-container { text-align: left; padding-top: 34px; } .product-info .product-info-details .wishlist-container a{ background-color: #DeineFarbe; color: #DeineSchriftfarbe; text-decoration: none; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; padding-left: 10px; padding-right: 10px; padding-top: 11px; padding-bottom: 11px; margin-left: -5px; font-size: 12px } /*hover-effekt*/ .product-info .product-info-details .wishlist-container a:hover{ background-color: #DeineHoverFarbe; color: #DeineShriftfarbe; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } Für den Frage-Button: Code: .product-info .product-info-details .product-question-container { text-align: right; padding-right: 25px; } .product-info .product-info-details .product-question-container button{ background-color: #DeineFarbe; color: #DeineTextfarbe; text-decoration: none; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; padding: 10px; margin-top: 10px; margin-right: -10px; font-size: 12px; } /*hover effekt*/ .product-info .product-info-details .product-question-container button:hover{ background-color: #DeineHoverFarbe; color: #DeineShriftfarbe; }
Ich habe den Button an prominenter Stelle direkt in die Artikelbeschreibung mit reingemacht. Es wird mehr angenommen, als ich mir erhofft hatte Ich kann es nur empfehlen!
wenn man den Pfad und den Dateinamen in GXModules, sowie die Block-Namen in der Datei auf das Theme anpasst, sollte das genauso gehen.
das heißt also: Pfad: Frage-Button/Shop/Theme/Malibu/Snippets/product_info/ Welche Block-Namen aus der Datei (HTML) müssen angepasst werden?
nein, denn im Theme gibt es keinen Ordner "snippets" Der Pfad müsste sein: Meins/Frage-Button/Shop/Themes/all/ und die Datei darin: product_info_product_box_bottom.html die Block-Namen sind: {block name="product_info_product_box_bottom_wishlist"} und {block name="product_info_product_box_bottom_tell_a_friend"}
hab jetzt diese Datei: HTML: {block name="product_info_product_box_bottom_tell_a_friend"} <div class="col-xs-12 col-sm-6 col-md-12 col-lg-6 product-question-container"> <button class="btn-product-question" type="button" data-gambio-widget="product_question" data-product_question-product-id="{$PRODUCTS_ID}">{$txt.text_tell_a_friend}</button> </div> {/block} und dieses CSS: Code: .product-info .product-info-details .product-question-container { text-align: right; padding-right: 25px; } .product-info .product-info-details .product-question-container button{ background-color: #xxxxxx; color: #ffffff; text-decoration: none; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; padding: 10px; margin-top: 10px; margin-right: -210px; font-size: 20px; } /*hover effekt*/ .product-info .product-info-details .product-question-container button:hover{ background-color: #xxxxxx; color: #ffffff; } Da es in Malibu ja das Herzchen oben gibt, habe ich die Wishlist weggemacht, da es sonst doppelt ist. Ich hab den Button nur mit den -210px mittig bekommen... geht das auch anders, damit das auch immer responsiv ist? weil jetzt ist es am Desktop mittig und bei allen anderen zu weit rechts... hab auch center und !important genommen, macht er aber nicht
Versuche es mal mit folgenden Änderungen: Achtung: ich poste jetzt nur die geänderten Zeilen! HTML: <div class="col-xs-12 product-question-container"> <button class="btn-product-question center-block" und im CSS: padding-right: 25px; --- diese Zeile löschen margin-right: -210px; --- diese Zeile löschen