#101

Product support

Visit this product's website for support.

Categories

  • Marketing

The Orders plugin adds functionality to Shopaholic, allowing you to manage incoming orders.

With this plugin you are able to:

  • Oversee the orders in the back-end, overlook and change their state or delete them upon completion
  • Create, and modify delivery methods. Delivery methods can be displayed as text info or interactive interface components (buttons, radio buttons)
  • Display various payment methods and allow users to choose their desired method (without integration with online payment systems)

Users are able to:

  • Choose products and put them in their cart
  • Change the product quantity and delete them from the cart
  • Proceed to checkout and choose delivery methods and payment types through the interface that you provide

Get involved and contribute to the project

If you're interested in improving this project you can help in the following ways:

  • Reporting bugs and recommending new features on our plugin GitHub issues page; Contributing to the project following these instructions;

License

© 2017, LOVATA Group, LLC under GNU GPL v3.

Developed by Andrey Kharanenka.

These plugin(s) are required for the plugin:

Order list

The full plugin documentation is abailable here.

Cart component

The component allows to work with user cart.

Method list

onAdd()

Method adds offers to cart. Example:

//Prepare object with offers
var data = {
    'cart': [
        {'offer_id': 2, 'quantity': 4},
        {'offer_id': 5, 'quantity': 1},
        {'offer_id': 10, 'quantity': 1}
    ]
};

//Send ajax request and update cart items
$.request('Cart::onAdd', {
    'data': data,
    'update': {'cart-items': '.cart-item-wrapper'}
});
onUpdate()

Method updates quantity of offers in cart. Example:

//Prepare object with offers
var data = {
    'cart': [
        {'offer_id': 2, 'quantity': 4},
        {'offer_id': 5, 'quantity': 1},
        {'offer_id': 10, 'quantity': 1}
    ]
};

//Send ajax request and update cart items
$.request('Cart::onUpdate', {
    'data': data,
    'update': {'cart-items': '.cart-item-wrapper'}
});
onRemove()

Method removes offers from cart. Example:

//Prepare array with offers ID
var data = {
    'cart': [2,10]
};

//Send ajax request and update cart items
$.request('Cart::onRemove', {
    'data': data,
    'update': {'cart-items': '.cart-item-wrapper'}
});
onClear()

Method removes all offers from cart. Example:

//Send ajax request and update cart items
$.request('Cart::onClear', {
    'data': data,
    'update': {'cart-items': '.cart-item-wrapper'}
});
get()

Method returns CartElementCollection class object. Example:

{% set obCartElementList = Cart.get() %}
{% if obCartElementList.isNotEmpty() %}
    {% for obCartElement in obCartElementList %}
        {% set obOffer = obCartElement.offer %}
        <div>Name: {{ obOffer.product.name }}</div>
        <div>Quantity: <input type="number">{{ obCartElement.quantity }}</input></div>
        <div>Price: {{ obOffer.price }} {{ obOffer.currency }}</div>
        <div>Total price: {{ obCartElement.price }} {{ obCartElement.currency }}</div>
    {% endfor%}

    <div>Total price: {{ obCartElementList.getTotalPrice() }} {{ obCartElementList.getCurrency() }}</div>
{% else %}
 <div>Cart is empty</div>
{% endif %}

MakeOrder component

The component allows to create orders.

Component properties:

  • Mode (Submit form/Ajax form)
  • Send flash message (only for Ajax mode)
  • Enable redirect
  • Choose page for redirect (the URL of the page will be passed to the order ID and order number)

Usage: The component is used to process the order form. To send an ajax request, you must use the MakeOrder::onCreate method. You need to send the 'order' object with the order data and the 'user' object with the user data. Acceptable order fields: payment_method_id, shipping_type_id, shipping_price, property (array). User data will be stored in the 'property' field of the order. If the setting is enabled, a new user will be created or the order will be attached to the authorized user.

Example 1 (Submit form).

[MakeOrder]
mode = "submit"
redirect_on = 1
redirect_page = "order_success"

[PaymentMethodList]

[ShippingTypeList]
==

