CSS Archives - My Silly Point of View https://mysillypointofview.com it's my blog anyway Mon, 11 May 2020 16:00:21 +0000 en-US hourly 1 https://wordpress.org/?v=5.9.13 13951596 How to add Magento blocks, CSS and Javascript to an external site https://mysillypointofview.com/2010/07/03/how-to-add-magento-blocks-css-and-javascript-to-an-external-site/ https://mysillypointofview.com/2010/07/03/how-to-add-magento-blocks-css-and-javascript-to-an-external-site/#comments Sat, 03 Jul 2010 00:01:40 +0000 http://mysillypointofview.richardferaro.com/?p=535 You might have a Magento based website running online and wanted to extend parts of it (also known as blocks, which may include some css and js in the code) to an external site which may either be a blog, another CMS or any other PHP based web application. If you have been following my […]

The post How to add Magento blocks, CSS and Javascript to an external site appeared first on My Silly Point of View.

]]> You might have a Magento based website running online and wanted to extend parts of it (also known as blocks, which may include some css and js in the code) to an external site which may either be a blog, another CMS or any other PHP based web application. If you have been following my previous posts, you will know that by adding the Mage.php file of your Magento instance to your application, you can actually pull the needed HTML blocks at any time. The only problem is that most of the examples available online asks you to use the getChildHtml(‘your-block-here’) in which most the time frustrates you because of its complexity and limited resources of how you can actually use it. You may not know that most of the secured casino websites like Daisy slots used Magento blocks.

There are other ways of doing it. Oddly enough, some are pretty simple and straight forward.

We will use a single HTML file which will serve as our ‘external’ site. The source code of our index.php is shown below:

<html>
  <head>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Josefin Sans Std Light', 'Lobster' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>
    <style type="text/css">
      .wf-active p.text {
        font-family: 'Calibri', serif;
		font-size: 16px;
		text-align: justify;
		color:#666666;
		border: 1px solid #CCCCCC;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		padding: 20px
      }

	  .wf-active h2 {
	  	font-family: 'Lobster', serif;
        font-size: 20px;
		color: #666666
      }

      .wf-active h1 {
        font-family: 'Lobster', serif;
        font-size: 45px;
		color: #006699;
		margin-bottom: 10px;
      }

	  div.body {
	  	max-width: 850px;
		margin: auto;
		background-color: #FFFFFF;
		padding: 30px 50px 0px 50px;
		text-align: left;
		height: 60%;
	  }

	  p.bugs {
	  	font: 12px/1.55 Arial,Helvetica,sans-serif;
		text-align: center;
	  }

	  p.otherdata {
	  	font-family: 'Calibri', serif;
		font-size: 15px;
		color: #999999;
		margin-bottom: 20px
	  }

	  .otherdata strong {
	  	color: #000000
	  }
    </style>
  </head>
  <body>
  	<div class="body">
		<h1>How to add Magento blocks, CSS and Javascript to an external site</h1>
		<p class="otherdata">Written by <strong>Richard Feraro</strong> | Posted on <strong>July 2, 2010</strong></p>
		<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a quam massa. Nullam eget erat metus. Sed vel justo enim. Proin rhoncus laoreet bibendum. Nullam eget est nisi. In eget sem in erat sodales bibendum. Morbi gravida augue sed felis tincidunt a congue dui placerat. Aliquam purus risus, mollis sed ullamcorper non, viverra eu odio. Suspendisse nibh nisi, suscipit at viverra eu, convallis ac odio. Morbi nec sapien eros. Suspendisse nec nulla erat, ac porttitor neque. Integer felis dolor, sollicitudin sed semper et, imperdiet nec turpis. Proin blandit luctus egestas. </p>
	</div>
  </body>
</html>


The code above shall produce a page like the one in the screenshot below.


Our Sample External Page


We’ll start editing at the beginning of the file by adding a require_once() for our Mage.php file.


// Your Magento Mage.php
// Mage Enabler WordPress plugin users may
// skip these lines
require_once ("/your/magento/app/Mage.php");
umask(0);
Mage::app("default");


Proceed with adding the if(class_exists('Mage')){...} which encloses our Magento scripts to prevent the site from breaking if in case the Mage object failed to be instantiated. Check the inline comments for more details.


