Veracart Shopping Cart Software | Ecommerce KnowledgeBase

Knowledgebase Home Knowledgebase Home
Search the Knowledgebase Browse by Category

[Advanced Search]

“I want to create a custom layout on my homepage (or other page), where I am displaying a 'featured products' section; or, perhaps displaying the contents of a particular Category. BUT I don’t want to have to manually update the products (by editing the HTML on my site); basically, I want the store owner to be able to control these products through the shopping cart software manager.
Would you like to...
Print this page
Email this page
Post a comment
User Opinions
No users have voted.
How would you rate this answer?
Helpful
Not helpful

Short Answer:

This is not an officially supported method, in other words, it’s a “hack.”  It is an advanced technique, and if you need our help to implement this, then that is possible (for a fee).

Detailed Explanation:

Please understand that when using this technique, you may find that you need to hide/display certain features on your catalog to get it to display the way you want it to (such as “Show 'Showing 1-20 of 34 items' ”).  Also understand that the iframe that it uses is simply a “window” to your catalog page, but stripped down—so if your catalog displays 3 Items per row, then so will this iframe; the disadvantage is if you are trying to create a vertical column, but your catalog page is set to show 3 Items per row.

For this example, we are going to make a “Featured products” section.

  1. First; on your main catalog page (e.g. catalog.html), you need to add an IF/ELSE statement to the very top.  Below is a very simplified example using PHP*.  Items highlighted in yellow should be edited, or made sure they are correct.

    2. <?
    if($iframe){
    ?>
    <html>
    <body>
    <title>Featured Products</title>

    Replace this with the SHOPPING      cart HEADER CODE (if      you already have the header code in your catalog page, then move it up      here)

    Replace this with the SHOPPING      CART CATALOG CODE

    </body>
      </html>
      <?
      }else{
      ?>

    Your catalog page goes here.

    <?
      }
      ?>

     

     

     

     

    Explanation:  This says, if this Category is being displayed by an iframe, then display it bare, or in other worse, without the whole page design on it; otherwise, if a shopper browses to this Category (e.g. clicking on links on your site), then it keeps the design just like the rest of your catalog.

  2. Now, create a new Category in the manager.  For this example, we will make a Category called “Featured Products.”  Take note of the Category ID.
  3. Next, under that Category’s “Advanced Settings,” add the following—this is only an example layout, so you can modify the design as needed.  The bracketed Items like [PRICE] come from our template system, so you can choose what you want to show.  The target="_parent should not be removed as this keeps the iframe working correctly:

    4. Category List View 'Item Cell' Template:

      <table cellpadding=0 cellspacing=0 border=0><tr>
      <td align="center">
      <a href="/replace-this-with-actual-path-to-catalog-(relative/absolute)?Iit=[ID]" target="_parent">
      [IMAGE-SM]</a>
      </td>
      </tr>
      <tr>
      <td align="center">
      <a href="/replace-this-with-actual-path-to-catalog-(relative/absolute)?Iit=[ID]&Ict=replace-this-with-the-Category-ID-that this product is in" target="_parent">[NAME]</a>
      </td></tr>
      <tr>
      <td align="center">[PRICE]<br>[SALE_PRICE]</td>
      </tr>
      <tr>
      <td align="center”> <a href="/replace-this-with-actual-path-to-catalog-(relative/absolute)?Cl=2&Iit=[ID]&Qty=1" target="_parent"><img src="add-to-cart-image-source" border=0></a></td>
      </tr></table>

    Clicking on the “Add to Cart” button will actually take them to the product detail page, to allow them to select Attributes if needed.

  4. On your homepage, or wherever you might want to display the “featured products,” put in an iframe where you want this to appear, like the example below (of course, you can control the iframe dimensions as you need them):

    5. <iframe src="/catalog.html?iframe=true&Vl=replace-this-with-the-correct-Category-ID&Tp=2" frameborder=0 width=550 height="250" scrollbars=”no”></iframe>

  5. Explanation:  This says, display the contents of the iframe, meaning catalog.html, and then pass a parameter where iframe=true, so that the catalog.html page then displays that page using the script we added earlier (if iframe=true, then don’t display design).
  6. You can make as many of these special categories as you need; meaning, let’s say your homepage needs a “feature products” section, and also a “today’s specials” section.

* check with your hosting company to see if your server supports PHP; or you can do this same thing below using any language like ASP, .NET, Ruby, Perl, etc…

 

 
Visitor Comments
No visitor comments posted. Post a comment
Related Questions
No related questions were found.
Attachments
No attachments were found.