README

mhinspeya/mhinspeya-hyva-videoshopping — Magento 2 / Hyvä module for live and recorded video shopping.

Customers can watch live or recorded product videos, shop featured products from the video, add items to cart, chat during live streams, and add live events to their calendar.

Requirements
Features
Installation
Configuration
Backend usage
Frontend usage
Cron
Frontend routes & APIs
Database tables
Slider breakpoints
ACL
Post-install commands

Requirements

Dependency	Notes
Magento 2.4.x	Tested with Magento 2.4.8
Hyvä Theme	Frontend templates use Hyvä ViewModels, Alpine.js, Splide
`mhinspeya/backend-mod`	Required (`composer.json`) for admin menu / tab support

Features

Storefront (Frontend)

Video Shopping home — Live video hero blocks + recorded video Splide carousel
Live videos — Schedule display, “Watch Video”, “Remind me” (ICS calendar download)
Recorded video slider — Responsive carousel with Watch Video CTAs
Video detail page — Embedded video player with shoppable products
Timed product reveal — Products appear based on start/end timeframe (seconds in the video)
Add to cart — Single product or bulk add from the video page
Configurable options / swatches — Size/color selection on video products
Live chat — Save and fetch chat messages during live sessions
Complete the look — Similar products (optional Picalike integration)
Theme colors — Primary / button colors from admin config (CSS variables)
Store-scoped content — Videos filtered by store view
Module enable/disable — Storefront respects Module Enable config

Admin (Backend)

Manage Videos — Create, edit, enable/disable, mass delete
Assign products — Link catalog products with position and timeframes
Video image upload — Thumbnail / cover image
Live flag — Mark video as live; cron auto-disables after end date
Horizontal video — Orientation option for player layout
Influencer — Optional influencer assignment
Sort order & multi-store — Control display order and store visibility
Similar products grid — Manage Video Shopping Similar Products
System configuration — Labels, colors, Picalike settings
REST API — CRUD endpoints for videos

Installation

Option 1: App code (Zip / copy)

Place the module in app/code/MHinspeya/VideoShopping
Enable and upgrade:

php bin/magento module:enable MHinspeya_VideoShopping
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Option 2: Composer

composer require mhinspeya/mhinspeya-hyva-videoshopping
php bin/magento module:enable MHinspeya_VideoShopping
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

In production, prefer setup:upgrade --keep-generated only when appropriate for your deploy flow.

Sample data

Data patch installs 10 demo videos into videoshopping_grid_videoshopping:

Type	Count	Frontend
Live (`live_check=1`)	4	Live / hero section
Recorded (`live_check=0`)	6	Inspired slider

Patch: Setup/Patch/Data/AddVideoShoppingSampleData.php
Images: files/sample/images/vs_sample_01.jpg … vs_sample_10.jpg → pub/media/faq/tmp/logo/
Meaningful fashion titles + descriptions included

Runs automatically on setup:upgrade. Sample rows use logos named vs_sample_*.jpg for easy cleanup.

Configuration

Admin path:
Stores → Configuration → MHinspeya → VideoShopping Configuration
(or MHinspeya → VideoShopping → Configuration)

Section ID: videoShopping_tab

1. General

Field	Path	Default	Description
Module Enable	`videoShopping_tab/general/enable`	Yes (`1`)	Enables/disables Video Shopping on the storefront

2. Frontend Labels

Field	Path	Default	Description
Inspired Heading	`videoShopping_tab/frontend_labels/inspired_heading`	`Get inspired and shop right away!`	Heading above the recorded video slider on the home block
Complete the Look Heading	`videoShopping_tab/frontend_labels/complete_look_heading`	`Complete the look`	Heading above similar products on the video detail page

3. Colors

Field	Path	Default	Description
Primary Color	`videoShopping_tab/colors/primary_color`	`#76b729`	Active product highlight (sidebar / selected tile)
Button Primary Color	`videoShopping_tab/colors/button_color`	`#000000`	Primary button background (Watch Video, Add to Cart, etc.)
Button Hover Color	`videoShopping_tab/colors/button_hover_color`	`#76b729`	Button hover background
Button Text Color	`videoShopping_tab/colors/button_text_color`	`#ffffff`	Button text color

Colors are applied via CSS variables:

--vs-primary
--vs-btn-bg
--vs-btn-hover
--vs-btn-text

4. Picalike-Configuration (similar products)

Field	Path	Default	Description
Activate Picalike	`videoShopping_tab/video_picalike_configuration/general`	No (`0`)	Enable Picalike similar products
Picalike URL	`.../video_picalike_url`	—	Picalike API URL
Picalike key	`.../video_picalike_key`	—	Picalike API key
Product limit	`.../video_product_limit`	`8`	Max similar products to show

Backend usage

Admin menu

MHinspeya → VideoShopping

Menu item	Purpose
Manage Videos	Create and manage live/recorded videos
Video Shopping Similar Products	Manage similar-product mappings
Configuration	Opens system config section

Create / edit a video

Go to MHinspeya → VideoShopping → Manage Videos
Click Add New
Fill General:

Field	Required	Notes
Title	Yes	Display title
Enable Video	—	Toggle status (enabled/disabled)
Url	Yes	Video URL (stream / embed source)
Influencer	No	Optional influencer select
Start Date	Yes	Schedule start (date + time)
End Date	Yes	Schedule end (date + time); used by live cron
Live	No	Mark as live shopping event
Horizontal Video	No	Use horizontal player layout
Video Image	Yes	Cover / thumbnail image
Description	No	Shown on home / slider cards
Select Stores	Yes	Store view(s) where video is visible
Sort Order	Yes	Numeric display order

Open Add products:
- Select catalog products to feature in the video
- Set position for display order
- Set start timeframe / end timeframe (seconds) so products appear while the video plays
Save

Manage Videos grid

Columns include: ID, Video Image, Title, Url, Start Date, End Date, Status, Store View, Actions.
Supports filters, inline edit (where enabled), and mass delete.

Live status automation

When Live is checked, the video appears in the live section on the home block (while within schedule).
Cron job mhinspeya_videoshopping_update_live_status runs every 5 minutes and turns off live_check when end_date has passed (using the video’s Magento store timezone).

Frontend usage

Pages & URLs

Page	URL	Template
Video listing	`/videoshopping/index/videoshopping`	Layout: `videoshopping_index_videoshopping.xml`
Video detail	`/videoshopping/index/videoshop?videoshopping_id={id}`	`video_view_page.phtml`
Home / CMS block	CMS layout or custom block	`video_home_page.phtml`

Add home block to any CMS page

Option A — CMS content directive (recommended)

Open Content → Pages (or Content → Blocks)
Edit the page/block where you want Video Shopping
In the content (HTML / Page Builder HTML), add:

{{block class="Magento\Framework\View\Element\Template" template="MHinspeya_VideoShopping::video_home_page.phtml"}}

Save

The CMS block is an AJAX shell only. Live/recorded videos and system config (enable, headings, colors) load from videoshopping/index/homecontent with no-cache headers, so admin changes appear without flushing FPC/CMS cache.

Option B — Layout Update XML

CMS page → Design → Layout Update XML (or theme layout):

<referenceContainer name="content">
    <block class="Magento\Framework\View\Element\Template"
           name="mhinspeya.videoshopping.home"
           template="MHinspeya_VideoShopping::video_home_page.phtml"/>
</referenceContainer>

Do not use cacheable="false" — pages stay LiteMage/FPC cacheable. Fresh videos and system config always load via AJAX.

Home page behavior (`video_home_page.phtml`)

If module is disabled → shows “Video Shopping is currently unavailable.”
Live videos — Hero row with image, title, description, Watch Video, schedule, Remind me (ICS)
Recorded videos — Splide slider under the Inspired Heading
Theme CSS variables applied from Colors config

Video detail page behavior (`video_view_page.phtml`)

Rendered fully on the server (not AJAX). Hyvä product Alpine, swatches, and the Vimeo player need a normal page load.

