Add To Cart

The default Javascript addToCart can be retrieved through var addToCart = InitializeEcommerceService('AddToCart')

This allows you to add an item to the cart. The model should contain a dictionary detail with key value pairs. Aside from the required key values, extra properties passed will be stored in the COM_ShoppingCartSKU.CartItemCustomData in the database.

JS Event

---

var myAddToCartEvent = new CustomEvent("add-to-cart", {
   detail: {
     // Required 2 fields
     "sKUGUID": '95ac6987-244c-4fcf-b38b-42e91f920291', // the COM_SKU.SkuGuid
     "quantity": 2,
     // Custom Fields that go to CartItemCustomData
     "color" : "red",
     "personalizedMessage": "Hello World!"
  }
});

addToCart.addItem(myAddToCartEvent);

Html Helpers

The addToCart has an addToCartEvent(el: HTMLElement) that takes the given HTMLElement and converts it into an Add to Cart CustomEvent.

Here's an example of an Add To Cart HTML Button, note the data-sku, data-quantity, and data-custom-field-xxxx fields. Anything that is data-custom-field-fieldname is saved as CartItemCustomData upon submission:

<a href="#" title="Add Product To Cart" data-sku="ba784a4e-3458-43fb-a1fc-885375c8a0a8" data-quantity="2" data-custom-field-productid="2" data-custom-field-name="Cheddar Cheesy Scarf - Personalized" class="btn btn-primary add-to-cart input-group-append rounded-right" data-custom-field-line1="Test" data-custom-field-line2="Hello">Add To Cart</a>

This looks at the HTMLElement's data attributes to build out this CustomEvent. The ecommerceEvents then hooks up any add-to-cart object's click, generates the CustomEvent from it, and triggers an Event. It then consumes that event and calls the addToCart.addItem(customEvent).

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;
            }
        }

    });

View-Component

Using .Net Core, you can call the below view component to generate an Add To Cart button. It receives a CustomFields dictionary for cart item custom data.

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