Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Imagine if there was a Popcorn.js oscommerce plugin


bruyndoncx

Recommended Posts

With youtube being the biggest search engine, it proofs that the web of words is becoming the web of video's.

the mozilla popcorn project makes it easy to annotate video in HTML5.

popcornjs.org is the main site to find more info on this.

You could use it to provide subtitles to product video's in other languages, more info links, other background or commentary etc

 

In the demo you see a window with wikipedia article, other examples of possible content inclusions are for instance facebook and twitter, and complete webpages.

 

In my ideal world, there would be a popcorn plugin that includes product details (image, price ...) with buy button so that people can watch a video and kick-off the buying process without having to search through the store catalog.

 

Anyone else having such a dream ? :-

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

Intriguing. I was intrigued enough to get a prototype working example on a product page.

 

An admin interface would be "interesting" to code up, as it would need to be multilingual and also additions of the "footnotes" etc in some format (maybe like how the product images in the product adding/editing page are done). Once that is done, then a way is needed to attach the video to the page [eg, to a product page, to the index page or where-ever].

 

Definitely do-able, definitely interesting. Admin interface = incredible amount of work, shop interface = fairly straightforward.

Link to comment
Share on other sites

so that people can watch a video and kick-off the buying process without having to search through the store catalog.

 

Uh, how do they find this particular video (among the billions on YouTube) in the first place? If someone sends along a link to the video, they have bypassed the catalog browse/search operation -- but they could just have easily sent a link to the catalog page. What is gained by having this, beyond an additional sales channel (which is a good thing)? If someone is looking to buy transparent bleems, where are they most likely to search? In Google/Bing/Yahoo or on YouTube? If they want to find out what a TB is and see a demo, that could be part of the advertising, with even a link to take them directly to your store, but I can't see completing the entire sales transaction on YouTube.

Link to comment
Share on other sites

I like popcorn :)

Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Link to comment
Share on other sites

I like popcorn :)

 

My dentist loved it. He would sit in the movie theatre listening to people munch the stuff, and wait for the muffled scream when someone bit down on a kernel and got it between a filling and enamel, and split a tooth. He would then hand the victim his business card...

Link to comment
Share on other sites

I hate dentists............

Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.

Link to comment
Share on other sites

I believe the point is that the video (and accompanying "notations") would be on a page at the site of the shop (eg on index.php) - perhaps instead of those "slider" type images that are getting so old and tired...

Link to comment
Share on other sites

thanks for the feedback, I'll come back to this when I have a little more time after Christmas / NY store hectic days are over.

As for the use, we have a famous chef on TV who uses a lot of products we sell, so I was thinking of commenting/annotating on his 20 min cooking shows ... right now, I just have an article listing the products he uses

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

A little status update and brain dump from my end

 

I'm re-using/extending the article manager contribution code to prototype.

 

I have added a 'start' and 'end' field to the articles_xsell table.

Added article_is_video flag to the articles table (similar to article_is_blog) to be able to have a layout for text articles and another for video pages

For the moment, created video_info.php page as the layout is quite different from a text article.

The url for the youtube video is stored in the articles_description url field.

 

For other kinds of content, more info on wikipedia, or footnotes, a new table is needed to store the kind of content, and start, end time and the actual (language specific) content and/or url.

Alternatively, it is possible to have a rich field in the articles_description table that would then need to be parsed to trigger the necessary functionality (a little bit like the shipping modules work with delimiters)

 

Currently, I just have a video_info.php page, but perhaps it is better to have it as a module so it is more flexible to integrate in other places, I'm, not 100% sure yet. The popcorn javascript right now is not in the header, and working properly, so it could work with all code in a module too.

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

I decided to just have one field in the articles_description table, added articles_popcorn as text

 

sample data

footnote(1,5,first note)

subtitle(2,200,lasting subtitle)

wikipedia(1,100, Wokken)

footnote(30,500,second footnote lasting till the end)

 

so each line is one event, starting with the plugin and the parameters between brackets: start and end time and the further text.

at this time I only had one text parameter for each kind of plugin used.

other necessary parameters like language for wikipedia is dynamically generated (added $language_code to my header_languages box to store the current 2 letter iso language code)

 

Next, updating the admin interface, currently I've just put test data straight into the database

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

I tried making a video of popcorn working on my test site, but it is the first time I tried camtasia screencasting and the generated file is way too big for upload here or anywhere else ...

I'll cleanup the video demo and make it live so you can have a proper look with a video and associated data that makes sense.

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

db changes made to the articles_manager contribution

 

addition of following fields :

articles_is_video SMALLINT added to articles table

