Geekly Articles each Day
📜 ⬆️ ⬇️

Create a 1C-Bitrix template based on Bootstrap layout.

Introduction


Dear reader, this article is essentially a continuation of the article “How to make a web page. Part 2 - Bootstrap " and here we move away from the actual layout, engaging in the integration of the HTML template in CMS 1C-Bitrix.

In the previous part, the Habrauser Mirantus rolled out the Corporate Blue template from the Pcklaboratory studio using Bootstrap 3 .


')
image

For this article, we will use one of the forks of the repository on GitHub , given at the end of the previous article, because it fixed some bugs.

Creating a template framework


The site template from the point of view of 1C-Bitrix is ​​a folder with a set of specific files inside, so the template can be created either through a file structure (using 1C-Bitrix, via FTP or SSH), or using a section.



Elements 1C-Bitrix





In fact, we have created a static HTML framework with a minimal set of 1C-Bitrix elements, which is already working.
Our further task is to transfer individual functional blocks to work with 1C-Bitrix components.

Components 1C-Bitrix


In this article, we will focus only on the process of integrating the layout with standard components 1C-Bitrix. We will not create our components and we will not customize the typical ones.

We will create a separate page (for example, 1.php) on which we will place 1 component each to simplify work with 1C-Bitrix tools.

Copy component template to site template
Place the component (for example, the search form is bitrix: search.form) using the visual editor:

Using the included edit mode, copy the component template into the site template. To do this, hover the mouse over the area with the component, wait until the context menu with the gear appears and click on the drop-down arrow:

In the dialog that appears, we need to specify the name of the component template and select the site template in which the component template will be stored (in our case it is whitesquare-bootstrap):

As a result of our actions, another folder has appeared in the / bitrix / templates / whitesquare-bootstrap / component template - components - it will contain templates for all components used within the site template.
The first component template that appears will be located at /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/
Experienced developers can immediately create a component template by copying it into the site template from the component.

Sometimes one of the component templates supplied with the system is more suitable for further work. Then it makes sense to look at each of them in the work. This can be done in the visual editor by clicking on the gear button:



Included areas (logo, copyright, social network)

The included area component allows you to embed inside yourself any text, HTML or php code, as well as other components and display this content for a specific page, section, or wherever the included area is called.
For all the above objects, we consider it rational to use the included area in order to remove these blocks from the template. Those. to edit them, you still need to have a minimum of knowledge in HTML.
Professionals may argue that for a block with buttons of social networks it would be necessary to make its component, but this seems to us not rational. It's easier to drive this block in 10 minutes to the included area and edit if necessary, because the address of the Facebook community does not change every day!

All these areas will be displayed on the entire site, so we will create a new include folder in the template, where we will add the included areas files:

The call code of the component of the included region will look like this in this case:
 <?$APPLICATION->IncludeComponent( "bitrix:main.include", "", Array( "AREA_FILE_SHOW" => "file", "PATH" => SITE_TEMPLATE_PATH."/include/bottom-logo.php", "EDIT_TEMPLATE" => "" ), false );?>

Inside the include file, simply put a piece of HTML code:
 <a href="/"><img src="<?=SITE_TEMPLATE_PATH?>/images/footer-logo.png" alt="Whitesquare logo"></a>


We will not consider the issue of Twitter Ribbon integration in this article, since the simplest solution is to put the Twitter widget in the included area, similar to the solutions described above.
Also in the Marketplace 1C-Bitrix enough components that display twitter tape, which you can also use.

Search form

We used the bitrix: search.form component and copied the suggest component template into the site template.
The HTML code for the component template is in the file /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/template.php
 <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <div class="search-form"> <form action="<?=$arResult["FORM_ACTION"]?>"> <?$APPLICATION->IncludeComponent( "bitrix:search.suggest.input", "", array( "NAME" => "q", "VALUE" => "", "INPUT_SIZE" => 15, "DROPDOWN_SIZE" => 10, ), $component, array("HIDE_ICONS" => "Y") );?> <input name="s" type="submit" value="<?=GetMessage("BSF_T_SEARCH_BUTTON");?>" /> </form> </div>

As you can see, we have not a simple, but a complex component (i.e., a component which includes other components). In this case, it is the form in which the search query is entered.
Copy its template to the site template.
Unfortunately, this is not very nice - in public, we use 1 component, and we have 2 templates. Let's use the usual scheme for complex components:
Complex component

  1. Create a folder in the /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/ folder bitrix
  2. Move the /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.suggest.input/ component template into /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/. Thus getting:
    /bitrix/templates/whitesquare-bootstrap/components/bitrix/search.form/top/bitrix/search.suggest.input/top/
  3. In the parameters of the bitrix component: search.suggest.input we specify the top template:
     <?$APPLICATION->IncludeComponent( "bitrix:search.suggest.input", "top", array( "NAME" => "q", "VALUE" => "", "INPUT_SIZE" => 15, "DROPDOWN_SIZE" => 10, ), $component, array("HIDE_ICONS" => "Y") );?>


