challenge-vtex-io-thiago-bronisio/store/blocks/pdp/product.jsonc

{
  "store.product": {
    "children": [
      "html#breadcrumb",
      "condition-layout.product#availability",
      "tab-layout#description",
      "list-context.product-list#prateleira",
      "newsletter-form#container-newsletter"
    ]
  },

/*
  BREADCRUMB
*/
  "html#breadcrumb": {
    "props": {
      "tag": "section",
      "testId": "breadcrumbs",
      "blockClass": "pdp-breadcrumb"
    },
    "children": ["breadcrumb"]
  },

/*
  IMAGEM DO PRODUTO PRINCIPAL, E CARROUSEL DE IMAGENS DO PRODUTO
*/
"condition-layout.product#availability": {
  "props": {
  "blockClass": "availability",
    "conditions": [
      {
        "subject": "isProductAvailable"
      }
    ],
    "Then": "flex-layout.row#product-main",
    "Else": "flex-layout.row#product-availability"
  }
},
"flex-layout.row#product-main": {
  "props": {
    "blockClass":"main"
  },
  "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
},

"stack-layout": {
  "props": {
    "blockClass": "product"
  },
  "children": [
    "flex-layout.row#product-image",
    "product-bookmark",
    "product-specification-badges"
  ]
},

"product-specification-badges": {
  "props": {
    "specificationGroupName": "Group",
    "specificationName": "On Sale",
    "visibleWhen": "True",
    "displayValue": "SPECIFICATION_NAME"
  }
},

"flex-layout.col#stack": {
  "children": ["stack-layout"],
  "props": {
    "blockClass": "stack",
    "width": "50%",
    "rowGap": 0
  }
},
"flex-layout.row#product-image": {
  "children": ["product-images"]
},
"product-images": {
  "props": {
    "thumbnailsOrientation": "horizontal",
    "showPaginationDots": false,
    "showNavigationArrows": false,
    "aspectRatio": {
      "desktop": "auto",
      "phone": "auto"
    },
    "displayThumbnailsArrows": true
  }
},

/*
  DESCRIÇÃO DO PRODUTO SELECIONADO (TAB-LAYOUT#DESCRIPTION)
*/
"html#container-description": {
  "props": {
    "tag": "div",
    "blockClass": "container-description"

  },
  "children": ["flex-layout.row#product-description"]
},

  "flex-layout.row#product-description": {
    "props": {
      "blockClass": "product-description"
    },
    "children": ["html#image-description", "flex-layout.row#description"]
  },

  "html#image-description":{
    "props": {
      "tag": "div",
      "testId": "product-images",
      "blockClass": "image-description"
    },
    "children": ["image#product"]
  },

  "image#product": {
    "props": {
      "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true"
    }
  },

  "flex-layout.row#description": {
    "children": ["product-description"]
  },


  "tab-layout#description": {
    "children": ["tab-list#description", "tab-content#description"],
    "props": {
      "blockClass": "description",
      "defaultActiveTabId": "descricao1"
    }
  },

  "tab-list#description": {
    "children": [
      "tab-list.item#descricao1",
      "tab-list.item#descricao2",
      "tab-list.item#descricao3",
      "tab-list.item#descricao4",
      "tab-list.item#descricao5"
    ]
  },

  "tab-list.item#descricao1": {
    "props": {
      "tabId": "descricao1",
      "label": "Descrição",
      "defaultActiveTab": true
    }
  },

  "tab-list.item#descricao2": {
    "props": {
      "tabId": "descricao2",
      "label": "Descrição"
    }
  },

  "tab-list.item#descricao3": {
    "props": {
      "tabId": "descricao3",
      "label": "Descrição"
    }
  },

  "tab-list.item#descricao4": {
    "props": {
      "tabId": "descricao4",
      "label": "Descrição"
    }
  },

  "tab-list.item#descricao5": {
    "props": {
      "tabId": "descricao5",
      "label": "Descrição"
    }
  },

  "tab-content#description": {
    "children": [
      "tab-content.item#descricao1",
      "tab-content.item#descricao2",
      "tab-content.item#descricao3",
      "tab-content.item#descricao4",
      "tab-content.item#descricao5"
    ]
  },

  "tab-content.item#descricao1": {
    "children": ["html#container-description"],
    "props": { "tabId": "descricao1" }
  },

  "tab-content.item#descricao2": {
    "children": ["html#container-description"],
    "props": { "tabId": "descricao2" }
  },

  "tab-content.item#descricao3": {
    "children": ["html#container-description"],
    "props": { "tabId": "descricao3" }
  },

  "tab-content.item#descricao4": {
    "children": ["html#container-description"],
    "props": { "tabId": "descricao4" }
  },

  "tab-content.item#descricao5": {
    "children": ["html#container-description"],
    "props": { "tabId": "descricao5" }
  },

/*
  PRATELEIRA DE PRODUTOS QUE QUE O CLIENTE PODE GOSTAR
*/
  "list-context.product-list#prateleira": {
    "blocks": ["product-summary.shelf#prateleira"],
    "children": ["rich-text#prateleira","slider-layout#prateleira"]
  },

  "product-summary.shelf#prateleira": {
    "children": [
      "stack-layout#prodsum",
      "product-summary-name",
      "product-list-price",
      "product-selling-price"
    ]
  },

  "rich-text#prateleira": {
    "props": {
      "textAlignment": "CENTER",
      "textPosition": "CENTER",
      "text": "Você também pode gostar:",
      "blockClass": "title-prateleira"
      }
  },

  "slider-layout#prateleira": {
    "props": {
      "itemsPerPage": {
        "desktop": 4,
        "tablet": 3,
        "phone": 1
      },
      "infinite": true,
      "fullWidth": false,
      "blockClass": "prateleira"
    }
  },

  /*
    NEWSLETTER
  */
  "newsletter-form#container-newsletter": {
    "props": {
      "blockClass": "container-newsletter"
    },

    "children": [
      "rich-text#subscriber-newsletter",
      "rich-text#offer-newsletter",
      "html#container-form-input"
    ]
  },

  "rich-text#subscriber-newsletter": {
    "props": {
      "blockClass": "subscriber-newsletter",
      "textAlignment": "center",
      "textPosition": "CENTER",
      "text": "Assine nossa newsletter"
    }
  },

  "rich-text#offer-newsletter": {
    "props": {
      "blockClass": "offer-newsletter",
      "textAlignment": "center",
      "textPosition": "CENTER",
      "text": "Receba ofertas e novidades por e-mail"
    }
  },
  "html#container-form-input": {
    "props": {
      "blockClass": "container-form-input"
    },
    "children": ["newsletter-input-email", "newsletter-submit"]
  },

  "newsletter-input-email": {
    "props": {
      "placeholderText": "Digite seu e-mail"
    }
  },
  "newsletter-submit": {
    "props": {
      "submitButtonLabel": "Enviar"
    }
  },

  /*
    INFORMAÇÕES DO PRODUTO (NOME, ID, PREÇO, PARCELA, CORES, TAMANHOS ETC..)
  */
  "flex-layout.col#right-col": {
    "props": {
      "blockClass": "right-col",
      "preventVerticalStretch": true,
      "rowGap": 0
    },
    "children": [
      "flex-layout.row#product-name",
      "product-identifier.product",
      "flex-layout.row#selling-price",
      "product-installments#parcelaProduct",
      "pix-discount",
      "availability-subscriber",
      "sku-selector",
      "html#buy-button",
      "shipping-simulator"
    ]
  },

  "flex-layout.row#product-name": {
    "props": {
      "marginBottom": 3
    },
    "children": ["vtex.store-components:product-name"]
  },

  "product-installments#parcelaProduct": {
    "props": {
      "installmentsCriteria": "max-quantity-without-interest",
      "markers": ["discount", "x"],
      "blockClass": "divider",
      "message": "{installmentsNumber} <x>x</> <discount>de</discount> {installmentValue} <discount>sem juros</discount>"
    }
  },

  "sku-selector": {
    "props": {
      "blockClass": "sku-selector",
      "imageHeight": 40,
      "imageWidth": 40,
      "variationsSpacing": 3,
      "showValueNameForImageVariation": true
    }
  },

  "html#buy-button": {
    "props": {
      "tag": "div",
      "testId": "buy-button",
      "blockClass": "buy-button"
    },
    "children": ["product-quantity","add-to-cart-button"]
  },

  /*
    ASSINANTES DE PRODUTOS INDISPONIVEIS
  */
  "flex-layout.row#product-availability": {
    "props": {
      "blockClass": "product-availability"
    },
    "children": [
      "flex-layout.col#stack",
      "flex-layout.col#right-col-availability"
    ]
  },
  "flex-layout.col#right-col-availability": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0,
      "blockClass": "info-availability"
    },
    "children": [
      "flex-layout.row#product-name",
      "product-identifier.product",
      "flex-layout.row#availability",
      "sku-selector"
    ]
  },
  "flex-layout.row#availability": {
    "props": {
      "blockClass": "message-availability"
    },
    "children": ["availability-subscriber"]
  }

}