Add a section not working in Shopify Theme development - themes

I have made a few websites before using a shopify theme and I am trying my best to develop my own theme. I understand how sections work, and I can add the sections that I have created in statically, but I cannot dynamically from the theme customizer. Has this happened to anyone before or know of a way to fix it? Instead of being able to choose a section after clicking add a section I just get the message
"This theme doesn't include sections that can be added to the homepage."
The first two screen shots are of my theme customizer, the third is of another theme and what it is supposed to look like. I was under the impression that all you had to do was use the conent for layout tag to add in your sections.
{{ content_for_layout }}

Figured it out! Every section has to have a preset in the {% schema %} otherwise it will not show up in the add a section area.
You put {{ content_for_index }} in the index.liquid file and your preset in the {% schema %} of yoursection.liquid
https://help.shopify.com/themes/development/theme-editor/sections
"presets": [
{
"name": "Collection Carousel",
"category": "Carousel",
"settings": {
}
}
]
Will make it appear like this:

Related

How can I sort the featured blog posts in the top of the list in Octobercms

My request is simple. I want to keep my blog list ordered by created_at DESC but I want also to show the featured posts in top.
Let's say that I have 4 categories : Gold, Silver, Bronze and Other ...
I want to display the Gold posts first.
Then the Silver posts.
Followed by the Bronze posts.
And finally the others.
All of them should be ordered by created_at DESC.
Is there a feature out of the box to do that ?
Or should I create a new plugin to extend Blog with this feature ?
What do you think ?
I am assuming you are using the Rainlab Blog plugin. There are numerous ways to solve this and I don't think there is an official "way". Here are some examples that you will have to fit for your own code.
Solution with Twig. Twig has a sort filter which you can pass in an
arrow function, check
here. Then you
can do if statements to display gold to bronze.
{% for blog in blogs|sort((a, b) => a.created_at <=> b.created_at) %}
{% if blog.category == Gold %}{{ blog }}{% endif %}
{% endfor %}
Adhoc CMS
Page. Instead
of using the rain blag component you can use the plugin in the PHP
Code to the page/layout/partial. This is where give you the ability
to work with the model to organize it the way you want to. Here I am
using OctoberCMS querying
features.
use Rainlab\Blog\Models\Post;
public function onStart() {
$this['golds'] = Post::whereHas('categories', function ($query) {
$query->where('name', 'Gold');
})->get()->sortBy('create_at');
}
Third way and the way I recommend is to build your own plugin which
can either extend or filter the blogs posts like how I did in the
CMS Page example. Read the documentation here.
One side note that if you click into the {% component 'something' %} you can expand the htm template.

displaying image reusable content with pieces

I wrote a Widget – i basically created the people Widget ( Adding Editable Content to Pages - Tutorial) and modified it to my needs.
The structure of the widget
On my show.html the heroimage is missing and everywhere else the image is displayed properly.
Does anyone have a clou, what i am missing?
app.js
project index.js
show.html
The code screenshots give an incomplete picture but a few things to double check or try:
Is heroimage actually a part of your project's schema?
In show.html are you tucking data.piece into its own variable? I would think the line would be
{% set image = apos.images.first(data.piece.heroimage) %}

Go HTML templates for multiple sites

I'm preparing an application that will serve several different sites that have a common admin panel (a page with different themes to simplify).
Each of these "themes" will have different needs. For example while all of them show a list of services, some of them will show an associated image too. For the ones who don't I would prefer to avoid the DB calls to fetch them (different logic to render the pages).
In Laravel (a PHP framework) this would be a perfect use for view composers.
What would be the design of such a system in go?
I was thinking in some kind of "hooks" that each theme can register to run functions to fetch and add data for a specific template. There's a better way to do it?
If you pass a list of service objects to the template, you could easily decide inside the template what you want to show. If you decide to show a service's image, you could call the ServiceObject.ImageURL() (which would then lead to a database call). If you're not calling this function, there will be no database query issued.
A sample using the pongo2 template engine:
{% for service in services %}
{% if page.theme == "simple" %}
<p>We don't show any image in the simple theme.</p>
{% else %}
{# This would lead to a database call and return the image path #}
<img src="{{ service.ImageURL() }}" />
{% endif %}
{% endfor %}
Another idea would be to simply create an individual template per theme (extending the common base template); you don't have check for the theme inside the template then.

Jekyll/Octopress: How can I use a tag inside a tag

In Jekyll/Octopress, how can I place the output of a tag inside another tag?
This is what I want to do (using Octopress's img tag):
{% img {% PluginThatOutputsAURL %} %}
If I do that I get this error:
Error processing input, expected syntax: {% img [class name(s)] [http[s]:/]/path/to/image [width [height]] [title text | “title text” [“alt text”]] %} %}
Is it possible to do this? What would be the right syntax to do so?
Jekyll/Octopress uses Liquid Templates to parse these things.
As far as I know, you can't call two functions within a tag like that. You can however specify variable names in tags:
using Liquid variables inside of a liquid tag call
I tried Googling a bit and didn't see anything pop up for calling two functions within one tag.
IMO, I'd recommend creating a custom tag to do exactly what you want. I have created several custom plugins to Octopress because I needed such customization. The plugins, which is just Ruby. is pretty straight forward.
So, copy the existing img_tag.rb and call it, mycustom_img_tag.rb or whatever, and perform your magic within the render() method.
For example, here's my HTML5 audio player tag I wrote where I needed to know what extension the audio file was (specified in the url) in order to specify the content type:
https://github.com/eduncan911/eduncan911.github.io/blob/b89f47cd86c37f2cfb5c3093612fe0a049808325/plugins/audio_tag.rb
^- NOTE: It is incomplete and all the options doesn't work as I specified. You can see what works in the render() section, where I just parse the data-* attributes manually (I ran outta time and just made it work).
I basically used two other plugins as a template and created this one.
You have access to the entire Octopress methods and variables in your plugin - there are no restrictions to the entire code base.

How do I include all documents in the Sphinx globaltoc sidebar?

I would like every single document in the entire TOC to be included in the globaltoc sidebar. How do I achieve this?
In theme files, there are calls to {{ toctree() }}, but I don't know what toctree() refers to.
You can use the sphinxcontrib-fulltoc sphinx extension to include a complete TOC in the side bar.

Resources