Back to the search form

So, we see that, in contrast to the whole search block in the layout in the 1C-Bitrix architecture, our form will consist of 2 nested templates (complex and simple) components.

Now it only remains to place the code calling the component instead of the layout in the template:
 <form name="search" action="#" method="get" class="form-inline form-search pull-right"> <div class="input-group"> <label class="sr-only" for="searchInput">Search</label> <input class="form-control" id="searchInput" type="text" name="search" placeholder="Search"> <div class="input-group-btn"> <button type="submit" class="btn btn-primary">GO</button> </div> </div> </form>


Top Menu

To simplify work on the site before starting work on each menu, we will create a menu file with actual content to simplify work.
For example, the top menu will be set in the .top.menu.php file with the following contents
 <? $aMenuLinks = Array( Array( "Home", "/", Array(), Array(), "" ), Array( "About us", "/about/", Array(), Array(), "" ), Array( "Services", "", Array(), Array(), "" ), Array( "Partners", "", Array(), Array(), "" ), Array( "Customers", "", Array(), Array(), "" ), Array( "Projects", "", Array(), Array(), "" ), Array( "Careers", "", Array(), Array(), "" ), Array( "Contact", "", Array(), Array(), "" ) ); ?>

To create the top menu, use the bitrix component: menu. Copy the template .default of this component in the template of our site under the name top. It contains almost nothing superfluous, so we easily adapt it to our layout:
 <?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <?if (!empty($arResult)):?> <nav class="navbar navbar-default"> <ul class="nav navbar-nav"> <? foreach($arResult as $arItem): if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) continue; ?> <?if($arItem["SELECTED"]):?> <li class="active"><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li> <?else:?> <li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li> <?endif?> <?endforeach?> </ul> </nav> <?endif?>

Now let's replace the top menu block in the template with a call to the menu component:
 <?$APPLICATION->IncludeComponent("bitrix:menu", "top", Array( "ROOT_MENU_TYPE" => "top", "MENU_CACHE_TYPE" => "A", "MENU_CACHE_TIME" => "3600", "MENU_CACHE_USE_GROUPS" => "Y", "MENU_CACHE_GET_VARS" => "", "MAX_LEVEL" => "1", "CHILD_MENU_TYPE" => "left", "USE_EXT" => "N", "DELAY" => "N", "ALLOW_MULTI_SELECT" => "N", ), false );?>


Left menu

Similar to the top menu, we take the component as the component bitrix: menu. Copy the template .default of this component in the template of our site under the name left.
After editing the template we get:
 <?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <?if (!empty($arResult)):?> <ul class="list-group submenu"> <? foreach($arResult as $arItem): if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) continue; ?> <?if($arItem["SELECTED"]):?> <li class="list-group-item active"><?=$arItem["TEXT"]?></li> <?else:?> <li class="list-group-item"><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li> <?endif?> <?endforeach?> </ul> <?endif?>

Replace the left menu block in the template with a component call:
 <?$APPLICATION->IncludeComponent("bitrix:menu", "left", Array( "ROOT_MENU_TYPE" => "left", "MENU_CACHE_TYPE" => "A", "MENU_CACHE_TIME" => "3600", "MENU_CACHE_USE_GROUPS" => "Y", "MENU_CACHE_GET_VARS" => "", "MAX_LEVEL" => "1", "CHILD_MENU_TYPE" => "left", "USE_EXT" => "N", "DELAY" => "N", "ALLOW_MULTI_SELECT" => "N", ), false );?>

Using the fact that the menu is inherited in 1C-Bitrix, we can put the left menu .left.menu.php files in all sections where they are needed with different contents, and in the root, for example, remove them altogether. Layout will not suffer, and the menu will be displayed only where it is needed.

Lower menu

The bottom menu (in the SiteMap section) is displayed in 2 columns. You can of course make a universal menu component in a template whose items will be divided by columns (automatically, or by the presence of any parameter set for items in the advanced menu editing mode).
However, we understand that the basement is not the most frequently edited part and there is no point in spending significant efforts on its development.
Therefore, we will follow a simple path (for which lovers of the ideal code will probably curse us) - we will create 2 menus: bottomL and bottomR.
Despite the fact that the menu will be 2 templates, we will use 1 for them.

Again, take the component as the basis of the component bitrix: menu. Copy the template .default of this component in the template of our site under the name bottom.
Template:
 <?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <?if (!empty($arResult)):?> <div class="col-md-12"> <? foreach($arResult as $arItem): if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) continue; ?> <a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a> <?endforeach?> </div> <?endif?>


Sidebar - our offices

Honestly, without demo content, it is not clear what function this sidebar performs. Let us venture to suggest that after all it’s not a picture that is shown (it’s painfully inconsistent), but a full-fledged Google map. Probably it is too small to have controls on it, so it will be manimalistic.
If I'm wrong, then perhaps one of the easiest ways to implement a sidebar is the included area, which we have already mentioned.
Take the bitrix: map.google.view component and copy the .default template into the site template, renaming it to the sidebar-map.
We will make the entire sidebar part of the component, including the title. So, in order to simplify the work of editors, it is necessary to bring the title text into the component parameters.
Create a .parameters.php file in the component template as follows:
 <? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die(); $arTemplateParameters = array( "SIDEBAR_MAP_NAME" => Array( "NAME" => GetMessage("SIDEBAR_MAP_NAME"), "TYPE" => "HTML", "DEFAULT" => "Our offices", ), ); ?>

And language files by analogy with the language files of the search form component:
  • RU (/bitrix/templates/whitesquare-bootstrap/components/bitrix/map.google.view/sidebar-map/lang/ru/.parameters.php):
     <?$MESS ['SIDEBAR_MAP_NAME'] = " ";?>
  • EN (/bitrix/templates/whitesquare-bootstrap/components/bitrix/map.google.view/sidebar-map/lang/en/.parameters.php):
     <?$MESS ['SIDEBAR_MAP_NAME'] = "Sidebar Map Name";?>



In this case, the component template is modified only slightly (put the card inside the sidebar and add a title):
 <? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die(); $arTransParams = array( 'INIT_MAP_TYPE' => $arParams['INIT_MAP_TYPE'], 'INIT_MAP_LON' => $arResult['POSITION']['google_lon'], 'INIT_MAP_LAT' => $arResult['POSITION']['google_lat'], 'INIT_MAP_SCALE' => $arResult['POSITION']['google_scale'], 'MAP_WIDTH' => $arParams['MAP_WIDTH'], 'MAP_HEIGHT' => $arParams['MAP_HEIGHT'], 'CONTROLS' => $arParams['CONTROLS'], 'OPTIONS' => $arParams['OPTIONS'], 'MAP_ID' => $arParams['MAP_ID'], ); if ($arParams['DEV_MODE'] == 'Y') { $arTransParams['DEV_MODE'] = 'Y'; if ($arParams['WAIT_FOR_EVENT']) $arTransParams['WAIT_FOR_EVENT'] = $arParams['WAIT_FOR_EVENT']; } ?> <div class="panel panel-primary"> <div class="panel-heading"><?=$arParams['SIDEBAR_MAP_NAME']?></div> <div class="panel-body"> <div class="bx-yandex-view-layout"> <div class="bx-yandex-view-map"> <? //echo '<pre>'; print_r($arResult['POSITION']); echo '</pre>'; $APPLICATION->IncludeComponent('bitrix:map.google.system', '.default', $arTransParams, false, array('HIDE_ICONS' => 'Y')); ?> </div> </div> <?if (is_array($arResult['POSITION']['PLACEMARKS']) && ($cnt = count($arResult['POSITION']['PLACEMARKS']))):?> <script type="text/javascript"> function BX_SetPlacemarks_<?echo $arParams['MAP_ID']?>() { <? for($i = 0; $i < $cnt; $i++): ?> BX_GMapAddPlacemark(<?echo CUtil::PhpToJsObject($arResult['POSITION']['PLACEMARKS'][$i])?>, '<?echo $arParams['MAP_ID']?>'); <? endfor; ?> } function BXShowMap_<?echo $arParams['MAP_ID']?>() {BXWaitForMap_view('<?echo $arParams['MAP_ID']?>');} BX.ready(BXShowMap_<?echo $arParams['MAP_ID']?>); </script> </div> </div> <?endif;?>

( , , ):
 <?$APPLICATION->IncludeComponent("bitrix:map.google.view", "sidebar-map", array( "INIT_MAP_TYPE" => "ROADMAP", "MAP_DATA" => "a:4:{s:10:\"google_lat\";d:55.7383;s:10:\"google_lon\";d:37.5946;s:12:\"google_scale\";i:13;s:10:\"PLACEMARKS\";a:1:{i:0;a:3:{s:4:\"TEXT\";s:10:\"Test point\";s:3:\"LON\";d:37.593626976013184;s:3:\"LAT\";d:55.736905609230966;}}}", "MAP_WIDTH" => "235", "MAP_HEIGHT" => "180", "CONTROLS" => array( ), "OPTIONS" => array( 0 => "ENABLE_SCROLL_ZOOM", 1 => "ENABLE_DBLCLICK_ZOOM", 2 => "ENABLE_DRAGGING", 3 => "ENABLE_KEYBOARD", ), "MAP_ID" => "", "SIDEBAR_MAP_NAME" => "Our offices" ), false );?>