// Make sure to execute this block of code
// only if Mage object is present
if(class_exists('Mage')){
	// Instantiate session and generate needed cookie
	Mage::getSingleton('core/session', array('name' => 'frontend'));
	$Block = Mage::getSingleton('core/layout');

	// Start pulling the blocks
	$head = $Block->createBlock('Page/Html_Head');
	// Add default css
	// Magento adds the default skin directory
	// 'skin/frontend/default/default' before 'css/styles.css'
	// making it look like the URL below:
	// http://localhost/magento/skin/frontend/default/default/css/styles.css
	$head->addCss('css/styles.css');
	// Add Prototype JS file
	// Note that it automatically adds the 'js' directory at the beginning
	// making it look like the URL below:
	// http://localhost/magento/js/prototype/prototype.js
	$head->addJs('prototype/prototype.js');

	// Get the header's HTML
	$header = $Block->createBlock('Page/Html_Header');
	$header->setTemplate('page/html/header.phtml');

	// And the footer's HTML as well
	$footer = $Block->createBlock('Page/Html_Footer');
	$footer->setTemplate('page/html/footer.phtml');
}


That’s it. The codes above will generate the Magento session, the 3 blocks for CSS/JS (which uses the default skin of Magento and adds the Prototype JS file) and the HTML tags for the header and footer.


To use the blocks, insert the CSS/JS block right before the end tag of </HEAD>:


	&amp;amp;amp;lt;?php
		// Display the needed tags for CSS and JS
		echo (class_exists('Mage')) ? $head-&amp;amp;amp;gt;getCssJsHtml() : '' ;
	?&amp;amp;amp;gt;
&amp;amp;amp;lt;/head&amp;amp;amp;gt;


Proceed by adding the Magento header block right after the <BODY> tag but before the <DIV> tag.


&amp;amp;amp;lt;body&amp;amp;amp;gt;
  	&amp;amp;amp;lt;?php
		// Display the Header HTML
		echo (class_exists('Mage')) ? $header-&amp;amp;amp;gt;toHTML() : '' ;
	?&amp;amp;amp;gt;
  	&amp;amp;amp;lt;div class="body"&amp;amp;amp;gt;


Finally, add the Magento footer block right between the end tag of </DIV> and </BODY> tag


	&amp;amp;amp;lt;/div&amp;amp;amp;gt;
	&amp;amp;amp;lt;?php
		// Display the Footer HTML
		echo (class_exists('Mage')) ? $footer-&amp;amp;amp;gt;toHTML() : '' ;
	?&amp;amp;amp;gt;
  &amp;amp;amp;lt;/body&amp;amp;amp;gt;


It should display a page of our external site which now uses the header and footer of Magento. Check the source to see the additional tags generated.


Our Sample External Page with Magento CSS, Prototype JS, Header and Footer


The full index.php can be found below:


&amp;amp;amp;lt;?php
// Your Magento Mage.php
// Mage Enabler WordPress plugin users may
// skip line numbers 5, 6 and 7
require_once ("/your/magento/app/Mage.php");
umask(0);
Mage::app("default");

// Make sure to execute this block of code
// only if Mage object is present
if(class_exists('Mage')){
	// Instantiate session and generate needed cookie
	Mage::getSingleton('core/session', array('name' =&amp;amp;amp;gt; 'frontend'));
	$Block = Mage::getSingleton('core/layout');

	// Start pulling the blocks
	$head = $Block-&amp;amp;amp;gt;createBlock('Page/Html_Head');
	// Add default css
	// Magento adds the default skin directory
	// 'skin/frontend/default/default' before 'css/styles.css'
	// making it look like the URL below:
	// http://localhost/magento/skin/frontend/default/default/css/styles.css
	$head-&amp;amp;amp;gt;addCss('css/styles.css');
	// Add Prototype JS file
	// Note that it automatically adds the 'js' directory at the beginning
	// making it look like the URL below:
	// http://localhost/magento/js/prototype/prototype.js
	$head-&amp;amp;amp;gt;addJs('prototype/prototype.js');

	// Get the header's HTML
	$header = $Block-&amp;amp;amp;gt;createBlock('Page/Html_Header');
	$header-&amp;amp;amp;gt;setTemplate('page/html/header.phtml');

	// And the footer's HTML as well
	$footer = $Block-&amp;amp;amp;gt;createBlock('Page/Html_Footer');
	$footer-&amp;amp;amp;gt;setTemplate('page/html/footer.phtml');
}

