Good day! I've been looking for the schema for my categories, but there is nothing looks like that. How can I use schema for the categories on my blog? My code:
<main itemscope itemtype="http://schema.org/BlogPosting">
<div class="article" itemprop="articleBody">
....
</div>
<div class="categories">
1st category
2nd category
....
</div>
</main>
Related
I currently have:
<div class="row">
<div class="col-xs-4" id="LocationWrapper">
<div class="FullWidth HorizontallyCentered">Select the location:</div>
<select id="ddlLocation"></select>
<span id="LocationNote">blablabla</span>
</div>
<div class="col-xs-8" id="GraphsOptionsWrapper">
<div class="FullWidth HorizontallyCentered">Select the graph:</div>
</div>
</div>
This works fine for desktop. However, on mobile the columns are just too small to hold what is needed. In this case, it would be better to have two rows (instead of two columns in one row), with one column in each row.
How could I do it without duplicating the content? The content has some controls like select that should be unique on the page.
Thank you!
I hope this structure will help you.
<div class="row">
<div class="col-sm-4" id="LocationWrapper">
<div class="FullWidth HorizontallyCentered">Select the location:</div>
<select id="ddlLocation"></select>
<span id="LocationNote">blablabla</span>
</div>
<div class="col-sm-8" id="GraphsOptionsWrapper">
<div class="FullWidth HorizontallyCentered">Select the graph:</div>
</div>
</div>
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}}
today I was created a nav-bar and I would use {} in Emmet, I've used:
div.container>main>div.header>section.top-area>nav>ul>li*4>a{Home, Contact, About, Other}
I would that it become:
<div class="container">
<main>
<div class="header">
<section class="top-area">
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Other</li>
</ul>
</nav>
</section>
</div>
</main>
</div>
But my emmet-code become:
<div class="container">
<main>
<div class="header">
<section class="top-area">
<nav>
<ul>
<li>Home, Contact, About, Other</li>
<li>Home, Contact, About, Other</li>
<li>Home, Contact, About, Other</li>
<li>Home, Contact, About, Other</li>
</ul>
</nav>
</section>
</div>
</main>
</div>
How to I use an option like my first code?
First, write the text items of the list, line by line:
Home
Contact
About
Other
Then select all items, and Wrap with Abbreviation – Ctrl+Shift+A (Adobe Brackets) or Ctrl+Shift+G (Sublime Text);
Finally write the code to expand:
div.container>main>div.header>section.top-area>nav>ul>li*>a{$#}
* — reproduces to as many list elements as the lines in the selected text;
{$#} — each line is placed in the element's text content.
More about this Emmet feature → http://docs.emmet.io/actions/wrap-with-abbreviation/#wrapping-individual-lines
You have to assign the anchors in the list items separately. This will work.
div.container>main>div.header>section.top-area>nav>ul>li>a[href=""]{Home}
+li>a[href=""]{Contac}+li>a[href=""]{About}+li>a[href=""]{Other}
.menu*12>nav>ul>li>a[href="#" alt="menu"]{bomb}^li>a[href="#" alt="menu"]{food}^li>a[href="#" alt="menu"]{bugs}^li>a[href="#" alt="menu"]{beer}
This works for me, just use your menu names
I'm recently started to work with bootstrap and i really like it, very easy and strcutured.
Although i dont understand one thing, what is the correct structure?
I've read their getting started and they said for example the the first child of row can be column ...
But they also mentioned about div='container', should then also all of the elements be in a container?
for example
<div class="container">
<nav> </navr>
</div>
<div class="container">
<div ....> BODY </div>
</div>
<div class='container">
<footer></footer>
</div>
Or are all of this containers very optional and can be left not used?
Same question about rows, should then all column elements be a part of row or not?
I have following structure:
<nav></nav>
<row>
<div class="col-md-2> </div>
<div class="col-md-10">
<row>
<div class="col-md-6"> </div>
<div class="col-md-6"> </div>
</row>
</div>
</row>
Is this the correct structure?
Since row has negative margins, it should be placed inside container..
According to the Bootstrap docs (http://getbootstrap.com/css/#grid):
"Rows must be placed within a .container for proper alignment and padding."
As you'll see in this demo, the non-contained row causes a horizontal scrollbar:
http://bootply.com/106752
But, container can be used anywhere.. alone, or nested inside other containers / rows.
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.