A good friend Mark Hines, is currently doing his thing building out another cafe/venue/restaurant space - this time for his wife Alicia's new Jamaican dumpling takeout location in NYC - LikkleShop.

One component of creating the vibe of the place, is that it will also serve as a book lending library. They have a collection already put together, in Delicious Library 3 app.

Natively, the app does include the ability to upload an HTML exported template to a 3rd party hosting site - but this seemed a bit of overkill, and taking users away from the main site.

I figured it would be a quick project I could take on over the holiday break. I planned to build a simple vanilla Javascript app, that attached to some markup on the page.

If I could get the data into JSON format, I would just need to loop over the data, put it into a basic template, and display it on the page.

Luckily, the Delicious app also includes the ability to export into multiple data formats. XML and CSV seemed the most promising for quick conversion to JSON. I found a node script that was close enough to what I wanted to do, and got to work.

I used the basic Gulp and SASS structure from the boiler we use at HAUS, and tweaked it for my needs to just utilize the basics of what I would need on this app.

Since the export contained image urls on the Amazon CDN, I didn't have to worry about uploading or processing any product images. I also wanted to keep this as lightweight as possible so the layout is purely CSS. No embedded fonts are used, and I defaulted to Arial, Sans Serif as the base font. This can be removed so the page inherits from the Shopify theme, or changed by editing the SASS partials.

This is a Work In Progress, and I plan to add some additional features soon!


https://github.com/pgraci/delicious-shopify-js-gulp

Simple client side javascript app to publish Delicious Library to external sites.

This readme explains how to enable this on a Shopify page.

  1. Setup project and install dependencies.
  2. Export your XML and run included script to convert to a JSON file.
  3. Generate a local development build and preview in your browser
  4. Generate a minified production build, and add the code to your page

Getting Started

Run the XML to JSON converter for Delicious Library exports.

Prerequisites

Node.js https://nodejs.org

Installing

Open terminal and cd to your desired working folder.

Clone this repo to your local system

git clone git@github.com:pgraci/delicious-shopify-js-gulp.git  

Then cd into the new folder that is created

cd delicious-shopify-js-gulp  

Run npm to install package dependencies

npm install  

Export a new XML file from Delicious. You should replace the sample library.xml file with one that you export. (Only v3 libraries are supported at this time.)

However you will need to edit the xml file in a text editor, and delete the following line:

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

Save the library.xml file.

Run the node script to generate a JSON file from your Delicious Library export.

node exportXMLtoJSON.js  

This should complete immediately, but may take longer depending on the size of your XML file.

Once completed, there will now be a library.json file in the src/javascript folder.

Now you can run the app to generate a local build

gulp  

This will generate a development build of delicious.css and delicious.js, as well as copy over the index.html file to the dist folder (this folder is not committed to git). A server will be started, which you can hit at http://localhost:3000

Any changes to the SASS partial files or JS files will result in instant hot reloading via BrowserSync.

Now you can run the app to generate a production build

gulp production  

This will generate compressed versions of the delicious.css and delicious.js files in the dist folder.

You can now upload these to Shopify into your assets folder.

  • Note that our build process imports your JSON directly into the build file, so make sure your build is a reasonable size before uploading.

Create a duplicate of your page.liquid in Shopify (I used page-library-delicious, and add the following markup:

<div id="delicious-app" class="delicious-app">  
    <div class="loader">
        Loading...
    </div>
</div>  

Below that add the following style and script tag to pull in the build files from the assets folder.

{{ 'delicious.css' | asset_url | style_tag }}
{{ 'delicious.js' | asset_url | script_tag }}

Don't forget to set your Library page to use the new template

Reload your site, and you will see your Delicious Library!

Check it out in action at
https://likkleshop.myshopify.com/pages/library

Updates coming soon to use CSV exports instead, to support additional fields.