HTTPS SSH

Logotype

Jetshop Responsive Base

Welcome to the repository for the Jetshop Responsive Base.

This is a custom framework for building responsive design on the Jetshop E-Commerce Platform Version 68.1.

The framework uses Grunt to manage Sass & JS, in an efficient manner; complete with auto-deployment to your web shop.

If your project are using channels, please contact Jetshop. All instructions are for channel M1 only.

For more information see the list of resources below:

Report issues bitbucket.org/jetshopdesign/responsive-base/wiki/issues
Documentation bitbucket.org/jetshopdesign/responsive-base/wiki/documentation/home
Release notes bitbucket.org/jetshopdesign/responsive-base/src/master/releasenotes.md
Wireframes bitbucket.org/jetshopdesign/responsive-base-wireframes
Installed development version responsive-base.jetshop.se
Demo demostore.jetshop.se

Install for new shop setup:

Before first install, please read the documentation on File structure

Note: Using gulp or grunt?

We have two separate build-systems, gulp & grunt.

Gulp is used by Elastic-customers on the FTP Secure setup, all other project should continue using grunt.

When in doubt, use grunt.

If you are using gulp, please replace all usage of grunt with gulp.

Technical preparation - Computer

This preparation need to be done once per computer

  1. Install Node to get npm: http://nodejs.org

  2. Install Git: http://git-scm.com/download/

  3. Make sure that Git have user & email properly setup: https://help.github.com/articles/set-up-git/

Using Grunt:

  1. Run sudo npm install -g grunt in terminal.

  2. Run sudo npm install -g grunt-cli in terminal.

Using Gulp:

  1. Run sudo npm install -g gulp in terminal.

  2. Run sudo npm install -g gulp-cli in terminal.

Windows-users: Remove the word 'sudo'

1. Technical preparation - Project

  1. Create a local folder to hold the project.

  2. Login to bitbucket.org

  3. Clone repo from bitbucket.org/jetshopdesign/responsive-base into local folder.

  4. After this step you will have a new sub-folder called responsive-base inside your local folder.

  5. Rename the sub-folder called responsive-base to customer-customername.

IMPORTANT The sub-folder customer-customername is now your working folder. All references in this guide will start at this folder..

2. Remove .git folder

  1. Start terminal, cd to your working folder customer-customername.

  2. Remove .git folder rm -rf .git (or delete in Windows Explorer).

3. Create a new .git folder

  1. In terminal, initialize a new Git repository and add all files: git init; git add .

  2. Make an initial commit git commit -a -m "First commit"

4. Rename files & update paths

This step is needed for Jetshop Support

  1. Rename file stage/scripts/client.js to stage/scripts/clientName.js. Name the file using camelCase, example: kallesFiskeButik.js

  2. Update path to this file in core/pages/base.master.htm (search for 'client.js').

(5. Only for designpartners: Prepare a local repo, hook it up with BitBucket)

  1. Have an admin create an empty repo at bitbucket.org/jetshopcustomers

  2. Connect your local repo with the newly created repo on BitBucket (follow instructions on BitBucket for "I have an existing project").

6. Install binaries to handle automation

  1. Run npm install in terminal.

7. Create a package to restore in Jetshop Admin

  1. Run grunt package in terminal.

  2. This will create a zip-file in folder package

  3. Login to Jetshop Admin, navigate to Appearance > Templates.

  4. Use the Restore/Import function with the newly created package.

8. Setup FTP username & password for automatic deployment

Note: For gulp this file is called .ftpconfig.js. Rename the file .ftpconfig.js.sample and edit

  1. Create a file called .ftppass with the following content:
{
   "key1": {
     "username": "storename.jetshop.se",
     "password": "PASSWORD"
   }
}

Windows-users: Create a file called ".ftppass." Windows will remove the last dot.

Windows-users: Make sure File Explorer are displaying File Name Extensions.

Username & password are found in Jetshop Admin > Appearance > Templates > FTP.

Do not replace the object name "key1".

9. Run grunt and start deploying

  1. Run grunt in terminal and then fetch some coffee, the initial upload will take a while.

  2. If you get FTP errors from Grunt, just redo the command grunt again and again...

10. Move script-block to Script Management

  1. In Jetshop Admin > Appearance > Templates, open base.master.htm and follow instructions for "Move this block".

  2. Follow instructions for "Settings in admin" below.

  3. Start working :)


Settings in admin

Product images need rescaling

New widths for product-images, old ones in parenthesis:

  • Large : 800px (460px)
  • Medium : 600px (340px)
  • Small : 400px (220px)
  • Thumbs : 220px (100px)

Add this section to Admin > Settings > General > Upper footertext:

<h2>Contact us <i class="fa fa-phone">&nbsp;</i></h2>
<p>Jetshop AB</p>
<p>Ullevigatan 19</p>
<p>SE-411 40 Gļæ½teborg</p>
<p>Sweden</p>

Add this section to Admin >Settings > General > Lower footertext:

<h2>Follow us <i class="fa fa-share-alt">&nbsp;</i></h2>
<p>Add social icons here</p>

Releware

Releware need 4 items visible, not 3. This requires a database-change, please contact Jetshop Support.


Post-actions after development is done

Disable the script-handling by commenting that block, and uncomment the regular include block (Read more: https://bitbucket.org/jetshopdesign/responsive-base/wiki/documentation/script-handling).

Make sure all material are added to material folder. This means vector-logos, images, Photoshop-files, design guides, documentation etc.

(Push all changes to repo.)