Artikel mit Varianten aus einer Liste in den Warenkorb legen

Hallo,
ich habe folgendes Problem:
In einem Shop für Bekleidung werden sogenannte Looks dargestellt und daneben in einer Liste die Produkte. Dort muss dann die Größe ausgewählt werden und der Artikel in den Warenkorb gelegt werden können.

Meine ersten Lösungsversuche ist einfach, dass ein Produkt angelegt wird, mit dem Look als Bild. Auf der Detailseite nehme ich alle Details usw. weg. Per Cross Selling werden dann die dargestellten Produkte mit dem Artikel verbunden und angezeigt. Soweit alles prima. Jetzt haben die Produkte Varianten (die Größe). Ändere ich diese komme ich auf die Detailseite des Produktes.

Gibt es eine Möglichkeit die Varianten zu Ändern und den Artikel von der Liste in den Warenkorb zu legen? Gibt es vielleicht andere Ansätze dafür?

Hallo muex,

ich kann das Problem nicht verstehen.

Gruß

Es gibt eine Liste mit Produkten, die Varianten haben. Vater nicht kaufbar. Ich möchte nun diese Produkte direkt von der Liste in den Warenkorb legen. Das funktioniert nicht weil, sobald eine Variante ausgewählt wurde, eine Weiterleitung auf die Produktdetailseite erfolgt.

Hallo zusammen,

@muex: ich habe wohl das Selbe vor wie du.

Meine bisherigen Erkenntnisse.

In der tpl/page/details/inc/productmain.tpl wird die variantenliste erstellt.


[{* variants | md variants *}]
        [{block name="details_productmain_variantselections"}]
            [{if $aVariantSelections && $aVariantSelections.selections }]
                [{oxscript include="js/widgets/oxajax.js" priority=10 }]
                [{oxscript include="js/widgets/oxarticlevariant.js" priority=10 }]
                [{oxscript add="$( '#variants' ).oxArticleVariant();"}]
                [{assign var="blCanBuy" value=$aVariantSelections.blPerfectFit}]
                <div id="variants" class="js-fnSubmit">
                    [{assign var="blHasActiveSelections" value=false}]
                    [{foreach from=$aVariantSelections.selections item=oList key=iKey}]
                        [{if $oList->getActiveSelection()}]
                            [{assign var="blHasActiveSelections" value=true}]
                        [{/if}]
                        [{include file="widget/product/selectbox.tpl" oSelectionList=$oList iKey=$iKey blInDetails=true}]
                    [{/foreach}]
                </div>
  .......................
           hier steht noch mehr code der erstmal egal ist
           ..........................

In der grün makierten js-datei wird der reload auf eine variante gemacht.
Im kurzen… Die data-seletion-id der variante (siehe selectbox.tpl) wird per jquery in ein vordefiniertes hidden inputfeld geschrieben.

<input type="hidden" value="" name="varselid[0]">

Dann wird dort noch aus dem hidden inputfeld …

<input type="hidden" value="tobasket" name="fnc">

der value “tobasket” entfernt, damit der article nicht in den warenkorb geladen wird.
(schon fast da wo man hin will)
klappt so aber noch nicht.
jetzt muss man wissen, welches hiddeninputfeld beim submit mit der id gefüttert werden muss.

Hier
http://forum.oxid-esales.com/showthread.php?t=19090
hat schonmal jemand lecker was zusammengetragen.
Entweder aid oder anid -> ich werde mal beide testen.

Wenn das passiert ist wird das umschliessende formelement submittet (immer dieser anglizismus).

in der selectbox.tpl gehts weiter.

Dort wird eine weitere js-datei verwendet. Diese checkt ob entweder der submitbutton der variante, der link der variante aus der variantenliste, oder nur irgendwelche settings gesetzt wurden.

So.

Man könnte es nun so umschreiben, dass jede in der selectbox.tpl enthaltene variante einen submitbutton mit der jeweiligen id erhält, das schön als liste (je nach geschmack). Dafür muss man den js-code noch ein wenig anpassen.

Dadurch wäre man dann an dem Punkt, dass bei einem klick auf eine Variante diese im Warenkorb landet.

Ich bin aber auch noch nicht durch damit und werde weiter berichten wenn ich es geschafft habe.

Korrigiert mich gerne. Ich hoffe das war verständlich.

Grüße
Keno

Im alten Basic-Theme war die Variantenauswahl ein Dropdown mit Artikeln, aber die selectbox.tpl in Azure zeigt keine Artikel, sondern Namen von Varianten, also die “data-seletion-id” bedeutet einfach nur “grün” oder “rot”, was man ja schlecht in den Warenkorb legen kann. Wenn man den Artikel in den WK legen soll, würde ich die selectbox.tpl so lassen wie sie ist weil sie auch in der Detailansicht verwendet wird und stattdessen in der Listenansicht den entsprechenden Block aus dem Basic-Theme verwenden, siehe hier: http://oxid-tpl-debug.stahlwarenhaus-hebsacker.de/basic/Kiteboarding/Zubehoer/ beim ersten Artikel.

Nur zum Verständnis. Ich möchte das im Produktview realisieren.