articles_popcorn TEXT added to articles_description table

start INT added to articles_xsell

end INT added to articles_xsell

 

amendments to article_info.php

 

change the article_info_query adding the new fields at the end of the select string

   $article_info_query = tep_db_query("select a.articles_id, a.articles_date_added, a.articles_date_available, a.authors_id, ad.articles_name, ad.articles_description, ad.articles_image, ad.articles_url, au.authors_name, au.authors_image, a.articles_is_video, ad.articles_popcorn from " . TABLE_ARTICLES . " a left join " . TABLE_AUTHORS . " au using(authors_id), " . TABLE_ARTICLES_DESCRIPTION . " ad where a.articles_status = '1' and a.articles_id = '" . (int)$_GET['articles_id'] . "' and ad.articles_id = a.articles_id and ad.language_id = '" . (int)$languages_id . "'");

 

Add this section to include a video section on top of the article info page. I inserted it just before the articles description

  if ($article_info['articles_is_video'] == 1) {
  ?>
  <tr><td class="main"><?php
  include(DIR_WS_MODULES . 'articles_video.php');
  ?>
  </td></tr>
  <?php
  }

 

create a new module in includes/modules named articles_video.php

this is experimental code, does what is needed, but could be improved

the products display css code reuses some classes, it is not yet working 100% to my liking but it gives the general idea of how it should work.

