user tip User Tip - "Embed Saleable Files"

Ken Rich
Ken Rich
@ken-rich
8 years ago
926 posts
The current default for the File Module creates "dead links" and no buy button when a file that is for sale is embedded. Personally, I think that is a bad user experience and not useful at all.

So I have made my saleable files embed with the Buy button, and instead of "dead links", the file title and image link back to the file's detail page. So a saleable file then embeds like any other product for sale.

Jamroom isn't planning on changing the default by giving this to everyone as an update, so here is how it's done for those who are interested.

In your Admin Panel go to Profiles and then Files. Then in the templates folder modify item_embed.tpl to the code below

{jrCore_module_url module="jrFile" assign="murl"}

 {if empty($item.file_file_item_price) && empty($item.file_file_item_bundle)}
<div>
    <table class="item" style="width:80%;margin-left:0">
        <tr>
            <td rowspan="2" style="width:5%;padding-right:12px">
               <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.file_title_url}">{jrCore_image module="jrFile" image="`$item.file_file_extension`.png" width="42" height="42" alt=$item.file_file_extension}</a>
            </td>
            <td>
                <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.file_title_url}"><h3>{$item.file_title}</h3></a>
                  <td rowspan="2" style="width:5%;padding-right:12px"> <a href="{$jamroom_url}/{$murl}/download/file_file/{$item._item_id}">{jrCore_image module="jrFoxyCartBundle" image="IELTS-writing-task-2-free-download.png" width="140" alt="Free Download"}</a>
            </td>
        </tr>
        <tr>
            <td class="sublabel" style="width:95%">{$item.file_file_name}, {$item.file_file_size|jrCore_format_size}
               
 <br>{if strlen($item.file_description) > 0}
     {$item.file_description|truncate:90}
{/if}
</td>

        </tr>
    </table>
</div>
{else}
<div>
    <table class="item" style="width:80%;margin-left:0">
        <tr>
            <td rowspan="2" style="width:5%;padding-right:12px">
                <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.file_title_url}">{jrCore_image module="jrFile" image="`$item.file_file_extension`.png" width="42" height="42" alt=$item.file_file_extension}</a>
            </td> 
            <td>
                <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.file_title_url}"><h3>{$item.file_title}</h3></a>
           </td>
                      
  <td rowspan="2" style="width:20%;white-space:nowrap;padding-right:12px">
 {jrCore_module_function function="jrFoxyCart_add_to_cart" module='jrFile' field='file_file' item=$item}
 </td>          
        </tr>
        
        <tr>
            <td class="sublabel" style="width:95%">{$item.file_file_name}, {$item.file_file_size|jrCore_format_size}
 <br>{if strlen($item.file_description) > 0}
     {$item.file_description|truncate:90}
{/if}
         </td>            
        </tr>
      
    </table>
</div>
{/if} 
       

Note: The description section is optional and just for those who want a short description of their file to also embed (helpful). You must add a description section to your create/update forms as a text area for this to work. Then this section of code will be relevant.

 <br>{if strlen($item.file_description) > 0}
     {$item.file_description|truncate:90}


To see how this works, I embedded a saleable PDF book here - http://kenrich.me/page/227/in-defense-of-contemporary-christian-music

So now the file is saleable wherever it is embedded on my network, and the PDF icon and title link back to the files detail page. The detail page is also enhanced by adding a full editor to the form but that's a separate issue.

This could potentially be good for downloadable ticket sales too - let me know if you implement a system where the ticket codes automatically increment - thanks.


--

Ken Rich
indiegospel.net

updated by @ken-rich: 07/15/16 09:51:21PM
Ceri
Ceri
@adolygwr
8 years ago
370 posts
Hi Ken

Just a quick question....assuming I have carried out your instructions above, what is the actual code I need to embed a product in a blog post? You say that "The current default for the File Module creates "dead links" and no buy button when a file that is for sale is embedded." BUT I am not seeing the option to embed products in my list of embeddable files. Not sure why not!!?? :(


--
Ceri Shaw - AmeriCymru
Ken Rich
Ken Rich
@ken-rich
8 years ago
926 posts
An example is here - http://kenrich.me/page/227/in-defense-of-contemporary-christian-music

The ability to have saleable products comes from Foxycart, so this assumes you are using that module. Otherwise, your files can't have a price set, a buy button, and can only embed as a free download.

If you have Foxycart and have set a price for your file, the embed code is still the same as default. What changes is that your saleable file embed now has a buy button and link back to the detail page (instead of having dead links for the title and icon and no buy button).

So if you are using an editor and the "Embed Local Media" tool, it will embed using the same code it always generated. If it was already embedded, now it will look and function properly.

If you want to embed a file manually, change XX to the file's ID # and it looks like
[jrEmbed module="jrFile" id="XX"]
You can find it's ID in the datastore.

You won't need to know the ID number if you are using the editor because the file name will be listed (see attached screenshot). The code is generated for you.
Captureoo.JPG.jpg
Captureoo.JPG.jpg  •  50KB




--

Ken Rich
indiegospel.net