{% set arError = MakeOrder.getErrorMessage %}
{% set arForm = MakeOrder.getOldFormData %}

<form href="{{ 'order'|page }}">
    <label for="field-email">Email</label>
    <input type="email" id="field-email" placeholder="Email" name="user[email]" value="{{ arForm.user.email }}">
    {% if arError.message is not empty and arError.field == 'email' %}
        <p>{{ arError.message }}</p>
    {% endif %}

    <label for="field-company-name">Company name</label>
    <input type="text" id="field-company-name" placeholder="My company" name="user[property][company_name]" value="{{ arForm.user.property.company_name }}">

    {% set obPaymentMethodList = PaymentMethodList.make().sort().active() %}
    {% if obPaymentMethodList.isNotEmpty() %}
        <div class="payment-method-list-wrapper">
            {% for obPaymentMethod in obPaymentMethodList %}
                <input type="radio" name="order[payment_method_id]" id="payment-{{ obPaymentMethod.id }}" value="{{ obPaymentMethod.id }}">
                <label for="payment-{{ obPaymentMethod.id }}">{{ obPaymentMethod.name }}</label>
            {% endfor %}
        </div>
    {% endif %}

    {% set obShippingTypeList = ShippingTypeList.make().sort().active() %}
    {% if obShippingTypeList.isNotEmpty() %}
        <div class="payment-method-list-wrapper">
            {% for obShippingType in obShippingTypeList %}
                <input type="radio" name="order[shipping_type_id]" id="payment-{{ obShippingType.id }}" value="{{ obShippingType.id }}">
                <label for="payment-{{ obShippingType.id }}">{{ obShippingType.name }}</label>
            {% endfor %}
        </div>
    {% endif %}

    <input type="hidden" name="order[shipping_price]" value="5.50">
    <button type="submit">Submit</button>
</form>
{% if arError.message is not empty %}
    <p>{{ arError.message }}</p>
{% endif %}

Example 1 (Ajax request).

var data = {
    'order': {
        'payment_method_id': 1,
        'shipping_type_id': 2,
        'shipping_price': 10.5,
        'property': {
            'address': '...',
            'city': 'Minsk'
        }
    },
    'user': {
        'email': '[email protected]',
        'name': 'Andrey'
    }
};

$.request('MakeOrder::onCreate', {
    'data': data
});

The MakeOrder.getOldFormData method returns the filled form fields, if the form was sent and an error occurred. The MakeOrder.getErrorMessage method returns an error message if the form was sent and an error occurred.

[
    'message' => 'Error message',
    'field'   => 'email',           //Field name, if there was a validation error
]

PaymentMethodList component

The component allows to work with PaymentMethodCollection class objects.

Method list

make($arElementIDList = null)

Example: render list of payment methods

Get collection of payment methods, apply sorting + filter by flag "active"

{% set obPaymentMethodList = PaymentMethodList.make().sort().active() %}
{% if obPaymentMethodList.isNotEmpty() %}
    <div class="payment-method-list-wrapper">
        {% for obPaymentMethod in obPaymentMethodList %}
            <div data-id="{{ obPaymentMethod.id }}">
                <div>{{ obPaymentMethod.name }}</div>
                <div>{{ obPaymentMethod.preview_text }}</div>
            </div>
        {% endfor %}
    </div>
{% endif %}

ShippingTypeList component

The component allows to work with ShippingTypeCollection class objects.

Method list

make($arElementIDList = null)

Example: render list of shipping types

Get collection of shipping types, apply sorting + filter by flag "active"

{% set obShippingTypeList = ShippingTypeList.make().sort().active() %}
{% if obShippingTypeList.isNotEmpty() %}
    <div class="payment-method-list-wrapper">
        {% for obShippingType in obShippingTypeList %}
            <div data-id="{{ obShippingType.id }}">
                <div>{{ obShippingType.name }}</div>
                <div>{{ obShippingType.preview_text }}</div>
            </div>
        {% endfor %}
    </div>
{% endif %}
1.0.1

Fix permission tab label in config

Dec 08, 2017

1.0.0

Initialize plugin.

Dec 06, 2017