Das es sich bei der data-seletion-id nicht um die Varianten-id handelt habe ich gestern nicht mehr gecheckt.
Kann man denn eine Liste der vorhandenen variantenids laden? Eigentlich wird die Variante dort ja geladen, nur das man die id der Variante braucht.

Das kannst du doch einfach aus dem basic-Theme rauskopieren, eine Liste der Varianten ist z.B. hier (product.tpl):


            <select id="varSelect_[{$testid}]" name="aid">
            [{ if !$product->isParentNotBuyable()}]
                <option value="[{$product->getId()}]">[{ $product->oxarticles__oxvarselect->value }] [{oxhasrights ident="SHOWARTICLEPRICE"}] [{ $product->getFPrice() }] [{ $currency->sign|strip_tags}]*[{/oxhasrights}]</option>
            [{/if}]
            [{foreach from=$product->getVariantList() item=variant}]
                <option value="[{$variant->getId()}]">[{ $variant->oxarticles__oxvarselect->value }] [{oxhasrights ident="SHOWARTICLEPRICE"}] [{ $variant->getFPrice() }] [{ $currency->sign|strip_tags}]* [{/oxhasrights}]</option>
            [{/foreach}]
            </select>

Hallo.

Ok das habe ich jetzt mal versucht zu implementieren.

In productmain.tpl habe ich ein widget included, welches zum größten teil
noch selectbox.tpl entspricht. Das widget passe ich dann noch meinen Wünschen an.
[{include file=“widget/product/selectVariant.tpl” oSelectionList=$oList product=$oDetailsProduct iKey=$iKey blInDetails=true}]

Da in dem widget das productobject benötigt wird habe ich es mit product=$oDetailsProduct übergeben. oDetailsProduct kann aber laut logfile anscheinend nicht auf ‘getVariantList’ zugreifen.

Auch wenn ich in dem widget das hier ausgebe

 
[{assign var="product" value=$oView->getProduct()}]      [{$product|print_r}]

bekomme ich alle Daten des produkts angezeigt, aber kann die funktion getVariantList nicht aufrufen.

Wie komme ich da jetzt dran?

Grüße
Keno

Achso!

Da dein codesnippet ja aus dem Standardtheme ist, und dementsprechend älter muss man wie man hier sieht
http://wiki.oxidforge.org/Tutorials/use_basic_theme_from_version_4.7_and_5.0_on

anstatt getVariantList() diese getVariants() function nehmen.

Gibt es die möglichkeit, zu prüfen, ob eine Variante kaufbar ist? Isbuyable bezieht sich ja nur auf das parentobject.

Da scheint es schon wieder frickelig zu werden.

Schau mal die Funktion getVariants an:

    public function getVariants( $blRemoveNotOrderables = true, $blForceCoreTable = null  )

@param bool $blRemoveNotOrderables if true, removes from list not orderable articles, which are out of stock

Außerdem gibt es noch die Funktion getFullVariants die immer oxarticle-Objekte liefert die auch die Funktion isBuyable() kennen.

@leofonic

Sehr interessant.
Danke schau ich mal rein.

Ich bin jetzt soweit fertig.
In meinem Produktview habe ich jetzt eine Übersichtliche Liste mit allen Varianten.

