Eigenen Button im Stil des "in Warenkorb" einbauen?

Deutsches Forum
1

Hallo,

ich suche nach einer Möglichkeit, einen eigenen Button in die details.tpl einzubauen, der [B]aussieht wie der “in den Warenkorb” Button[/B], aber auf eine eigene CMS Seite verlinkt. Mit folgendem Code habe ich jetzt einen eigenen “jpg”-Button eingebunden:

          [{if $sISE eq 1}] 
             <div class="tocart"><input id="test_toBasket" type="submit" value="[{if $size=='small'}][{oxmultilang ident="INC_PRODUCTITEM_ADDTOCARD3" }][{else}][{oxmultilang ident="INC_PRODUCTITEM_ADDTOCARD2"}][{/if}]" onclick="oxid.popup.load();"></div>
             <div><br><a id=cms_e_de href="[{ oxgetseourl ident="cms_e_de" type="oxcontent" }]"><img src="[{$oViewConf->getImageUrl()}]e.jpg" alt="e" name="e"></a> </div>
                                 
            [{else}]
            
            <div class="tocart"><input id="test_toBasket" type="submit" value="[{if $size=='small'}][{oxmultilang ident="INC_PRODUCTITEM_ADDTOCARD3" }][{else}][{oxmultilang ident="INC_PRODUCTITEM_ADDTOCARD2"}][{/if}]" onclick="oxid.popup.load();"></div>

            [{/if }]

Das funktioniert auch erst mal, beim klicken landet man auf der CMS Seite. Der Button sieht aber natürlich nicht so schön aus. Wie kann ich das coding umstricken, damit der Button gleich aussieht und vielleicht sogar mit einem eigenen Text aus der cust_lang gefüllt wird? Ich hatte schon versucht, das <div class=“tocart”> zu kopieren, aber dann bekomm ich den Artikel immer in den Korb gelegt beim clicken…:rolleyes:
Grüße,
cooper_999

2

einen “button” kannst du relativ einfach via css erstellen.

was du machst ist erstmal einen link in die details.tpl an der stelle einfügen wo du ihn brauchst. z.b. so:

<p class="xxx">
            <a title="gebrauchte Bueromoebel" href="/mehr/">Jetzt<BR>anschauen!!!</a>
        </p>

danach fügst du in der elements.css (bei 4.5 ansonsten in der oxid css datei) folgenden css code hinzu:


.xxx a{
	color: #ffffff;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	font-family: "Segoe UI", Tahoma, san-serif;
	font-size: 20pt;
    text-align:center;
	text-decoration:none;
	margin-top: 180px;
	margin-right: 30px;
	margin-bottom: 0px;
	margin-left: 0px;
	border-top-color: #728c2a;
	border-right-color: #414c2a;
	border-bottom-color: #414c2a;
	border-left-color: #728c2a;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	display: block;
	background-image: url("../../img/grn-btn-bkg.png");
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position-x: left;
	background-position-y: top;
	background-color: rgb(120, 161, 23);
    position: relative;
    z-index: 9;
    float: right;
}

und am ende noch die positionierung via CSS:


.xxx {
    padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 8px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	float: right;
}

die png datei findest du bei mir unter: http://web10.cpsrv01.agentur2c.net/out/azure/img/grn-btn-bkg.png

achso und nimm den code nur als beispiel!!! hab den c&p von meiner website :wink: