Building reusable individually customizable sections in Shopify - shopify

What's the best way to build a reusable DRY section in liquid assuming the store owner wants to choose new options each time the section is reused?
Here are the two methods I can find:
Create a snippet which I can include from any template file, but
this won't allow the store owner to customize the settings. Keeps things very DRY but with no customization which defeats the purpose.
Create a section with settings, which includes a reusable snippet. But I need to duplicate this section every time I want to use it on a different page. Requires me to create duplicates of all my sections every time I create a new page.
Option 1:
reusable_snippet.liquid:
<div>
<h1>I'm a reusable non customizable quote</h1>
</div>
random_page_1.liquid:
{% include 'reusable_snippet' %}
random_page_2.liquid:
{% include 'reusable_snippet' %}
Option 2:
reusable_customizable_snippet.liquid:
<div>
<h1>{{ section.settings.full_msg_title }}</h1>
</div>
non_reusable_section_1.liquid:
{% include 'reusable_customizable_snippet' %}
{% schema %}
{
"name": "Reusable Snippet",
"settings": [{
"type": "text",
"id": "full_msg_title",
"label": "Full Width Message Title"
}]
}
{% endschema %}
non_reusable_section_2.liquid:
{% include 'reusable_customizable_snippet' %}
{% schema %}
{
"name": "Reusable Snippet",
"settings": [{
"type": "text",
"id": "full_msg_title",
"label": "Full Width Message Title"
}]
}
{% endschema %}
Is there some other, better method to create a reusable, individually customizable section?

It depends of what your section requirements.
If you don't have too many options in that section and your are not using the blocks from it, you can create dynamic blocks, where you will choose each page that the block will be visible on.
If you have too many options or you are using already the blocks, there a still a few ways depending on the information you need to add.
1) Using navigations & pages/articles etc..
Each link can point to a separate page from which you can use the content text or the content and excerpt if it's a blog post.
2) Metafields
Use metafeilds, there is a free APP that support metafields only on the product pages or you can use an extension for the ShopifyFD and use those instead for each page you like to have custom information.
To sum up it all depends on the amount of custom information you plan to edit.

Related

Shopify - Modify Page Template & Sections Reference For Custom Page

