Basic Usage

The principle behind the Generic Ecommerce is to have a simple client-side driven Ecommerce interface, with generalized Interface and APIs, driven by Kentico Xperience's API.

Adding an Add to Cart

You can add the "Add to Cart" through the below View Component:

@*This is an example that will add a sku with a custom field of a color to the cart.  In order to just use as normal, remove the CustomerFields property from the AddToCartViewModel.*@ 

@await Component.InvokeAsync("Generic.Ecom.AddToCart", new AddToCartViewModel() { Quantity = 1, SKUGUID = Model.Page.SKUProduct.SKUGUID, CustomFields = new Dictionary<string, object>() { { "color", "red" } } } )

Updating Values Dynamically

You can use javascript to update, add or remove any data-attributes. An example of a "Quantity" box next to an add to cart would look like this:

<input type="number" class="form-control" id="qty-2" min="1" onchange="this.parentElement.querySelector('.add-to-cart').dataset.quantity = this.value" value="1">

Adding custom form fields is also as easy as adjusting the add to cart's dataset.customFieldFieldNameHere = "value";

<input type="text" class="form-control product-personalization-line1" maxlength="8" required="" id="line12" placeholder="Line 1">

document.body.addEventListener("change", (ev) => {
        if (ev.target.classList.contains("product-personalization-line1")) {
            // Find the add to cart button associated with the personalize line
            var productItem = ev.target.closest(".product-item");
            var addToCart = productItem.querySelector(".add-to-cart");
            if (addToCart) {
                // Adds the Line1 data attribute which will save to the CartItemCustomData
                addToCart.dataset.customFieldLine1 = ev.target.value;
            }
        }

    });

Displaying Shopping Cart

You can display the shopping cart through this view-component:

@await Component.InvokeAsync("Generic.Ecom.ShoppingCart")

Likewise, you can use the Page Template Generic.Ecom.ShoppingCart to display the Checkout fully, which you can add to existing page type filters or simply create a Page Type with code name Generic.Ecommerce

Checkout

You can display the checkout through this view-component:

@await Component.InvokeAsync("Generic.Ecom.Checkout")

Likewise, you can use the Page Template Generic.Ecom.Checkout to display the Checkout fully, which you can add to existing page type filters or simply create a Page Type with code name Generic.Ecommerce

Adjusting Views

View renderings are probably the primary elements you may wish to customize, please see the Customization section of this wiki for instructions. Please use caution though on altering certain class names, id values, or name values as some of the default javascript hooks up to it.