frame.html – Developers Guide

Purpose: This file defines the overall navigation and user interface of the store. 99.9% of the time, this is the only template you will ever need to edit!

Code Blocks

Note: It is important to preserve the commented tags to ensure the software performs correctly.

Basic code block, variables and structure of frame.html

<!doctype html>
<html>
  <head></head>
  <body class="[body_class]" data-currency="[currency_symbol]" data-decimal="[decimal_places]"> body class based on page or page status
    <main id="content-area">[content]</main>

    <scripts></scripts> -- hardcoded scripts
    <!--START: page_scripts-->
      [page_scripts]
    <!--END: page_scripts-->

    
    <!--START: page_styles-->
    <link><link /> -- hardcoded footer styles e.g. icon fonts
      [page_styles]
    <!--END: page_styles-->

    [frame_copyright1]
    [GLOBAL_FOOTER]

    <!--START: quicksearch-->
    <!--END: quicksearch-->

    <!--START: 3dcart stats-->
      [catalogid]
      [catid]
    <!--END: 3dcart stats-->

  </body>
</html>

Code block and variables for head tag:

<head>
  [TITLE]
  [META]
  [template]
  [stylesheet]

  <!--START: FRAME_RSSFEEDS -->
    [store_url]
    <!--START: RSSFEEDS_CATEGORIES-->
      [category_name]
      [catid]
    <!--END: RSSFEEDS_CATEGORIES-->
  <!--END: FRAME_RSSFEEDS -->
</head>

Following are the coe blocks that you can use across frame.html, leftbar.html and rightbar.html:


<!--START: FRAME_SEARCH-->
[frame_search] Input placeholder
<!--END: FRAME_SEARCH-->

<!--START: username-->
  [account_greeting]
  [username]
  [frame_myaccount-link-text]
  [frame_register-link-text]
  [frame_login-link-text]
  [frame_logout-link-text]
<!--END: username-->

<!--START: global_header-->
  [storename]
  [storeslogan]
<!--END: global_header-->

<!--START: shopping_cart-->
  [frame_shopping-cart-text]
  [frame_ITEMSINCART-text]
  [ITEMSINCART]
  [SUBTOTAL]
<!--End: shopping_cart-->

<!--START: FRAME_LINKS-->
  <!--START: LINKS-->
    <!--START: LINK_FORMAT-->
      [link_id]
      [link_target]
      [link_name]
      [template]
    <!--END: LINK_FORMAT-->
  <!--END: LINKS-->
<!--END: FRAME_LINKS-->

<!--START: FRAME_MENU-->
  <!--START: menuitems_view-->
    <!--START: TOP_LINK_FORMAT-->
      [link_id]
      [link_target]
      [link_name]
    <!--END: TOP_LINK_FORMAT-->
  <!--END: menuitems_view-->
<!--END: FRAME_MENU-->

<!--START: FRAME_CATEGORY-->
  <!--START: CATEGORIES-->
    <!--START: CATEGORY_FORMAT-->
    [dropdown_attributes]
    <!--END: CATEGORY_FORMAT-->
    <!--START: SUB_CATEGORIES-->
       <!--START: SUB_CATEGORY_FORMAT-->
       <!--END: SUB_CATEGORY_FORMAT-->
    <!--END: SUB_CATEGORIEST-->
  <!--END: CATEGORIES-->
<!--END: FRAME_CATEGORY-->

<!--START: TOP_SELLERS_BLOCK-->
  [frame_top-sellers]
  <!--START: topsellers-->
    <!--START: topsellers_topitem-->
      [catalogid]
      [thumbnail]
      [name]
      <!--START: ITEMPRICE-->
        [ITEMPRICE]
      <!--END: ITEMPRICE-->
      <!--START: SALEPRICE-->
        [ITEMPRICE]
        [ITEMSALEPRICE]
      <!--END: SALEPRICE-->
      <!--START: product_review_average-->
        [review_average]
      <!--END: product_review_average-->
    <!--END: topsellers_topitem-->

    <!--START: topsellers_item-->
      [ranking]
      [catalogid]
      [thumbnail]
      [name]
      <!--START: ITEMPRICE-->
        [ITEMPRICE]
      <!--END: ITEMPRICE-->
      <!--START: SALEPRICE-->
        [ITEMSALEPRICE]
      <!--END: SALEPRICE-->
      <!--START: product_review_average-->
        [review_average]
      <!--END: product_review_average-->
    <!--END: topsellers_item-->

  <!--END: topsellers-->
