Muvi One BYOD

BYOD (Bring Your Own Design)

BYOD is built using a powerful template system that enables designers and developers familiar with CSS, HTML, JS Script to modify the presentation and structure of a website.

With our BYOD feature, you can design your own template for your website in Muvi. BYOD allows you to customize the look and feel of your website for individual customers/users/partners.

How to Use
  • Go to muvi.com and register for MUVI ONE product to take a free trial.
  • Then you will be landed into the Store CMS Dashboard area.
  • Now go to the Website menu >> Manage Template >> Click on Customize button. (as per below screenshot) So it will redirect you to the VD domain.


  • Once you lend into VD domain, It will show you a full website with manually you can modify/update each element of your website’s pages. See below image for your reference:


  • As per above image, We have provided one option (< > Code Editor) where you can click and directly go to the VD code Editor (BYOD) area to manage source code along with you can modify your website template's scripts, HTML, PHP code format for specific files.


Anatomy of a BYOD

The basic file and folder structure of a template is as in the below image.


No Page Name Js file path Php file path
1 404 Page - 404page.php
2 About Us about.js about.php
3 Cast-Details cast-details.js cast-details.php
4 Category category.js category.php
5 Checkout checkout.js checkout.php
6 CheckoutFail checkoutfail.js checkoutfail.php
7 CheckoutSuccess checkoutsuccess.js checkoutsuccess.php
8 Child-Details Child-details.js Child-details.php
9 ContactUs contact-us.js contact-us.php
10 Content content.js content.php
11 Content-Cast-List content-cast-list.js content-cast-list.php
12 FAQ faq.js faq.php
13 Featured-Contents featured-contents.js featured-content.php
14 Geo-Restriction geo-restriction.js geo-restriction.php
15 Home home.js home.php
16 Landing - landing.php
17 PasswordRecovery passwordrecovery.js passwordrecovery.php
18 PasswordSuccess passwordsuccess.js passwordsuccess.php
19 Plan plan.js plan.php
20 Player player.js player.php
21 Player-Lite player-lite.js player-lite.php
22 Playlist-Details playlist-details.js playlist-details.php
23 Playlist-Player - playlist-player.php
24 PlayListing - playlisting.php
25 PPV ppv.js ppv.php7
26 Privacy-Policy privacy-policy.js privacy-policy.php
27 Profile (after login) profile.js profile.php
28 Purchase-History - Purchase_history.php
29 Related-ContentList related-content-list.js related-content-list.php
30 ResetPassword resetpassword.js resetpassword.php
31 SearchResult searchresult.js searchresult.php
32 SignIn signin.js signin.php
33 SignUp signup.js signup.php
34 StaticContent - static-content.php
35 Terms-Condition terms-conition.js terms-condition.php
36 Trailer trailer.js trailer.php

This is how BYOD editor looks like when you land it from the Visual Designer area.


You can use the global variables in any of the view files. Here are all the global variables available for a BYOD template.

  • css: This folder contains all the stylesheet files used for the template.
  • img : This folder contains all types of images used for this template.
  • js: This folder contains all the javascript files used for the template.
  • pages: This folder contains all the view files in html format along with PHP and Vue js component structure wise to load page contents from template that allows you to declaratively bind the rendered DOM to the underlying Vue instance's data and are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
  • widgets: All the basic page elements(Header, Footer, Navigation, Banner, My Profile sections, etc.) are combined into this folder structure to render it dynamically based on individual template wise with separate variants.
  • Apart from all these directories, there are some files which reside outside the main location like; layout.php, layout.js, header.php, footer.php, script.php.

All the view files need to be at the same location as you see in the screenshot.view files provide the base HTML structure that wraps web page content.

layout.js, layout.php file is the file responsible for the backbone of all pages in the website which renders all common stylesheet, JS script to all pages thoroughly.

Requirement

  1. You need to have basic knowledge in smarty. Our template integration is based on smarty.
  2. Bootstrap is essential for customization of Muvi Template.
  3. From a design perspective, Need basic understanding of HTML, CSS, and JavaScript.
  4. More technical background, You need Vue.Js knowledge to import, export, manage components, template parts, etc to modify widgets.

Global Variables

You can use the global variables in any of the view files. Those global variables are also available in two format :

1) PHP format

Here are all the PHP global variables available for a BYOD template which are placed into layout.php file as below:

2) JS format

Here are all the JS global variables available for a BYOD template which are placed into resources/views/assets/js/web-service-url.js file as below:

Layout Structure

  • Template layouts should be directly in the template/default folder,so that any page can use it.
  • If the layout has any components then create a layout.js at the same path and include it in your layout file.


  • There are some global variables which should be initialized in the header of each layout like rootUrl,assetUrl,api_gateway,ashtu_domain_url,ip.And the access token and refresh token will be add in local storage.

  • Inside the head tag there should be a tag <style id="vvvebjs-styles"> which is actually to hold the css customized from the vd application

  • The body-container section inside the body tag must have a class vd-<current_slug> which helps the vd application to add styling per page specific.

  • For all the content of header and footer add it inside header.php and footer.php respectively and its dependent script will be inside layout js.
  • Script.php file directly inside the default folder contains all the default js and css files which will be available to all the pages.

Page Structure

  • Each folder inside the pages folder must have a .php and .js file except 404 page. And each page file(.php and .js) name should be the same with the folder name.

  • Every page content should be inside the div container with one and only property id “app”. Inside the app container there will be no php or javascript functions/variables.

  • Note:You can use $rootUrl for any image src like things.

    The respective page js file will be included after the app container. See the home.js script file as reference.


  • Components which are included inside the page must have an id as identifier.Preferring id format like <slug>_<component_name>_<count>

  • To pass the parameters to the component use the keyword label along with an integer count(like; label1, label2, …).
  • For the components added in the header or footer files should use the class as header or footer respectively.
  • For any static label use the class i18n to the parent container for the multilingual support.
  • For any anchor tag() use the class callByAjax for sticky loading(like; audio player).
  • In the page js file, the component import path will always be relative and start from the folder widgets. For example,

  • Component alias name will always be the same as component name in the import statement and components variable declaration statement.

  • All the required components will be initiated inside components variable objects and will be used inside the Vue.createApp script. For example;

  • If there are no components used inside the page then the js file will contain the below dump script.

Default Pages List (Already Integrated across all templates)

Each template specific we have some common pages which are already integrated and developed from our developer team and you can also find below details for each page.

-> 404 Page

  • Route/URL
  • /404
  • Path
  • pages/404page/404page.php
  • Widgets Used
  • -
  • External Directives/Plugin
  • -
  • API Endpoint Used
  • -

-> About Us

  • Route/URL
  • /about-us
  • Path
  • pages/about/about.js,
    pages/about/about.php
  • Widgets Used
  • -
  • External Directives/Plugin
  • -
  • API Endpoint Used
  • -

-> Cast-Details

  • Route/URL
  • /cast-details/{permalink}
  • Path
  • pages/cast-details/cast-details.js,
    pages/cast-details/cast-details.php
  • Widgets Used
  • cast_banner_one, cast_filmography_one
  • External Directives/Plugin
  • -
  • API Endpoint Used
  • CastDetails / Content : https://developer.muvi.com/api/#api-Content-getCastDetails

-> Category

  • Route/URL
  • /category/{permalink}
  • Path
  • pages/category/category.js,
    pages/category/category.php
  • Widgets Used
  • category_list_one
  • External Directives/Plugin
  • TooltipDirective, vuexStore
  • API Endpoint Used
  • - Menu : frontend/get-menu(VD),
    - isAuthorizedContent (param passed to API is content_uuid) : https://developer.muvi.com/api/#api-Content-isAuthorized

-> Checkout

  • Route/URL
  • /checkout/{sst_token}/{billing_type}
  • Path
  • pages/checkout/checkout.js,
    pages/checkout/checkout.php
  • Widgets Used
  • checkout_one
  • External Directives/Plugin
  • CreditCardFormatDirective, ExpiryFormatDirective, CvcFormatDirective, TooltipDirective
  • API Endpoint Used
  • - checkGateway: gateway/status (VD),
    - getPurchaseDetails: transactions/get-purchase-details (VD),
    - getCardList: https://developer.muvi.com/api/#api-Cards-Cards_List,
    - checkOutOptions: payment/checkout-options,
    - confirmCheckout : payment/confirm-checkout(VD)

-> CheckoutFail

  • Route/URL
  • /checkout-fail
  • Path
  • pages/checkoutfail/checkoutfail.js,
    pages/checkoutfail/checkoutfail.php
  • Widgets Used
  • -
  • External Directives/Plugin
  • -
  • API Endpoint Used
  • -