Loads video by videoshopping_id
Plays video and shows assigned products
Products can reveal by timeframe during playback
Add to cart / get price via AJAX controllers
Live chat (save/fetch) when applicable
Similar products (“Complete the look”) when Picalike is enabled

With LiteMage, exclude /videoshopping/index/videoshop* if this page must always show the latest admin data without a cache purge. The home/CMS Video Shopping block stays AJAX-based and does not need that.

ICS reminder

“Remind me” posts to videoshopping/Index/Icsdownload and downloads a .ics calendar file for the live event.

Cron

Job name	Class	Schedule	Purpose
`mhinspeya_videoshopping_update_live_status`	`MHinspeya\VideoShopping\Cron\UpdateLiveStatus`	`/5 * * *`	Disable Live when `end_date` has passed (store timezone)

Ensure Magento cron is running:

php bin/magento cron:run

Frontend routes & APIs

Storefront controllers (`frontName`: `videoshopping`)

Path	Purpose
`videoshopping/index/videoshopping`	Video listing page
`videoshopping/index/videoshop`	Video detail page (full server render)
`videoshopping/index/homecontent`	Uncached AJAX HTML for home/CMS (videos + system config)
`videoshopping/index/addtocart`	Add product(s) to cart
`videoshopping/index/getproductprice`	Resolve product price (options)
`videoshopping/index/savechat`	Save live chat message
`videoshopping/index/fetchchat`	Fetch live chat messages
`videoshopping/Index/Icsdownload`	Download ICS reminder
`videoshopping/index/index`	Like / interaction handler

REST API

Method	Endpoint	Service
POST	`/V1/videoshopping-grid/videoshopping`	Save
GET	`/V1/videoshopping-grid/videoshopping/search`	List / search
GET	`/V1/videoshopping-grid/videoshopping/:videoshoppingId`	Get by ID
PUT	`/V1/videoshopping-grid/videoshopping/:videoshoppingId`	Update
DELETE	`/V1/videoshopping-grid/videoshopping/:videoshoppingId`	Delete

Database tables

Table	Purpose
`videoshopping_grid_videoshopping`	Video entities (title, URL, schedule, live, products, stores, etc.)
`Position_ProductGrid`	Product position & timeframe per video
`mhinspeya_videoshopping_videoshoppingproductgrid`	Similar products grid data
`videoshopping_grid_like`	Video likes / interactions
`cs_chat`	Live chat messages

Slider breakpoints

Recorded video home slider (videoslider/recorded-video-slider-php.phtml) uses Splide (max-width breakpoints):

Viewport	Items (`perPage`)
Default (> 991px)	4
≤ 991px	3
≤ 567px	1

ACL

Resource	Title
`MHinspeya_VideoShopping::VideoShopping`	VideoShopping menu
`MHinspeya_VideoShopping::index`	Manage Videos
`MHinspeya_VideoShopping::productgrid`	Video Shopping Similar Products
`MHinspeya_VideoShopping::contentconfig`	VideoShopping Configuration (Stores → Config)

Post-install commands

After config or template changes:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

For Hyvä / Alpine template-only changes, cache:flush is often enough in developer mode.

Key files

Area	Path
System config	`etc/adminhtml/system.xml`, `etc/config.xml`
Config helper	`Helper/Configdata.php`
Home template	`view/frontend/templates/video_home_page.phtml`
Detail template	`view/frontend/templates/video_view_page.phtml`
Slider config	`view/frontend/templates/videoslider/recorded-video-slider-php.phtml`
Slider item	`view/frontend/templates/videoslider/recorded-video-slider-item.phtml`
Admin form	`view/adminhtml/ui_component/videoshopping_grid_videoshopping_form.xml`
Live status cron	`Cron/UpdateLiveStatus.php`
ViewModel	`ViewModel/RecordedVideo.php`

Support

Homepage: https://inspeya.com
Package: mhinspeya/mhinspeya-hyva-videoshopping
License: OSL-3.0

mhinspeya / mhinspeya-hyva-videoshopping

Maintainers

Package info

Statistics

Security