MODX Installation / Setup

Install the MODX Extra

After you setup your store install the MODX extra via the Package-Manager of your MODX site. After successfully installing the extra go to system settings and add your API-KEY and Shop-ID. 

Getting API Credentials

You can view your API-Credentials by logging into your Admin-Panel. Access your Admin-Panel by adding "/admin" to your custom Shop-URL. If your Shop-URL is example.myeasycart.shop - you can access the Admin-Panel via:

https://example.myeascart.shop/admin

Navigate to Settings > API and create your personal API-KEY. Copy the KEY and the ID to your MODX System-Settings to connect your MODX site with your easyCart-Shop.

Setting up your add-to-cart form

After connecting your easyCart shop with your MODX-Site you can start using the checkout process. To place products into your cart setup your product catalog and product details inside MODX however you would like to. In this example we have a basic setup of a product as a Resource and store the product informations inside TVs. We have a simple add-to-cart form to place our product into the cart for checkout. A basic setup looks like this:

[[!easycartAddToCart?
    &title=`[[*pagetitle]]`
    &sku=`[[*id]]`
    &price=`1995`
    &tax=`19`
    &image=`http://example.com/path/to/your/image.jpg`
    &description=`This is a demo product description.`
    &url=`[[~[[*id]]? &scheme=`full`]]`
    &attributes=`Color==silver||Size==Medium`
    &redirect=`1`
]]

<form action="[[~[[*id]]]]" method="post">
    <input type="hidden" name="add_to_cart" value="1">
    
    <input type="number" min="1" max="10" name="quantity" value="1">
    <button class="button" type="submit">Add to cart</button>
</form>

easyCart actually just needs a "add_to_cart" field to recognize the action to place the product to the cart. Every other information is provided to the easycartAddToCart Snippet as properties. You have the following options to send with your product:

Setting Default Description
&price The Price of the product in Cent.
&sku The Product-ID. This ID is used to consolidated products and increasing quantity, instead of adding them as a new one. Can be a String.
&title The Title of the product.
&quantity 1 The Quantity of the Products.
&quantityUnit 1 The Quantity of products inside the product. If the product consists of multiple items. This can be usefull if you setup some shipping rules for quantity. For example you sell wine bottles, the product is a Package of 6 Bottles and your shipping is free >= 12 bottles. Then you want the system to be aware that this product has 6 bottles.
&quantityMax Maximum number of a product per order.
&tax Redirect the user to the shopping cart after placing the product to the cart.
&redirect 1 Redirect the user to the shopping cart after placing the product to the cart.
&image A short description of the product.
&data Hidden data added to the product to use inside the checkout process or for webhooks inside easyCart. For example to setup a webhook for your CRM. The Format: key==value||key2==value2||key3==value3
&attributes Visible data added to the product. This information can be usefull if you have different sizes, colors etc. The Format: Label==value||Label 2==value2||Label 3==value3
&json Returns an Json string
&quantityPrices Individual prices for different quantity. The Format: quantity==price_in_cent||quantity==price_in_cent2 Example: 10==200||20==190
&groupPrices Individual prices for specific user groups. The Format: groupid==price_in_cent||groupid==price_in_cent2 Example: 4==200||5==350
&preHooks A comma-separated list of Snippets, that will be executed before the product is added to the cart.
&language Change the language of the checkout process. Example: en

Setup the cart quantity

If you would like to display the quantity of items in your cart inside your header for example: Just place the "easycartGetCart" Snippet in the footer of your site and set the placeholder to the header of your site. Example:

// place this where you want the number to be shown
[[!+easycart.total_quantity]]


// place this just before your closing Body-Tag
[[!easycartGetCart]]

See it in action and add a demo-product to our demo checkout-process: