Countdown

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Countdown

image

Configuration

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

  "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

{
	"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

{
  "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 specification. Contributions of any kind are welcome!

---