<?php
/*

 $Id: articles_video.php, v1.0 2003/12/04 12:00:00 ra Exp $

osCommerce, Open Source E-Commerce Solutions

 http://www.oscommerce.com

Copyright (c) 2003 osCommerce

Released under the GNU General Public License

*/
 $products_query = tep_db_query ("select * from articles_xsell
								 join products p on (xsell_id = p.products_id)
								 join products_description pd using(products_id)
								 left join specials s using (products_id)
							    where pd.language_id = '" . (int)$languages_id . "'
								  and s.status = 1
								  and articles_id = '". (int)$_GET['articles_id'] . "' and start >= 0 ");

 ?>
 <!-- video_articles //-->
<script src="http://popcornjs.org/code/dist/popcorn-complete.js"></script>
<script>
// ensure the web page (DOM) has loaded
document.addEventListener("DOMContentLoaded", function () {

// Create a popcorn instance by calling Popcorn("#id-of-my-video")
//var tube = Popcorn("#ourvideo");

// Create a popcorn instance by calling the Youtube player plugin
var tube = Popcorn.youtube( '#ourvideo', '<?php echo $article_info['articles_url'];?>' );
<?php
$arr = explode("\n", $article_info['articles_popcorn']);
//print_r($arr);
foreach ($arr as $key => $value) {
 $value = rtrim($value, "\r");
 $value = rtrim($value, "\n");
 $value = rtrim($value, ")");
 $pluginrow = explode ("(", $value);
 $this_plugin = $pluginrow[0];
 if (strpos($pluginrow[1], '"')>0) {
   $this_text = explode ('"', $pluginrow[1]);
   $this_arguments = explode (",", $this_text[0]);
   $this_arguments[2] = $this_text[1];
 } else {
   //print_r($pluginrow);  
   $this_arguments = explode (",", $pluginrow[1]);
 }
 echo "\n".'tube.'.$this_plugin.'({' ."\n";
 echo 'start: '. $this_arguments[0] .',' ."\n";
 echo 'end: '. $this_arguments[1] . ',' ."\n";
 if ($this_plugin == 'wikipedia') {
   echo 'lang: "'.$language_code.'",' ."\n";
   echo 'src: "'. 'http://'.$language_code.'.wikipedia.org/wiki/'.rtrim(ltrim($this_arguments[2]," ")," ") .'"';
 } else {
   echo 'text: "'. $this_arguments[2] . '"';
 }
 if ($this_plugin <> 'subtitle') echo ','."\n". 'target: "' . $this_plugin.'div' .'"' ."\n";
 echo '});'."\n";
}
?>
//add mentioned products
<?php
while ($product = tep_db_fetch_array($products_query)) {
?>
 tube.footnote({
 start: <?php echo $product['start'];?>,
 end: <?php echo $product['end'];?>,
 text: '<?php
 echo '<li class="item">'.display_product2($product['products_id'], $product['products_name'], $product['products_image'], $product['products_price'],$product['specials_new_products_price'], $product['products_tax_class_id'], $_tip, $_items, $_extra) .' </li>';
 ?>',
 target: 'ulcarousel'
 });
 <?php
}
?>

// play the video right away
tube.play();

}, false);
</script>

<div style="background-color: black;">
 <div id="ourvideo" style="width:480px; height:300px; max-width: 50%; float:left;"></div>
 <div id="carouseldiv" style="display: inline-block; width:50%; float:right;">
  <div id="carousel" class="es-carousel-wrapper">
  <div class="ui-widget-header">
		  <h2><span>products</span></h2></div>
    <div class="es-carousel" style="background: white; float:left;"><ul id="ulcarousel" style="padding: 0px; margin: 0px; display: inline-block; float:left;"></ul>
   <br class="clearboth"></div></div>
 </div>
 <div class="clearboth"></div>
 <div style="width:50%; height: 230px; float: left; margin: 0px; padding-top: 10px; background-color: black;"><div id="footnotediv" style="padding: 5px;"></div></div>
  <style>

 </style>

 <div style="width:50%; height: 240px; float: right;background-color: black; margin: 0px;">
  <div class="ui-widget-header">
  <h2><span style="">wikipedia</span></h2>
 </div>
 <div id="wikipediadiv" class="ui-widget-content" style="height: 150px; overflow-y: scroll; padding: 5px; margin: 10px; "></div>
 </div>
</div>
<!-- video_articles_eof //-->

 

you can find this working in a few minutes on my site under the local url articles_info.php?articles_id=249

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

to get the "en" or "nl" or whatever language code, I added something to the languages box.

 

I use the header_languages contribution, but I think the logic is pretty much the same

Added

$language_code = $key;

to the else part of this section

   if ($languages_id != $value['id']) {

       $languages_string .= ' <a href="' . tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('language', 'currency')) . 'language=' . $key, $request_type) . '">' . $key . '</a> ';

     } else {

      $languages_string .= '' . $key . '';
   $language_code = $key;

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

lacking the correct admin pages for now, by adding start and end fiellds to the articles_xsell table, need to add dummy values (0) upon insert

$query = "INSERT INTO " . TABLE_ARTICLES_XSELL . " VALUES ('',$id,$temp,1,0,0)";

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

I have elastislide on my product info pages for related products, I tried reusing that to list the products here .

Adding a section to template_top.php to include some scripts/css .

I still have big case construction for the page being called , not sure though if that is still found in the standard template_top.php

   case "article_info.php": ?>
	 <link rel="stylesheet" type="text/css" href="ext/jquery/elastislide/css/elastislide.css" />
             <script type="text/javascript" src="./ext/jquery/elastislide/js/jquery.easing.1.3.js"></script>
       <script type="text/javascript" src="./ext/jquery/elastislide/js/jquery.elastislide.js"></script>
       <script type="text/javascript">
           $('#carousel').elastislide({
               imageW         : 125,
               border        : 0
           });
       </script>
<?php
  break;
   case "index.php": ?>

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

just realized the code in article_video to show the products makes a call to a custom function of mine.

You should implement something similar to generate the product details for one individual product.

All necessary data is passed as parameters to this function.

Such a function can be added to html_output.php so it is available sitewide for use on other pages as well.

I personally have one file in includes/functions with my custom function additions.

 

   function display_product2($_id, $_name, $_image, $_price, $_special, $_tax_id, $_tip, $_items, $_extra) {

   global $currencies, $debug, $trate;
   if (!isset($trate[$_tax_id])) $trate[$_tax_id] = tep_get_tax_rate($_tax_id);

   if ($_special) {
    $percent = - (number_format(100 - (($_special / $_price) * 100))) . ' %';
    $lc_text2 = '<span class="productPrice"><s>' .  $currencies->display_price($_price, $trate[$_tax_id]) . '</s></span><span class="productSpecialPrice">' . $currencies->display_price($_special, $trate[$_tax_id]) . '<br />' . $percent.'</span>';
   } else {
    $lc_text2 = '<span class="productPrice">'.$currencies->display_price($_price, $trate[$_tax_id]).'</span>';
   }
   $pieces = explode('<br />',$_name);
   if ($pieces[1] <> '') { $nameonly = htmlspecialchars($pieces[1]); } else { $nameonly = htmlspecialchars($_name); }
   if ($_tip == '') $_tip = ' ';
   if ($debug) { $pid = $_id; } else { $pid = '';}
   return '<div>'
  								   . ' <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $_id ) . '">'
                                     . tep_image(DIR_WS_IMAGES . $_image, $nameonly, SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, ' class="imgbox"') . '</a>'.$pid.'</div>'
								  . '<div class="fiche" style="width: '. SMALL_IMAGE_WIDTH. 'px;">'
                                     . '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $_id ) . '">' . $_name . '<br />' . $lc_text2 .'</a>'
                                     . $_items . $_extra.'</div>';
 }

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...