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.
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.
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:
[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.
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.
- Home.php file will have the vue component,parameters that we want to pass to the component and include script of home.js
- Home.js fill will import the required components and mount with the container
Example code for Widget
<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>
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.
Where to put and How to Put
For example; If you wish to call any API into About Us page then I will goto BYOD editor then open pages/about/about.php file and insert the code as shown below:
As you can see in the above example; in which I have used CURL for PHP language to make an API call to fetch some data from a dummy URL.
There are so many other ways you make an API call which supported by MUVI BYOD and listed below:
- CURL
- XMLHttpRequest (new XMLHttpRequest())
- Fetch (fetch(api call url).then({}))
- Axios (axios.get(), axios.post(), etc.)
- jQuery ($.ajax())
Methods which are allows/supported to use during API integration are: