I'm working on a page that needs navigation at the top of the page and in the footer. The nav itself is the same bar a few class/layout changes so I would like to keep it in one json file. Is that possible?
At the moment, only the footer gets populated. I am using grunt-assemble to build the html templates.
JSON:
{
"pages": [
{
"linkTitle": "page 1",
"subnav": [
{
"subNavLinkTitle": "temp",
"url": "temp.html"
},
{
"subNavLinkTitle": "form",
"url": "form.html"
},
{
"subNavLinkTitle": "map",
"url": "map.html"
}
]
},
{
"linkTitle": "page 2",
"subnav": [
{
"subNavLinkTitle": "sub page 4",
"url": "#"
},
{
"subNavLinkTitle": "sub page 5",
"url": "#"
},
{
"subNavLinkTitle": "sub page 6",
"url": "#"
},
{
"subNavLinkTitle": "sub page 7",
"url": "#"
},
{
"subNavLinkTitle": "sub page 8",
"url": "#"
}
]
}
]
}
layout:
<!DOCTYPE html>
<html lang="en">
<head>
{{> header }}
</head>
<body>
{{> top }}
{{> body }}
{{> footer }}
</body>
</html>
top:
<ol class="nav-top">
{{#each nav.pages}}
<li>
{{ linkTitle }}<i></i>
<div class="sub-nav">
<ul>
{{#each subnav}}
<li>{{ subNavLinkTitle }}</li>
{{/each}}
</ul>
</div>
</li>
{{/each}}
</ol>
footer:
<ol class="nav-footer">
{{#each nav.pages}}
<li>
<span class="section">{{ linkTitle }}</span>
<ul>
{{#each subnav}}
<li>{{ subNavLinkTitle }}</li>
{{/each}}
</ul>
</li>
{{/each}}
</ol>
I think what you have should work, but just in case, try referencing the file along with your partials:
{{> top nav }}
Then inside your top partial, just use:
{{#each pages }}
That's how I've done similar things in the past without issue...
Related
I need to have each vuedraggable item to have different styling in the wrapper tag (for example based on the element's index) like so:
<div class="wrapper">
<div class="grid_item" style="grid-row: 1">
I am Item 1
</div>
<div class="grid_item" style="grid-row: 2">
I am Item 2
</div>
<div class="grid_item" style="grid-row: 3">
I am Item 3
</div>
</div>
I know this is a very simple example that doesn't really need the index but suppose a more complex scenario where it is necessary to have access to the index in the draggable component (not its child template).
Suppose the current component looks like this:
<template>
<div class="wrapper">
<draggable
:list="items"
class="grid_item"
item-key="name">
<template #item="{ element }">
I am {{ element.name }}
</template>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable,
},
data() {
return {
items: [
{
name: 'Item 1'
},
{
name: 'Item 2'
},
{
name: 'Item 3'
},
],
}
},
methods: {
rowForItem(index) {
return `grid-row: ${index + 1}`;
}
},
}
</script>
<style>
.wrapper {
display: grid;
}
.grid_item {
background-color: gray;
}
</style>
How can I make use of the rowForItem method here?
This is my CSS
<style>
/* Color of active silder dot */
.slick-dots li.slick-active button:before {
color: {{ block.settings.colorDotActive }};
}
</style>
This is my schema block
{
"name": "Homepage",
"blocks": [
{
"type": "home_slider",
"name": "Home Page Slider",
"settings": [
{
"type": "text",
"id": "sliderSpeed",
"label": "Slider Speed",
"default": "300",
"info": "100 = 1 second"
},
{
"type": "color",
"id": "colorDotActive",
"label": "Active Dot Color"
},
{
"type": "color",
"id": "colorDot",
"label": "Dot Color"
}
]
}
]
}
For whatever reason the color is not changing, the color picker in Shopify is there though. It's just not passing it to the class.
I've also tried using {% stylesheet %} tags, but that didn't work either.
Here is the entire file for those requesting -
{% for block in section.blocks %}
{% case block.type %}
{% when 'full_image_hero' %}
<div class="full_image_hero_container">
{% if block.settings.image_hero_mobile != blank %}
<a href="{{ block.settings.hero_link }}" class="hide_on_desktop">
<img src="{{ block.settings.image_hero_mobile | img_url: 'large' }}" />
</a>
{% else %}
<a href="{{ block.settings.hero_link }}" class="hide_on_desktop">
<img src="{{ block.settings.image_hero | img_url: 'large' }}" />
</a>
{% endif %}
{% if block.settings.image_hero != blank %}
<a href="{{ block.settings.hero_link }}" class="hide_on_mobile">
<img src="{{ block.settings.image_hero | img_url: 'master' }}" />
</a>
{% endif %}
</div><!-- end .full_image_hero_container -->
{% when 'hero_image_and_text' %}
<div class="hero_image_and_text_container
{% if block.settings.mobile_image_full_width %}
full_width
{% endif %}
"
style="background-color:{{ block.settings.hero_background_color }};">
<div class="hero_text float_{{ block.settings.hero_layout_format }} hide_on_mobile">
{% if block.settings.hero_subtitle != blank %}
<h3>{{ block.settings.hero_subtitle }}</h3>
{% endif %}
{% if block.settings.hero_title != blank %}
<h2>{{ block.settings.hero_title }}</h2>
{% endif %}
{% if block.settings.hero_text != blank %}
<p>{{ block.settings.hero_text }}</p>
{% endif %}
<a href="{{ block.settings.hero_link }}">
<button class="button">{{ block.settings.hero_button_text }}</button>
</a>
</div>
<div class="hero_image">
{% if block.settings.image_hero_mobile != blank %}
<a href="{{ block.settings.hero_link }}" class="hide_on_desktop">
<img src="{{ block.settings.image_hero_mobile | img_url: 'large' }}" />
</a>
{% else %}
<a href="{{ block.settings.hero_link }}" class="hide_on_desktop">
<img src="{{ block.settings.image_hero | img_url: 'large' }}" />
</a>
{% endif %}
{% if block.settings.image_hero != blank %}
<a href="{{ block.settings.hero_link }}" class="hide_on_mobile">
<img src="{{ block.settings.image_hero | img_url: 'master' }}" />
</a>
{% endif %}
</div>
<div class="hero_text hide_on_desktop">
{% if block.settings.hero_subtitle_mobile == true %}
<h3>{{ block.settings.hero_subtitle }}</h3>
{% endif %}
{% if block.settings.hero_title_mobile == true %}
<h2>{{ block.settings.hero_title }}</h2>
{% endif %}
{% if block.settings.hero_text_mobile == true %}
<p>{{ block.settings.hero_text }}</p>
{% endif %}
<a href="{{ block.settings.hero_link }}">
<button class="button">{{ block.settings.hero_button_text }}</button>
</a>
</div>
</div>
<hr class="hide_on_desktop" />
{% when 'featured_collection' %}
<div class="featured_collection">
<h2>{{ block.settings.featured_collection_title }}</h2>
{% for product in collections[block.settings.featured_collection_collection].products %}
{% include 'bold-product' with product, hide_action: 'skip' %}
<div class="product">
<a href="{{ product.url }}">
<div class="product_list_image" style="background-image:url({{ product.images[2] | product_img_url: 'large' }});">
<img src="{{ product.featured_image | img_url: 'large' }}">
</div>
<div class="product_title"><h3>{{ product.title }}</h3></div>
<p class="collection_product_price {% if product.compare_at_price > product.price %}on_sale{% endif %}">
<span class="original_price">{{ product.compare_at_price | money }}</span>
<span class="{% if product.compare_at_price > product.price %}sale_{% endif %}price">{{ product.price | money }}</span>
</p>
</a>
</div>
{% endfor %}
</div><!-- end .featured_collection -->
<hr class="hide_on_desktop" />
{% endcase %}
{% endfor %}
<style type="text/css">
/* Full Image Hero */
.full_image_hero_container img{display:block; height:auto; width:100%;}
/* Hero Image and Text */
.hero_image_and_text_container{padding:9% 7% 0;}
.hero_image_and_text_container.full_width{padding:0;}
.hero_image_and_text_container h2{font-size:43px; font-weight:300; text-transform:uppercase;}
.hero_image_and_text_container h3{font-size:12px; font-weight:300; margin-top:3em; text-transform:uppercase;}
.hero_image_and_text_container p{font-size:28px;}
.hero_image img{height:auto; width:100%;}
.hero_text{text-align:center;}
.hero_image_and_text_container.full_width .hero_text p{padding:0 2% 2%;}
hr{border:none; border-top:1px solid #DCDDDE; margin:9% auto; width:75%;}
/* Desktop */
#media screen and (min-width:1098px){
.hero_image_and_text_container,.hero_image_and_text_container.full_width{
align-items:center;
display:flex;
padding:5%;
}
.hero_image_and_text_container > div{display:inline-block; vertical-align:top; width:47%;}
.hero_text.float_left{padding-right:5%;}
.hero_text.float_right{order:2; padding-left:5%;}
.hero_text.hide_on_desktop{display:none;}
}
/* Mobile Only */
#media screen and (max-width:1097px){
.hero_image_and_text_container{background-color:white !important;}
}
/* Featured Collection */
.featured_collection{padding:0 4%; text-align:center;}
.featured_collection h2{font-size:25px; font-weight:300; margin-bottom:1.5em; text-transform:uppercase;}
.featured_collection .product{display:inline-block; margin-bottom:3em; vertical-align:top; width:44%;}
.featured_collection .product:nth-of-type(even){margin-left:2%;}
.featured_collection .product img{display:block; height:auto; width:100%;}
.featured_collection a{text-decoration:none;}
.product_title h3{font-size:12px; font-weight:300; margin-bottom:.5em;}
.collection_product_price{font-size:11px; margin-top:0;}
.collection_product_price .price{font-weight:700; letter-spacing:2;}
/* Desktop */
#media screen and (min-width:1098px){
.featured_collection h2{display:none;}
.featured_collection .product{width:18%;}
.featured_collection .product:nth-of-type(even){margin-left:3%;}
.featured_collection .product{margin:0 3% 3em;}
}
</style>
{% schema %}
{
"name": "Home Page Slider",
"blocks": [
{
"type" : "full_image_hero",
"name" : "Full Image Hero",
"settings" : [
{
"type" : "image_picker",
"id" : "image_hero",
"label" : "Hero Image",
"info" : "1,366 x 548"
},
{
"type" : "image_picker",
"id" : "image_hero_mobile",
"label" : "Hero Image Mobile"
},
{
"id" : "hero_link",
"type" : "url",
"label" : "Hero link"
}
]
},
{
"type" : "hero_image_and_text",
"name" : "Hero Image and Text",
"settings" : [
{
"type" : "image_picker",
"id" : "image_hero",
"label" : "Hero Image",
"info" : "820 x 820"
},
{
"type" : "image_picker",
"id" : "image_hero_mobile",
"label" : "Hero Image Mobile"
},
{
"id" : "mobile_image_full_width",
"type" : "checkbox",
"default": true,
"label" : "Make image on mobile full width"
},
{
"id" : "hero_link",
"type" : "url",
"label" : "Hero link"
},
{
"id" : "hero_subtitle",
"type" : "text",
"label" : "Hero subtitle"
},
{
"id" : "hero_subtitle_mobile",
"type" : "checkbox",
"default": true,
"label" : "Show hero subtitle on mobile"
},
{
"id" : "hero_title",
"type" : "text",
"label" : "Hero title"
},
{
"id" : "hero_title_mobile",
"type" : "checkbox",
"default": true,
"label" : "Show hero title on mobile"
},
{
"id" : "hero_text",
"type" : "textarea",
"label" : "Hero Text"
},
{
"id" : "hero_text_mobile",
"type" : "checkbox",
"default": true,
"label" : "Show hero text on mobile"
},
{
"id" : "hero_button_text",
"type" : "text",
"default": "Shop Now",
"label" : "Hero button text"
},
{
"id" : "hero_background_color",
"type" : "color",
"label" : "Hero background color",
"default": "#F7F7F7"
},
{
"id" : "hero_layout_format",
"type" : "select",
"options": [
{ "value": "left", "label": "Text Left - Image Right"},
{ "value": "right", "label": "Text Right - Image Left"}
],
"label" : "Hero layout format"
}
]
},
{
"type": "featured_collection",
"name": "Home Page Slider",
"settings": [
{
"type": "text",
"id": "featured_collection_title",
"label": "Featured Collection Title"
},
{
"type": "collection",
"id": "featured_collection_collection",
"label": "Featured Collection"
}
]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Thanks for the help!
You do not have to specify the color of the active point at the Blocks level, but rather at the section level, as it is a global setting for the whole section and does not change from one block to another, proceed as follows :
place this piece of code at the start of your section file:
<style>
/* Color of active silder dot */
.slick-dots li.slick-active button:before {
color: {{section.settings.colorDotActive }};
}
</style>
Then add the global settings to the entire section at the very beginning of the Schema tag, even before opening the settings specific to the Blocks, as follows:
{% schema %}
{
"name": "Home Page Slider",
"settings": [
{
"type": "text",
"id": "sliderSpeed",
"label": "Slider Speed",
"default": "300",
"info": "1000 = 1 second"
},
{
"type": "color",
"id": "colorDotActive",
"label": "Active Dot Color",
"default": "#ff0000"
},
{
"type": "color",
"id": "colorDot",
"label": "Dot Color",
"default": "#0000ff"
}
],
"blocks": [
.... Your old block setting.....
]
}
{% endschema %}
I have such a json file. My code below doesn't work. How to iterate "name" in Handlebars?
{ "test": [ { "33": { "name": "Prova 1", "surname": "Federico" } }, { "34": { "name": "Prova 2", "surname": "Antonio " } }, { "35": { "name": "Prova 3", "surname": "Giovanni" } } ] }
<div>
{{debug}}
{{#each test}}
<ul>
<li>{{name}}</li>
</ul>
{{/each}}
</div>
You have to do a double iterating one on test the second on the object in the array to get all properties (I use {{this}} because the name change every time) because name is nested in another object :
{{#each test}}
<ul>
<li>{{#each this}}{{name}}{{/each}}</li>
</ul>
{{/each}}
If you wanted to make work the code you've given you had to have such a json :
{ "test": [
{ "name": "Prova 1", "surname": "Federico" },
{ "name": "Prova 2", "surname": "Antonio " },
{ "name": "Prova 3", "surname": "Giovanni" }
] }
You can check the snippet below that will demonstrate it with your data:
$(document).ready(function() {
var context = {
"test": [{
"33": {
"name": "Prova 1",
"surname": "Federico"
}
},
{
"34": {
"name": "Prova 2",
"surname": "Antonio "
}
},
{
"35": {
"name": "Prova 3",
"surname": "Giovanni"
}
}
]
};
var source = $("#sourceTemplate").html();
var template = Handlebars.compile(source);
var html = template(context);
$("#resultPlaceholder").html(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
<div>
{{#each test}}
<ul>
<li>{{#each this}}{{name}}{{/each}}</li>
</ul>
{{/each}}
</div>
</script>
<br/>
<div id="resultPlaceholder">
</div>
<ul>{{#test}}<li>{{name}}</li>{{/test}}</ul>
try this
How Do i shrink to fit image the banner IN SHOPIFY
i am new to shopify not sure how it works so let me know if you have any suggestion. i have attached few example so you have an idea what i am talking about.
<div class="slider-area" data-section-id="{{ section.id }}" data-section-type="slideshow-section">
<div class="slider-active owl-carousel">
{% for block in section.blocks %}
<div class="single-slider single-slider-book1 bg-img" style="background-image: url({% if block.settings.slider_bg_image %}
{{ block.settings.slider_bg_image | img_url: 'master' }}
{% else %}https://via.placeholder.com/1545x950{% endif %})">
<div class="container">
<div class="slider-animation slider-content-book fadeinup-animated {% if block.settings.slider_content_position_right %}content_right{% endif %}">
{% if block.settings.slider_title_1 != '' %}
<h1 class="animated" style="color: {{ block.settings.slider_title_1_color }}">{{ block.settings.slider_title_1 }}</h1>
{% endif %}
{% if block.settings.slider_title_2 != '' %}
<h2 class="animated" style="color: {{ block.settings.slider_title_2_color }}">{{ block.settings.slider_title_2 }}</h2>
{% endif %}
{% if block.settings.slider_subtitle != '' %}
<p class="animated" style="color: {{ block.settings.slider_subtitle_color }}">{{ block.settings.slider_subtitle }}</p>
{% endif %}
{% if block.settings.slider_btn_text != '' %}
<a href="{{ block.settings.slider_btn_url }}" style="color: {{ block.settings.slider_btn_color }};
background-color: rgba({{ block.settings.slider_btn_bg_color }}, 1)">
{{ block.settings.slider_btn_text }}</a>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% for block in section.blocks %}
<style>
.slider-content-book h1 span {color: {{ block.settings.slider_title_1_span_color }};}
.slider-animation.slider-content-book.content_right {text-align: right;}
.slider-animation.slider-content-book.content_right p {margin-left: auto;}
.slider-content-book > a:hover {box-shadow: 0 10px 35px -7px rgba({{ block.settings.slider_btn_bg_color }}, 0.9);}
</style>
{% endfor %}
<script>
$('.slider-active').owlCarousel({
loop: true,
nav: false,
autoplay: {% if section.settings.slider_autoplay_enable %}true{% else %}false{% endif %},
autoplayTimeout: 5000,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
item: 1,
rtl:true,
responsive: {
0: {
items: 1
},
768: {
items: 1
},
1000: {
items: 1
}
}
})
</script>
{% schema %}
{
"name": "Slider- Book",
"settings": [
{
"type": "checkbox",
"id": "slider_autoplay_enable",
"label": "Enable Slider Autoplay",
"default": true
}
],
"blocks": [
{
"type": "slide",
"name": "Slide",
"settings": [
{
"type": "image_picker",
"id": "slider_bg_image",
"label": "Slider BG Image"
},
{
"type": "header",
"content": "Slider Content"
},
{
"type": "checkbox",
"id": "slider_content_position_right",
"label": "Slider Content Position Right",
"default": false
},
{
"type": "text",
"id": "slider_title_1",
"label": "Title 1",
"default": "<span>Knowledge</span> is",
"info": "Use '<span>' tag for color text e.g. <span>Knowledge</span> is"
},
{
"type": "text",
"id": "slider_title_2",
"label": "Title 2",
"default": "Power."
},
{
"type": "textarea",
"id": "slider_subtitle",
"label": "Sub-title",
"default": "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
},
{
"type": "text",
"id": "slider_btn_text",
"label": "Button Text",
"default": "More Books"
},
{
"type": "url",
"id": "slider_btn_url",
"label": "Button URL",
"default": "\/collections\/all"
},
{
"type": "header",
"content": "Color [See More Color](https:\/\/www.w3schools.com/colors/colors_picker.asp)"
},
{
"type": "color",
"id": "slider_title_1_color",
"label": "Title 1 Color"
},
{
"type": "color",
"id": "slider_title_1_span_color",
"label": "Title 1 span text Color"
},
{
"type": "color",
"id": "slider_title_2_color",
"label": "Title 2 Color"
},
{
"type": "color",
"id": "slider_subtitle_color",
"label": "Sub-title Color"
},
{
"type": "color",
"id": "slider_btn_color",
"label": "Button text Color"
},
{
"type": "text",
"id": "slider_btn_bg_color",
"label": "Button BG Color",
"info": "Put RGB value e.g. 56, 40 , 25"
}
]
}
],
"presets":[
{
"name": "Slider- Book",
"category": "slider",
"blocks":[
{
"type": "slide"
},
{
"type": "slide"
}
]
}
]
}
{% endschema %}
3 different screen with same picture
TABLET SCREEN
DESKTOP SCREEN
PHONE SCREEN
ACTUAL IMAGE
you can see a preview here
https://stashcbd-com.myshopify.com/?preview_theme_id=31932481611
The image size ( if you are referring to the original size of the image ) is controlled via the filter img_url: 'master' at the moment. But that syntax is deprecated. You can read more here: https://help.shopify.com/themes/liquid/filters/deprecated-filters#named-size-parameters
So the proper way to size the image is to use specific sizes instead:
{{ block.settings.slider_bg_image | img_url: '2048x2048' }}
Where 2048x2048 is width and height.
Now if you are referring to sizing down the image via CSS, that's a whole different story and you don't have problems with the Shopify logic but with the CSS and the question is not asked properly.
I use alexche:autoform-froala-editor to add a Rich Text Editor to autoform.
But two instances on same page, insert the same value in different data-schema-key. It inserts the String from structure in process. So it always takes the value from the first Element.
how to avoid this?
Schema:
structure: {
label: "Form A",
type: String,
autoform: {
afFieldInput: {
type: 'froala',
inlineMode: false
}
}
},
process: {
label: "Form B",
type: String,
autoform: {
afFieldInput: {
type: 'froala',
inlineMode: false
}
}
},
html:
<div class="card">
<div class="card-content">
<span class="card-title"></span>
{{> afQuickField name='desc.structure'}}
</div>
</div>
<div class="card">
<div class="card-content">
<span class="card-title"></span>
{{> afQuickField name='desc.process'}}
</div>
</div>