[Feature Request]: Add "Product details" page

[AkashPaloju]

Is your feature request related to a problem? Please describe.

Currently we don't have the product details page

Describe the solution you'd like

https://www.figma.com/design/5Hs4DlvyJJWjQB9K7Fh0CY/Getit?node-id=930-740&t=1jjSHLWA3KQ7UPHf-0

Add the product details page according to the figma

Describe alternatives you've considered

No response

Developer Help

Refer how the event details page is implemented in Getit

General notes for Developers:

Once you have a good understanding of the issue, you can ask for it to be assigned to you by leaving a comment as follows: Explain clearly how you'd tackle the issue at a minimum, point to which file(s) (mention their links in the repo) you'd modify, and describe the changes you'd make. If creating new files is necessary, specify where you would place them and outline the content you would add to resolve the issue.

If your explanation sounds good, we'll assign the issue to you.

[yashpatil641]

@AkashPaloju I would like to work on the issue i will create a new id.vue file inside the products folder and use tailwind css for styling

1. Size Chart Section and Product Details Section Visible State:

I will use Vue.js reactive data properties to control the visibility of these sections. I will create methods to toggle the visibility state when the respective buttons are clicked. The visibility will be managed using v-if v-show directives in the template.

2. Share Button:

I will implement a share button that copies the current page URL to the clipboard. Will use window.location.href to get link for the page. The button will use the navigator.clipboard.writeText API to copy the URL. And show a pop-up notifying the user that url has been copied.

I will fetch data from backend for images and details. Will add carousel for more images of product. For more products section i will import merchcard component.

[AkashPaloju]

This time , as this is a hard issue, please incude how you'd implement/handle the "Size chart section" , "Product Details section" visible state, how you'd put the correct link in the share(/icon) button (you need to put the current page url in the button and it should be copied to the user's clipboard when clicked)

[blazethunderstorm]

@AkashPaloju i would like to work on this issue i would use vue icons to add desirable icons in buttons and would tailwind.css for further css, for size i woul pass a list and allow user to chose from it using radio andn for product detail i will create an accordian

[blazethunderstorm]

1) For share i would pass on click on it , for size chart i can create a drop down (v-show) using list

2) For product detail section as a mentioned i would create an accordian (by its bool value)

3) For copying i would use javascript's window location to get its url , then this button will use the navigator.clipboard.writeText API to copy the URL. And show a pop-up notifying the user that url has been copied

4) Add to cart/buy now should redirect to their page respectively

5) For image for carousel and others i would fetch data from backend

[ShashaankS]

@AkashPaloju I would like to work on this issue, I will be implementing dynamic visibility toggles for the "Size Chart" and "Product Details" sections using Vue.js. Utilize Vue's v-show directive or a drop-down to toggle visibility based on user's click. For share button that will copy to clipboard the current url of the webpage to generate correct product URLs dynamically. Fetch product data from Django backend via API calls and related products as well.

[Kushdapush]

ok, we will go forward with @ShashaankS this time.

[AkashPaloju]

Just a note, if a PR is not created within a reasonable time(depends on difficulty level), we will unassign the assignee. Thanks!

[Kushdapush]

Also feel free to ask any doubts or for help