Answersheet to 'Linking an app and using it on a store's theme'
// store-block/react/Countdown.tsx
import React from 'react'
interface CountdownProps {}
const Countdown: StorefrontFunctionComponent<CountdownProps> = ({}) => {
return (
<div>
<h1>Teste Countdown</h1>
</div>
)
}
Countdown.schema = {
title: 'editor.countdown.title',
description: 'editor.countdown.description',
type: 'object',
properties: {},
}
export default Countdown
// store-theme/store/blocks/home/home.jsonc
{
"store.home": {
"blocks": [
"countdown",
"list-context.image-list#demo",
"__fold__.mobile",
"flex-layout.row#deals",
"__fold__.desktop",
"rich-text#shelf-title",
"flex-layout.row#shelf",
"info-card#home",
"rich-text#question",
"rich-text#link",
"newsletter"
]
},
"shelf#home": {
"blocks": ["product-summary.shelf"]
},
"list-context.image-list#demo": {
"children": ["slider-layout#demo-images"],
"props": {
"height": 720,
"images": [
{
"image": "https://storecomponents.vteximg.com.br/arquivos/banner-principal.png",
"mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"
},
{
"image": "https://storecomponents.vteximg.com.br/arquivos/banner.jpg",
"mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"
}
]
}
},
"slider-layout#demo-images": {
"props": {
"itemsPerPage": {
"desktop": 1,
"tablet": 1,
"phone": 1
},
"infinite": true,
"showNavigationArrows": "desktopOnly",
"blockClass": "carousel"
}
},
"rich-text#shelf-title": {
"props": {
"text": "## Summer",
"blockClass": "shelfTitle"
}
},
"flex-layout.row#shelf": {
"children": ["list-context.product-list#demo1"]
},
"list-context.product-list#demo1": {
"blocks": ["product-summary.shelf"],
"children": ["slider-layout#demo-products"],
"props": {
"orderBy": "OrderByTopSaleDESC"
}
},
"slider-layout#demo-products": {
"props": {
"itemsPerPage": {
"desktop": 5,
"tablet": 3,
"phone": 1
},
"infinite": true,
"fullWidth": true,
"blockClass": "shelf"
}
},
"info-card#home": {
"props": {
"id": "info-card-home",
"isFullModeStyle": false,
"textPosition": "left",
"imageUrl": "https://storecomponents.vteximg.com.br/arquivos/banner-infocard2.png",
"headline": "Clearance Sale",
"callToActionText": "DISCOVER",
"callToActionUrl": "/sale/d",
"blockClass": "info-card-home",
"textAlignment": "center"
}
},
"rich-text#question": {
"props": {
"text": "**This is an example store built using the VTEX platform.\nWant to know more?**",
"blockClass": "question"
}
},
"rich-text#link": {
"props": {
"text": "\n**Reach us at**\nwww.vtex.com.br",
"blockClass": "link"
}
}
}
// store-theme/manifest.json
{
"vendor": "vtex",
"name": "store-theme",
"version": "3.30.1",
"builders": {
"styles": "2.x",
"store": "0.x",
"sitemap": "0.x",
"docs": "0.x"
},
"mustUpdateAt": "2018-09-05",
"scripts": {
"postreleasy": "vtex publish --verbose"
},
"dependencies": {
"vtex.store": "2.x",
"vtex.store-header": "2.x",
"vtex.product-summary": "2.x",
"vtex.store-footer": "2.x",
"vtex.store-components": "3.x",
"vtex.styleguide": "9.x",
"vtex.slider": "0.x",
"vtex.carousel": "2.x",
"vtex.shelf": "1.x",
"vtex.menu": "2.x",
"vtex.minicart": "2.x",
"vtex.product-details": "1.x",
"vtex.product-kit": "1.x",
"vtex.search-result": "3.x",
"vtex.login": "2.x",
"vtex.my-account": "1.x",
"vtex.flex-layout": "0.x",
"vtex.rich-text": "0.x",
"vtex.store-drawer": "0.x",
"vtex.locale-switcher": "0.x",
"vtex.product-quantity": "1.x",
"vtex.product-identifier": "0.x",
"vtex.breadcrumb": "1.x",
"vtex.sticky-layout": "0.x",
"vtex.product-customizer": "2.x",
"vtex.stack-layout": "0.x",
"vtex.product-specification-badges": "0.x",
"vtex.product-review-interfaces": "1.x",
"vtex.telemarketing": "2.x",
"vtex.order-placed": "1.x",
"vtex.checkout-summary": "0.x",
"vtex.product-list": "0.x",
"vtex.add-to-cart-button": "0.x",
"vtex.product-bookmark-interfaces": "1.x",
"vtex.slider-layout": "0.x",
"vtex.store-image": "0.x",
"vtex.store-icons": "0.x",
"vtex.modal-layout": "0.x",
"vtex.store-link": "0.x",
"vtex.countdown": "0.x"
},
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}
Help us make this content better!
VTEX IO courses are open source. If you see something wrong, you can open a pull request!
Make a contributionUpdated almost 4 years ago