<!--END: TOP_SELLERS_BLOCK-->

<!--START: NEW_RELEASES_BLOCK-->
  [frame_new-releases]
  <!--START: newreleases-->
    <!--START: newreleases_topitem-->
      [catalogid]
      [thumbnail]
      [name]
      <!--START: freeshippingblock-->
      [freeshipping]
      <!--END: freeshippingblock-->
      <!--START: ITEMPRICE-->
      [ITEMPRICE]
      <!--END: ITEMPRICE-->
      <!--START: SALEPRICE-->
      [ITEMPRICE]
      [ITEMSALEPRICE]
      <!--END: SALEPRICE-->
      <!--START: product_review_average-->
        [review_average]
      <!--END: product_review_average-->
    <!--END: newreleases_topitem-->

    <!--START: newreleases_item-->
      [catalogid]
      [name]
      [thumbnail]
      <!--START: freeshippingblock-->
      [freeshipping]
      <!--END: freeshippingblock-->
      <!--START: ITEMPRICE-->
        [ITEMPRICE]
      <!--END: ITEMPRICE-->
      <!--START: SALEPRICE-->
      [ITEMPRICE]
      [ITEMSALEPRICE]
      <!--END: SALEPRICE-->
      <!--START: product_review_average-->
        [review_average]
      <!--END: product_review_average-->
    <!--END: newreleases_item-->

  <!--END: newreleases-->
<!--END: NEW_RELEASES_BLOCK-->

<!--START: FRAME_MAILLIST-->
  [frame_mailinglist]
  [mailinglist_email-field]
  [mailinglist_text]
  [mailinglist_button]
  [mailinglist_subscribe]
  [mailinglist_unsubscribe]
  [mailinglist_email-error]
  [mailinglist_subscribe-success]
  [mailinglist_unsubscribe-success]
<!--END: FRAME_MAILLIST-->

<!--START: FRAME_MANUFACTURER-->
  [frame_manufacturer]
  <!--START: manufacturer_format-->
    [mfgid]
    [manufacturer]
  <!--END: manufacturer_format-->
<!--END: FRAME_MANUFACTURER-->

<!--START: FRAME_BYPRICE-->
  [frame_byprice]
  <!--START: byprice_format-->
    [id]
    [title]
  <!--END: byprice_format-->
<!--END: FRAME_BYPRICE-->

Social media block:

<!--START: social_links-->
  [frame_social-icons-heading]
  <!--START: social_link_facebook-->
    [social_link_facebook_url]
  <!--END: social_link_facebook-->

  <!--START: social_link_twitter-->
    [social_link_twitter_url]
  <!--END: social_link_twitter-->

  <!--START: social_link_pinterest-->
    [social_link_pinterest_url]
  <!--END: social_link_pinterest-->

  <!--START: social_link_instagram-->
    [social_link_instagram_url]
  <!--END: social_link_instagram-->

  <!--END: social_link_youTube-->
    [social_link_youTube_url]
  <!--END: social_link_youTube-->

  <!--START: social_link_googleplus-->
    [social_link_googleplus_url]
  <!--END: social_link_googleplus-->

  <!--START: social_link_tumblr-->
    [social_link_tumblr_url]
  <!--END: social_link_tumblr-->

  <!--START: social_link_blog-->
    [social_link_blog_url]
  <!--END: social_link_blog-->

<!--END: social_links-->

Dynamic Code Blocks: The frame.html file itself contains the following code blocks which are dynamically inserted or removed based on settings/configurations set within the Shift4Shop Online Store Manager. In the following list, we will specify the area of the Online Store Manager where these settings are configured.

