EDU-135: Product details for all the frameworks #3948
Conversation
|
uttej-vsk
changed the title
️✅ There are no secrets present in this pull request anymore.If these secrets were true positive and are still valid, we highly recommend you to revoke them. 🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request. |
|
View your CI Pipeline Execution ↗ for commit caf9dab.
☁️ Nx Cloud last updated this comment at |
| fetchOneEntry({ | ||
| model: 'product-details', | ||
| apiKey: 'ee9f13b4981e489a9a1209887695ef2b', | ||
| query: { 'data.handle': 'jacket' }, |
There was a problem hiding this comment.
you resolved this but it's still a static 'jacket'
|
|
||
| <script setup lang="ts"> | ||
| import { ref, onMounted } from 'vue' | ||
| import { fetchOneEntry, typeBuilderContent } from '@builder.io/sdk-vue' |
There was a problem hiding this comment.
typeBuilderContent is a typo causing the snippet to crash and not build at all.
| import { fetchOneEntry, typeBuilderContent } from '@builder.io/sdk-vue' | |
| import { fetchOneEntry, type BuilderContent } from '@builder.io/sdk-vue' |
| <div v-if="!productDetails"> | ||
| <p>Loading product details...</p> | ||
| </div> | ||
| <div class="product-details-page" v-else> | ||
| <h1>{{ productDetails.data?.['name'] }}</h1> | ||
| <img | ||
| :src="productDetails.data?.['image']" | ||
| :alt="productDetails.data?.['name']" | ||
| /> | ||
| <p>{{ productDetails.data?.['collection'].value.data.copy }}</p> | ||
| <p>Price: {{ productDetails.data?.['collection'].value.data.price }}</p> | ||
| </div> |
There was a problem hiding this comment.
productDetails.data?.['name'] syntax is only needed in Angular projects. It is rather ugly so let's not use it if we don't need to?
Also, if you have the v-if check on productDetails?.data, kinda like you did in packages/sdks/snippets/nuxt/pages/product/category/[handle].vue, you can remove all the ?.:
| <div v-if="!productDetails"> | |
| <p>Loading product details...</p> | |
| </div> | |
| <div class="product-details-page" v-else> | |
| <h1>{{ productDetails.data?.['name'] }}</h1> | |
| <img | |
| :src="productDetails.data?.['image']" | |
| :alt="productDetails.data?.['name']" | |
| /> | |
| <p>{{ productDetails.data?.['collection'].value.data.copy }}</p> | |
| <p>Price: {{ productDetails.data?.['collection'].value.data.price }}</p> | |
| </div> | |
| <div v-if="!productDetails?.data"> | |
| <p>Loading product details...</p> | |
| </div> | |
| <div class="product-details-page" v-else> | |
| <h1>{{ productDetails.data.name }}</h1> | |
| <img | |
| :src="productDetails.data.image" | |
| :alt="productDetails.data.name" | |
| /> | |
| <p>{{ productDetails.data.collection.value.data.copy }}</p> | |
| <p>Price: {{ productDetails.data.collection.value.data.price }}</p> | |
| </div> |
this is much cleaner overall
Description
This PR adds the code for Product Details for all the frameworks.
@samijaber This is part 2 of our new strategy to use two PRs, one for a single framework to talk about changes and another to replicate the feedback and finish off the ticket.
Part 1 PR: #3946