Mehrere Buttons je Produkt

ghostdog · Jul 17th 2020

Hallo Christof und Forumsteilnehmer,

ich suche nach der Funktion einem Produkt mehrere Kaufbuttons hinzuzufügen. Mit der Preisvergleichsfunktion gibt es so etwas ähnliches ja schon. Jedoch habe ich bisher nur die Darstellung mit der Beschriftung "Preisvergleich" und dem separaten Anklicken gefunden.

Mir geht es hauptsächlich um Bücher, die in DE ja preisgebunden sind. Da würde ich gerne mehrere Buchhändler direkt als Button anzeigen. Beispiel etwa hier bei Spiegel-Buchbesprechung:

https://www.spiegel.de/kultur/…80-4e20-81ef-d481de135d89

Damit die Funktion flexibel bei Preisunterschieden wird, kann der Preis natürlich auch direkt in den Button oder daneben wandern.

Gibt es das schon in Affiliate-Toolkit?

Viele Grüße

Matthias

Christof · Jul 18th 2020

Hallo,

Quote from ghostdog

Gibt es das schon in Affiliate-Toolkit?

Machbar ist es über den Preisvergleich relativ einfach. Man müsste nur eine entsprechende Vorlage basteln. Keine Ahnung wie viel Ahnung du von HTML hast?

Wie soll es den konkret am besten aussehen?

lg Christof

ghostdog · Jul 20th 2020

Hallo Christof,

an Deiner Antwort gefällt mir "relativ einfach machbar".

Meine HTML- und CSS-Kenntnisse sind auf einem Niveau, dass ich Code lesen, grundsätzlich verstehe und auch anpassen kann. Selbst von Null aufbauen mache ich sehr selten, da ich das nicht geübt bin und daher diese Zeit vom Content generieren abgeht.

Für den Start würde mir auch eine der bekannten Produktboxen reichen. Die sehen ja schon ganz gut aus. Nur statt eines Buttons, dann eben zwei oder drei. Die Vorlage beim Spiegel (Link oben, graue Affiliate-Box nach dem zweiten Paragraph) mit Text und Logo sieht gut aus. Bei unterschiedlichen Preisen, wäre der Preis direkt im Button vorteilhaft.

"Bei Amazon bestellen € 12,34"

"Bei Thalia bestellen € 43,21"

Viele Grüße

Matthias

Alessio · Jul 21st 2020

Fände ich auch ganz interessant. Auch mit dem Logo direkt im Button.

Auf meiner Website nutze ich in meinen Produktboxen (Bestseller) eine Preisvergleichstabelle, die ich nur ein bisschen gestylet habe.

Die hat halt noch 3 Spalten, je mit Logo, Preis/Verfügbarkeit und Jetzt kaufen Button.

Nur Buttons wären da nicht schlecht, da diese Tabelle schon viel Platz verbraucht.

Insbesondere bei Produktvergleichstabellen fände ich so Buttons wie Spiegel sie hat ziemlich nett.

Setze gerade für die Tabellen auf den Button, wo man darüberhovern muss, damit man die anderen Shops sieht (findest du hier).

Da klickt aber wirklich niemand drauf.

Ich versuch das mal selbst mit HTML/CSS zu realisieren, wenn ich es hinkrieg schreib ich nochmal

Christof · Jul 21st 2020

Evtl. find ich Zeit und bau mal eine kleine Vorlage zum Anpassen.

lg Christof

Alessio · Jul 21st 2020

Hey,

hab das für die responsive Vergleichstabelle hingekriegt. Das Resultat seht ihr hier:

https://gaming-lenkrad-experten.de/pc-lenkrad/mittelklasse/

So sieht das aus:

Für Mobil noch nicht perfekt optimiert, aber sieht auf dem Desktop ganz ordentlich aus.

Geht sicher auch mit ein paar Änderungen für Produktboxen/Bestsellerboxen o.ä.

Hier ist der Code vom Template:

Type: Offer Template:

Header:

Code

<table class="buttonofferstable atkp-pricecompare priceCompareTable">

Detail:

Code

<tr>
    <td class="buytexttd" style="vertical-align: middle; text-align:center">
        <a %productlink% class="atkp-button">
          <span class="items-center">
                <span class="orderbuttontext">Jetzt kaufen auf%linkmark%</span>
                <br>
                %shoplogo%
                <br>
                <span class="priceComparisonPriceTag">%price_text%</span>
            </span>
        </a>
    </td>
</tr>

Display More

Footer:

Code

</table>
<a  %detaillink% class="atkp-secondbutton alleangeboteansehen">Weitere Angebote &gt;&gt;</a>

Und hier noch die CSS Dinger (hab ich im Child Theme):

CSS

.buttonofferstable{
    margin-bottom: 0px;
}
.buttonofferstable, .buttonofferstable th, .buttonofferstable td{
    border-width: 0px!important;
}
.buttonofferstable .buytexttd a{
    color: #000;
    padding-left: .2rem;
    padding-right: .2rem;
    padding-top: .375rem;
    padding-bottom: .375rem;
    line-height: 1.26;
    font-weight: 700;
    display: inline-flex;
    border-width: 1px;
    border-color: #989694;
    background-color: #fff;
    width: 95%;
}
td.buytexttd {
    padding-left: 0!important;
    padding-right: 0!important;
}
.buttonofferstable .buytexttd a.atkp-button:hover{
    background-color: #fff!important;
    color: #000000!important;
}
.items-center{
    margin-left: auto;
    margin-right: auto;
}

Display More

Maximum amount of offers hab ich auf 1.

Hoffe das hilft

ghostdog · Jul 23rd 2020

Quote from Christof

Evtl. find ich Zeit und bau mal eine kleine Vorlage zum Anpassen.

lg Christof

Das ist eine gute Idee, Christof! Freu mich drauf.

ghostdog · Aug 15th 2020

Quote from Christof

Evtl. find ich Zeit und bau mal eine kleine Vorlage zum Anpassen.

lg Christof

Hallo Christof,

wann schätzt Du hier eine Vorlage bauen zu können?

Christof · Aug 15th 2020

Quote from ghostdog

Hallo Christof,

wann schätzt Du hier eine Vorlage bauen zu können?

Sobald ich Zeit habe Momentan ist es ein wenig Stressig bei mir. Sonst gerne die Vorlage von Alessio nutzen.

lg Christof

Mehrere Buttons je Produkt

Share

Tags