Skip to content

Feat: WooCommerce-GoDAM Integration#842

Closed
rudrakshi-gupta wants to merge 188 commits into
developfrom
feat/woocommerce-godam-integration
Closed

Feat: WooCommerce-GoDAM Integration#842
rudrakshi-gupta wants to merge 188 commits into
developfrom
feat/woocommerce-godam-integration

Conversation

@rudrakshi-gupta
Copy link
Copy Markdown
Member

This PR introduces Video Commerce Capabilities with GoDAM-WooCommerce Integration by making product videos more interactive, shoppable, and engaging. With this release:

  • Users can now add “Product Hotspots" directly inside interactive video using WooCommerce layer.
  • A Video Shoppable Product Gallery Block is available for creating visually rich, product-linked video grids or carousels.
  • A new Product Story Carousel (Instagram-style) is added to single product pages to showcase short videos.
  • The product gallery now supports both images and videos, ensuring seamless multimedia browsing.

These features work together to improve customer engagement and conversion rates, making it easier for shoppers to view, interact with, and purchase products directly from videos.

Technical Implementation

1. WooCommerce Layer

  • New Layer Type: WooCommerce ( woo ) Layer added in the interactive video layer editor.
  • WooCommerce Product Linking: Dropdown populated with products (via API/local sync).
  • WooCommerce Mini Cart Linking: Attaches WooCommerce Mini Cart Block throughout the video.
  • Metadata: Stores selected Product ID or URL in layer metadata.
  • Frontend Behavior:
    - CTA appears at configured timestamps during video playback.
    - Clicking CTA redirects to product page or uses direct add-to-cart URL.
  • Future Tracking: Structure prepared for CTA interaction analytics.
Screenshot 2025-08-06 at 2 15 47 PM Screenshot 2025-08-06 at 2 16 05 PM

2. GoDAM Product Gallery Block

  • New Gutenberg Block & Shortcode: [godam_product_gallery products="123,124"].
  • Data Fetching: Pulls tagged videos from GoDAM (Product ID/SKU).
  • Display Options:
    - Grid or carousel layout.
    - Different View Ratios of video.
    - Customize different aspects of the block and video.
    - “Buy Now” CTAs and timestamp-based highlights.
  • Enhancements: Responsive design with optimized layouts for mobile and desktop views, mobile-friendly navigation, AJAX add-to-cart functionality, and WooCommerce Mini-Cart support.
Screenshot 2025-08-06 at 2 21 09 PM Screenshot 2025-07-31 at 2 05 34 PM Screenshot 2025-08-06 at 2 24 15 PM

3. GoDAM Single Product Page Story Carousel

  • Story-Style Videos: Short vertical videos uploaded and tagged with Product ID.
  • WooCommerce Hook: Integrated after woocommerce_after_single_product_summary.
  • UI & Features:
    - Swiper.js-powered carousel for a story-like experience.
    - CTA buttons with optional interactive overlays.
  • Enhancements: Responsive design with optimized layouts for mobile and desktop views, mobile-friendly navigation, AJAX add-to-cart functionality, and WooCommerce Mini-Cart support.

4. Featured Video Gallery on single Product Page

  • When GoDAM is enabled, WooCommerce’s product gallery now displays both images and videos.
  • Fully integrated with WooCommerce’s default gallery functionality for a consistent look and feel.
Screenshot 2025-08-06 at 2 41 14 PM

Testing & Compatibility

  • Verified compatibility with major WooCommerce themes.
  • Tested responsiveness across desktop and mobile.
  • Ensured gallery performance with mixed image-video content.
  • Gutenberg blocks comply with WordPress standards.

Attached Issues

Closes: #305, #306, #307, #634

Frontend Screenshots

WooCommerce Layer

Screenshot 2025-08-06 at 2 46 08 PM

GoDAM Product Gallery Block

Screenshot 2025-08-06 at 2 46 34 PM

GoDAM Single Product Page Story Carousel

Screenshot 2025-08-06 at 2 51 59 PM

Featured Video Gallery on single Product Page

Screenshot 2025-08-06 at 2 49 11 PM

Rudrakshi Gupta and others added 30 commits June 23, 2025 13:15
- Add meta box for video gallery
- Style button to match plugin's theme
- Add Vidoe link, delete button and Add products button and style them
- Create Add to Product layer for for selecting the products to which video can be added simultaneously
- Add Attach products to this video layer for displaying the selected products in which videos were attached
- Style the Add products menu
- Style the products and add delete button for products on Selected products section
- Add rest apis for deletion of product and cleanup
- Add SVG in a file and import it
- Perfrom SCSS nesting
- Add aria-labels whereever required
- Fix PHPCS errors
…dded Video carousel at woocommerce_after_single_product_summary hook
…dded 9/16 reels ratio support for video slider
…pdated content of single product modal summary
…pdated content of single product modal summary for mobile
…pdated modal image slider responsiveness
…eplaced modal videos with Godam video player
- Add class for featured video
- Add styles and scripts for frontend to run the featured video
- Add script for admin product page for uploading videos

Feat ##634
- Add Card Size and Mini cart setting to product gallery block
- Style Carousel Layout properly
- Escape, sanitize and internationalize files
- Implement timestamp feature for products in videos in the frontend UI
- Implement a new REST EP for saving timestamp meta with teh video

