From 643b5d6578e9793191c8d46fccdbe3c98c3c1614 Mon Sep 17 00:00:00 2001 From: DharshiniVenkat16 Date: Fri, 12 Apr 2024 13:58:20 +0530 Subject: [PATCH] VTEX practice --- manifest.json | 6 +- store/blocks/about-us.jsonc | 32 +++++ store/blocks/home.jsonc | 192 +++++++++++++++++++++++++++++- store/blocks/product.jsonc | 65 +++++++++- store/blocks/search-landing.jsonc | 26 ++++ store/blocks/search.jsonc | 19 ++- store/routes.json | 8 ++ styles/css/vtex.rich-text.css | 4 + 8 files changed, 346 insertions(+), 6 deletions(-) create mode 100644 store/blocks/about-us.jsonc create mode 100644 store/blocks/search-landing.jsonc create mode 100644 store/routes.json create mode 100644 styles/css/vtex.rich-text.css diff --git a/manifest.json b/manifest.json index 78cd80e..37c2c6f 100644 --- a/manifest.json +++ b/manifest.json @@ -44,7 +44,11 @@ "vtex.iframe": "0.x", "vtex.breadcrumb": "1.x", "vtex.sticky-layout": "0.x", - "vtex.add-to-cart-button": "0.x" + "vtex.add-to-cart-button": "0.x", + "vtex.condition-layout": "1.x", + "vtex.store-link": "0.x", + "vtex.modal-layout": "0.x", + "vtex.product-price": "1.x" }, "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema" } diff --git a/store/blocks/about-us.jsonc b/store/blocks/about-us.jsonc new file mode 100644 index 0000000..b5b81e8 --- /dev/null +++ b/store/blocks/about-us.jsonc @@ -0,0 +1,32 @@ + +{ + "store.custom#about-us":{ + "blocks":["flex-layout.row#about-us"] + }, + "flex-layout.row#about-us":{ + "children":["image#about-us","flex-layout.col#text-about-us"] + }, + "flex-layout.col#text-about-us":{ + "children":["rich-text#about-title","rich-text#about-content"], + "props":{ + "preventVerticalStretch": true + } + }, + "rich-text#about-title":{ + "props":{ + "text": "# About Minimum Theme" + } + + }, + "rich-text#about-content":{ + "props":{ + "text": "### This is the *VTEX Minimum Theme* \n you can use it to test blocks usage and build your first store from scratch." + } + }, + "image#about-us":{ + "props":{ + "src": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-about-us.png", + "maxHeight":"600px" + } + } +} \ No newline at end of file diff --git a/store/blocks/home.jsonc b/store/blocks/home.jsonc index 651d30c..ac84212 100644 --- a/store/blocks/home.jsonc +++ b/store/blocks/home.jsonc @@ -1,15 +1,203 @@ { "store.home": { "blocks": [ - "rich-text" + "rich-text", + "info-card#button-right", + "info-card#button-left", + "flex-layout.row", + "slider-layout#home", + "responsive-layout.desktop#desktop", + "responsive-layout.mobile#mobile", + "tab-layout#home", + "modal-trigger#first" ] }, "rich-text": { "props": { - "text": "VTEX Store Framework", + "text": "Hello World!", "textAlignment": "CENTER", "textPosition": "CENTER", "font": "t-heading-1" } + }, + "info-card#button-right":{ + "props":{ + "isFullModeStyle": false, + "textPosition": "right", + "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png", + "headline": "Vintage Pink", + "subhead": "Give your kitchen a boho style adding vintage apparels.
Available until January 2020.", + "callToActionMode": "button", + "callToActionText": "Explore", + "callToActionUrl": "/sale/d", + "textAlignment": "center" + } + }, + "info-card#button-left":{ + "props":{ + "isFullModeStyle": false, + "textPosition": "left", + "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-cinza-min.png", + "headline": "Shining chrome", + "subhead": "Give your kitchen a cool style adding warm metallic finishes.
Available until January 2020.", + "callToActionMode": "link", + "callToActionText": "Go to Collection", + "callToActionUrl": "/sale/d", + "textAlignment": "center" + } + }, + "flex-layout.row":{ + "children": [ + "info-card#rethink", + "rich-text#deletar" + ] + }, + + "info-card#rethink": { + "props": { + "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/utensilios-cozinha-min.png", + "isFullModeStyle": true, + "headline": "Time to rethink your kitchen", + "callToActionText": "Discover", + "textPosition": "center" + } + }, + + "rich-text#deletar": { + "props": { + "text": "I'll be deleted soon" + } + }, + + "slider-layout#home": { + "children": ["image#brand1","image#brand2","image#brand3","image#brand4","image#brand5","image#brand6"], + "props": { + "autoplay": { + "timeout": 5000, + "stopOnHover": false + } + } + }, + + "image#brand1":{ + "props":{ + "src":"https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square1.png", + "maxHeight":24 + } + }, + "image#brand2":{ + "props":{ + "src":"https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square2.png", + "maxHeight":24 + } + }, + "image#brand3":{ + "props":{ + "src":"https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square3.png", + "maxHeight":24 + } + }, + "image#brand4":{ + "props":{ + "src":"https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square4.png", + "maxHeight":24 + } + }, + "image#brand5":{ + "props":{ + "src":"https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square5.png", + "maxHeight":24 + } + }, + "image#brand6":{ + "props":{ + "src":"https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square6.png", + "maxHeight":24 + } + }, + "responsive-layout.desktop#desktop":{ + "children": ["rich-text#desktop"] + }, + "responsive-layout.mobile#mobile":{ + "children":["rich-text#mobile"] + }, + +"rich-text#desktop": { + "props": { + "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection (I'm on desktop)", + "textPosition": "CENTER", + "textAlignment": "CENTER" + } +}, + +"rich-text#mobile": { + "props": { + "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection (I'm on mobile)", + "textPosition": "CENTER", + "textAlignment": "CENTER" + } +}, +"tab-layout#home":{ + "children":["tab-list#home","tab-content#home"] +}, +"tab-list#home":{ + "children":["tab-list.item#home1","tab-list.item#home2"] +}, +"tab-list.item#home1":{ + "props":{ + "tabId": "majorAppliances", + "defaultActiveTab":true, + "label": "Major Appliances" + } +}, +"tab-list.item#home2":{ + "props":{ + "tabId": "electronics", + "label": "Electronics" + } +}, +"tab-content#home":{ + "children":["tab-content.item#home1","tab-content.item#home2"] +}, +"tab-content.item#home1":{ + "children":["rich-text#home1"], + "props":{ + "tabId": "majorAppliances" + } +}, +"rich-text#home1":{ + "props":{ + "text": "The tab selected is Major Appliances", + "textPosition":"CENTER", + "font":"t-heading-3" + } +}, +"tab-content.item#home2":{ + "children":["rich-text#home2"], + "props":{ + "tabId":"electronics" + } +}, +"rich-text#home2":{ + "props":{ + "text":"The tab selected is Electronics", + "textPosition":"CENTER", + "font":"t-heading-3" + } + +}, +"modal-trigger#first":{ + "children":["rich-text#trigger","modal-layout#first"] +}, +"rich-text#trigger":{ + "props":{ + "text": "Click me" + } +}, +"modal-layout#first":{ + "props":{ + "text":"Hello" } +} + } \ No newline at end of file diff --git a/store/blocks/product.jsonc b/store/blocks/product.jsonc index 544908e..7398d33 100644 --- a/store/blocks/product.jsonc +++ b/store/blocks/product.jsonc @@ -1,7 +1,68 @@ { "store.product": { "children": [ - + "breadcrumb", + "flex-layout.row#main" ] + }, + "flex-layout.row#main":{ + "props": { + "marginTop": 6 + }, + "children":[ + "flex-layout.col#left", + "flex-layout.col#right" + ] + }, + "flex-layout.col#left":{ + "children":[ + "product-images" + ] + }, + "product-images":{ + "props":{ + "displayThumbnailsArrows": true + } + }, + "flex-layout.col#right":{ + "props": { + "preventVerticalStretch": true, + "verticalAlign": "middle" + }, + "children":[ + "product-name", + "product-identifier.product", + "product-price", + "flex-layout.row#qty-sku", + "shipping-simulator", + "buy-button" + ] + }, + "product-name":{ + "props":{ + "showSku":true, + "showBrandName":true + } + }, + "product-price":{ + "props":{ + "showSavings":true, + "showListPrice": true + + } + }, + "flex-layout.row#qty-sku":{ + "children":[ + "sku-selector", + "product-quantity" + ] + + }, + "buy-button": { + "props": { + "isOneClickBuy": true, + "showTooltipOnSkuNotSelected": false + } } -} \ No newline at end of file + +} diff --git a/store/blocks/search-landing.jsonc b/store/blocks/search-landing.jsonc new file mode 100644 index 0000000..a78df8f --- /dev/null +++ b/store/blocks/search-landing.jsonc @@ -0,0 +1,26 @@ +{ + "store.custom#landing":{ + "blocks":[ + "image#landingbanner", + "search-result-layout.customQuery" + ] + }, + "image#landingbanner":{ + "props":{ + "src":"https://storecomponents.vteximg.com.br/arquivos/box.png", + "minWidth": "100%" + } + }, + "search-result-layout.customQuery":{ + "props":{ + "querySchema":{ + "orderByField": "OrderByReleaseDateDESC", + "hideUnavailableItems":true, + "maxItemsPerPage": 8, + "queryField": "Blue Top Retro Camera", + "mapField": "ft" + } + }, + "blocks":["search-result-layout.desktop"] + } +} \ No newline at end of file diff --git a/store/blocks/search.jsonc b/store/blocks/search.jsonc index 9a9e94c..3a57917 100644 --- a/store/blocks/search.jsonc +++ b/store/blocks/search.jsonc @@ -1,7 +1,24 @@ { "store.search": { + "blocks": ["search-result-layout"] + }, + "search-result-layout": { "blocks": [ - + "search-result-layout.desktop", + "search-result-layout.mobile", + "search-not-found-layout" + ] + }, + "search-result-layout.desktop":{ + "children":[ + "breadcrumb.search", + "search-title.v2", + "total-products.v2", + "order-by.v2", + "search-fetch-previous", + "search-content", + "filter-navigator.v3", + "search-fetch-more" ] } } \ No newline at end of file diff --git a/store/routes.json b/store/routes.json new file mode 100644 index 0000000..d6f20c6 --- /dev/null +++ b/store/routes.json @@ -0,0 +1,8 @@ +{ + "store.custom#about-us":{ + "path": "/about-us" + }, + "store.custom#landing":{ + "path":"/landing" + } +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css new file mode 100644 index 0000000..ca0079e --- /dev/null +++ b/styles/css/vtex.rich-text.css @@ -0,0 +1,4 @@ +.paragraph{ + font-weight: 600; + font-style: italic; +} \ No newline at end of file