!


. , 4 :

() .
ID, ( , ID ).


, catalog.section board ( ), . bitrix:news.list ( .default team-list) .
.parameters.php :
 $arTemplateParameters = array( "LIST_NAME" => Array( "NAME" => GetMessage("LIST_NAME"), "TYPE" => "HTML", "DEFAULT" => "Our Team", ), );

!

. , row 2,3,4 5 .
 <? $i++; if ($i >= 5) { $i = 0; ?> </div><div class="row"> <? } ?> <?endforeach;?> <? if ($i > 0) { ?> </div> <? } ?>

Do not forget to reset the counter before the start of the cycle for every fireman.


«», POSITION. , $arResult[«ITEMS»][«PROPERTIES»][«POSITION»][«VALUE»], ITEMS , :
 <?=$arItem["PROPERTIES"]["POSITION"]["VALUE"]?>

:
 <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); $i=0;?> <h2><?=$arParams['LIST_NAME']?></h2> <div class="team"> <div class="row"> <?if($arParams["DISPLAY_TOP_PAGER"]):?> <?=$arResult["NAV_STRING"]?><br /> <?endif;?> <?foreach($arResult["ITEMS"] as $arItem):?> <? $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT")); $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM'))); ?> <div class="col col-md-4 <?if($i > 0){?>col-md-offset-1<?} ?>" id="<?=$this->GetEditAreaId($arItem['ID']);?>"> <img src=""PREVIEW_PICTURE"]["SRC"]?>" alt=""PREVIEW_PICTURE"]["ALT"]?>" title=""PREVIEW_PICTURE"]["TITLE"]?>" class="thumbnail"> <div class="caption"> <h3><?echo $arItem["NAME"]?></h3> <P><?=$arItem["PROPERTIES"]["POSITION"]["VALUE"]?></P> </div> </div> <? $i++; if ($i >= 5) { $i = 0; ?> </div><div class="row"> <? } ?> <?endforeach;?> <? if ($i > 0) { ?> </div> <? } ?> <?if($arParams["DISPLAY_BOTTOM_PAGER"]):?> <br /><?=$arResult["NAV_STRING"]?> <?endif;?> </div>

, , .
, ( ).

/bitrix/templates/whitesquare-bootstrap/images/team/ !

ABOUT

, , , , .
, , .
, /bitrix/templates/whitesquare-bootstrap/styles.css ( ):
CSS , «» CSS .
, :
 .jumbotron { border-radius: 0; padding: 0; margin: 0; font-size: 18px; font-weight: 200; background-color: #29c5e6; box-sizing: border-box; color: #ffffff; line-height: 2.1428571435; display: block; box-sizing: border-box; font-family: Tahoma, sans-serif; blockquote { border-left: none; p { font: 300 italic 33px @brand-font; text-transform: uppercase; margin-bottom: 0; color: #ffffff; } small { display: block; text-align: right; color: #1D8EA6; color: #1D8EA6; font: 300 20px @brand-font; &:before { content: ''; } } } }


In order for the editors themselves to apply this style using the visa editor, you must add an array of styles to the .styles.php file in the root of the template:
 <? return array( "jumbotron" => "", ); ?>

Or through the template editing tool (site styles tab):


Direct marafet


In order to make the work of editors a little easier, you can create a folder in the site template / page_templates /, which will contain page templates that you can create on the default project.
The page template is a regular php file, identical to the page in the public section.
In addition to templates, you must also place the .content.php file with an array of all possible page templates. In our case it will be:
 <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?><? IncludeTemplateLangFile(__FILE__); $TEMPLATE["about.php"] = Array("name"=>GetMessage("about"), "sort"=>1); ?>

Do not forget to create language files!


In order for the template not to be an unidentified object for those who have access to the administrative section, create a description file and attach a screenshot! They will pick up automatically:


That's all!


We pulled the ready HTML layout of Bootstrap on 1C-Bitrix, impaled the page and got a full-fledged template!

Afterword



, . – , !
Mirantus , !
GitHub IMPORT_DATA, - , . XML /bitrix/admin/iblock_xml_import.php?lang=ru

Useful links:

Source: https://habr.com/ru/post/212163/

More articles:


All Articles