Page Request - /collections/[collectionSlug]/[slug].vue

[farosFreed]

Page Description

This Page is used to display Collection Items like this one in CraftCMS for 'complex' / dynamic collections on the FTVA website.

Youtube video walkthrough

The page route will be /collections/[collection-slug]/[slug].vue

Design

Please also see attached screenshots for quick reference.

• Desktop & Mobile: https://www.figma.com/file/L8e1czKo8a8px368ayyPZ4?node-id=1088:297&locale=en&type=design

This design will require creating a page layout with a sidebar that is not sticky. It will also require moving the sidebar content into the middle of the main column on mobile.

Suggest we use theTwoColLayoutWStickySidebar component for this + overwrite the sticky styles on the page, but if a better solution is tried and found during implementation, please pitch to the group

Developer Tips

List any developer tips here

1. The GQL query for this page should look like:

#import "../gql/fragments/Image.gql"
query FTVACollectionItem($collectionSlug: [String!], $slug: [String!]) {
  entry(section: "ftvaItemInCollection", slug:$slug ) {
    id
    title
    slug
    sectionHandle
    ftvaAssociatedCollections {
      id
      title
    }
    ftvaImage {
      ...Image
    }
    videoEmbed
    richText
    externalResourceUrl
    
    ftvaDate
    releaseDate
    episodeAirDate
    episodeTitle
    episodeSeason
    episodeNumber
    ftvaCollectionGroup {
      ... on ftvaCollectionGroup_Category {
      	id
        title
      }
    }
    ftvaCollectionTags {
      ... on ftvaCollectionTags_Tag {
        id
        title
      }
    }
    director {
      ... on ftvaLARebellionIndividual_ftvaLARebellionIndividual_Entry {
        nameFirst
        nameLast
      }
    }
    year
    country
    runtime
    associatedIndividuals {
      ... on associatedIndividuals_individual_BlockType {
        individual {
          id
          nameFirst
          nameLast
        }
        roles
      }
    }
  }
  entries(section: "ftvaItemInCollection", relatedToEntries:{section:"ftvaCollection", slug:$collectionSlug}, orderBy: "random()", limit: 4) {
    title
    slug
    ftvaImage {
      ...Image
    }
     videoEmbed
  }
}
}
}

Note: The carousel field will be removed from the craft CMS entry for this type of item, do not include it in the query.

2. The css rules for the blue background at the top of the page will need to be to be added at the page level so that we can edit them for this page without impacting other [slug].vue pages. These current css styles from assets/styles/slug-pages.scss are below:

.page-detail {
  &:before {
    content: '';
    position: absolute;
    background-color: var(--pale-blue);
    aspect-ratio: 1440 / 520;
    max-height: 518px; //prevent overflow on large screens
    min-height: 225px; //prevent too much shrinking on small screens
    width: 100%;
    z-index: -1;
  }

Min-height and max-height might be the only values you need.

3. Include useHead() function to map page title and description to browser page data.
4. Page should show VideoEmbed if its available. If not, use image instead
5. Credits section should only appear when there is data for it

Note: You may need to create an additional basic page template at /collections/[collectionSlug]/index.vue page to allow routes to be crawled. Try completing the ticket without it, but if errors occur during a basic cypress tests, check this option.

Child components

1. <DefinitionList /> new to be created for APPS-3156
2. <ButtonLink /> using FTVA secondary styles
3. <NavBreadcrumb />
4. <CardMeta />
5. <VideoEmbed />
6. <ResponsiveImage />
7. <TwoColLayoutWStickySidebar.vue /> (optional, but might help with mobile layout changes implementation)
8. <RichText />
9. <SectionWrapper /> if needed
10. <SectionTeaserCard /> with edits for 'More from this Topic' section
11. <TableComponent /> newly created for Credits

Screenshots

Screenshots are from Figma, Ignore the tool overlay with the 'ask to edit'

Page w/ Video, no credits

Page w/o Video, w/ credits