[Shopify] feat: support for displaying videos on shopify products

[yuriassuncx]

What is this Contribution About?

Summary

This Pull Request adds support for fetching video data registered in Shopify for a product, allowing information like description, video URL, and preview image to be mapped and structured.

On Shopify, it's possible to add videos to product media. However, Deco.cx did not support this data. With this Pull Request, we have implemented the functionality to capture and display videos associated with products.

Changes Made

1. Added GraphQL fragment for videos

   • Introduced a new fragment to query video-specific data:

     ... on Video {
         alt
         sources {
             url
         }
     }

2. Filtering and mapping videos

   • Implemented logic to filter videos from media.nodes and map them into the appropriate format:

     video: media.nodes.filter((media) => media.mediaContentType === "VIDEO")
       .map((video) => ({
         "@type": "VideoObject",
         contentUrl: "sources" in video ? video.sources?.[0]?.url ?? "" : "",
         description: video.alt ?? "",
         thumbnailUrl: video.previewImage?.url,
       })),

Impact

• Enables access and display of videos registered for products.
• Video data is structured in a JSON-LD format, aligning with SEO best practices.

[github-actions]

Tagging Options

Should a new tag be published when this PR is merged?

• 👍 for Patch 0.64.22 update
• 🎉 for Minor 0.65.0 update
• 🚀 for Major 1.0.0 update

[yuriassuncx]

@IncognitaDev The way sources are accessed with this change implies a check error. Maybe we can revert to the old way to avoid this error?

[IncognitaDev]

sure, but we can use undefined as fallback instead

[yuriassuncx]

sure, but we can use undefined as fallback instead

I fixed it again so that the deno check doesn't complain

[IncognitaDev]

LGTM