-> CheckoutSuccess

  • Route/URL
  • /checkout-success
  • Path
  • pages/checkoutsuccess/checkoutsuccess.js,
    pages/checkoutsuccess/checkoutsuccess.php
  • Widgets Used
  • -
  • External Directives/Plugin
  • -
  • API Endpoint Used
  • -

-> Child-Details

-> ContactUs

  • Route/URL
  • /contact-us
  • Path
  • pages/contact-us/contact-us.js,
    pages/contact-us/contact-us.php
  • Widgets Used
  • contact_us_one
  • External Directives/Plugin
  • -
  • API Endpoint Used
  • - contactUs(contactusDetails) : /contactus
    - validateStoreAdminToken : /validateToken

-> Content

-> Content-Cast-List

-> Featured-Contents

-> Geo-Restriction

  • Route/URL
  • -
  • Path
  • pages/geo-restriction/geo-restriction.js,
    pages/geo-restriction/geo-restriction.php
  • Widgets Used
  • -
  • External Directives/Plugin
  • -
  • API Endpoint Used
  • -

-> Home

-> Landing

-> PasswordRecovery

-> PasswordSuccess

-> Plan

-> Player

-> Player-Lite

-> Playlist-Details

-> Playlist-Player

-> PlayListing

  • Route/URL
  • /playlist/{permalink}
  • Path
  • pages/playlisting/playlisting.php
  • Widgets Used
  • playlist-listing-one
  • External Directives/Plugin
  • vuexStore
  • API Endpoint Used
  • -

-> PPV

-> Privacy-Policy

  • Route/URL
  • /privacy-policy
  • Path
  • pages/privacy-policy/privacy-policy.js,
    pages/privacy-policy/privacy-policy.php
  • Widgets Used
  • purchase-history-one
  • External Directives/Plugin
  • -
  • API Endpoint Used
  • -

-> Profile (after login)

-> Purchase-History

-> Related-ContentList

-> SearchResult

-> SignIn

-> SignUp

-> StaticContent

  • Route/URL
  • Dynamically created/appended
  • Path
  • pages/static-content/static-content.php
  • Widgets Used
  • -
  • External Directives/Plugin
  • -
  • API Endpoint Used
  • -

-> Terms-Condition

  • Route/URL
  • /terms-condition
  • Path
  • pages/terms-condition/terms-condition.js,
    pages/terms-condition/terms-condition.php
  • Widgets Used
  • -
  • External Directives/Plugin
  • -
  • API Endpoint Used
  • -

-> Trailer

VD-Node as Elements

VD-Node as Elements

[Attributes]

  • Attributes
  • Description
  • vd-node="logo"
  • This is used to identify the type of vd-node
  • :src="logo.src"
  • This is used for setting url/src from VD
  • :alt="logo.alt"
  • This is used for setting alt/name of logo from VD
  • :style="logo.style"
  • This is used for setting style of logo from VD

[Css]

  • Css
  • Description
  • width/height
  • There will be not any fixed max-width/max-height values as the resize part will handle from VD

[Code logic]

  • Code
  • Description
  • getVdConfig('logo').then((res) => { if (res.data.code == 200 && res.data.data !== null) { this.logo = res.data.data; } }).catch(ex => { console.log(ex); });
  • getVdConfig- Is used to get the changes details from VD like style,src,alt and sets the same to Logo in front end.
    Import getVdConfig from webservices.js , initialize logo variable to null in data return property like logo: null

[Attributes]

  • Attributes
  • Description
  • vd-node="banner"
  • This is used to identify the type of vd-node
  • :style
  • This is used for setting background image or background color from VD like below.
    :style="{'background': banner.type == 'image' ? 'url('+ banner.image_src +')' : banner.image_src }"
    Note-The above condition checks if type is image or solid background color
  • :image-src="banner.image_src"
  • This property is used to hold a src reference to the respective banner
  • :image-alt="banner.image"
  • This is used for setting the name of the banner
  • :id="'banner-'+ banner.id"
  • This is used for setting the id of the banner
  • :type="banner.type"
  • This is used for setting the type of the banner

