Configuring shopping cart in JBZoo

7.0/10 rating (4 votes)

The cart is based on the item submission forms. We use heavily modified forms of the standard ZOO. This allows us to use various field types in the form (strings, radio, checkboxes and even attach files). All of them will go through validation like in an usual item submission form.

We'll review the cart configuration from the start. We'll make something similar to the cart on a demo site.

  1. Firstly, you need to make a separate JBZoo application (new tab). For your convenience, you can give it an "orders" alias. All orders from the cart will be saved here.

  2. Creating new submission

    Create a new submission in this application:

    • Make it published
    • Disable item edit
    • Access level - public
    • In the "Types" section select an "Order Form" for the "Order" type
  3. Go to the "Config" and select the "Cart" tab. Set these parameters:

    Cart configuration

    • Enable cart - yes. It allows this application to accept new submissions from the website.
    • JBPrice Advance - you must enable this option if you are using JBPrice Advance element for your prices.
    • Only authorized - as you wish.
    • Submission form - choose the one that was created in the previous step.
    • Template order form - it is better to choose preinstalled "Order / Order Form".
    • Currency - default currency.
    • Administrator email - notifications will be sent to this email when there are new orders.
    • Element for user email - if you have an "E-mail" element in your "Order" type, you can use it to send notifications to anonymous users.
    • Email templates - email layouts, you can leave it as default.

    Other settings are optional. You can read their descriptions in the tooltips.

    So the application is now configured as a shopping cart. It's better not to use it for any other purposes or item types, or else it will become messy.

  4. Enabling cart module

    Module configuration

    Go to the module manager and create a new "JBZoo Cart" module or use an existing one. This module displays cart information and a link to the cart page. Specify these parameters in the basic settings:

    • Application - choose the one that we created earlier (Orders)
    • Choose a currency
    • Choose a menu item where cart items will be displayed. It is useful for managing modules on the cart page.

    Template settings are optional and self-explanatory. Don't be afraid to try them and see what is better for you. Also, don't forget to publish this module and put it in some position and choose menu assignment.

  5. Configure Order templates layouts (optionally)

    Order template layouts

    It is important to remember about "JBZoo Cart Items" element. While invisible for the frontend, it is displayed during item editing (with an "Order" type). It plays an important role of saving selected products to a database. Then it displays them in the admin panel.

    You can edit elements and template layouts here:

    "Cogwheel" -> JBZoo App -> Order

    Also you can edit template files located in this folder:

    media/zoo/applications/jbuniversal/templates/catalog/renderer/item/order

  6. Add "JBZoo Price - Advance" to an item type of your products

    Set a default currency and don't forget to choose a mode that has "add to cart" functionality (pop-up window, for example).

    Configuring JBZoo Price - Advance elementSettings of JBZoo Price - Advance element in the Full item layout

    Now you have a shopping cart functionality. Orders are saved in their application, emails are sent to an administrator and a buyer (if he is logged in or specified his email during check-out.

Payment systems

There are two payment receiving services that are natively supported by JBZoo: Robokassa and Interkassa. In this tutorial we'll describe the cart configuration for the first one.

Attention!

In order to test a payments system, your website must be accessible from the Internet. It should not be on a localhost.

And it should be opened to anonymous users. Otherwise, the payment robot will be unable to pass successful payment information to your website.

JBZoo configuration

Order form configurationBefore enabling payment systems, make sure that your cart is set up and working properly. Also, make sure that an order form has "JBZoo Cart Items" element.

Payment systemsNow go to the cart configuration of your orders application.

Enable payment systems and Robokassa.

Apply settings and press "Get the link to API". You'll need these links to configure payment system from their side.

You'll fill "Login", "Password 1" and "Password 2" a bit later, after setting up a Robokassa account for your shop. 

Robokassa

Useful links:

My shopsCreate a new Merchant account. Log in and go to the "My shops" page. Add a new shop here. Remember the "Shop ID" field, you will set it as "Login" in your cart configuration.

Technical preferencesAfter you add a new shop, click on its name and go to the "Technical Preferences".

"Password #1" and "Password #2" should be at least 8 characters long with at least one letter and one digit. Don't forget to input these passwords in your JBZoo cart configuration as well.

Now you should copy the links that JBZoo generated into the corresponding fields.

You must choose "POST" method for every url.

Now you can test your payment system.

Testing

Enable debug mode for Robokassa in JBZoo cart configuration. During a debug mode money is not used but the behaviour of the payment robot is completely emulated.

Payment pageCreate an order on your website and press "Checkout". If configured everything right, you'll be redirected to the payment page.

Robokassa test pagePress "Go to the payment system" and you should be redirected to the Robokassa test page. Try pressing first "Go" button. If everything is correct, you'll get a server response.

Also try other buttons. The second one emulates behavior for a successful payment and the third one - for an unsuccessful.

If you'll get an error, check all configuration of your website and Robokassa.

Attention!

Keep in mind that debug mode works only until you activate your shop in Robokassa. After you activate a shop, you'll be unable to change its domain there.

Paid order statusIf a payment was successful, you'll see that an order is marked as "Paid":

User order statusIf a user is registered, he'll see something similar as well:

That's it. Now you know how to make a shopping cart with JBZoo and how to configure a payment system.

There will be native support of additional payment systems in the future releases of JBZoo so it will be even easier for you to accept payments.

If you have any questions or encountered a problem, feel free to ask about it on the forum.

Cart, Elements, Price

Still gotta questions, who can help me?

Visit our special JBZoo tech support forum which is specifically meant for JBZoo so the priority of the response and its promptness are much better there than in any other place. With inactive account with a “Plus” sign in a tariff plan you can ask for support in one of these sections or use any of our contacts.