I am very newbie in nunjucks.
{% set projects = [
{
id: 3,
dbaslik: "some data 1",
ddetay: "some data 1",
src: "img/someimg1.png"
},
{
id: 4,
dbaslik: "some data 2",
ddetay: "some data 2",
src: "img/someimg2.png"
},
.....
] %}
<div class="owl-one owl-carousel owl-theme">
{% for project in projects %}
<div class="item-proje"
id="project-image-slider-{{proje.id}}"
data-baslik="{{project.dbaslik}}"
data-detay="{{project.ddetay}}" >
<img src="{{project.src}}"/>
</div>
{% endfor %}
</div>
This is what my own template which is used to populate some projects. But this is just static data as you see. I have to work with real data. So
I need to call specific project api and get projects, assign project variable and populate them using nunjucks? How can I do that?
Related
Hello Shopify Theme Development Pros,
I am trying to add a block in a section of my theme and although the input block shows up on the screen, when I input type nothing shows up on the actual website. I have tried defining styles in CSS as well, but no luck.
This is what I have added to the block settings in the liquid file...
{
"type": "text",
"id": "review_title",
"label": "Review Heading",
"default": "Enter title here"
},
And this is the html that I added...
<div class="testimonial-heading> {% if section.settings.review_title != blank %} <p> {{ section.settings.review_title | escape }} </p> {% endif %}</div>
When you are using blocks you need to loop them since there are dynamic content that can be added multiply times.
So at the moment you are targeting the settings object and not the blocks section.settings.review_title.
In order to list the blocks you need to do the following:
{% for block in section.blocks %}
<div class="testimonial-heading">
{% if block.settings.review_title != blank %}
<p> {{ block.settings.review_title | escape }} </p>
{% endif %}
</div>
{% endfor %}
I want to implement the apostrophes Ajax features in my project but sadly I don't understand the Ajax functions not completely. I have been studying the documentation for the last week now but i don't find enough information about that topic. I want kindly ask if it's possible to use data-apos-ajax-append outside of apostrophe-pieces-pages
I created a widget like that:
lib/modules/infinite-widgets/index.js
module.exports = {
extend: 'apostrophe-widgets',
label: 'Infinite Widget',
addFields: [
{
name: 'posts',
label: 'Posts',
type: 'array',
titleField: 'name',
schema: [
{
name: 'name',
type: 'string',
label: 'Name'
},
{
name: '_image',
type: 'joinByOne',
withType: 'apostrophe-image',
label: 'Image',
required: true,
filters: {
projection: {
attachment: 1,
description: 1,
title: 1
}
}
}
]
}
]
};
lib/modules/infinite-widgets/views/widget.html
<div class="row margin">
<div class="col s12 m12">
<div class="radius
{% if data.widget.shadowOn == true %}
z-depth-1
{% endif %}
">
<div data-apos-ajax-context="infinite">
{% include "indexAjax.html" %}
</div>
</div>
</div>
</div>
lib/modules/infinite-widgets/views/indexAjax.html
<div data-apos-ajax-append>
{% for name in data.widget.posts %}
{% set image = apos.images.first(name._image) %}
<div class="card z-depth-0" style="
{%- if piece.backColor-%}
background-color:{{ piece.backColor }}
{% endif %}
">
<div class="card-image">
<img src="{{ apos.attachments.url(image, { size: 'one-sixth' }) }}" />
</div>
<div class="card-content">
{{ name.name }}
</div>
</div>
{% endfor %}
</div>
That is working pretty nice but unfortuantly It displays all posts created simultansiosly and I wasen't able to use the "Load More..." button with AJAX here
{# Load More button. Also outside data-apos-ajax-append, so it gets refreshed #}
{% if data.currentPage < data.totalPages %}
{# "Load More" button with the "append=1" flag #}
Load More...
{% endif %}
So can I modify this query, to have a load more button, or even better data-apos-ajax-infinite-scroll for content of an array created in an widget instead of an piece?
No, it is not possible to do that using data-apos-ajax-append. That feature is specifically for apostrophe-pieces-pages and there is no back end implementation waiting to talk to it for widgets, for instance.
You should instead look at writing a browser-side widget player for your widget, which gives you a place to make your own API calls back to the server. You can see that technique in the source of the apostrophe-twitter-widgets module.
I am a PHP Developer and, I am trying to append the theme functionality of any Shopify Theme, Though Public App. I did that by opening the theme file but now I want to implement that functionality through an app.
I believe you want to change theme code via API like in this page
First use GET /admin/api/2019-07/themes.json to see which theme shop is using. Check if "role" : "main" then take the theme id.
After get the id, you can send a json to PUT /admin/api/2019-07/themes/{theme_id_from_step_one}/assets.json to alter the file in the code without open it.
{
"asset": {
"key": "templates/index.liquid", // file location
"value": "<img src='backsoon-postit.png'><p>We are busy updating the store for you and will be back within the hour.</p>" //delete liquid code inside and put those code in
}
}
In case you only want to append the code. You must use GET /admin/themes/828155753/assets.json?asset[key]={file_location} . It gives
{
"asset": {
"key": "templates/index.liquid",
"public_url": null,
"value": "<!-- LIST 3 PER ROW -->\n<h2>Featured Products</h2>\n<table id=\"products\" cellspacing=\"0\" cellpadding=\"0\">\n {% tablerow product in collections.frontpage.products cols:3 %}\n {{ product.featured_image | product_img_url: 'small' | img_tag }}\n <h3>{{product.title}}</h3>\n <ul class=\"attributes\">\n <li><span class=\"money\">{{product.price_min | money}}</span></li>\n </ul>\n {% endtablerow %}\n</table>\n<!-- /LIST 3 PER ROW -->\n\n{{ content_for_index }}\n\n<div id=\"articles\">\n {% assign article = pages.frontpage %}\n <div class=\"article\">\n {% if article.content != \"\" %}\n <h3>{{ article.title }}</h3>\n <div class=\"article-body textile\">\n {{ article.content }}\n </div>\n {% else %}\n <div class=\"article-body textile\">\n In <em>Admin > Blogs & Pages</em>, create a page with the handle <strong><code>frontpage</code></strong> and it will show up here.\n <br />\n {{ \"Learn more about handles\" | link_to \"http://wiki.shopify.com/Handle\" }}\n </div>\n {% endif %}\n </div>\n</div>\n",
"created_at": "2010-07-12T15:31:50-04:00",
"updated_at": "2010-07-12T15:31:50-04:00",
"content_type": "text/x-liquid",
"size": 1068,
"theme_id": 828155753
}
}
take the value and use regex to append.
I have a YAML array in a file called navigation.yml as follows:
docs:
- title: Home
url: index.md
id: index
- title: Support
url: support.html
id: support
- title: About
url: about.md
id: about
I am creating a navigation bar as follows:
<section id="navigation" class="clearfix">
{% for item in site.data.navigation.docs %}
<span>{{ item.title }}</span>
{% endfor %}
</section>
What should I put in place of index.md to get the item.url that I want from the YAML file.
I am totally new to GitHub Pages, YAML, and Jekyll.
At the moment, the link tag doesn't seem to support variables.
There's a pull request trying to change this, but it has not been merged into the main Jekyll repo yet.
So if you want to do this now, you need to use some tricks.
The solution suggested by flyx in his comment (replace {% link index.md %} by {{ item.url }}) basically works, but shows the original filename written in the data file.
⇒ If index.md is automatically renamed to index.html while rendering the site, your link won't work anymore.
(or if support.html becomes support/index.html)
That's probably why you wanted to use the link tag instead.
Without using the link tag, you need to loop your data file, loop through all pages to find the respective page, and show that page's actual URL in your link:
<section id="navigation" class="clearfix">
{% for item in site.data.navigation.docs %}
{% for page in site.pages %}
{% if page.path == item.url %}
<span>{{ item.title }}</span>
{% endif %}
{% endfor %}
{% endfor %}
</section>
This even takes stuff like explicitly set permalinks (permalink: /whatever/ in the page's front matter) into account.
Hi I'm trying to display subjects names from my database using AJAX.
That's my output right now:
[{"pk": 1, "model": "school.subjects", "fields": {"name": "Math 140"}},
{"pk": 2, "model": "school.subjects", "fields": {"name": "English 102"}},
{"pk": 3, "model": "school.subjects", "fields": {"name": "CS210"}}]
But I want to display only : How can I do that?
Math 140
English 102
CS210
Thats my view:
#csrf_exempt
def subjects_list(request):
if request.is_ajax():
user = request.user
subjects = Subjects.objects.filter(user__exact = user)
result = serializers.serialize("json", subjects, fields=('name'))
else:
result = "blablabl"
return HttpResponse(result)
And thats my test.html
{% extends "base.html" %}
{% block main-menu %}
<div id="result"></div>
<script type="text/javascript">
$(function() {
$.get("/subjects-list", function(data){
$("#result").append(data);
});
});
</script>
{% endblock %}
It is because the data you get back from the server is JSON. This needs to be parsed before it is loaded into your DOM. You could do something like this:
Copying, then adding to your test.html...
{% extends "base.html" %}
{% block main-menu %}
<div id="result"></div>
<script type="text/javascript">
$(function() {
$.get("/subjects-list", function(data){
var $results = $("#result");
for (var i = 0; i < data.length; i++) {
$results.append(data[i]["fields"]["name"] + "<br/>");
}
}, "json");
});
</script>
{% endblock %}
With that said though, you may want to look into using a javascript templating library. There are a LOT of them out there. The general idea is that the library can handle turning the AJAX responses into HTML.
There are some stackoverflow question answering the question of which to use here:
Recommended JavaScript HTML template library for JQuery?
What is the preferred template library for jQuery?
In order to find more about this, you'll want to search for "javascript templating".
Don't serialize your models directly, it isn't safe as users would see sensible internal fields.
You want to use a real API engine, like django-tastypie or django-piston. With this kind of engine, you'll be able to select fields that you want to show, manage authorizations, output formats, etc...
For instance, with tastypie:
class SubjectResource(ModelResource):
class Meta:
queryset = Subject.objects.all()
resource_name = 'subjects'
fields = ['name']
Will produce:
{
"objects": [
{"name": "Math 140"},
{"name": "English 102"},
{"name": "CS210"},
]
}
Of course, you can delete the objects wrapper with the following instance method:
def alter_list_data_to_serialize(self, request, data):
data[self.Meta.resource_name] = data['objects']
del data['objects']
del data['meta']
return data
That's the cleanest way to go.