In der details/inc/productmain.tpl habe ich die oxarticlevariant.js
rausgenommen(, da ich sie nicht brauche und habe dann alles was für das in den warenkorb legen der Variante benötigt wird in eine neue datei geschrieben. Diese liegt in selectVaraint.tpl


[{* variants | md variants *}]
        [{block name="details_productmain_variantselections"}]
            [{if $aVariantSelections && $aVariantSelections.selections }]
                [{oxscript include="js/widgets/oxajax.js" priority=10 }]
                [{*oxscript include="js/widgets/oxarticlevariant.js" priority=10 *}]
                [{*oxscript add="$( '#variants' ).oxArticleVariant();"*}]
                [{assign var="blCanBuy" value=$aVariantSelections.blPerfectFit}]
                <div id="variants" class="js-fnSubmit">
                    [{assign var="blHasActiveSelections" value=false}]
                    [{foreach from=$aVariantSelections.selections item=oList key=iKey}]
                        [{if $oList->getActiveSelection()}]
                            [{assign var="blHasActiveSelections" value=true}]
                        [{/if}]
                        [{include file="widget/product/selectVariant.tpl" oSelectionList=$oList iKey=$iKey blInDetails=true}]
                    [{/foreach}]
                </div>
  .......................
           hier steht noch mehr code der erstmal egal ist
           ..........................

der wichtige teil von selectVariant.tpl


[{foreach from=$product->getVariants() item=variant}]
		<tr>
			   			<td>
				   			<span>[{ $variant->oxarticles__oxvarselect->value }]</span>
				   		</td>
				   		<td>
				   			[{assign var=tprice value=$variant->getTPrice()}]
                    		[{assign var=price  value=$variant->getPrice()}]
		                    [{if $tprice && $tprice->getBruttoPrice() > $price->getBruttoPrice()}]
		                        <p class="oldPrice">
		                            <strong>[{oxmultilang ident="DETAILS_REDUCEDFROM"}] <del>[{$variant->getFTPrice()}]</del></strong>
		                        </p>
		                    [{/if}]
                   			<p class="aktPrice">[{oxhasrights ident="SHOWARTICLEPRICE"}]  <span> [{ $variant->getFPrice() }]</span> [{ $currency->sign|strip_tags}]* [{/oxhasrights}]</p>
				   		</td>
				   		<td class="varAmount">
				   			<div class="floatLeft miniButton" rel="dec">-</div>
				   			<div class="floatLeft"><input type="text" name="variantAmount" value="1" size="2" autocomplete="off" class="textbox variantAmount"></div>
				   			<div class="floatLeft miniButton" rel="inc">+</div>
				   		</td>
				   		<td>
				   			<span>dd</span>
				   		</td>
				   		<td>
				   			<span class="sum"></span>
				   		</td>
				   		<td>
				   			<button id="toBasket" class="button js-fnSubmit" name="data-seletion-id" value="[{$variant->getId()}]">[{oxmultilang ident="DETAILS_ADDTOCART"}]</button>
	                	</td>
	                </tr>
			    [{/foreach}]

Und die selectArticle.js (besser wäre selectVariant.js)


( function ( $ ) {

    selectArticle = {

        options: {
            sSubmitActionClass  : 'js-fnSubmit',
            sLinkActionClass    : 'js-fnLink',
            sDisabledClass      : 'js-disabled'
        },

         _create: function(){
            
             self = this;
             var options = self.options;
                         
             $('table.articleList tbody tr td .button').click(function(){
                        
         	 this.amount		 = $(this).parent().parent().find('.varAmount div .variantAmount');
                 this.selectedValueLabel = $( 'p span',  this );
                 this.selectedValue      = $( 'input',  this );
                 this.blSubmit           = $(this).hasClass( options.sSubmitActionClass );
                 this.blLink             = $(this).hasClass( options.sLinkActionClass );
                 this.actionForm        = $(this).closest( 'form' );
                 
                 $('input[name=am]' , $(this.actionForm) ).val($(this.amount).attr("value"));
                 $('input[name=aid]', $(this.actionForm) ).val($(this).attr("value"));
                 
                 
            });
          // send variant
             return self.action();
        },

        /**
         * execute action after select: do nothing, submit, go link
         *
         * @return boolean
         */
        action : function(){

            // on submit
            if( this.blSubmit ){
        	this.actionForm.submit();
                return false;
            }

            // on link
            if( this.blLink ){
               return true;
            }

            // just setting
            return false;
        }

         
    };

   $.widget("ui.selectArticle", selectArticle );

})( jQuery );


Da ich in der variantenliste auch möchte, dass man die Anzahl der varianten die man kaufen will eingeben kann, muss man sich noch ein hidden inputfeld in das element setzen.
ursprünglich war das in der produktansicht neben dem kaufenbutton als eingabefeld.
Da man bei mir aber den Vaterartikel nicht kaufen kann habe ich es da rausgenommen

<input type="hidden" name="am" value="">

Wenn man jetzt den Button neben einer Variante drückt, wird der Wert aus .variantAmount in das hidden am feld geschrieben, und die varianteid die als value im button steht in das hidden aid feld geschrieben.

Den Rest kann man auch selbst lesen. Ansonsten nochmal nachfragen.

Grüße
Keno

Puuh.
Kann man hier noch irgendwie besser Formatieren.
Sorry sieht alles etwas wirr aus.
Sonst kopieren und im Editor betrachten

Hallo, ich habe die Lösung von Keno jetzt probiert. Allerdings gibt es Fehler bei mir.

Meine Vorgehensweise:

  • den geänderten Code für die details/inc/productmain.tpl habe ich oben vom ersten Codeblock 1:1 kopiert und die Datei so verändert.
  • dann habe ich unter widget/product eine selectVariant.tpl erstellt, die genau den “wichtigen Inhalt” wie oben im zweiten Codeblock hat.
  • die selectArticle.js habe ich unter /src/js/widgets erstellt. Als inhalt genau den Inhalt wie hier im dritten Codeblock.
  • Da die selectArticle.js aber nirgends referenziert ist (???) habe ich die selectVariant.tpl ganz am Anfang noch um eine Zeile erweitert:

[{oxscript include=“js/widgets/selectArticle.js” priority=10 }]

Weil sonst wird die selectArticle.js doch gar nicht geladen…

So.
Nun bin ich in der Listenansicht. Ich sehe bei einem Artikel mit Varianten gar nicht den Warenkorbutton, sondern nur den MehrInfo-Button. Wähle ich eine Variante aus, dann wird eine Seite geöffnet, deren Design fehlt und unten ein Fatal Error steht:

Fatal error: Call to a member function getVariants() on a non-object in /home/www/web659/html/meinedomain.com/shop/tmp/smarty/63f99c3513df95e6b3918f326b990850^%%C1^C1B^C1B54C91%%selectVariant.tpl.php on line 7

Könnt ihr mir da weiterhelfen? Was habe ich denn falsch gemacht?

Danke schonmal!