OroCommerce Forums

Covering OroCommerce topics, including community updates and company announcements.

Forums OroCommerce Create new frontend theme from scratch

This topic contains 5 replies, has 2 voices, and was last updated by  peeush 3 weeks, 5 days ago.

  • Creator
    Topic
  • #39750

    peeush
    Participant

    Hello – I am trying to create a new theme for my OroCommerce install, as is suggested in the “Layouts” documentation (https://oroinc.com/b2b-ecommerce/doc/current/dev-guide/front-ui/layouts) and have created the required files as described in the guide, including default.yml – which seems to be defining the layout from scratch (and not overriding items from a parent theme/layout):

    After I installed the theme on my server and set the active theme to my theme (from System->Configuration->Commerce->Design->Theme, however, I am now getting errors complaining “The head item already exists – use @remove to remove the item first from the parent”. I can understand this as my theme extends the “default” out-of-the-box theme:

    Can someone please guide me how to fix this – Since my theme’s look and feel is completely customised, I feel it’s perhaps easier to for my theme NOT to extend any out-of-the-box theme (i.e. trying to create it completely from scratch), but removing parent key from theme.yml throws errors (“Type error: Too few arguments to function Oro\Component\Layout\Extension\Theme\DataProvider\ThemeProvider::getIcon(), 0 passed and exactly 1 expected”)?

    Is it recommended to create a theme for OroCommerce from scratch? if not, is there an example or template YAML file that I can use which overrides all the elements from the base out-of-the-box themes?

    Thanks

    • This topic was modified 3 weeks, 5 days ago by  peeush.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #39752
    Andrey Yatsenko
    Andrey Yatsenko
    Moderator

    It is highly not recommended to create a new theme for OroCommerce from scratch as it requires a lot of work.
    We recommend creating a completely custom theme based on a blank theme.

    You should note that OroCommerce Layouts engine is highly customizable, you can remove or move to another place any layout block in existing theme or change templates for some specific blocks so it’s not an issue to build a completely custom theme even based on a default one.

    As an example of basic customization please see the CustomThemeBundle.

    #39753

    peeush
    Participant

    Thanks Andrey! I’ll use blank theme for developing my customised theme. I have a few questions though:

    • I see in the “Advanced Layout Implementation Example” documentation (https://oroinc.com/b2b-ecommerce/doc/current/dev-guide/other/layouts/layout-implementation-example#dev-cookbook-layouts-implementation-example) the same pattern – adding a new tree in layout.yml i.e. seems to be creating the page layout from scratch – when is this to be used?
    • Where can I find the equivalent of default.yml file for blank theme – so I can find out which items to remove/move?
    • Where can I find the equivalent of default.html.twig file for blank theme – so I can base my template on it?
    • How can I replace the out-of-the-box versions of bootstrap and jquery files?
    • I could not get assets.yml file working – it adds the files in the output section correctly to the header, but my css (or js files) that I gave in input section to be combined and created as the output file – did I misunderstand this?

      Thanks again for your help!

    #39755
    Andrey Yatsenko
    Andrey Yatsenko
    Moderator

    To understand how it works please complete reading the Storefront UI section of a Developer’ Documentation.

    Then you can switch to the advanced example, that is a hypothetic example that shows how layout updates work on a simplified layout page. It can’t be used as is and be applied to the actual theme. For the working examples see CustomThemeBundle I mentioned above.

    #39757

    peeush
    Participant

    Thank you Andrey! As it happens, I have gone through the documentation on Storefront UI section of a Developer’ Documentation and mostly understand theming\layout updates – I am able to make minor changes to some parts of the website. I am, however, struggling with a proper place to start revamping my home page and create templates for other pages.

    Can you please point me to the layout definition of blank theme? I can then start referring to the page structure (layout elements) on each page and start extending them.

    Many thanks!

    #39759

    peeush
    Participant

    Hi Andrey – seems like this is the file I was looking for:
    https://github.com/oroinc/platform/blob/master/src/Oro/Bundle/UIBundle/Resources/views/layouts/blank/page/layout.yml

    Will try this now and come back to you on this thread if I get stuck again.

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

You will be redirected to [title]. Would you like to continue?

Yes No