Website Forms (Widgets)¶

User Portal¶

In the user portal (for logged in customers) all user’s consents can be diaplayed and eventually canceled. The datasource user.profile.consents contains all available data related to user’s consents.

For more information see the Revoke Consent form documentation.

Example:

{% if user.profile.consents | length %}
            {% for message in messages.getByWidget('ecommerce.revokeConsent') %}
        <div class="alert alert-{{ message.type }}" role="alert">
            {{ message.field }} {{ message.text }}
        </div>
    {% endfor %}
        <table class="table table-striped cart-table">
            <tr>
                <th>{{_('Consent')}}</th>
                <th>{{_('Granted')}}</th>
                <th>{{_('Granted Date')}}</th>
                <th>{{_('Renew Date')}}</th>
                <th>{{_('Revoked Date')}}</th>
                <th>{{_('Actions')}}</th>
            </tr>
            {% for consent in user.profile.consents %}
                <tr>
                    <td>{{consent.text}}</td>
                    <td>{% if consent.isGranted %}{{_('yes')}}{% else %}{{_('no')}}{% endif %}</td>
                    <td>{{consent.grantedDate | localDatetime }}</td>
                    <td>{{consent.renewedDate | localDatetime }}</td>
                    <td>{{consent.revokedDate | localDatetime }}</td>
                    <td>
                    {%- if consent.isRevocable -%}
                        <form method="post" action="{{ widget('ecommerce.revokeConsent') }}">
                            <input type="hidden" name="consent" value="{{ consent.id }}-id" />
                            <button name="process" type="submit" class="btn btn-default pull-right">{{_('Revoke Consent')}}</button>
                        </form>
                    {%- else -%}
                        {{_('No action available')}}
                    {%- endif -%}</td>
                </tr>
            {% endfor %}
        </table>
{% else %}
    <p class="text-center">{{_('There are no consents to display.')}}</p>
{% endif %}

Contact Form¶

Form name: general.contact

A basic contact form which is used by the visitors to contact you.

If a website visitor uses this form to send you a message, this message will be send to your e-mail address defined in the form (element email) by its internal name. The replyTo will be in the body of this e-mail displayed as the Contact E-mail.

There are 2 required form elements:

• email - the internal name of the e-mail address to which will be the e-mail sent (remember that you have to define this address in your website settings in the Contact E-mails part). This e-mail will contain information about the sender (the replyTo value will be displayed as Contact E-mail in the e-mail body).

• subject - a subject of the e-mail a visitors sends using the form.

Other form elements:

• replyTo - it is the field for customer’s/visitor’s address provided in the form. This address can be subsequently used in your e-mail client - to this address will be send your reply. This address will be used in the e-mail header (From field).

• cc - to an e-mail provided in this field (the e-mail is defined by its internal name) will be sent the carbon copy, you can provide a list of addresses separated by comma (remember that you have to define this address in your website settings in the Contact E-mails part).

• bcc - to an e-mail provided in this field (the e-mail is defined by its internal name) will be sent the blind carbon copy, you can provide a list of addresses separated by comma (remember that you have to define this address in your website settings in the Contact E-mails part).

• attachment - this field will allow your website visitors to upload an attachment with a maximum size of 2 mb. This attachment will be sent as part of the contact email. If you want to use this feature, remember that you have to add the enctype=”multipart/form-data to the form HTML element.

• attachment[] - this field will allow your website visitors to upload multiple attachments at once. The number of attachments that can be sent in a form is limited to 5. The maximum size for a single file is 5 MB.

Optional parameter template can be used if you want to define your own contact e-mail template (the e-mail that will be sent to the e-mail address defined in the email field). Use the internal name of a particular template to identify it. If there is no such template found in your account, other contact e-mail template from your account will be used. If there is no contact e-mail template at all, a default system template will be used instead.

To display and use the form, you have to define it in your website code. Create a standard form with the parameter method=post.

Your form can be defined like this:

<form method="post" enctype="multipart/form-data>
        {{ widgetFormParams('general.contact', { template: '<templateInternalName>' } ) }}
                <input type="hidden" name="email" value="support-team"/>

                <div>
                    <label for="exampleInputEmail1">Your Name *</label>
                    <input name="contact-name" type="text" id="inputName" placeholder="Your Name"/>
                </div>
                <div>
                    <label for="exampleInputEmail1">E–mail *</label>
                        <input name="replyTo" type="email" id="inputEmail" placeholder="Your E–mail"/>
                </div>
                <div>
                    <label for="exampleInputEmail1">Subject</label>
                    <input name="subject" type="text" id="inputEmailSubject" placeholder="Subject"/>
                </div>
                <div>
                    <label for="exampleInputPassword1">Your Message</label>
                    <textarea name="text"  id="exampleInputPassword1" rows="6" placeholder="Your Message"></textarea>
                </div>
                <div>
                    <input type="file" name="attachment"/>
                </div>
                <input name="process" type="submit" class="btn btn-primary" value="Send"/>
</form>

To display messages from this form, use this code:

{% for message in messages.getByWidget('general.contact') %}
        <div>
                {{ message.field }} {{ message.text }}
        </div>
{% endfor %}

Shopping Cart¶

Form name: ecommerce.cart

This widget is used to display a form wich allows customers to remove items or change their quantity. Buttons for reset, save, and continue are included. This form should be a part of the shopping cart, because it allows your customers to change quantity of products from the cart, empty it and process to another step which is usualy insertion of customer’s billing and shipping addresses.

The cart is usually the first checkout step. The next one is the checkout. Optionally you can insert the third - checkout overview - which displays the summary of the order before it is placed.

To display particular items in the cart, use appropriate parameters.

Parameters:

• onSuccess - Internal name of a page to which will be customers redirected in case they will continue with placing the order (page that will be displayed after a customer clicks the “continue” button)

• onSuccessUrl - An URL address to which will be customers redirected in case they will continue with placing the order (this URL address is not a part of this website, it is any URL address)

• checkoutVariant - Defines a particular visual variant of a checkout, which is located on the URL address provided in the onSuccessUrl prameter. It can be used only with combinaton with the onSuccessUrl parameter and in case the inserted URL address leads to another BizBox website checkout.

To display and use the form, you have to define it in your website code. Create a standard form with the parameter method=post:

<form method="post" action="{{ widget('ecommerce.cart', {'onSuccess': 'cart-information' }) }}"> ... </form>

Form Elements:

• quantity<cart item ID> - textfield which defines the quantity of a product with particular ID (product code)

• remove<cart item ID> - submit button used to remove particular product defined with its ID (product code)

• removeAttachment<cart attachment ID> - submit button used to remove particular product’s attachment (defined with its ID)

• clear - submit button used to clear the cart (all items will be removed)

• update - submit button used to save all changes from quantity fields

• process - submit button used to save all changes from quantity fields and redirect customers to the parameter defined in the onSuccess (or onSuccessUrl) parameter

Particular used to increase or decrease qunatity of a product can look like this. Remember that it has to be placed between the form marks:

<input type="button" value="-" />
<input id="cart-quantity-input" name="quantity{{ cartItem.id }}" type="number" value="{{ cartItem.quantity }}" min="1"/>
<input type="button" value="+" />
<a href="{{ widget('ecommerce.cart') }}&amp;remove{{ cartItem.id }}"></a>

An examples of buttons used to update, empty and process the order:

<button name="clear" type="submit">Empty</button>
<button name="update" type="submit">Recalculate</button>
<button name="process" type="submit">Next</button>

To display messages from this form, use this code:

{% for message in messages.getByWidget('ecommerce.cart') %}
        <div>
                {{ message.field }} {{ message.text }}
        </div>
{% endfor %}

Set Gifts¶

Form name: ecommerce.cart.setGifts

This widget allows your customers to select (insert) gifts available for their order to the shopping cart. It can be used only in combinaton with the Gifts application where particular gifts a customer can add to the cart for free can be set.

If there is only one gift available, it will be added to the cart automatically. If there are defined more gifts from which can the customer select, you should use this widget and display gifts offering together with its quantity setting.

Use the gifts API within this widget. If a customer inserts 0 quantity for a gift, it will be removerd from the cart. Use the returning parameter gifts in the API to get info about gifts in the cart.

Parameters:

This widget has no special parameters.

Form Elements:

• quantity{giftProduct.sysid} - value is a particular gift quantity; the giftProduct.sysid parameter contains information about the used gift setting and a particular product to which this gift belongs.

Code example:

{% if cart.gifts | length > 0 %}
        <form name="setGifts" method="post">
        {{ widgetFormParams( 'ecommerce.cart.setGifts' ) }}
        <input type="submit" name="process" title="{{_('Select Gifts')}}" value="{{_('Select Gifts')}}" class="btn" />
        {% for gift in cart.gifts %}
                {% set sale = gift.sale %}
                <p>{{sale.name}} (max.{{gift.maxQuantity}})</p>
                {% for gift in gift.products %}
                        {% set giftProduct = gift.product %}
                        {% set quantityFieldName = 'quantity' ~ gift.sysid %}
                        <div class="qty-wrapper v-center">
                                  <label for="{{quantityFieldName}}">{{giftProduct.name}}</label>
          <input type="text" name="{{quantityFieldName}}" id="{{ quantityFieldName }}" maxlength="12" size="5" value="{{giftProduct.quantity}}" title="Quantity" class="input-text bb-product-quantity"/>
        </div>
                {% endfor %}
        {% endfor %}
        </form>
{% endif %}

Set Benefits¶

Form name: ecommerce.cart.setBenefits

This widget allows customers to select a benefit in the cart. Benefit is a discount, gift or loyalty program that is marked with the flag Customer Selects Discount. This widget can be used only in combinaton with the particular application (Discounts, Gifts, Loyalty Programs) where particular benefits a customer can select to the cart can be set. Discounts/GIfts/Loyalty Programs marked with the Customer Selects Discount flag are never applied automatically. They only apply if the customer selects them via this widget.

For each benefit group in the cart, this widget contains a form field in the form “group <group id>”. The group label for the widget is available in ecommerce.cart.availableBenefits under groupSysid and is the preferred resource for the group.

Parameters:

This widget has no special parameters.

Form Elements:

• discount<discount-internal-name> - selection of a specific discount

• gift<gift-internal-name> - selection of a specific gift

• loyaltyPoints - selection of a specific loyalty program

• remove – removes the selected benefit

The benefitSysid value available in a particular object should be used to select a discount, gift or loyalty points. If a form element for a group is missing in the widget, the selection for that group does not change.