FRAME_RSSFEEDS – If “Disable RSS feeds” is toggled in the Online Store Manager, this block is dynamically omitted from the frame. (Settings ->General ->Store Settings)
page_scripts – Loads the scripts block from page templates like home.html.
page_styles – Loads the styles block from page templates like home.html.
quicksearch – If “Hide Quick Search” feature is not used, this Code Block is inserted dynamically into the frame. (Settings ->Design ->Store Settings)
username – If customer is not logged in, this block is removed. Alternately, if the customer is logged in, the applicable variables inside are replaced.
global_header – If a global header is specified in the Online Store Manager, this Code Block is removed and the header specified is used instead. (Settings ->Design ->Header and Footer)
shopping_cart – This Code Block displays the number of items in the customer’s shopping cart. Additionally, if “Hide Empty Shopping Cart” is enabled in the Online Store Manager, the block will only apply after adding items to the cart. (Settings ->General ->Store Settings)
FRAME_SEARCH – This block is removed if the Store’s search function is turned off. (Settings ->General ->Store Settings)
FRAME_MENU – Removed if “Hide Menu links” is enabled in the Online Store Manager. (Settings ->General ->Store Settings)
TOP_SELLERS_BLOCK – This Code Block is removed if the Top Sellers feature is turned off in the Online Store Manager. (Settings ->General ->Store Settings)
product_review_average – If Product Reviews are hidden, this Code Block is dynamically removed. (Settings ->General ->Store Modules)
FRAME_CATEGORY – This Code Block is removed if “Hide Categories” is enabled in the Online Store Manager. (Settings ->General ->Store Settings)
SUB_CATEGORY_FORMAT – This Block is removed if the “Hide Subcategories” option is enabled in the Online Store Manager. (Settings ->General ->Store Settings)
FRAME_BYPRICE – This Code Block is Removed if “Hide Browse by Price” is enabled. (Settings ->General ->Store Settings)
FRAME_MANUFACTURER – This Code Block is Removed if “Hide Browse by Manufacturer” is enabled. (Settings ->General ->Store Settings)
FRAME_MAILLIST – If the “Hide Mailing List” checkbox is enabled in the Online Store Manager, this Code Block is Removed. (Settings ->General ->Store Settings)
newreleases – This Code Block is Removed if “Hide New Releases” is enabled in the Online Store Manager. (Settings ->Design ->Store Settings)
FRAME_LINKS – This Code Block is Removed if “Hide Links (extra pages)” is enabled in the Online Store Manager. (Settings ->Design ->Store Settings)

There is also a very special block of code called Shift4Shop stats which contains special scripting elements intended to provide the store’s statistical reporting information. (See Reports section in the Online Store Manager.)

Variables

Note: Several of these variables are used in multiple places on the page, with their dynamic content controlled by the code block used in each instance.

