Fully Custom Blesta Order Page

[Rodrigo]

Hi,

 

Finally I've managed to make the custom order page design by applying a hack to order form controller that let me to assign an specific blesta template for this order page without changing the template of any other page.

 

 

Maybe this would apply for a feature request, because with the current system we can't do a full order page customization

[Michael]

That looks amazing mate, maybe a feature request to theme the order forms where possible. (meaning if the order form has been assigned to overwrite the colours if there is any.)

[wfitg]

Wow. That looks good. I need to learn how to do that. What kind of code editor did you use? I use notepad++

 

Is there something better?

[Daniel B]

would you care to share the technique you used to do this (the hack you mentioned).

[Alexander Orlov]

This hack would be brilliant if you could share it

[Nelsa]

Well it looks really great,I just visit order page see it live and looks very good.

[flangefrog]

Wow. That looks good. I need to learn how to do that. What kind of code editor did you use? I use notepad++

 

Is there something better?

I also use Notepad++ sometimes when I'm working on a single file, but if you're working on a bigger project you should consider checking out NetBeans. It's designed especially for PHP/HTML so makes it easy to refactor, go to declaration, navigate all classes, methods, properties in the file and format code. It shows documentation for all PHP functions and even your own if you have PHPDoc style comments above them. It integrates with several PHP debuggers, will check syntax and best practices. You can connect it with git and other versioning systems and also with bugtrackers. It's got far to many features to list and is very stable, fast and easy to use. https://netbeans.org/features/php/

[wfitg]

It's got far to many features to list and is very stable, fast and easy to use. https://netbeans.org/features/php/

Thanks! I'll check this out soon

[Rodrigo]

Sorry,

 

I haven't noticed about the new posts. It has been a while since I have done this design and hack, I'll check out which changes I did.

 

I really doubt that my developing tools are the most effective. Currently I only use SSH to connect to my remote development web server and edit everything with "nano" console text editor, nothing fancy. Doing this allows me to do a change in the blesta dev setup and be able to see it instantly on the browser without having to upload anything.

 

When I need to upload something I use "sftp" (something like FTP over SSH) command. I guess it starts to be more comfortable to use console commands when you are used to them.

 

Also, when designing a web page I just use google chrome's element inspector, and I start to poke around and make all the changes I want until I get something I like. After that, I start to do the real changes to the template files.

 

Surely my development environment is not the best for large projects, but I find it useful for doing minor changes or when I want to do quick experiments.

 

 

For the ones asking for the hack I did, I don't remember quite every step that I've done (this is a disadvantage of not using version control system like GIT).

 

First, duplicate an existing template folder at app/views/client/ , I named the duplicated folder "ts3" (you will see the reference to this folder name at the code)

 

Here's the change that I did at plugins/order/order_form_controller.php , I don't remember which part came with the original code, but I think if you look a bit into the file you will get how to implement it

                if (($structure_dir = $this->getViewDir(null, true)) && substr($structure_dir, 0, 6) == "client")
                        $this->structure->setDefaultView(APPDIR);
                if(strpos($this->getViewDir(), "ts3") !== false) {
                   $this->structure->setView(null, "client/ts3");
 
                } else {
                   $this->structure->setView(null, $structure_dir);
                }

I sincerely don't remember how this hack works, but by reading the code above I think $this->getViewDir() may show something related to the URL, so I try to match the word "ts3", and if it's found, then apply the template at client/ts3 instead of the default one. This is clearly not the best way to do this (and it will never be), and that's why I didn't shared it as my other patches (which are somewhat acceptable compared to this one).

 

 

Note that if you do file changes you will have to re-apply the patches when you upgrade blesta (I'll have a hard time doing this when the new blesta stable goes out, my blesta install is full of patches that I did without version control, and I didn't took the time to learn to use Vqmod :oops:

 

 

Good luck!

[flangefrog]

It looks like the correct way to do this is to edit the plugins/order/views/templates/*/config.json and add a new template style.

{
	"version": "1.1.0",
	"name": "AJAX Template Pack",
	"description": "AJAX order form template pack for the Order plugin.",
	"authors": [
		{
			"name": "Phillips Data, Inc.",
			"url": "http://www.blesta.com"
		}
	],
	"styles": {
		"slider": {
			"name": "AJAX Slider",
			"thumbnail": "images/thumb_slider.png",
			"screenshot": "images/full_slider.png"
		},
		"boxes": {
			"name": "AJAX Boxes",
			"thumbnail": "images/thumb_boxes.png",
			"screenshot": "images/full_boxes.png"
		},
		"my_custom_style": {
			"name": "My Custom Style",
			"thumbnail": "images/thumb_custom.png",
			"screenshot": "images/full_custom.png"
		}
	}
} 

Then inside the .pdt files you can use

<?php if ($order_form->template_style == "my_custom_style") { ?>
    <p>My custom HTML</p>
<?php } ?>

Here's the change you made as a vQmod. It's really easy to learn, best time to start is now 

custom_order_view.xml

[Rodrigo]

Thanks!

 

After reading your post I noticed that I forgot a lot of the steps that I actually did.

 

Does your method solves what I posted here?: http://www.blesta.com/forums/index.php?/topic/2961-select-specific-outer-template-for-order-pages/#entry21226

 

 

For who may be reading my post, note that I just put the steps to modify the content outside the container, so you need to make a new order page template as usual, and then apply what I did (or flangefrog's method if it does the same, in that case, you should proceed without doubt with his method).

 

Also, thanks for the vQmod! I'll look to convert my patches as possible (hint to myself: download original blesta 3.2.1 and do a diff between the two install folders )

[flangefrog]

From your other thread:

Order plugin views let you modify only what's inside the container, not the background and stuff.
 
Maybe I'll make a patch for allow selecting outside template, but I  think this should be a feature request.

 The CSS files should let you override the background, in fact you should be able to override any other CSS on the page. If you are having trouble you may want to read this: http://css-tricks.com/specifics-on-css-specificity/

I haven't looked in depth into what you are doing in your above post but I think you're completely bypassing structure.pdt right? If you want to change the HTML in structure.pdt based on the order form template without completely bypassing it you can use similar code as above:

<?php if (isset($order_form) && $order_form->template_style == "my_custom_style") { ?>
    <p>My custom HTML</p>
<?php } ?>

You might also want to check $order_form->template