Code example:

    {% if not ecommerce.cart.availableBenefits.isEmpty %}
<h2>{{ _('Select Your Benefit') }}</h2>
<div class="row">
    <div class="col-md-4">
        <h3>Věřnostní body</h3>
        {% if ecommerce.cart.availableBenefits|first.loyaltyPoints %}
            {% if ecommerce.cart.availableBenefits|first.loyaltyPoints %}
                <form method="post">
                    {{ macros.getWidgetMessages( messages, 'ecommerce.cart.setBenefits' ) }}
                    {{ widgetFormParams( 'ecommerce.cart.setBenefits') }}
                    <input name="{{ ecommerce.cart.availableBenefits|first.groupSysid }}" type="text" value="{{ ecommerce.cart.availableBenefits|first.loyaltyPoints.benefitSysid }}" hidden />
                    <input type="submit" name="process" class="btn btn-secondary" value="{{ _( 'Loyalty Points' ) }} ({{ ecommerce.cart.availableBenefits|first.loyaltyPoints.earnedPoints }})"/>
                </form>
            {% endif %}
        {% else %}
            <p>{{ _('Loyalty points are currently unavailable.') }}</p>
        {% endif %}
    </div>
    <div class="col-md-4">
        <h3>{{ _('Gifts') }}</h3>
        {% if ecommerce.cart.availableBenefits|first.gifts %}
            {% for benefit in ecommerce.cart.availableBenefits|first.gifts  %}
                <form method="post">
                    {{ macros.getWidgetMessages( messages, 'ecommerce.cart.setBenefits' ) }}
                    {{ widgetFormParams( 'ecommerce.cart.setBenefits') }}
                    <input name="{{ ecommerce.cart.availableBenefits|first.groupSysid }}" type="text" value="{{ benefit.benefitSysid }}" hidden />
                    <input type="submit" name="process" class="btn btn-secondary" value="{{ _( 'Gift' ) }} {{ benefit.label }}"/>
                </form>
            {% endfor %}
        {% else %}
            <p>{{ _('Gifts are currently unavailable.') }}</p>
        {% endif %}
    </div>
    <div class="col-md-4">
        <h3>{{ _('Discounts') }}</h3>
        {% if ecommerce.cart.availableBenefits|first.discounts %}
            {% for benefit in ecommerce.cart.availableBenefits|first.discounts  %}
                <form method="post">
                    {{ macros.getWidgetMessages( messages, 'ecommerce.cart.setBenefits' ) }}
                    {{ widgetFormParams( 'ecommerce.cart.setBenefits') }}
                    <input name="{{ ecommerce.cart.availableBenefits|first.groupSysid }}" type="text" value="{{ benefit.benefitSysid }}" hidden />
                    <input type="submit" name="process" class="btn btn-secondary" value="{{ _( 'Sale' ) }} {{ benefit.label }}"/>
                </form>
            {% endfor %}
        {% else %}
            <p>{{ _('Discounts points are currently unavailable.') }}</p>
        {% endif %}
    </div>
</div>

            {% if ecommerce.cart.availableBenefits|first.isSelected %}
                    <div class="row">
                            <div class="col-md-6">
                            {{ macros.getWebAlert( _( 'Selected benefit') ~ ' ' ~ (ecommerce.cart.availableBenefits|first.selectedBenefit.loyaltyPoints ? _('loyalty points') : ecommerce.cart.availableBenefits|first.selectedBenefit.gift ? ecommerce.cart.availableBenefits|first.selectedBenefit.gift.label : ecommerce.cart.availableBenefits|first.selectedBenefit.discount ? ecommerce.cart.availableBenefits|first.selectedBenefit.discount.label : ''), { type: 'info' } ) }}
                            </div>
                            <div class="col-md-6">
                                    <form method="post" >
                                            {{ macros.getWidgetMessages( messages, 'ecommerce.cart.setBenefits' ) }}
                                            {{ widgetFormParams( 'ecommerce.cart.setBenefits') }}
                                            <input name="{{ ecommerce.cart.availableBenefits|first.groupSysid }}" type="text" value="remove" hidden />
                                            <input type="submit" name="process" class="btn btn-secondary" value="{{ _( 'Remove benefit' ) }}"/>
                                    </form>
                            </div>
                    </div>
            {% endif %}
    {% endif %}

Add Product to the Cart¶

Form name: ecommerce.cart.add

This widget allows you to create a form used to insert a product into customer’s shoping cart. You can use it in the product detail in the product catalog component page or anywhere alse on your website where you need to allow your customers to buy a product.

Parameters:

• onSuccess - Internal name of a page where will be customers redirected after successful submit of this form.

Form Elements:

• product - (required) - the code of a product that will be added to the cart

• quantity - (required) - defines the quantity of the product defined by the product parameter that will be added to the cart

• attachment - an upload for an attachment a customer wants to add to the product (such as required printing file)

• note - a textfield used by customers to provide an additional information to a product (such as requirements or wishes)

See example below:

<form method="post">
        {{ widgetFormParams('ecommerce.cart.add') }}

        <input name="product" type="hidden" value="{{product.code}}"/>
        <input id="cart-quantity-input" name="quantity" type="number" value="1" title="Quantity" min="1"/>
        <button name="process" type="submit">Add to cart</button>
</form>

For variable bundles:

<form method="post">
        {{ widgetFormParams('ecommerce.cart.add') }}
        <input name="product" type="hidden" value="{{ master.code }}" />
        {% for content in master.bundleContent %}
                {% set productInBundle = content.product %}
                {% if productInBundle.isMaster %}
                        <select name="bundleVariants{{content.id}}">
                        {% for variant in productInBundle.productVariants %}
                                <option value="{{ variant.code }}">{{ variant.name }}</option>
                        {% endfor %}
                        </select>
                {% endif %}
        {% endfor %}

        <div>
                <button><i class="fa fa-minus"></i></button>
                <input id="cart-quantity-input" name="quantity" data-max-quantity="{{ master.inventory.availableAmount }}" type="text" value="1" />
                <button><i class="fa fa-plus"></i></button>
        </div>

        <button name="process" type="submit">
                <i class="fa fa-cart-plus"></i> {{ _("Add to cart") }}
        </button>
</form>

To display messages from this form, use this code:

{% for message in messages.getByWidget('ecommerce.cart.add') %}
        <div>
                {{ message.field }} {{ message.text }}
        </div>
{% endfor %}

Cart Attachments¶

Form name: ecommerce.cart.addAttachment

Cart Attachment Widget allows your customers to assign an attachment (a file) directly to particular products that have been added to the shopping cart. A customer is able to assign this file both to products and to the order as a whole. Additional info (a short description) of the uploaded file can be added together with a file selected and uploaded directly from the customer’s computer. The added files and additional info are available in the detail of a particular order (in the Sales module), where you can comfortably download it.

BizBox offers you 2 methods of how to attach a file to an order or a particular product. This is the first one - the usage of the Cart Attachments Widget. The second is to assign the attachment directly to the Product Detail page. The second method does not use widget, you have to edit the Add co the Cart Form.

Parameters:

• multiple - allows multiple uplad. Currently only 10 files can be uploaded at once. Input name has to be attachment[]. For all uploaded files the same note, type and cart items will be used.

Form Elements:

• attachment - the attached file (upload)

• note - a textfield used to provide an additional information to a the attachment

• type - required; usually a selectbox for a type of attachment (particular product or order as a whole). Particular types are available in the object enums in a its parameter cartAttachmentTypes. Current available types are order attachment and product attachment.

• cartItems[] - ID of cart items to which is this attachment attached

• cartItemAccessories[] – an array to which the accessory ID can be sent (as they are available in the accessories.id value).

Example (with multiupload):

{% set defaultAttachmentType = '1' %}

<form method="post" enctype='multipart/form-data'>
        {{ widgetFormParams('ecommerce.cart.addAttachment', { 'multiple': 'true' } ) }}

        <h4>{{_('Add attachment')}}:</h4>
        <div class="row">
                <div class="col-sm-10">
                        <input type="file" name="attachment[]" multiple>
                        <input type="hidden" name="note" value="{{ type }}">
                        <input type="hidden" name="type" value="{{ defaultAttachmentType }}">
                </div>
                <div class="col-sm-2">
                        <button name="process" class="btn" type="submit">{{ _('Upload attachment')|raw }}</button>
                </div>
        </div>

</form>

Cart - Add from Order¶

Form name: ecommerce.cart.addFromOrder

Add from Order widget creates a copy of an existing order. The user must be logged in, otherwise the order data can not be obtained. Order products are searched by the product code. You can also use the Web API for this functionality.

Parameters:

• orderId - this parameter is used to define the ID of an order which copy you want to create.

Welcome Voucher (Add)¶

Form name: ecommerce.welcomeVoucher.add

Welcome Voucher Widget allows your customers to subscribe to a newsletter in exchange for a voucher code. For more info about this feature please see the e-shop settings help site.

Form Elements:

• email - customer’s e-mail that will be added to the newsletter selected in the e-shop settings.

• submit - form send button.

Claim¶

Form name: crm.claim

Claim Widget is used on the website by customers to add a new claim. A page which contains this widget should be a part of the user portal in case you want to allow your logged customers to add a new claim to a an existing (previously created) order.

Claims created within this widget are available in the Claims application in the Sales module.

Parameters:

This widget has no special parameters.

Form elements:

Claim Attachment¶

Form name: crm.claim.attachment

Claim Attachment widget allows your customers to upload an image attachment to a particular claim.

To be able to use this widget, you need to have the Claim Attachment addon available in your account.

Parameters:

This widget has no special parameters.

Form elements:

Claim Note¶

Form name: crm.claim.note

Claim Note widget allows your customers to add a note to a particular claim (on the website in the user portal).

Parameters

This widget has no special parameters.

Form elements:

Checkout¶

Form name: ecommerce.checkout

Checkout Widget serves the customer by inserting the shipping and billing info, selecting the payment method and the payment information. Information inserted through this form is (in case the customer finishes the order) automatically added to the Contacts application located in the Sales module. Here you can manage, edit and add more information to this customer and also work with the customer’s order.

Parameters:

• onSuccess

  • In combinaton with the process button: Internal name of a page where will be customers redirected after successful submit of this form.

  • In combinaton with the placeOrder button: optional, internal name of a page where will be customers redirected after successful submit of this form. If you use this parameter, selected online payment gateway won’t be contacted directly and the selected page (defined by the internal name) will be displayed instead. After redirection, the customer can click a button which allows him/her to make the payment (according to the selected gateway). For more info see the order receival help page.

