In den Warenkorb Button hinzufügen

Geändert am Tue, 02 Apr 2019 um 02:32 PM

"In den Warenkorb" - Button


Wenn Du die "Add-To-Card" Einstellung im Plugin aktiviert hast, wird jedem Artikel ein Attribut übergeben, ob dieser in den Warenkorb legbar ist oder nicht: $product.getCustomField('addToCard') != 'N'

Wenn Du die "Kindartikel-Daten" Einstellung im Plugin aktiviert hast, kannst du diese mit $product.skus abfragen. In den Custom Fields der SKUs stehen die Variationswerte: $sku.customFields


Ist die Add-To-Cars Einstellung aktiviert, wird ebenfalls das benötigte JavaScript ausgespielt, um die Artikel in den Warenkorb zu legen. Wichtig ist, das das Artikel Formular beim absenden die "Nosto.addToCart(this)" Funktion aufruft: <form onsubmit="return Nosto.addSkuToCart(this);">


Ausverkaufte Variationen sollten in der Anzeige nicht erscheinen, dise kannst du mit $sku.available überprüfen.


Im folgenden siehst Du ein komplettes Beispiel für die Add-To-Card Funktion:


#if($product.getCustomField('addToCard') != 'N')
    #if($product.skus.size() > 0)
        <form onsubmit="return Nosto.addSkuToCart(this);">
            <div class="nosto-sku-select-wrapper">
                <label class="nosto-sku-select">
                    <select name="sku" class="form-control">
                        <option value="">Choose</option>
                        #foreach($sku in $product.skus)
                            #if($sku.available)
                                <option value="$!sku.id">
                                    #foreach($attr in $sku.customFields)
                                        $!attr.key: $!attr.value
                                    #end
                                </option>
                            #end
                        #end
                    </select>
                </label>
            </div>
            <button type="submit" class="nosto-btn btn btn-primary">
                <span class='fa fa-shopping-cart'></span> In den Warenkorb
            </button>
        </form>
    #else
        <form onsubmit="return Nosto.addProductToCart(this);">
            <input type='hidden' name='pid' value='$!product.productId' />
            <button type="submit" class="nosto-btn btn btn-primary">
                <span class='fa fa-shopping-cart'></span> In den Warenkorb
            </button>
        </form>
    #end
#else
    <a class="btn btn-primary" href="$product.url">Zum Artikel</a>
#end


Mit etwas CSS Styling könnte das dann z.B. so aussehen:



Das ist natürlich etwas technisch. Gerne können auch wir diese Aufgabe für Dich übernehmen.

Schreib uns einfach an: info@webstollen.de



Tags: