# Countdown

📢 Use this project, [contribute](https://github.com/%7BOrganizationName%7D/%7BAppName%7D) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

## Countdown

[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

![image](https://user-images.githubusercontent.com/48053804/200072630-a974d79d-7d45-463d-accf-98ce849ae8dd.png)

### Configuration

1. Adding the app as a theme dependency in the `manifest.json` file;

```json
  "dependencies": {
    "{vendor}.countdown": "0.x"
  }
```

1. Declaring the app's main block in a given theme template or inside another block from the theme.

| Block name                | Description                                   |
| ------------------------- | --------------------------------------------- |
| `countdown-wrapper`       | Countdown context                             |
| `countdown-timer`         | Countdown timer                               |
| `countdown-product-timer` | a countdown timer to be used in shelf and PDP |

#### `countdown-timer` and `countdown-product-timer` props

| Prop name | Type     | Description | Default value                 |
| --------- | -------- | ----------- | ----------------------------- |
| `message` | `string` | XXXXXXXX    | `{hours}:{minutes}:{seconds}` |
| `markers` | `array`  | XXXXXXXX    | `[]`                          |

### Usage

```json
{
	"container#countdown": {
		"children": ["countdown-wrapper"]
	},
	"countdown-wrapper": {
		"children": ["container#countdown-content"]
	},
	"container#countdown-content": {
		"children": ["countdown-timer", "container#shelf-countdown"]
	},
	"container#shelf-countdown": {
		"children": ["list-context.product-list#shelf-countdown"]
	},
	"list-context.product-list#shelf-countdown": {
		"blocks": ["product-summary.shelf"],
		"children": ["embla-carousel#shelf"],
		"props": {
			"collection": "142"
		}
	},
	"embla-carousel#shelf": {
		"props": {
			"options": {
				"align": "start",
				"navigation": true,
				"dots": true,
				"draggable": true,
				"loop": true
			},

			"blockClass": ["shelf", "default-controls"]
		}
	}
}
```

#### Usage in Shelf

```json
{
  "product-summary.shelf": {
		"children": [
      "product-summary-image", 
      "product-summary-name",
      "countdown-product-timer"    
    ],
		"props": {
			"blockClass": "search"
		}
	},
}
```

### Customization

The first thing that should be present in this section is the sentence below, showing users the recipe pertaining to CSS customization in apps:

`In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).`

Thereafter, you should add a single column table with the available CSS handles for the app, like the one below. Note that the Handles must be ordered alphabetically.

| CSS Handles        |
| ------------------ |
| `countdown`        |
| `hours`            |
| `minutes`          |
| `seconds`          |
| `timer`            |
| `countdownProduct` |
| `number`           |

### Contributors ✨

Thanks goes to these wonderful people:

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!

***
