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.
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.
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.
You can use the global variables in any of the view files. Those global variables are also available in two format :
Here are all the PHP global variables available for a BYOD template which are placed into layout.php file as below:
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:
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.
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.
Note- The html design will remain the same for any template.
Note- The html design will remain the same for template ul>li>a>i structure.
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.
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.
template:
`<vd-component class="vd purchase-history-one" type="purchase-history-one">
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
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.
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:
Methods which are allows/supported to use during API integration are:
Reach out to Muvi at:
