Jump to content

Fully Custom Blesta Order Page


Rodrigo

Recommended Posts

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.

 

nUDdGHv.png

 

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

Link to comment
Share on other sites

  • 1 month later...

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/

post-9849-0-75498500-1410190134_thumb.pn

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :D)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...