• onRecalculate - Internal name of a page to which will be customers redirected after a recalculation of the cart.

• selectAddressReload - Optional parameter used to reload the page after customer selects his/her address from addresses saved in this customer account. As a default, this parameter is set to TRUE, you can change it to FALSE and no reload will occur.

Form Elements:

To allow your customers to save the billing address they provided in the checkout, you should use this code:

<input name="saveAddress" type="checkbox"> {{_( 'Save Address' )}}
<input name="saveAddressPresent" type="hidden" value="true">

System Payment and Delivery Combinations

ecommerce.checkout.systemPaymentAndDeliveryCombinations contains 2 keys deliveries (first level contains intenal names of delivery methods and second level contains internal names of payment methods) and payments (first level contains intenal names of payment methods and second level contains internal names of delivery methods).

Both paralel structures are consisted of:

• valid - boolean; defines if selected methods can be used together (according to the checkout settings)

• deliveryPrice - contains structure of the price of the delivery method

• paymentPrice - contains structure of the price of the system payment method (according to the selected delivery method)

Customer Alert Forms - Add¶

Customer alert is a request from a customer who wants to receive an information about particular product stock availability. If a product is out of stock, customers can insert their e-mail address. The e-mail will be send automaticaly to the provided e-mail address when the products your customers are interested in become available.

Form name: ecommerce.customerAlert.add

Example:

{% if product-out-of-stock %}
        <form method="post">
                {{ widgetFormParams('ecommerce.customerAlert.add') }}
                <input type="hidden" name="product" value="{{product.code}}" />
                {% if not user.logged %}
                        <input type="email" name="email" value="" />
                {% endif %}
                <input type="submit" name="process" value="Odeslat" />
        </form>
{% endif %}

Parameters

This widget has no special parameters.

Form elements:

Customer Alert Forms - Remove¶

This form allows to a registered user to remove his/her previously created customer alert.

Form name: ecommerce.customerAlert.remove

Example:

{% if user.customerAlerts | length %}
        {% for customerAlert in user.customerAlerts %}
                <span>Produkt: {{customerAlert.product.name}} ({{customerAlert.product.code}})</span>
                <form method="post">
                        {{ widgetFormParams('ecommerce.customerAlert.remove') }}
                        <input type="hidden" name="customerAlert" value="{{customerAlert.id}}" />
                        <input type="submit" name="process" value="Smazat" />
                </form>
        {% endfor %}
{% endif %}

Parameters

This widget has no special parameters.

Form elements:

Place Order¶

Form name: ecommerce.placeOrder

Place Order allows your customers to place their order. It is the last step of a checkout (also known as checkout overview). The checkout overview page should contain complete information about the order (products, payment and delivery info, sales, loyalty points and so on) with a button which places the order. Customers are unable to change information on this page, they will check it and place the order.

Parameters:

• onSuccess (optional) - Internal name of a page where will be customers redirected after successful submit of this form. If you use this parameter, selected online payment gateway won’t be contacted directly and the selected page (defined by the internal name) will be displayed instead. After redirection, the customer can click a button which allows him/her to make the payment (according to the selected gateway). For more info see the order receival help page.

Form Elements:

• process - A submit button, after click is the order placed in BizBox.

• clearCheckout - boolean value; TRUE value completely erases all checkout data.

See the code example below:

<form method="post" action="{{ widget('ecommerce.placeOrder') }}">
        {% for message in messages.getByWidget('ecommerce.placeOrder') %}
                <div>
                        {{ message.field }} {{ message.text }}
                </div>
        {% endfor %}
        <button name="process" type="submit">Place order</button>
</form>

Accept Offer¶

Form name: ecommerce.acceptOrder

Accept Order widget allows your customers to accept or decline an offer.

Parameters:

• onSuccess - Internal name of a page where will be customers redirected after successful submit of this form.

Form elements:

Product Rating¶

Form name: ecommerce.productRating

This form is used to add a new rating to a product. Only a logged user who bought the product can crate a rating. Every user can make only one review per product.

Parameters:

This form has no special parameters.

Form elements:

Product Discussion¶

Form name: ecommerce.productDiscussion

This form is used to add a new conversation to a product. A discussion can be started with both logged and not logged users.

Parameters:

This form has no special parameters.

Form elements:

If the discussion is started by a registered (logged) user, authorEmail and authorName fields are ignored. For anonymous user is the authorEmail required.

Product Rating Comment¶

Form name: ecommerce.productRating.comment

This form is used to add a new comment to an existing product review.

Parameters:

This form has no special parameters.

Form elements:

If the comment is posted by a registered (logged) user, authorEmail and authorName fields are ignored. For anonymous user is the authorEmail required.

Product Discussion Comment¶

Form name: ecommerce.productDiscussion.comment

This form is used to add a new comment to an existing product discussion.

Parameters:

This form has no special parameters.

Form elements:

If the comment is posted by a registered (logged) user, authorEmail and authorName fields are ignored. For anonymous user is the authorEmail required.

Product Rating Vote¶

Form name: ecommerce.productRating.vote

This form is used to add a new vote to an existing product rating.

Parameters:

This form has no special parameters.

Form elements:

Product Discussion Vote¶

Form name: ecommerce.productDiscussion.vote

This form is used to add a new vote to an existing product comment/discussion.

Parameters:

This form has no special parameters.

Form elements:

Revoke Consents¶

Form name: ecommerce.revokeConsent

This form allows withdrawal of consent (typically used in the user portal for logged-in users).

Form elements:

Example:

{%- if consent.isRevocable -%}
        <form method="post" action="{{ widget('ecommerce.revokeConsent') }}">
                <input type="hidden" name="consent" value="{{ consent.id }}-id" />
                <button name="process" type="submit" class="btn btn-default pull-right">{{_('Revoke consents')}}</button>
        </form>
{%- else -%}
        {{_('No action available')}}
{%- endif -%}

Change Password¶

Form name: user.changePassword

Change Password widget displays the form for the password change. This widget works only in case the user is logged in already (you can test this in a template with the user.logged parameter). The form is used by users to insert their old password, new password and repeat the new password again. After that they have to submit this form and their password will be changed.

Parameters:

There are no parameters for this widget.

Form Elements:

• oldPassword - a text field for the old password

• newPassword - a text field fot the new password

• newPasswordConfirm - a text field to confirm the new password (the newPassword and newPasswordConfirm has to be equal, othervise a message appears, so don’t forget to display messages from this widget)

• process - a buton used to send the form

A final code can look like this:

<form class="register-form" method="post">
        {{ widgetFormParams('user.changePassword') }}

        {% for message in messages.getByWidget('user.changePassword') %}
                <div>
                        {{ message.text }}
                </div>
        {% endfor %}

        <div>
                <div>
                        <label for="inputOldPassword">Old Password <span class="required-star">*</span></label>
                        <input name="oldPassword" type="password" id="inputOldPassword" placeholder="Old Password" required />
                </div>
                <div>
                        <label for="inputPassword">New Password <span class="required-star">*</span></label>
                        <input name="newPassword" type="password" id="inputPassword" placeholder="New Password" required />
                </div>
                <div>
                        <label for="inputPasswordAgain">Repeat New Password <span class="required-star">*</span></label>
                        <input name="newPasswordConfirm" type="password" id="inputPasswordAgain" placeholder="Confirm Password" required />
                </div>
        </div>
                <input name="process" type="submit" value="Save" />
</form>

Login¶

Form name: user.login

Login widget creates a login form. The form has usually 1 button (“Login”) and 2 fields (“Login” and “Password”). It serves for logging in on your website for a registered user. After a successful login, the user will be redirected to the page who required the login automatically. If there is not this page available, the user will be redirected to the page defined in the onSuccess parameter (used in case the user clicked on a login page and it has been not demanded by the system and the permission settings).

The page which contains this form is important for secured pages (pages that can be displayed only to logged users), because (thanks to Special Pages - Log In Page) non-logged users will be automatically redirected here to log in to be able to display the content secured by a user permission.

Parameters:

• onSuccess - Internal name of a page to which will be users redirected after successful login in case the login has not been demanded by the system - the user visited the login page and has not been redirected here because he/she tried to display a page which is protected with some permission settings. In such a case the user will be (after successful login) redirected back to the page which demanded the login.

• updateCheckout - updates checkout and cart after login - the tax payer flag is set to the checkout (according to the contact’s company settings). According to the address (default delivery, default billing, person’s address, business address), the state (as a billing state) will set in the checkout. By default, this behavior is disabled.

• onFailedLogin – optional; internal name of the page to which the user will be redirected in case of unsuccessful login.

Form Elements:

• login - text field for inserting user’s login

• password - text field for inserting user’s password

• remember - check box, user can select if he/she wants to stay logged forever (limited by the cookie validity)

• process - a button to send the form and log in the user

Code example:

<form method="post">

        {{ widgetFormParams('user.login', {'onSuccess': 'index' }) }}

        {% for message in messages.getByWidget('user.login') %}
                <div>
                        {{ message.field }} {{ message.text }}
                </div>
        {% endfor %}

        <label for="inputEmail">E-mail Address</label>
        <input name="login" type="email" id="inputEmail" placeholder="E-mail Address" required />
        <label for="inputPassword">Password</label>
        <input name="password" type="password" id="inputPassword" placeholder="Password" required />
        <div class="checkbox">
                <label>
                <input input name="remember" type="checkbox" value="remember-me" /> Remember Me
            </label>
        </div>
        <button name="process" type="submit">Login</button>

</form>

Logout¶

Form name: user.logout

Logout allows logged users to log out. You are able to specify a page to which will be the user after successful logou redirected.

Parameters:

• onSuccess - Internal name of a page to which will be users redirected after successful logout

Form Elements:

• process - a button to send the form and logout the user

Example:

<a href="{{ widget('user.logout', {'onSuccess':'catalog'}) }}">Logout</a>

Registration¶

Form name: user.registration

Registration widget allows you to create a form for a new registration. It contains only one input field (“E-mail”). You can extend it by adding the fields for First Name (field name firstName) and Last Name (field name lastName).

When registering, the user can enter the address (common type). Additionally, you can add shipping and billing address fields to the form (see the list of available form fields below). If the shipping address exists, the ordinary (common) address will be marked as billing. Otherwise it will be marked as common. The new billing address will be set as default billing, the new shipping address will be set as the default shipping. Common or business addresses will not be set as default.

After the successful registration of the newly registered user an e-mail is automatically sent with the instructions for setting the password. It is absolutely necessary to have:

