OpenCart: Creating a custom product order form

Question

I am helping a friend of mine to set up her online store. We are using the ThingsForCuties theme and OpenCart version 1.5.6.4. I have some previous experience with web developement in HTML, CSS, PHP, JS and also lots of Wordpress, if that counts, however I really don't understand the MVC pattern (if I'm right OpenCart is written in an MVC framework - correct me if not).

Some info on her store and what she'll be going to sell: Mostly bedroom stuff for babies, such as sheets, pillows, betting sets and such. She has some pre made and brand items in stock, but the biggest thing would be, that a buyer can order a custom order, meaning that he/she defines the dimensions, colour, material(s), etc.

We would like to add a custom page to the website, where the user can post a custom order. This custom page would have a few form elements, such as radio buttons, checkboxes, textareas (for comments on the order), and like. There would be a price calculator (which if there isn't a plugin for that, I can write in JS/PHP) whcich would calculate the price depending on the dimensions/materials etc. So after the user selected everything, the custom order has to appear in the shopping cart, with the order's details, and also there has to be a way to modify the order if he/she changes his/her mind.

I have no idea though where to start. Could someone help me out with this issue?

score 1 · Answer 1 · edited May 23 '17 at 10:33

Sure. I think the best approach would be to make a dedicated page module. The first thing I would do is backup or get into my dev environment.

Edit header.tpl (depends as I do not know the ThingsForCuties theme)

Basically add a link in their such as after the contact us

/index.php?route=page/calc (you can do a rewrite with .htaccess later)

OpenCart is MVC so work with model, controller view.

Make the following files.

/catalog/view/theme/{cuties}/template/calc.tpl

<?php echo $header; ?>
<div class="category_header">
    <header>
        <h1>Baby Form</h1>
        <p>My, JS, HTML5 and a little PHP can go here..</p>
    </header>
</div>
<div class="content_stylist">

<?php echo $footer; ?>

/catalog/controller/calc.php

<?php

class ControllerCalc extends Controller{ 
    public function index(){
        $this->language->load('information/information');
        $this->load->model('catalog/information');

        $this->template = 'default/template/calc.tpl';

        if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . 'default/template/calc.tpl')) {
            $this->template = $this->config->get('config_template') . 'default/template/calc.tpl';
        } else {
            $this->template = 'default/template/calc.tpl';
        }

        $this->children = array(
            'common/header',
            'common/footer'
        );

        $this->response->setOutput($this->render());
    }

     function calc(){

        // place functions within the class if need

    }

}

function external_sample(){

    // you can have external php too outside the OC framework

}
?>

See my post on custom admin page which is the same and includes the permission issues. As I mentioned before you can now visit index.php?route=page/calc and try your code and will see it embedded nicely.

There are extensive tutorials posted here.

Custom page tuts

opencart php custom page without using the "information" feature

http://forum.opencart.com/viewtopic.php?t=59542

http://www.kvcodes.com/2013/10/create-custom-admin-page-open-cart/

Admin page tut

How to create a custom admin page in opencart?

This is a really good answer. I have added some links in as a common answer and this answer with those tutorials provides samples, examples, tutorials, code downloads; way beyond an answer. — TheBlackBenzKid, Aug 24 '14 at 15:12

score 0 · Answer 2 · answered Aug 25 '14 at 12:52

The other way round (with much less programming) is to use what is at hand all the time. In OpenCart that is a product and a product options.

You can set as many product options to a product as you wish and with all the possible form elements (some, as file picker or date and/or time picker) come already with the jQuery functionality behind. It is not a big deal to create a dummy product with some design me image and all the options you need. Let's say you'll need the customer to pick up a material, set the dimensions and optionally upload an image of his desired print and add a note. Just go to administration, catalog -> options and create these new options (if you do not have them):

Material, type select, mandatory, enabled, sort order 1
- as values set all the possible materials (yes, even if you have hundreds of them :-) )
Length, type text input, mandatory, enabled, sort order 2
Width, type text input, mandatory, enabled, sort order 3
Height, type text input, mandatory, enabled, sort order 4
Image, type file, not mandatory, enabled, sort order 5
Notes, type textarea, not mandatory, enabled, sort order 6

Now just create a new product, name it whatever you want and add and set all these options for that product. You may want to set prices for materials. Afterwards there will be the only programming needed - to implement the calculation of option price for the dimensions ordered.

You may extend the frontend's product.tpl to include some calculator in JS depending on present controls.

This could be achieved with less programming effort (though little more administration is required).

OpenCart: Creating a custom product order form

2 Answers2