Feat #306
- Implement admin dashboard changes by adding input field for timestamp and button to watch video
- Implemnt REST APIs for saving timestamp meta and fetching it
- Render timestamped video on fronted on button click using js
- Style timestamped play button
- Add Product URL in CTA
- Resolve CSS glitches on frontend
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Dec 15, 2025

🔍 WordPress Plugin Check Report

⚠️ Status: Passed with warnings

📊 Report

🎯 Total Issues ❌ Errors ⚠️ Warnings
17 0 17

⚠️ Warnings (17)

📁 composer.json (1 warning)
📍 Line 🔖 Check 💬 Message
0 missing_composer_json_file The "/vendor" directory using composer exists, but "composer.json" file is missing.
📁 readme.txt (2 warnings)
📍 Line 🔖 Check 💬 Message
0 mismatched_plugin_name Plugin name "GoDAM - Organize WordPress Media Library & File Manager with Unlimited Folders for Images, Videos & more" is different from the name declared in plugin header "GoDAM".
0 trademarked_term The plugin name includes a restricted term. Your chosen plugin name - "GoDAM - Organize WordPress Media Library & File Manager with Unlimited Folders for Images, Videos & more" - contains the restricted term "wordpress" which cannot be used at all in your plugin name.
📁 inc/classes/media-library/class-media-folder-utils.php (1 warning)
📍 Line 🔖 Check 💬 Message
91 PluginCheck.Security.DirectDB.UnescapedDBParameter Unescaped parameter $where_clause used in $wpdb->get_var($wpdb->prepare(\n\t\t\t\t"\n\t\t\tSELECT COUNT(DISTINCT p.ID)\n\t\t\tFROM {$wpdb->posts} p\n\t\t\tINNER JOIN {$wpdb->term_relationships} tr ON p.ID = tr.object_id\n\t\t\tINNER JOIN {$wpdb->term_taxonomy} tt ON tr.term_taxonomy_id = tt.term_taxonomy_id\n\t\t\tWHERE {$where_clause}\n\t\t",\n\t\t\t\t$query_params\n\t\t\t))\n$where_clause assigned unsafely at line 82:\n $where_clause .= ' AND p.post_mime_type LIKE %s'\n$query_params[] used without escaping.\n$mime_type used without escaping.
📁 assets/build/css/main.css (1 warning)
📍 Line 🔖 Check 💬 Message
0 EnqueuedStylesScope This style is being loaded in all contexts.
📁 assets/src/libs/analytics.min.js (6 warnings)
📍 Line 🔖 Check 💬 Message
0 EnqueuedScriptsScope This script is being loaded in all frontend contexts.
0 NonBlockingScripts.NoStrategy This script on http://localhost:8880 (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
0 NonBlockingScripts.NoStrategy This script on http://localhost:8880/?p=1 (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
0 NonBlockingScripts.NoStrategy This script on http://localhost:8880/?page_id=2 (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
0 NonBlockingScripts.NoStrategy This script on http://localhost:8880/?attachment_id=6 (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
0 NonBlockingScripts.NoStrategy This script on http://localhost:8880/?godam-video=demo-godam-video-post (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead.
📁 assets/build/js/main.min.js (6 warnings)
📍 Line 🔖 Check 💬 Message
0 EnqueuedScriptsScope This script is being loaded in all frontend contexts.
0 NonBlockingScripts.NoStrategy This script on http://localhost:8880 (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.
0 NonBlockingScripts.NoStrategy This script on http://localhost:8880/?p=1 (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.
0 NonBlockingScripts.NoStrategy This script on http://localhost:8880/?page_id=2 (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.
0 NonBlockingScripts.NoStrategy This script on http://localhost:8880/?attachment_id=6 (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.
0 NonBlockingScripts.NoStrategy This script on http://localhost:8880/?godam-video=demo-godam-video-post (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead.

🤖 Generated by WordPress Plugin Check Action • Learn more about Plugin Check

Rudrakshi Gupta added 9 commits December 17, 2025 20:43
- NonPrefixedVariableFound erros
- MissingUnslash error
- slow_db_query_meta_key error
- EnqueuedScriptsScope error
- EnqueuedStylesScope error
- Fix skin CSS in videos for featured video
- Add autoplay feature to featured videos when clicked
- Remove query parameters from the cart url after a product has been added
- Enqueue Page level js files for WooCommerce Layer
- Fix product hotspot poitioning issue in WooCommerece Layer
rtBot

This comment was marked as resolved.

rtBot

This comment was marked as resolved.

Rudrakshi Gupta added 2 commits January 15, 2026 13:39
- Change random value of product attribute from 5 to 8
- Resolve conflicting CSS for video modal sidebar's buttons and links when two or more Gallery block is added on the same page
- Resolve wrong Sidebar issue on Gallery block
- Resolve Timestamped Dropdown video Modal issue with rendering
- Fix shortcode implementation way where play button is not appearing

Refs rtCamp/godam-core#733
rtBot

This comment was marked as resolved.

Rudrakshi Gupta added 5 commits January 22, 2026 16:53
- Fix CSS for modal in mobile view
- Remove redundant code and PHPCS erros
- Fix Video Modal issue in Safari browser
- Fix Issue with Timestamped Video Modals in cloned dropdown
- Fix Issue with Aspect ratio of Videos in the Gallery in mobile and desktop

Refs rtCamp/godam-core#733
@rudrakshi-gupta
Copy link
Copy Markdown
Member Author

This PR is closed due to the new revamped PR - #1617

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants