My _Layout.cshtml file has three "div" situated in one "div"(div id="content"). The full code is:
<body id="bckgrimg">
<div id="content">
<div id="leftcolumn">
<ul >
<li>Contact us</li>
<li>About us</li>
</ul>
</div>
<div id="centercolumn">
We'll put something useful here later
</div>
<div id="rightcolumn">
<div id="gallery">
<img src="..."/>
<img src="..."/>
<img src="..."/>
</div>
</div>
</div>
I have tried to put data by writing "some text" in xxx.cshtml but I just add new element on a web page as I have yet created in _Layout.cshtml. I just would like to put exactly data from various .cshtml files into of _Layout.cshtml.
Is it possible to put data from xxx.cshtml file into (Where it is wtiiten "We'll put something useful here later") of_Layout.cshtml?
Use sections. They enable you to insert content from any views into the layouts used by said views.
Related
I want to find and replace some child tags that are nested inside parent tag.
Here is my template:
<$tag$ $attribute$=$value$>
<$childTag$ $childAttr$=$childValue$ />
<$tag$/>
I apply text filtering via regex to $value$ and to $childValue$:
$value$ filter is .*sm-landing-appstore-app-1-gallery--main.*
$childValue$ filter is sm-landing-appstore-app-1-gallery__slide-img
And this is a part of an HTML document where I want to find my sm-landing-appstore-app-1-gallery__slide-img and replace it:
<div class="sm-landing-appstore-app-1-gallery__main-gallery">
<div class="sm-landing-appstore-app-1-gallery__main-gallery-frame-wr swiper-container">
<div class="sm-landing-appstore-app-1-gallery__frame sm-landing-appstore-app-1-gallery__main-gallery-frame swiper-wrapper">
<div class="sm-landing-appstore-app-1-gallery__slide sm-landing-appstore-app-1-gallery__main-gallery-slide sm-landing-appstore-app-1-gallery__main-gallery-slide--screenshot swiper-slide"
data-index="0" data-id="0">
<div id="cmp-6" class="sm-ratio sm-landing-appstore-app-1-gallery__slide-in">
<div class="sm-ratio__placeholder"></div>
<div class="sm-ratio__body">
<div class="sm-landing-appstore-app-1-gallery__slide-cv"><img
class="sm-landing-appstore-app-1-gallery__slide-img"
src="img/Fitness%20Buddy/1.jpg" alt="EasyFitness gallery 1" data-number-image="1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
But the syntax of my search template is incorrect.
Is finding of nested tags even possible with IntelliJ structural search?
I am new to Bigcommerce and also to Handlebars. I am currently building a website according to a design and I am using the Merchant Stencil theme.
Here is a picture of the homepage structure I need
For the moment, I hardcoded the 3 sections in the home.html template file, but I want to bring the product information (url, name, description) dynamically for each product based on it's ID .
The store only sells 3 types of products At the moment, I have a featured products section with the all the 3 products set as featured. This is working fine. The second part is that I want to access a Product Object or Product Card object (documentation links added) and I don't know how to do it. They don't have code examples and I really can't find my way around it. Any help on how can I use these objects would be much appreciated.
I have even asked the Bigcommerce support, and they sent me here. The support people there have no clue about development on their platform, so they sent me here.
Cheers!
Here is the code in my home.html file.
{{#if products.featured}}
<section class="products-featured section">
<h4 class="section-title">{{lang 'home.featured_products'}}</h4>
<div class="wrapper">
{{#each products.featured}}
{{> components/products/product-grid-item
quick_shop=../theme_settings.quick_shop
}}
{{/each}}
</div>
</section>
{{/if}}
<section id="gg-one" class="glue-section">
<div class="container">
<div class="text-col">
<h2 class="section-title">Grizzly One</h2>
<p class="caption-content">North America's first liquid polyurethane glue - a high-tech adhesive widely used by European woodworks and craftsmen for decades.</p>
<ul class="glue-feats">
<li>Ideal for proffessional, commercial, and industrial woodworking needs.</li>
<li>Even bonds to oily and exotic woods!</li>
</ul>
<div class="buttons">
</div>
</div>
<div class="img-col">
</div>
</div>
</section>
<section id="gg-structan" class="glue-section">
<div class="container">
<div class="img-col">
</div>
<div class="text-col">
<h2 class="section-title">Grizzly Structan</h2>
<p class="caption-content">This heavy-bodied, cartridge-loaded
polyurethane adhesive is stronger than liquid polyurethane
glues.</p>
<ul class="glue-feats">
<li>Perfect for wood, stone, tile, metal, and glass - dries to a tough elastic texture.</li>
<li>Industrial strength - ideal for professional and commercial applications.</li>
</ul>
<div class="buttons">
</div>
</div>
</div>
</section>
<section id="gg-xpress" class="glue-section">
<div class="container">
<div class="text-col">
<h2 class="section-title">Grizzly Xpress</h2>
<p class="caption-content">All the srength and body of a semi-gel adhesive<br> with a quick setting and curing time.</p>
<ul class="glue-feats">
<li>The first and only semi-gel adhesive available in North America!</li>
<li>Quick, professional-strength bond for wood, stone, tile, metal and glass.</li>
</ul>
<div class="buttons">
</div>
</div>
<div class="img-col">
<div class="inner">
<img src="https://cdn3.bigcommerce.com/s-jgnuwblrjb/product_images/uploaded_images/grizzly-xpress-home.png">
</div>
</div>
</div>
</section>
Create a component for the dynamic sections below the featured section. Then do
{{#each products.featured}}
{{> components/products/your-new-component }}
{{/each}}
Inside your component, you will get product object and you can get the data by simply {{product.id}} or {{product.title}}
If I expand this:
#main>#nav>ul>li>{My Web Host}
I get this:
<div id="main">
<div id="nav">
<ul>
<li>My Web Host</li>
</ul>
</div>
</div>
and it's good.
If I expand this:
#main>#nav>ul>li>{My Web Host}>ul>li>
I get this:
<div id="main">
<div id="nav">
<ul>
<li>My Web Host
<ul>
<li></li>
</ul></li>
</ul>
</div>
</div>
Although the closing tag of the first li is after the last ul I was hoping it would be on the next line aligned under it's opening tag.
This abbreviation is incorrect at {My Web Host}>ul: you’re trying to put block element (ul) inside implicit inline element ({My Web Host}). In this case, you have to place ul after text node, e.g. use + operator.
Correct abbreviation is
#main>#nav>ul>li>{My Web Host}+ul>li
I'm working on a project for Prestashop and I have the following file:
blocktopmenu.tpl
https://github.com/PrestaShop/PrestaShop/blob/master/modules/blocktopmenu/blocktopmenu.tpl
I need to know where is the end tag for "sf-contener clearfix" < / div >
Any idea?
Thks and sorry my english!
------ EDITED POST ------
i tried it, but no work for me :(((
I placed "exampleDiv" right here:
header.tpl
<div id="header_right" class="grid_6 omega">
{$HOOK_TOP}
<div id="exampleDiv"></div>
</div>
but i look this result in Firebug:
<div id="header" class="grid_9 alpha omega">
<a id="header_logo" href="#"></a>
<div id="header_right" class="grid_6 omega">
<div id="topMenu_bg_up"></div>
<div class="sf-contener clearfix"></div>
**i wanna to play here :D**
</div>
<div id="minic_slider" class="theme-default"></div>
<div style="display:none;">
<div>
<script type="text/javascript">
<div id="exampleDiv"></div>
**but it work in this other place :(**
</div>
</div>
Here :
https://github.com/PrestaShop/PrestaShop/blob/master/themes/default/header.tpl#L84
The #header_right is closed in blocktopmenu.tpl and the topmenu is displayed under.
Edit : If you want to add content just after the topmenu, the best way is to create e module, hook it on toppage and position it just after the blocktopmenu.
I know that we can add left and right buttons in a header in Jquery Mobile App.
But can we any more buttons or controls in the header section itself?
I think I have a better solution,
<header data-role ="header" data-theme="b">
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</header>
Screenshot;
with regard to this info:
you can find it here:
http://www.metaltoad.com/sites/default/files/Responsive-Widths_0.png
you can use this code:
<style type="text/css">
#media all{
.my-header-grid.ui-grid-b .ui-block-a { width: 30%; }
.my-header-grid.ui-grid-b .ui-block-b { width: 40%; }
.my-header-grid.ui-grid-b .ui-block-c { width: 30%; }
}
}
</style>
<div class="my-header-grid ui-grid-b" data-theme="a">
<div class="ui-block-a ui-bar-a" data-theme="a">
<div align="left" style="padding-left:5px;padding-top:3px;height:33px;height:40px;">
Back
Edit
</div>
</div>
<div class="ui-block-b ui-bar-a">
<div align="center" style="padding-top:3px;height:33px;text-align:center;height:40px;">
<div style="padding-top:7px;">
<article role="heading" aria-level="1">expand </article>
</div>
</div>
</div>
<div class="ui-block-c ui-bar-a">
<div align="right" style="padding-top:3px;height:33px;height:40px;">
Add
Refresh
</div>
</div>
</div><!-- /grid-b -->
if by any chance your programming with c# mvc razor engine don't forget to write the css media tag with 2 # like so ##media because the razor engine treats 2 # as one.
you see and can play with all of the designs shown here in this link:
http://jsfiddle.net/yakirmanor/BAat8/
iv added some links but i recommend youll read this:
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
the simple implantation is:
<header data-role ="header" data-theme="a">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<a class="ui-btn-right" data-icon="back" href="#" rel="external">Refresh</a>
</header>
or this:
<div data-role="header" data-theme="b">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
or this:
<div data-role="header" data-theme="e">
<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
hope iv helped.
It might be easier to create a custom navbar instead of modifying the header toolbar, Here si the docs: http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html
This might help:
<div class="ui-btn-right">
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="refresh" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Refresh">
</a>
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="home" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Home">
</a>
</div>
This gives me those nice rounded buttons, two side by side on the right side.
Just like on the mobile docs.
Works in 1.1.1, haven't tried the latest RC
I was able to achieve this by the following code:
<div data-role ="header" data-theme="b">
Prev
<div data-role="controlgroup" data-type="horizontal" style="margin-left:75px;margin-top:5px;" >
<a href="index.html" data-role="button" data-icon="arrow-l" >P.Week</a>
N.Week
</div>
Next
</div>
No, there is a hard limit of 2 as far as I have found. The best I was able to come up with was to get another unstyled link to appear.
There are however, navbars - On one of my projects, I needed a number of buttons in the header area, I placed a navbar directly below it, and was reasonable pleased with the results.
They are explained in detail here:
http://jquerymobile.com/test/docs/toolbars/docs-navbar.html