"Frage zum Produkt " Link sichtbarer gestalten, z.B. als Button

So wie bei mir?
Das lässt sich einfach machen.

 

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;
     }

 

Vielen Dank, liebe Barbara, das hat prima funktioniert und sieht sehr schick aus

 

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!

 

geht das auch im Malibu Theme?

 

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

 

Super klasse! Nun hat es optimal geklappt. Lieben Dank Dir Barbara