[body_class] – Dynamic body class variable to control page specific styles. Can also be used to set content width based on sidebar availability.
[currency_symbol] – Inserts currency symbol.
[decimal_places] – Decimal point of currency amount.
[page_scripts] – Inserts page scripts from current template into frame.html.
[page_styles] – Inserts page styles from current template into frame.html.
[TITLE] – Dynamically inserts and references the individual page titles during navigation.
[META] – Dynamically inserts and references the individual page META tags during navigation.
[template] – This Variable dynamically inserts the design Theme’s folder name wherever a path to the theme folder needs to be specified. (Settings ->Design ->Themes & Styles)
[stylesheet] – Dynamically inserts the Theme’s applicable CSS file. (Settings ->Design ->Themes & Styles)
[store_url] – Inserts the store’s URL wherever an absolute path is required.
[category_name] – For RSS feeds, this variable inserts the respective Category’s name when needed.
[catid] – Used by the Software to reference/insert the applicable Category ID when needed.
[screenwidth] – Determines the overall screen width of the site as specified in the Online Store Manager. (See Settings ->Design ->Header and Footer)
[account_greeting] – Displays the Title of the “Hello, [username]” message when a shopper is logged into their account. (See Settings ->Design ->Store Language)
[username] – Inserts the Shopper’s name when they are logged into their Customer Record/Account.
[frame_myaccount-link-text] – Display My account link. (See Settings ->Design ->Store Language)
[frame_register-link-text] – Display Register link. (See Settings ->Design ->Store Language)
[frame_login-link-text] – Inserts Log in text. (See Settings ->Design ->Store Language)
[frame_logout-link-text] – Inserts Log out text. (See Settings ->Design ->Store Language)
[frame_search] – Displays the Title of the the store’s Search Bar “Search” wording. (See Settings ->Design ->Store Language)
[storename] – This variable inserts the Store Name information. (See Settings ->Design ->Header and Footer)
[storeslogan] – This variable inserts the Store Slogan information. (See Settings ->Design ->Header and Footer)
- Note: Applying a logo to the store in the Header and Footer section will take the place of both [storename] and [storeslogan] variables and insert the logo instead.
[ITEMSINCART] – Displays the number of items currently in the Shopper’s cart.
[SUBTOTAL] – Inserts the Shopper’s current subtotal.
[frame_shopping-cart-text] – Text for shopping cart. (See Settings ->Design ->Store Language)
[frame_ITEMSINCART-text] – Text for items in cart. (See Settings ->Design ->Store Language)
[link_id] – This variable is used by the Software to insert the applicable database ID of menu and extra page links. (See Settings ->Design ->Site Content)
[link_target] – Inserts the designated target of the menu and extra page links. (See Settings ->Design ->Site Content)
[link_name] – Inserts the designated name of the menu and extra page links. (See Settings ->Design ->Site Content)
[frame_top-sellers] – Displays the Title of the “Top Sellers” area of the site. (See Settings ->Design ->Store Language)
[catalogid] – Inserts the individual product Database ID numbers where products are displayed.
[thumbnail] – Inserts the individual product Thumbnails where products are displayed.
[name] – Inserts the individual product Name information where products are displayed.
[ITEMPRICE] – Inserts the individual product Price information where products are displayed.
[ITEMSALEPRICE] – Inserts the individual product Sale Price information where products are displayed.
[review_average] – Inserts the individual product Review Averages where products are displayed.
[ranking] – Inserts the ranking information for the “Top Seller” specific products.
[frame_categories] – Displays the Title of the “Categories” area of the site. (See Settings ->Design ->Store Language)
[frame_byprice] – Displays the Title of the “Browse by Price” area of the site. (See Settings ->Design ->Store Language)
[id] – Used by the Software to provide the proper linking for the “Browse by Price” functionality.
[title] – Used by the Software to provide the price range titles for the “Browse by Price” functionality.
[frame_manufacturer] – Displays the Title of the “Manufacturer” area of the site. (See Settings ->Design ->Store Language)
[mfgid] – Used by the Software to provide the proper linking for the Browse by “Manufacturer” functionality.
[manufacturer] – Inserts the applicable Manufacturer names.
[frame_mailinglist] – Displays the Title of the “Mailing List” area of the site. (See Settings ->Design ->Store Language)
[mailinglist_text] – Displays the Title of the “Subscribe to our Newsletter” section of the Mailing list area. (See Settings ->Design ->Store Language)
[mailinglist_email-field] – Displays email filed placeholder. (See Settings ->Design ->Store Language)
[mailinglist_email-error] – Displays error message. (See Settings ->Design ->Store Language)
[mailinglist_subscribe-success] – Displays message if email successfully subscribed. (See Settings ->Design ->Store Language)
[mailinglist_unsubscribe-success] – Displays message if email successfully unsubscribed. (See Settings ->Design ->Store Language)
[mailinglist_button] – Displays the Title of the “Go” button/link of the Mailing list area. (See Settings ->Design ->Store Language)
[mailinglist_subscribe] – Displays the Title of the “Subscribe” radio button of the Mailing list area. (See Settings ->Design ->Store Language)
[mailinglist_unsubscribe] – Displays the Title of the “Unsubscribe” radio button of the Mailing list area. (See Settings ->Design ->Store Language)
[LEFT_BANNER] – Displays content added in the Global Left Banner area of the Online Store Manager. (See Settings ->Design ->Header and Footer)
[frame_new-releases] – Displays the Title of the “New Releases” area of the site. (See Settings ->Design ->Store Language)
[RIGHT_BANNER] – Displays content added in the Global Right Banner area of the Online Store Manager. (See Settings ->Design ->Header and Footer)
[frame_social-icons-heading] – Inserts heading for social icons. (See Settings ->Design ->Store Language)
[frame_copyright1] – Displays the Title of the “Copyright… …eCommerce Software by Shift4Shop” area of the site. (See Settings ->Design ->Store Language)
[GLOBAL_FOOTER] – Displays content added in the Global Footer area of the Online Store Manager. (See Settings ->Design ->Header and Footer)