Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Branch #4

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 85 additions & 85 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,85 +1,85 @@
#Shopify Integration

##Shopify Theme Modification

To actually start serving your content with Dexecure, you’ll need to make two changes to your Shopify theme.

You can access Shopify’s theme file editor by going to

`Online store > Themes > Actions > Edit code`

You can also follow the instructions from [here](https://help.shopify.com/themes/customization).

###settings_schema.json

The first change lets you configure your Dexecure installation from inside Shopify’s theme settings. Copy the code below to the bottom of your theme’s `Config/settings_schema.json` file, inside the outermost pair of square brackets (`[` `]`). Make sure to add a comma (`,`) to the file following the `}` preceeding where you paste in this code.

```
{
"name": "dexecure",
"settings": [
{
"type": "checkbox",
"id": "enableDexecure",
"label": "Enable Dexecure"
},
{
"type": "text",
"id": "dexecureUrl",
"label": "Dexecure subdomain",
"info": "The subdomain you are given on the Dexecure platform. Example: `https:\/\/xxx.cloudfront.net`."
},
{
"type": "text",
"id": "dexecureShopifyUrl",
"label": "Shopify CDN domain",
"default": "\/\/cdn.shopify.com",
"info": "Don't change this unless you have a proxy in place. Not sure? Leave it as is."
}
]
}
```

###dexecure.liquid

The second file adds a new Liquid tag that helps you generate Dexecure URLs. This time, create a new file in the Snippets directory of your theme named `dexecure.liquid`. We have committed the file into this repository, you can find it's contents [here](https://raw.githubusercontent.com/Dexter-JS/shopify-plugin/master/dexecure.liquid?token=AAvS63ervggjpTvYrz2yIi295AyBhNLPks5Xvt7HwA%3D%3D#). Copy that code into the `dexecure.liquid` file that you just created and save.

##Enabling the Dexecure Integration

Now that you’ve set up your Shopify theme to work with Dexecure, you can enable Dexecure in your theme settings. Head to the Online store > Themes > Customize. Once there, you’ll see a Theme settings option in the left-hand sidebar. Click on this. Head to the dexecure tab to configure your Dexecure setup. It should look something like the following:

```
Enable Dexecure: Make sure this is checked.
Dexecure subdomain: You would get this from Dexecure. It would be something like https://xxx.cloudfront.net
Shopify CDN domain: You’ll most likely not want to change this from the default value of //cdn.shopify.com.
```

After you’ve set everything up, click `Save`, and you can move on!

##Migrating Your Theme Images to Dexecure

At this point, you’re ready to change your existing theme’s assets to use Dexecure. The exact process will vary depending on your theme, but the basic idea won’t change. Just find places in your theme where existing assets are being output, and replace them with the Dexecure Liquid tag you just created. Here’s an example:

####Before:
```
{{ product.featured_image | img_url:'grande' }}
```
####After:
```
{% assign feat_img_url = product.featured_image | img_url:'master' %}
{% include 'dexecure' src:feat_img_url %}
```
####Before:
```
{{ 'collection5-3.png' | asset_url | img_tag }}
```
####After:
```
{% assign full_url_for_dexecure = 'collection10-1.png' | asset_url %}
{% capture modified_dexecure_url %}
{% include 'dexecure' src:full_url_for_dexecure %}
{% endcapture %}
{{modified_dexecure_url | strip | img_tag}}
```
####Note:
It’s a good idea to always use the master variant of Shopify’s images, and let Dexecure handle the resizing. That way, you’ll always get the best quality image possible.
#Shopify Integration

##Shopify Theme Modification

To actually start serving your content with Dexecure, you’ll need to make two changes to your Shopify theme.

You can access Shopify’s theme file editor by going to

`Online store > Themes > Actions > Edit code`

You can also follow the instructions from [here](https://help.shopify.com/themes/customization).

###settings_schema.json

The first change lets you configure your Dexecure installation from inside Shopify’s theme settings. Copy the code below to the bottom of your theme’s `Config/settings_schema.json` file, inside the outermost pair of square brackets (`[` `]`). Make sure to add a comma (`,`) to the file following the `}` preceeding where you paste in this code.

```
{
"name": "dexecure",
"settings": [
{
"type": "checkbox",
"id": "enableDexecure",
"label": "Enable Dexecure"
},
{
"type": "text",
"id": "dexecureUrl",
"label": "Dexecure subdomain",
"info": "The subdomain you are given on the Dexecure platform. Example: `https:\/\/xxx.cloudfront.net`."
},
{
"type": "text",
"id": "dexecureShopifyUrl",
"label": "Shopify CDN domain",
"default": "\/\/cdn.shopify.com",
"info": "Don't change this unless you have a proxy in place. Not sure? Leave it as is."
}
]
}
```

###dexecure.liquid

The second file adds a new Liquid tag that helps you generate Dexecure URLs. This time, create a new file in the Snippets directory of your theme named `dexecure.liquid`. We have committed the file into this repository, you can find it's contents [here](https://raw.githubusercontent.com/Dexter-JS/shopify-plugin/master/dexecure.liquid?token=AAvS63ervggjpTvYrz2yIi295AyBhNLPks5Xvt7HwA%3D%3D#). Copy that code into the `dexecure.liquid` file that you just created and save.

##Enabling the Dexecure Integration

Now that you’ve set up your Shopify theme to work with Dexecure, you can enable Dexecure in your theme settings. Head to the Online store > Themes > Customize. Once there, you’ll see a Theme settings option in the left-hand sidebar. Click on this. Head to the dexecure tab to configure your Dexecure setup. It should look something like the following:

```
Enable Dexecure: Make sure this is checked.
Dexecure subdomain: You would get this from Dexecure. It would be something like https://xxx.cloudfront.net
Shopify CDN domain: You’ll most likely not want to change this from the default value of //cdn.shopify.com.
```

After you’ve set everything up, click `Save`, and you can move on!

##Migrating Your Theme Images to Dexecure

At this point, you’re ready to change your existing theme’s assets to use Dexecure. The exact process will vary depending on your theme, but the basic idea won’t change. Just find places in your theme where existing assets are being output, and replace them with the Dexecure Liquid tag you just created. Here’s an example:

####Before:
```
{{ product.featured_image | img_url:'grande' }}
```
####After:
```
{% assign feat_img_url = product.featured_image | img_url:'master' %}
{% include 'dexecure' src:feat_img_url %}
```
####Before:
```
{{ 'collection5-3.png' | asset_url | img_tag }}
```
####After:
```
{% assign full_url_for_dexecure = 'collection10-1.png' | asset_url %}
{% capture modified_dexecure_url %}
{% include 'dexecure' src:full_url_for_dexecure %}
{% endcapture %}
{{modified_dexecure_url | strip | img_tag}}
```
####Note:
It’s a good idea to always use the master variant of Shopify’s images, and let Dexecure handle the resizing. That way, you’ll always get the best quality image possible.
68 changes: 34 additions & 34 deletions dexecure.liquid
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
{% capture DEXECURE %}
{% comment %}
<!--
Convert a Shopify CDN path into a Dexecure path, with parameters.
-->
{% endcomment %}
{% if settings.enableDexecure %}
{% for i in (1..1) %}
{% comment %}
<!-- Check to make sure the src exists, and that Dexecure url theme settings is not blank. If blank, stop! -->
{% endcomment %}
{% unless src or settings.dexecureUrl != blank %}
{{ src }}
{% break %}
{% endunless %}

{% comment %}
<!-- Check to make sure the src has the Shopify CDN url in it. If it doesn't this does not need to run any further -->
{% endcomment %}
{% assign cdnUrl = settings.dexecureShopifyUrl | strip %}
{% unless src contains cdnUrl %}
{{ src }}
{% break %}
{% endunless %}

{% assign dexecureUrl = settings.dexecureUrl | strip %}

{% assign newSrc = src | strip | replace:cdnUrl,dexecureUrl | append:imgWithQuerystring %}
{% endfor %}

{{ newSrc | default:src }}
{% else %}
{{ src }}
{% endif %}
{% capture DEXECURE %}
{% comment %}
<!--
Convert a Shopify CDN path into a Dexecure path, with parameters.
-->
{% endcomment %}
{% if settings.enableDexecure %}
{% for i in (1..1) %}
{% comment %}
<!-- Check to make sure the src exists, and that Dexecure url theme settings is not blank. If blank, stop! -->
{% endcomment %}
{% unless src or settings.dexecureUrl != blank %}
{{ src }}
{% break %}
{% endunless %}

{% comment %}
<!-- Check to make sure the src has the Shopify CDN url in it. If it doesn't this does not need to run any further -->
{% endcomment %}
{% assign cdnUrl = settings.dexecureShopifyUrl | strip %}
{% unless src contains cdnUrl %}
{{ src }}
{% break %}
{% endunless %}

{% assign dexecureUrl = settings.dexecureUrl | strip %}

{% assign newSrc = src | strip | replace:cdnUrl,dexecureUrl | append:imgWithQuerystring %}
{% endfor %}

{{ newSrc | default:src }}
{% else %}
{{ src }}
{% endif %}
{% endcapture %}{{ DEXECURE | strip | replace:' ' | strip_newlines }}