• A Special Page Secure Reset Password Page with the Reset Password Widget (the new user will set his/her password here)

• A Template of the Registration E-mail (you will create it in the E-mail Templates application located in the Tools module) that will be sent to the user directly after registration. You have to select this created E-mail Template in the Security application (the Website Editor) in the Registration E-mail field.

• Permissions that will be set to the new user (the Security application located in the Website Editor)

Within this form the contact custom properties can be gathered. Use the property internal name and particular input type:

<input type="text" name="custom-property-internal-name"/>

Parameters:

• onSuccess - Internal name of a page to which will be users redirected after successful registration

• newsletter - Internal name of a newsletter to which the provided e-mail address will be added (field name subscribeNewsletter)

Form Elements:

• process - a button used to send the form (register the user)

Registration through Facebook Account¶

You can allow your customers to create their account using their Facebook account.

The link for the log in (registration) is in a template available as user.getFacebookLoginLink( returnUrl ). The ‘returnUrl’ is the link to which will be the user redirected from the Facebook.

How to activate Facebook registration

1. You must register as a developer here https://developers.facebook.com/apps

2. Create a new application (insert its name which will be used for the authentication requests from the website)

3. In Settings -> Basic select Add Platform

4. In the Select Platform choose the Website option

5. In the Site URL field insert your website URL address

6. Go to BizBox -> Administration -> Account Settings

7. Insert the Facebook App ID and Facebook App Secret according to the Facebook application

If a user with existing BizBox account uses the Facebook registration, his/her account will be paired with Facebook account (using the login/e-mail address used in BizBox).

Remove Address¶

Form name: user.removeAddress

Remove Address widget is used to create a form which allows registered users to delete an address they have added to their account.

Parameters:

• onSuccess - Internal name of a page to which will be users redirected after successful address deletion.

Form Elements:

• addresssId - The ID if an address which will be deleted

• process - a button used to send the form (remove the address)

You can generate delete links for all user’s addresses like this:

{% for address in user.profile.addresses %}
        <a href="{{ widget('user.removeAddress') }}&addressId={{ address.id }}">Delete</a>
{% endfor %}

Remove Company Address¶

Form name: user.removeCompanyAddress

Remove Address widget is used to create a form which allows registered users to delete an address they have added to their company.

Parameters:

• onSuccess - Internal name of a page to which will be users redirected after successful address deletion.

Form Elements:

• addresssId - The ID if an address which will be deleted

• process - a button used to send the form (remove the address)

You can generate delete links for all user’s addresses like this:

{% for address in user.profile.addresses %}
        <a href="{{ widget('user.removeAddress') }}&addressId={{ address.id }}">Delete</a>
{% endfor %}

Reset Password¶

Form name: user.resetPassword

Reset Password Widget displays the form for setting up a new password (displays 2 fields for setting up new password). You have to create a Special Page Secure Reset Password Page and insert this form to this Page. Link to this Page will be included in the e-mail after new registration and in the e-mail that is sent for forgotten password request.

Parameters:

• onSuccess - Internal name of a page to which will be users redirected after successful form sending

Form Elements:

• changeHash - a hash generated during the password reset request

• newPassword - text field for a new password

• newPasswordConfirm - text field for a confirmation of the new password. Both passwords has to be the same

• process - a button used to send the form (reset the password)

Forgotten Password¶

Form name: user.resetPasswordRequest

Forgotten Password form is used to display a form with one fiel - ‘Login’ or ‘E-mail’, to which will be the instructions for setting new password sent. To make this work is it necessary to have defined:

• A Special Page Reset Password Page with the Reset Password form (the new user will set his/her password here)

