# Getting Started

## Introduction

This theme supplies the user some simple starter templates to get started with October's Tailor Feature. It uses Bootstrap 5 to generate menus, general HTML content, and more.

### Prerequisites 

To get started with this theme, you'll need the following

* October CMS v3.x
* A knowledge of [Tailor](https://docs.octobercms.com/3.x/tailor/introduction.html)
* Some knowledge of PHP
* Some Knowledge of Bootstrap 5

### **Plugin Dependencies**

This theme depends on the following plugins:

* [Artistro08.TailorStarterCompanion](https://octobercms.com/plugin/artistro08-tailorstartercompanion)
  * For Order Email management with the Shop Feature
  * For Email Notifications with the Form Feature

### Get Started

Install the theme and dependencies via `artisan`(From the October CMS Marketplace):

```bash
php artisan theme:install Artistro08.TailorStarterTheme
```

> All theme dependencies should be installed automatically

Once installed, run the seeding function for the theme:

```bash
php artisan theme:seed artistro08-tailorstartertheme --root
```

This will initialize the Tailor structure, so you can add content.

> **Note**
>
> This theme automatically creates a child theme. The directory name is `artistro08-tailorstarter-child`. Use that theme to make edits to the code. To learn more info about child themes, check [here](https://docs.octobercms.com/3.x/cms/themes/child-themes.html). Whenever you make changes to the theme in the editor, it copies the data and puts it in the child theme.

Once you've seeded the theme, head over to the content settings in the backend and select the Homepage. Optionally, fill out the Site Name field as well. Find this at `/[backend_url]/tailor/globals/content_settings` where `[backend_url]` is your backend URI set in your .env

### General Structure of Theme

The theme is structured in a way where you can edit almost any file independently. Below are the the main files that give a general structure of the theme. 

### Top Level Files in the `partials` folder

#### `header.htm`

This file contains the Bootstrap 5 Navbar and navigation generated by the theme. It uses the [`pagefinder`](https://docs.octobercms.com/3.x/element/form/widget-pagefinder.html) form widget to display menu items. It also does the followinShows the website name and logo. 

* Shows the cart button (When an item is in the cart)
* Sets the locale if there are any available sites

The menu depth is only 2 levels, defined in the [`main_menu.yaml`](https://github.com/artistro08/tailor-starter/blob/main/seeds/blueprints/content/menu/main_menu.yaml) partial.

#### `head.htm`

The head partial is used to display general meta tags and a bunch of other stuff including the following:

* Includes assets from the [`assets.htm`](https://github.com/artistro08/tailor-starter/blob/main/partials/assets.htm) file
* Pulls the following information from the [`settings.yaml`](https://github.com/artistro08/tailor-starter/blob/main/seeds/blueprints/content/settings/settings.yaml) 
  * Favicons
  * Global Header Code
* Pulls in the following information from the current page
  * Meta Info (title, keywords, description)
  * OG Tags (Facebook, Twitter, LinkedIn, etc.)
  * Robots Info
  * Current Page Header Code

#### `assets.htm`

This file is used to include assets throughout the site, mainly the core Bootstrap files. You can use it to include assets in your site via the [`[resources]`](https://docs.octobercms.com/3.x/cms/components/resources.html) component. You can also include CDN assets here as well. It's a good idea to wrap your CDN assets in a [`{% put styles %}`](https://docs.octobercms.com/3.x/markup/tag/placeholder.html#styles) placeholder to ensure files are included correctly. 

If you plan on including assets conditionally, it's a good idea to use the CMS page ID to display that content on the page like so:

```twig
{% if this.page.id == "events" %}
    <link rel="stylesheet" href="https://example.com/events.css">
{% endif %}
```

#### `footer.htm`

This file is used to display the [Secondary Menu](https://artistro08.gitbook.io/tailor-starter-documentation/broken-reference) & [Social Menu](https://artistro08.gitbook.io/tailor-starter-documentation/menus/social-menu) throughout the site. It also uses the [`settings.yaml`](https://github.com/artistro08/tailor-starter/blob/main/seeds/blueprints/content/settings/settings.yaml)  file to display the site name. It includes a Copyright Line with the current year automatically generated.&#x20;

#### `foot.htm`

This file is used to display [`{% scripts %}`](https://docs.octobercms.com/3.x/markup/tag/placeholder.html#scripts) before the closing `</body>` tag. Additionally, this also includes the following content:

* Cart AJAX Functions using the [OctoberCMS Javascrpt API](https://docs.octobercms.com/3.x/cms/ajax/javascript-api.html)
* [Framework Extras](https://docs.octobercms.com/3.x/cms/ajax/introduction.html#extra-features)
* Global Footer Code
* Footer Code from the current page

### Other Files

Other files are explained in the respected areas of the documentation.&#x20;