Pages

Before you start development, it is important that you understand how FProxy organizes modification content into directories and files in your local file system.

Modification content files

When you download modification content to your local file system, FProxy breaks the content into separate files by modification, variation, and content type. Depending on the modification, the downloaded files can be HTML, CSS, JavaScript, or JSON.

The following table describes the different types of files that FProxy creates. Which files FProxy actually creates depends on the modification and whether the modification uses a template and defines template defaults.

Table: Modification and template content files created by FProxy

FileContentDescriptionExample
<modification_name>_rev<variation_id>_<modification_id>.htmlHTML

HTML content of a modification variation.

The content includes style and script elements, but their contents have been replaced with references to the corresponding CSS and JavaScript files.

menu product reco_rev1_33555.html
<modification_name>_rev<variation_id>_<modification_id>.<#>.cssCSS

CSS content of a modification variation.

FProxy generates a separate CSS file for each style element. The files are indexed with an incremental number that starts from 0.

menu product reco_rev1_33555.0.css
<modification_name>_rev<variation_id>_<modification_id>.<#>.jsJavaScript

JavaScript content of a modification variation.

FProxy generates a separate JavaScript file for each script element. The files are indexed with an incremental number that starts from 0.

menu product reco_rev1_33555.0.js
<modification_name>_rev<variation_id>_<modification_id>.jsonJSONTemplate defaults of a modification variation.menu product reco_rev1_33555.json
<template_name>_<template_id>.templateHTML

HTML content of a template.

The content includes style and script elements, but their contents have been replaced with references to the corresponding CSS and JavaScript files.

product reco_1212.html
<template_name>_<template_id>.<#>.cssCSS

CSS content of a template.

FProxy generates a separate CSS file for each style element. The files are indexed with an incremental number that starts from 0.

product reco_1212.1.css
<template_name>_<template_id>.<#>.jsJavaScript

JavaScript content of a template.

FProxy generates a separate JavaScript file for each script element. The files are indexed with an incremental number that starts from 0.

product reco_1212.1.js

The maximum length for a modification or template name is 32 characters. If a name exceeds that length, the name is clipped after the first 32 characters.

Directory structure

FProxy organizes the modification content files in the following directory structure in the sites directory. The structure is organized by site, modification, and template.

-- /<sites_directory>
   -- /<site_directory>
      -- /modifications
         -- /prod
            -- /<modification_id>
                <modification_name>_rev<variation_id>_<modification_id>.<#>.css
                <modification_name>_rev<variation_id>_<modification_id>.<#>.js
                <modification_name>_rev<variation_id>_<modification_id>.html
                <modification_name>_rev<variation_id>_<modification_id>.json
      -- /templates
         -- /prod
            -- /<template_id>
                <template_name>_<template_id>.<#>.css
                <template_name>_<template_id>.<#>.js
                <template_name>_<template_id>.template

Here's an example of a possible directory and file structure:

-- /my_sites
   -- /shop_company_com
      -- /modifications
         -- /prod
            -- /33555
                menu product reco_rev1_33555.0.css
                menu product reco_rev1_33555.0.js
                menu product reco_rev1_33555.html
                menu product reco_rev1_33555.json
            -- /33556
                hero banner_rev1_33556.0.css
                hero banner_rev1_33556.0.js
                hero banner_rev1_33556.1.js
                hero banner_rev1_33556.html
                hero banner_rev2_33556.0.css
                hero banner_rev2_33556.0.js
                hero banner_rev2_33556.html
      -- /templates
         -- /prod
            -- /1212
                product reco_1212.0.css
                product reco_1212.1.css
                product reco_1212.0.js
                product reco_1212.1.js
                product reco_1212.template
   -- /www_company_com
      -- /modifications
         -- /prod
            -- /33550
                site header_rev1_33550.0.css
                site header_rev1_33550.1.css
                site header_rev1_33550.0.js
                site header_rev1_33550.html

HTML content structure

When modification content contains CSS or JavaScript, FProxy extracts the code to separate files, one per style or script element. The remaining content is saved as the HTML content of the variation. In the HTML, the style and script element contents are replaced with commented references to the separate CSS and JavaScript files.

Do not remove the comments containing the file references.

The following code shows an example of HTML content where the CSS and JavaScript code has been replaced with file references.

<h1 class="banner">Hero Banner</h1>

<style>
/* fproxy_asset_name=fproxy_style_0|shop_company_com/modifications/prod/33556/hero banner_rev1_33556.0.css */
</style>

<script>
/* fproxy_asset_name=fproxy_script_0|shop_company_com/modifications/prod/33556/hero banner_rev1_33556.0.js */
</script>

<script>
/* fproxy_asset_name=fproxy_script_1|shop_company_com/modifications/prod/33556/hero banner_rev1_33556.1.js */
</script>
  • No labels