[Css]

  • Css
  • Description
  • Add this class banner-section-navarrow to the banner section tag
  • Add the banner-section-navarrow class to the banner section like below.
    <section class="banner-section banner-section-navarrow">
    Note- The above class is used for custom directional control of banners from VD.
    Note- There will be not any inline style attached to the banner div as it will not consider from VD

[Code logic]

  • Code
  • Description
  • getVdConfig(this.$attrs['id']).then((res) => { if (res.data.code == 200 && res.data.data.data !== null) { this.allBanner = res.data.data.data; window.carouselSettings = res.data.data.settings; } });
  • getVdConfig- Is used to get the uploaded banner and settings from VD.
    Import getVdConfig from webservices.js , initialize allBanner empty array in data return property like allBanner: []
    window.carouselSettings: Is gets/sets the banner carousel data fromVD

Note- The html design will remain the same for any template.

[Attributes]

  • Attributes
  • Description
  • vd-node="menu"
  • This is used to identify the type of vd-node
  • :href[category]
  • This is used for setting href/link generated from VD
    The href link sets based on the value of link_to attribute as below.
    :href="data.category_permalink" [when v-if="data.link_to == 'web'"] :href="'/'+data.category_permalink" [when v-if="data.link_to == 'page'"] :href="'/category/'+data.category_permalink" [when v-if="data.link_to == 'dynamic'"]
  • :href[sub category]
  • This is used for setting href/link generated from VD
    The href link sets based on the value of link_to attribute as below.
    :href="subCat.category_permalink" [when v-if="subCat.link_to == 'web'"] :href="'/'+subCat.category_permalink" [when v-if="subCat.link_to == 'page'"] :href="'/category/'+subCat.category_permalink" [when v-if="subCat.link_to == 'dynamic'"]
  • :id="data.category_permalink"
  • This is used for setting dynamic id generated from VD
  • link_to
  • This property of categorydetails has 3 values [web,page,dynamic]
    Web- For External link
    Dynamic-For Category
    Page- For page listed in VD
    Ex:- v-if="data.link_to == 'web'"
  • :class
  • This attr is used to append active class from VD
    Like- :class="[activeRoute == data.category_permalink? activeClass:'']"
    Add the below code in the mounted cycle for active class [css changes] sets from VD.
    this.activeRoute = window.location.pathname.split('/')[window.location.pathname.split('/').length - 1]; this.activeClass = "activeClass";
  • :data-subcatID
  • This attr is used for setting sub category id .
    Like- :data-subcatID="subCat.category_name"

[Css]

  • Css
  • Description
  • hoverClass
  • This class is used for hover settings data for Menu
  • vd_submenu_div
  • This class is used for sub category parent div
  • vd_sideheader_a
  • This class is used for anchor [a] tag
  • vd_sideheader_li
  • This class is used for parent li

[Code logic]

  • Code
  • Description
  • getCategoryDetails().then((res) => { if (res.data.code == 200 && res.data.data !== null) { this.categoryDetails = res.data.data.assigned_categories; } }).catch(ex => { console.log(ex); });
  • getCategoryDetails- Is used to get the changes details from VD like style,src,alt and sets the same to Logo in front end.
    Import getVdConfig from webservices.js , initialize categoryDetails empty array in data return property like categoryDetails:[]

[Attributes]

  • Attributes
  • Description
  • vd-node="footer-logo"
  • This is used to identify the type of vd-node
  • :src="footerLogo.src"
  • This is used for setting url/src from VD
  • :alt="footerLogo.alt"
  • This is used for setting alt/name of footer logo from VD
  • :style="footerLogo.style"
  • This is used for setting style of footer logo from VD

[Css]

  • Css
  • Description
  • width/height
  • There will be not any fixed max-width/max-height values as the resize part will handle from VD

[Code logic]

  • Code
  • Description
  • getVdConfig('footer-logo').then((res) => { if (res.data.code == 200 && res.data.data !== null) { this.footerLogo = res.data.data; } }).catch(ex => { console.log(ex); });
  • getVdConfig- Is used to get the changes details from VD like style,src,alt and sets the same to Logo in front end.
    Import getVdConfig from webservices.js , initialize footerLogo variable to null in data return property like footerLogo: null

-> Social Icon

[Attributes]

  • Attributes
  • Description
  • vd-node="socialicon"
  • This is used to identify the type of vd-node
  • vd-name="brandname"
  • This is used for identifying the type of social icon name like.
    Ex- vd-name="twitter"
  • rel=’’”
  • This attribute is used for set target=’_blank’ dynamically.
    ex-rel="noopener noreferrer external"]
    Note- This to be added to all external links/the url that will open in another tab.
    In webservice.js we have a selector to set target blank.
    $(function() { $('a[rel="noopener noreferrer external"]').attr('target', '_blank'); })

Note- The html design will remain the same for template ul>li>a>i structure.

Widget Structure

  • Components/widgets reside in resources/views/widgets directory.

  • When a customer choose a template then the complete widget directory copy to that customers local directory.
  • Components present in the widgets folder have different purposes,functionality and UI.
  • Each component can have different variants,each variant itself a js file.
  • Each component variant file name should be <componentname>-<variantcount>.js.

  • Component variant name always be the same as component variant file name only replace the hyphen with underscore.

  • If the parent component contains any child component, the import path will always be relative and start from the folder widgets.
  • The component template should start and end with vd-component tag.vd-component element will have
    1. class property with value vd and component file name
    2. Type property with value component file name


  • All the labels passed from the pages should be encoded in vd-component-param tag inside the widget with the property v-html and i18n function to support multilingual.

  • Child components which are injected in a parent component will use the parent id along with its own alias and count as an identifier.

  • Child components will take the parameters from the parent component.
  • Frequently used functions file path
    1. resources/views/assets/js/i18n.js have function i18n for language translation.
    2. resources/views/assets/js/webservice-url.js have functions getBaseUrl for apigateway, getRootUrl for url upto customers local directory and getAssetUrl for url upto assets folder.

  • Each component variant should be listed in the respective widget.json file.Widget json file will have the below data.
    1. variant_label:It is like the title/label of the variant.
    2. variant_name:Name of the variant that is added in the js file.
    3. image:image name which is shows the UI of the variant and images are stored in assets/img folder
    4. data:Data contains the json format of all the parameters that are being passed to the component except the id
    5. variable_Data:Except label and id all should be in the variable _data in json format.These are the data which are like variables that we are passing as parameter to the component
    6. description:Description of the variant which is optional
    7. page_tag:This says that for which page this is component is applicable.For all page the value is * and for no page the value is blank ””.
    8. template_tag:This says for which template it is applicable.For all template the value is * .
    9. path:Path value is relative to the widgets folder.
    10. category:Value is static .i.e;“muvi”

New widget adding process

Widget is nothing but a combined script of ui and functionality.If we think the script can be used in more than one page then we will make it as a component/widget which can be reused.

  • Add a folder inside widgets/
  • Put your vue component file in that folder
  • To include the widget to a specific page suppose in the home page, create a home folder inside pages. Add two files inside this, one is home.php and home.js.
    1. Home.php file will have the vue component,parameters that we want to pass to the component and include script of home.js
    2. Home.js fill will import the required components and mount with the container

Example code for Widget

Home.php


                  <div id=”app”>
                   
                  <purchase_history_one
                      label1="Purchase History"
                      label2="Receipt"
                      label3="No data found"
                  /> 
                  </div>
                   
                  <script src="pages/home/home.js" type="module"></script>
                

Home.js


                import purchase_history_one from './../../widgets/purchase-history/purchase-history-one.js';
                Var components={purchase_history_one:purchase_history_one};
                const app = Vue.createApp({
                components:components,
                });
                app.mount("#app ");
                

              

Here purchase-history-one is the widget present in widgets/purchase-history Label1, Label2, Label3, …etc are the variable values passed to the widget.

Declaring widget template

template:

`<vd-component class="vd purchase-history-one" type="purchase-history-one">
<div class="row">  
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
  <h1 class="dashboard-heading white-color mbottom-020">
  <vd-component-param type="label1"> {{ $attrs['label1'] }}</vd-component-param>
</h1>
</div>
</div>
</vd-component>`

Component template should start and end with vd-component tag with

class="<vd component-name>" type=”<component name>”

For example:

<vd-component class=”vd purchase-history-one” type="purchase-history-one">

All variable from page will be get used in widget in below format 


<vd-component-param type="label1">{{ $attrs['label1'] }}</vd-component-param>

How to use any API into Specific page

If you want to use or want to integrate any APIs from MUVI platform or any third party platform into your specific page then you can do it via writing some lines of code into BYOD editor and save that page code. After that you can check the output into your main website via navigating to a particular page.