?&amp;amp;amp;gt;
&amp;amp;amp;lt;html&amp;amp;amp;gt;
  &amp;amp;amp;lt;head&amp;amp;amp;gt;
    &amp;amp;amp;lt;script type="text/javascript"&amp;amp;amp;gt;
      WebFontConfig = {
        google: { families: [ 'Josefin Sans Std Light', 'Lobster' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    &amp;amp;amp;lt;/script&amp;amp;amp;gt;
    &amp;amp;amp;lt;style type="text/css"&amp;amp;amp;gt;
      .wf-active p.text {
        font-family: 'Calibri', serif;
		font-size: 16px;
		text-align: justify;
		color:#666666;
		border: 1px solid #CCCCCC;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		padding: 20px
      }

	  .wf-active h2 {
	  	font-family: 'Lobster', serif;
        font-size: 20px;
		color: #666666
      }

      .wf-active h1 {
        font-family: 'Lobster', serif;
        font-size: 45px;
		color: #006699;
		margin-bottom: 10px;
      }

	  div.body {
	  	max-width: 850px;
		margin: auto;
		background-color: #FFFFFF;
		padding: 30px 50px 0px 50px;
		text-align: left;
		height: 60%;
	  }

	  p.bugs {
	  	font: 12px/1.55 Arial,Helvetica,sans-serif;
		text-align: center;
	  }

	  p.otherdata {
	  	font-family: 'Calibri', serif;
		font-size: 15px;
		color: #999999;
		margin-bottom: 20px
	  }

	  .otherdata strong {
	  	color: #000000
	  }
    &amp;amp;amp;lt;/style&amp;amp;amp;gt;
	&amp;amp;amp;lt;?php
		// Display the needed tags for CSS and JS
		echo (class_exists('Mage')) ? $head-&amp;amp;amp;gt;getCssJsHtml() : '' ;
	?&amp;amp;amp;gt;
  &amp;amp;amp;lt;/head&amp;amp;amp;gt;
  &amp;amp;amp;lt;body&amp;amp;amp;gt;
  	&amp;amp;amp;lt;?php
		// Display the Header HTML
		echo (class_exists('Mage')) ? $header-&amp;amp;amp;gt;toHTML() : '' ;
	?&amp;amp;amp;gt;
  	&amp;amp;amp;lt;div class="body"&amp;amp;amp;gt;
		&amp;amp;amp;lt;h1&amp;amp;amp;gt;How to add Magento blocks, CSS and Javascript to an external site&amp;amp;amp;lt;/h1&amp;amp;amp;gt;
		&amp;amp;amp;lt;p class="otherdata"&amp;amp;amp;gt;Written by &amp;amp;amp;lt;strong&amp;amp;amp;gt;Richard Feraro&amp;amp;amp;lt;/strong&amp;amp;amp;gt; | Posted on &amp;amp;amp;lt;strong&amp;amp;amp;gt;July 2, 2010&amp;amp;amp;lt;/strong&amp;amp;amp;gt;&amp;amp;amp;lt;/p&amp;amp;amp;gt;
		&amp;amp;amp;lt;p class="text"&amp;amp;amp;gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a quam massa. Nullam eget erat metus. Sed vel justo enim. Proin rhoncus laoreet bibendum. Nullam eget est nisi. In eget sem in erat sodales bibendum. Morbi gravida augue sed felis tincidunt a congue dui placerat. Aliquam purus risus, mollis sed ullamcorper non, viverra eu odio. Suspendisse nibh nisi, suscipit at viverra eu, convallis ac odio. Morbi nec sapien eros. Suspendisse nec nulla erat, ac porttitor neque. Integer felis dolor, sollicitudin sed semper et, imperdiet nec turpis. Proin blandit luctus egestas. &amp;amp;amp;lt;/p&amp;amp;amp;gt;
	&amp;amp;amp;lt;/div&amp;amp;amp;gt;
	&amp;amp;amp;lt;?php
		// Display the Footer HTML
		echo (class_exists('Mage')) ? $footer-&amp;amp;amp;gt;toHTML() : '' ;
	?&amp;amp;amp;gt;
  &amp;amp;amp;lt;/body&amp;amp;amp;gt;
&amp;amp;amp;lt;/html&amp;amp;amp;gt;


The post How to add Magento blocks, CSS and Javascript to an external site appeared first on My Silly Point of View.

]]>
					
					https://mysillypointofview.com/2010/07/03/how-to-add-magento-blocks-css-and-javascript-to-an-external-site/feed/
			91
		
		
		535