I am attempting to modify a specific route/template in my Shopify theme, however nothing from examples I have seen or the documentation seems to take.
Currently I have created a page in the Shopify Admin team which is auto assigned to the route /pages/team-page.
In my templates directory I have tried creating different variations as to assign it a custom section such as
team.json
team_page.json
page.team.json
page.team_page.json
And within those json files referenced to my sections directory liquid file custom.liquid with the following:
{
"sections": {
"custom": {
"type": "custom",
"settings": {}
},
"order": [ "custom" ]
}
But to no avail it always references back to the template index.json which renders main.liquid from sections.
Attempting to print out the page.handle returns team-page, while page.template_suffx seems to return nothing.

Creating a shopify template with unique content blocks

I have an ecommerce site, and I'm trying to create a "Lookbook" template. I want my client to be able to create a new lookbook (just as a simple page with a template of "page.lookbook" or similar), then be able to go into the page admin and select and upload images, links, descriptions etc.
So far I have:
page.lookbook.liquid -> calls in the section, lookbook-template.liquid
lookbook-template.liquid has an HTML template
It also has this schema:
{% schema %}
{
"name": "Lookbook",
"blocks": [
{
"type": "Image",
"name": "Lookbook image",
"settings":[
{
"type": "image_picker",
"id": "img",
"label": "Image"
},
{
"type": "text",
"id": "description",
"label": "Description",
"default": "<p>You can write <em>html</em> in here!</p>"
}
]
}
]
}
{% endschema %}
This way, my client can use the simple admin tools to add a new image block. Very nice!
However, this method means that every single lookbook gets the SAME image data as whatever I apply to the lookbook-template.liquid, and this isn't ideal at all.
What am I doing wrong here, and what's the right solution? I want one template that the client choose to attach to a page, and then for each template to have a unique set of images, links and descriptions that the client creates.
Unfortunately, section won't work to get some different content for each page with lookbook.page template.
A solution would be to install (or create) an app to manage metafields attached to pages. Then you can use metafields in your template.
Metafields is a way to add some extra fields in database:
https://help.shopify.com/themes/liquid/objects/metafield

OctoberCMS Get Theme Settings data in Api/Web service

I have created an OctoberCMS theme which works very well. And i have my current and activated theme.yaml like this.
theme.yaml
name: 5P Group
description: '5P Group OctoberCMS theme. A client website that contains preconfigured pages for static pages, a blog and client area..'
author: Technobrave
homepage: 'http://technobrave.com/'
code: ''
form:
fields:
site_logo:
label: Site Logo
comment: The website logo as it should appear on the front-end
type: fileupload
mode: image
imageHeight: 32
imageWidth: 443
As you can see i have added a Site Logo label through which admin can upload a logo and i will show it up front, which is working fine as i am able to show logo at front area like this.
menu.htm
{% if this.theme.site_logo %}
<img src="{{ this.theme.site_logo.path }}" width="100%" height="auto"/>
{% else %}
<img src="{{ 'assets/images/logo.png'|theme }}" width="100%" height="auto"/>
{% endif %}
But the thing is i am also creating an api and i want to do the same thing in that api. This is what i am trying.
routes.php
use System\Classes\SettingsManager;
/* API to get Website Logo Dynamically Starts */
Route::post('/getWebsiteLogo', function ()
{
$settings = Settings::instance();
print_r($settings);
});
/* API to get Website Logo Dynamically Ends */
But i am having an error saying
Class 'Settings' not found
Can someone guide me or suggest me how can i accomplish the same thing, or say how to get the dynamic website logo in one of my apis ?
Thanks
Ok guys, thanks for your support .. eventually i have worked around like this.
routes.php
<?php
use Cms\Classes\ComponentBase;
use RainLab\Pages\Classes\Router;
use Cms\Classes\Theme;
/* API to get Website Logo Dynamically Starts */
Route::post('/getWebsiteLogo', function ()
{
$theme = Theme::getActiveTheme();
$logo_url = '';
if($theme->site_logo['attributes']['disk_name'])
{
echo $theme->site_logo->path;
}
}
?>
Thanks for help and support. Highly appreciated.

Adding Dynamic Account Links to homepage

I'm looking to add (what I call, might go by another name) Dynamic Account Links to my website, so when the user is logged out, the link would say "Sign In" and then "Sign Out" when the user is logged in.
I figured I'd put the Register link on the Sign In page.
I'm using Adobe Business Catalyst.
I've found related questions on here but they all seem to relate to Ruby and Magento.
Could anyone shed some light on this matter?
Many thanks.
If you have Liquid Markup enabled, you can serve just the correct html like this:
{% if globals.user.isLoggedIn -%}
...Sign Out link...
{% else -%}
...Sign In link...
{% endif -%}
Without Liquid Markup, you'll need to get CSS involved:
<div class="visible-iff-true--{module_isloggedin}">
...Sign Out link...
</div>
<div class="visible-iff-false--{module_isloggedin}">
...Sign In link...
</div>
.visible-iff-true--0,
.visible-iff-false--1 {
display: none;
}
.visible-iff-true--1,
.visible-iff-false--0 {
display: block;
}

Shopify: How to make new products hidden by default?

I have a shopify site that is hooked up with Lightspeed via MerchantOS. I need new products added via MerchantOS to be hidden upon sync/creation. All help is appreciated.
The Shopify product creation via API allows you to define the product visiblity (published / hidden). You should dig into MerchantOS to make sure when doing a POST to create a product at your Shopify store, it has the following property:
"published": false
Create a new, but unpublished product:
POST /admin/products.json
{
"product": {
"title": "Burton Custom Freestlye 151",
"body_html": "<strong>Good snowboard!<\/strong>",
"vendor": "Burton",
"product_type": "Snowboard",
"published": false
}
}