2votes

PHP Manifest file and Theme Creation

Hello,

Can anyone explain me how to write menifest code in PHP file?

Can anyone explain how to create theme?

Thanks,
Harsh

2 Answers

2votes

For the manifest file please see this thread: http://www.sellvana.com/community/203/404-when-i-try-to-create-a-sample-module

To create a theme, create a new module, let's say Acme_MyTheme. Since you're interested in PHP format, I'll use it for this example. I recommend learning YAML, since it's much faster for development, reading and maintenance. You can see example YAML files in the default frontend theme FCom/FrontendThemeBootSimple.

local/Acme/MyTheme/manifest.php

<?php return [
    "modules" => [
        "Acme_MyTheme" => [
            "version" => "0.1.0",
            "channel" => "beta",
            "description" => "My perfect theme",

            "areas" => [
                "FCom_Frontend" => [
                    "auto_use" => [ "views", "layout" ],
                ],
            ],

            "provides" => [
                "themes" => [
                    "Acme_MyTheme" => [
                        "name" => "My perfect theme",
                        "area" => "FCom_Frontend",
                        "layout" => "Frontend/layout.yml",
                        'parent" => "FCom_Frontend_DefaultTheme",
                    ],
                ],
            ],
        ],
    ],
];

All your theme files should be in Frontend, since it's a frontend theme.
parent value is the theme name that you will inherit.

After the theme was declared you can use it in:
Admin > System > Settings > Areas > Frontend > Html > Theme

local/Acme/MyTheme/Frontend/layout.php

<?php return [

    // add instructions for all pages
    'base' => [
        [ 'view' => 'head', 'do' => [

            // add any meta tag
            [ 'meta', 'viewport', 'width=device-width, initial-scale=1.0' ],

            // add external asset
            [ 'css', '//fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic' ],

            // add asset supplied with my module
            [ 'css', '@Acme_MyTheme/Frontend/css/stylesheet.css' ],

            // add asset from another module (require these modules in manifest)
            [ 'css', '@FCom_LibJsCommon/js/css/jquery.rateit.css' ],

            // add javascript directly in <head> tag, can use conditionals
            [ 'js', '//html5shim.googlecode.com/svn/trunk/html5.js', [ 'if' => 'lt IE 9' ] ],

            // add javascript from module
            [ 'js', '@Acme_MyTheme/Frontend/js/scripts.js' ],

            // add javascript using require.js
            [ 'requireJs', 'mymodule', '@Acme_MyTheme/Frontend/js/mymodule', [ 'deps' => [ 'jquery' ] ] ],
        ] ],
    ],

    // add instructions for a specific page
    '/some/page' => [
        [ 'view' => 'head', 'do' => [

            // add a title, will be merged with global site title
            [ 'title', 'Window title for this page' ],

        ] ],

        // add body class
        [ 'view' => 'root', 'do' => [ 
            [ 'addBodyClass', 'my-some-page' ] 
        ] ],

        // add a template to a declared hook
        [ 'hook' => 'main', 'views' => 'my/view' ],
    ]
];

To add a static page, add a template under Frontend/views/static, and they will be accessible immediately via matching URL. Folder structure is supported.

local/Acme/MyTheme/Frontend/views/static/my-page.html.twig

<h1>{{ 'My Page'|_ }}</h1>

Will be accessible via http://example.com/my-page

If you'd like to override a template declared in another module, add them to your module with the same structure under views they're in original module, for example overriding FCom/Catalog/Frontend/views/catalog/product/defails.html.twig
would require creating
local/Acme/MyTheme/Frontend/views/catalog/product/details.html.twig

You can use other rendering engines to override templates.
local/Acme/MyTheme/Frontend/views/catalog/product/details.php

ok Thanks, Boris. Can you please give some explanation about theme? How to create theme, CSS and html changes? Thanks, Harsh
harshshah May 1, 2014
Thanks Boris, Got idea, Implemented it, I will ask you if i will have any doubts. Thanks Again, Harsh
harshshah May 2, 2014
Hi Boris, Can you please explain me how to change the each page content? i have implemented theme, added CSS and change it. Look forward to receive your reply. Thanks, Harsh
harshshah May 6, 2014
The templates override is explained at the bottom of the answer - do you have any specific questions about it?
bg May 6, 2014
actually i want to create the theme. i have created one module as theme and it is working fine, and i also changed dome css too.
but how can i change content for home page and what type of hooks i need to chek

thanks for fast answer
harshshah May 6, 2014
The home page is in `FCom/Frontend/Frontend/views/static/index.html.twig`. To override, copy it to or create in `local/Vendor/Module/Frontend/views/static/index.html.twig`
bg May 6, 2014
Hi,

i got an idea how to override the files, i have override the index.html.twig.

But how the all page is rendering.

Can you please give me some idea?

I need to develop theme like we can create it in magento

look forward to receive your reply.

Thanks,
Harsh
harshshah May 7, 2014

1vote

@Harsh
For CMS, Sellvana has two methods of page creation:
1. Through the admin CMS tool.
2. By creating a template under the views/static/ folder of the file system.

Since you've specified theme development as your end goal, #2 is the best method for packaging purposes.
Simply create a template, say "my-page.html.twig" under the /views/static/ folder, and it becomes accessible via http://www.example.com/my-page.

-- Minu

Hi Minu,

Thanks for you answer,

But i would like to know how home page is rendering?

so means which files being used to render the home page ?

look forward to receive your reply.

Thanks,
Harsh
harshshah May 7, 2014
The template paths can be found in the page source if in Debug mode.

To enable debug mode, go to Admin > System > Settings > Areas > [Areas Dropdown] Fulleron Frontend > Area Settings. Select "Debug" in IP: Mode. Save.
(If you don't see "IP:Mode" label, reload the page and you'll see it.)

Go to the frontend, view source on the page, and you'll see comments that start with "<!-- START VIEW: " This provides info on the template paths being rendered.
minu May 7, 2014

Please log in or register to answer this question.

Know someone who can answer? Share a link to this

...