# Day 23/2

Plan 23/2:

* learning and researching Shopify



## Directory structure and component types

Themes must follow this directory structure:

* assets

Assets are files (such as images, CSS, JavaScript) used in themes for customization. They have unique URLs generated by `asset_url` Liquid filter and are managed through the Theme Editor. Assets enhance the store's appearance and functionality.&#x20;

* config

contain the config files for a theme. Config files define settings in the Theme settings area of the theme editor, as well as store their values.

* layout

The layout directory houses layout files for a theme, facilitating the rendering of template files. Layouts, written in Liquid, centralize content meant for multiple page types. They're ideal for content like \<head> elements and section groups for headers and footers. A `theme.liquid` file is mandatory in this directory for Shopify theme upload.

* locales

contains the locale files which allow you to provide a translated experience in the theme editor, provide translations for the online store, and allow merchants to customize text in the online store.

* sections

are Liquid files that allow you to create reusable modules of content that can be customized by merchants. They can also include blocks which allow merchants to add, remove, and reorder content within a section.

* snippets

Contains reusable pieces of Liquid code that can be included in different templates or sections of a theme. It allows you to modularize your code and avoid duplication. Snippets are commonly used for components that appear on multiple pages.

* templates

Contain a template file that control layout and structure of a specific type of page in your online store.

* template/customers

Store template files related to customer-specific pages and actions (login, account overview, ...).

## <mark style="color:blue;">Liquid</mark>

### Template language

Which allow creating a template to host static content, and dynamically insert information depending on where the template is rendered.

### Liquid

Liquid is used to dynamically output objects and their properties. You can further modify that output by creating logic with tags, or directly altering it with a filter.

### Defining logic with tags

Liquid tags are used to define logic that tells templates what to do. Text within tag delimiters doesn’t produce visible output when the webpage is rendered.

`{% if product.title == 'Health potion' %}`

`This is a rare potion. Use it sparingly!`

`{% endif %}`

{% hint style="info" %}
`{% %}` Curly brace percentage delimiters denote logic and control flow.
{% endhint %}

### Modifying output with filters

To apply filters to an output, add the filter and any filter parameters within the output's curly brace delimiters, preceded by a pipe character.

`{% # product.title -> Health potion %}`

`{{ product.title | upcase | remove: 'HEALTH' }}`

{% hint style="info" %}
`{{ | }}` Filters are placed within an output tag and denoted by a pipe character.
{% endhint %}

### Referencing objects

Liquid objects are often used to represent data, such as product information, customer details, or configuration settings. Liquid provides various filters, tags, and objects to manipulate and display this data within templates.&#x20;

Some objects can be accessed globally, and some are available only in certain contexts.

{% hint style="info" %}
`{{ }}`Double curly brace delimiters denote an output.
{% endhint %}

### Handles

Object handling involves manipulating and interacting with objects that represent data within templates.

#### 1. Creating and modifying handles

Handles are automatically generated based on the resource title, follow the rules:

* always lowercase
* whitespace and special characters (include multiple consecutive whitespace and special characters) are replaced with a single hyphen `-`
* whitespace and special characters at the beginning are removed
* handles need to be unique from each other

{% hint style="info" %}
After a resource has been created, changing the resource title doesn't update the handle.
{% endhint %}

#### 2. Handle 's tasks

Here are some common tasks involved in object handling in Liquid:

* Accessing Object Properties
* Iterating Over Object Properties
* Conditional Logic
* Using Filters
* Creating Custom Objects

#### 3. Referencing handles

All objects that have a handle have a `handle` property. You can reference an object, from within its parent object, by its handle in two ways:

* Square bracket notation `[ ]`: Accepts a handle wrapped in quotes `'`, a Liquid variable, or an object reference.
* Dot notation `.`: Accepts a handle without quotes.

Referencing an object by its handle is similar to referencing array elements by their index.

#### 4. contains

You can use `contains` to check for the presence of a string within an array, or another string. You can’t use `contains` to check for an object in an array of objects.

#### 5. Order of operations

When using more than one operator in a tag, the operators are evaluated from right to left, and you can’t change this order.

#### 6. Liquid output types

* string
* number
* boolean
* nil : undefined value, treated as false&#x20;
* array : list of variable of any types
* empty : returned when an object is defined but has no value

Beside 'false' and 'nil' are treated as False, every others output types are treated as True. You need to be careful how you check values in Liquid.

#### 7. Whitespace control

Even if no text is displayed, every line of Liquid code contributes to the rendered content. Hyphens in Liquid tags remove generated whitespace. To remove whitespace from one side of a tag, add a hyphen to either the opening or closing tag.

`{%- something in here -%}`