• A Template of the :ref:Reset Password E-mail<doc-reset-password-e-mail>` (you will create it in the E-mail Templates application located in the Tools module). You have to select this created E-mail Template in the Security application (the Website Editor) in the Reset Password E-mail field.

After this form will be sent, the Reset Password e-mail is send to the user who requested it (on the provided e-mail address in case a conatct with that address already exists in BizBox). You need to have the Reset Password form prepared. It serves for setting up a new password. Create a new page with the Reset Password form.

Parameters:

There are no special parameters for this form.

Form Elements:

• login - a textfield for a login of user who wants a new password

• process - a button used to send the form (request the password)

Save Address¶

Form name: user.saveAddress

Save Address can create new or edit an existing user address.

Parameters:

There are no special parameters for this form.

Form Elements:

• addressId - an ID of a currently edited address. If there is no ID, a new address will be created.

• firstName - a first name that will be a part of the edited/created address.

• lastName - a last name that will be a part of the edited/created address.

• streetAddress - a street and house number that will be a part of the edited/created address.

• city - a city that will be a part of the edited/created address.

• region - a region that will be a part of the edited/created address.

• country - a country that will be a part of the edited/created address.

• postalCode - a postal code of a city that will be a part of the edited/created address.

• phone - a phone connected to the person of this address.

• callingCode - a calling code of the phone.

• companyName - a company name that will be a part of the edited/created address.

• type - an address type (defines its usage in the checkout - billing, shipping or common used for both)

• process - a button which saves and sends this form

Save Company Address¶

Form name: user.saveCompanyAddress

Save Company Address is used to create/edit company addresses (adresses created within this widget are saved to the user’s company).

Parameters:

There are no special parameters for this form.

Form Elements:

• addressId - an ID of a currently edited address. If there is no ID, a new address will be created.

• firstName - a first name that will be a part of the edited/created address.

• lastName - a last name that will be a part of the edited/created address.

• streetAddress - a street and house number that will be a part of the edited/created address.

• city - a city that will be a part of the edited/created address.

• region - a region that will be a part of the edited/created address.

• country - a country that will be a part of the edited/created address.

• postalCode - a postal code of a city that will be a part of the edited/created address.

• phone - a phone connected to the person of this address.

• callingCode - a calling code of the phone.

• companyName - a company name that will be a part of the edited/created address.

• type - an address type (defines its usage in the checkout - billing, shipping or common used for both)

• process - a button which saves and sends this form

Save Profile¶

Form name: user.saveProfile

Save Profile allows users to change information they have provided during the registration process.

Parameters:

• onSuccess - Internal name of a page to which will be users redirected after successful registration

• defaultBillingAddress - Used to save address as a default one for billing; see the example:

  <a href="{{ widget('user.saveProfile') }}&defaultBillingAddress={{ address.id }}" class="btn btn-default">Set as default</a>
  

• defaultShippingAddress - Used to save address as a default one for shipping; see the example:

  <a href="{{ widget('user.saveProfile') }}&defaultShippingAddress={{ address.id }}" class="btn btn-default">Set as default</a>
  

Within this form the contact custom properties can be gathered. Use the property internal name and particular input type:

<input type="text" name="custom-property-internal-name"/>

• changeLogin - the parameter changes user’s login in case the e-mail address is changed. If the parameter is set, the login will change together with the e-mail.

Form Elements:

Shopping List - Add¶

Form name: user.shoppingList.add

Shopping List - Add is used to create a new shopping list.

Parameters:

• onSuccess - Internal name of a page to which will be users redirected after successful action.

• update - Optional parameter; updates the record.

Form Elements:

Shopping List - Remove¶

Form name: user.shoppingList.remove

Shopping List - Add is used to delete an existing shopping list.

Parameters:

• onSuccess - Internal name of a page to which will be users redirected after successful action.

Form Elements:

Shopping List - Update¶

Form name: user.shoppingList.update

Shopping List - Add is used to update an existing shopping list.

Parameters:

• onSuccess - Internal name of a page to which will be users redirected after successful action.

Form Elements:

Set Order Dispatch¶

Form name: supplier.order.setDispatch

Set Order Dispatch should be a part of the support portal. It allows suppliers to change a particuar order state. It can be used like this:

<form name="supplier-order" method="post">
        {{ widgetFormParams('supplier.order.setDispatch') }}
        <input type="hidden" name="orders[]" value="{{ order.id }}" />
        <select name="dispatchState">
                <option value="8"{% if order.dispatchState.sysid == 'packing' %} selected{% endif %}>Packing</option>
                <option value="6"{% if order.dispatchState.sysid == 'packed' %} selected{% endif %}>Packed</option>
                <option value="3"{% if order.dispatchState.sysid == 'dispatched' %} selected{% endif %}>Dispatched</option>
        </select>
        <input type="submit" value="Change State" name="process">
</form>

Form Elements

All dispatch states are available in the enumeration object dispatchStates. Use the parameter {{ enums.dispatchStates }} to access it. For more info see the enums documentation.

List of available enumeration states:

Partner Registration¶

Form name: partner.registration

Partner Registration allows you website visitor to register as a partner. Basically it is the same as the normal registration, but there are included information about a partner agreement. A potential partner has to agree with it in order to be able to become a partner.

When registering, the partner can enter the address (common type). Additionally, you can add shipping and billing address fields to the form (see the list of available form fields below). If the shipping address exists, the ordinary (common) address will be marked as billing. Otherwise it will be marked as common. The new billing address will be set as default billing, the new shipping address will be set as the default shipping. Common or business addresses will not be set as default.

Within this form the contact custom properties can be gathered. Use the property internal name and particular input type:

<input type="text" name="custom-property-internal-name"/>

Parameters:

• onSuccess - Internal name of a page to which will be users redirected after successful registration

• newsletter - Internal name of a newsletter to which will be the provided e-mail address added (field name subscribeNewsletter)

Form Elements:

Partner Manager¶

Form name: partner.manager

Partner Manager allows partners (managers) to change information they have provided during the registration process.

Parameters:

• onSuccess - Internal name of a page to which will be users redirected after successful registration

Form Elements:

Partner Remove Manager¶

Form name: partner.removeManager

Partner Remove Manager allows partners (managers) to delete other managers from their partner account.

Parameters:

This widget has no special parameters.

Form Elements:

• person - Contains the ID of a particular manager which should be deleted.

Save Manager¶

Form name: partner.saveManager

Save Manager allows partners (users) to add or change an existing manager (and his/her information or public user permissions).

Parameters:

• changeLogin - the parameter changes user’s login in case the e-mail address is changed. If the parameter is set, the login will change together with the e-mail.

Form Elements:

Newsletter Subscribe¶

Form name: newsletter.subscribe

This form allows your customers to sign to a newsletter.

Parameters:

This widget has no special parameters.

Form Elements:

Newsletter Unsubscribe¶

Form name: newsletter.unsubscribe

This form allows your customers unsubscibe from a newsletter.

Parameters:

This widget has no special parameters.

Form Elements: