{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/shopify-embedded-app/","result":{"data":{"markdownRemark":{"id":"e7d63795-43e6-5632-be06-5bba253460ed","excerpt":"Recently, I was working on an implementation to build an embedded app on Shopify with PHP. I realized that the 3rd party PHP SDK recommended by Shopify called…","html":"<p>Recently, I was working on an implementation to build an embedded app on Shopify with PHP. I realized that the 3rd party PHP SDK recommended by Shopify called \"phpish\" does not support the feature to \"PUT\" assets into your shopify shop's theme. The link to \"phpish\" git repository can be found  <a href=\"https://github.com/phpish/shopify\">here</a>, I'd like to thank these guys for their great work, it saved me lots of time to get the implementation on the right track.</p>\n<p>So if you want to do a PUT API call to Shopify web service, you can do it in raw PHP by customizing a CURL request, this is not very hard. But prior to make the Asset API call, first you need to retrieve the currently activated theme ID by calling the Shopify Theme API call, this part can be done easily with the help of phpish.</p>\n<p>Then it is the time to customize your CURL request to do the PUT API call, remember phpish stores our information such as Oauth Token and Shop into the $_SESSION, we can leverage on that or manually fill in the correct information</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"php\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!-- </span><span class=\"mtk11\">array</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;key&quot;</span><span class=\"mtk1\"> =&gt; </span><span class=\"mtk8\">&quot;snippets/put-asset.liquid&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&quot;value&quot;</span><span class=\"mtk1\"> =&gt; </span><span class=\"mtk8\">&quot;this is a test to put assets&quot;</span><span class=\"mtk1\">));</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">$ch</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">curl_init</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$_SESSION</span><span class=\"mtk1\">[</span><span class=\"mtk8\">&#39;shop&#39;</span><span class=\"mtk1\">].</span><span class=\"mtk8\">&quot;/admin/themes/</span><span class=\"mtk12\">$theme_id</span><span class=\"mtk8\">/assets.json&quot;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">curl_setopt</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$ch</span><span class=\"mtk1\">, CURLOPT_RETURNTRANSFER, </span><span class=\"mtk4\">true</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">curl_setopt</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$ch</span><span class=\"mtk1\">, CURLOPT_CUSTOMREQUEST, </span><span class=\"mtk8\">&quot;PUT&quot;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">$headers</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">array</span><span class=\"mtk1\">();</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">$headers</span><span class=\"mtk1\">[] = </span><span class=\"mtk8\">&quot;X-Shopify-Access-Token: &quot;</span><span class=\"mtk1\">.</span><span class=\"mtk11\">echo</span><span class=\"mtk1\"> </span><span class=\"mtk12\">$_SESSION</span><span class=\"mtk1\">[</span><span class=\"mtk8\">&#39;oauth_token&#39;</span><span class=\"mtk1\">];</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">$headers</span><span class=\"mtk1\">[] = </span><span class=\"mtk8\">&quot;Content-Type: application/json&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">curl_setopt</span><span class=\"mtk1\">( </span><span class=\"mtk12\">$ch</span><span class=\"mtk1\">, CURLOPT_HTTPHEADER, </span><span class=\"mtk12\">$headers</span><span class=\"mtk1\"> );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">curl_setopt</span><span class=\"mtk1\">( </span><span class=\"mtk12\">$ch</span><span class=\"mtk1\">, CURLOPT_POSTFIELDS, </span><span class=\"mtk11\">json_encode</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$data</span><span class=\"mtk1\">));</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">$response</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">curl_exec</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$ch</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">echo</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">echo</span><span class=\"mtk1\"> </span><span class=\"mtk11\">curl_error</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$ch</span><span class=\"mtk1\">).</span><span class=\"mtk8\">&quot;&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">var_dump</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$response</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">curl_close</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$ch</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">?&gt;--&gt;</span></span></code></pre>\n<p>Let me briefly explain this snippet, so first you define an array with key and value, key maps to the file name that you want to create, and value is the actual code or asset you want to pass in. Then you create a curl request with method \"PUT\" like all the other requests</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"php\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk12\">$ch</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">curl_init</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$_SESSION</span><span class=\"mtk1\">[</span><span class=\"mtk8\">&#39;shop&#39;</span><span class=\"mtk1\">].</span><span class=\"mtk8\">&quot;/admin/themes/</span><span class=\"mtk12\">$theme_id</span><span class=\"mtk8\">/assets.json&quot;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">curl_setopt</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$ch</span><span class=\"mtk1\">, CURLOPT_RETURNTRANSFER, </span><span class=\"mtk4\">true</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">curl_setopt</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$ch</span><span class=\"mtk1\">, CURLOPT_CUSTOMREQUEST, </span><span class=\"mtk8\">&quot;PUT&quot;</span><span class=\"mtk1\">);</span></span></code></pre>\n<p>Next is something special for Shopify, to make an API call to Shopify you have to specify Oauth_Token in your request to tell Shopify who you are, and so does Content-Type.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"php\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk12\">$headers</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">array</span><span class=\"mtk1\">();</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">$headers</span><span class=\"mtk1\">[] = </span><span class=\"mtk8\">&quot;X-Shopify-Access-Token: &quot;</span><span class=\"mtk1\">.</span><span class=\"mtk11\">echo</span><span class=\"mtk1\"> </span><span class=\"mtk12\">$_SESSION</span><span class=\"mtk1\">[</span><span class=\"mtk8\">&#39;oauth_token&#39;</span><span class=\"mtk1\">];</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">$headers</span><span class=\"mtk1\">[] = </span><span class=\"mtk8\">&quot;Content-Type: application/json&quot;</span><span class=\"mtk1\">;</span></span></code></pre>\n<p>Last but not least, json encode your data array into JSON format and send the request.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"php\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk11\">curl_setopt</span><span class=\"mtk1\">( </span><span class=\"mtk12\">$ch</span><span class=\"mtk1\">, CURLOPT_POSTFIELDS, </span><span class=\"mtk11\">json_encode</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$data</span><span class=\"mtk1\">));</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">$response</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">curl_exec</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$ch</span><span class=\"mtk1\">);</span></span></code></pre>\n<p>The last part is just to catch the returned response or show the error message from your CURL request if something is going wrong.</p>\n<p>Hope this can help someone, happy coding.</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n</style>","headings":[],"fields":{"slug":"/engineering/shopify-embedded-app/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":null,"title":"Shopify Embedded App","canonical":null,"date":"June 02, 2015","updated_date":null,"tags":["Shopify","PHP"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.8867924528301887,"src":"/static/4872b27152104126f3a84ce3bb3dc334/26058/shopify.png","srcSet":"/static/4872b27152104126f3a84ce3bb3dc334/f5f11/shopify.png 200w,\n/static/4872b27152104126f3a84ce3bb3dc334/26058/shopify.png 308w","sizes":"(max-width: 308px) 100vw, 308px"}}},"author":{"id":"Lucius Yu","github":null,"bio":"Lucius is a Software Developer at LoginRadius. He was born and raised in China, but came to Edmonton to graduate from the University of Alberta, double majoring in Computer Sciences and Mathematics. Besides coding, which is his real passion, he enjoys playing ping pong and swimming.","avatar":null}}}},"pageContext":{"id":"e7d63795-43e6-5632-be06-5bba253460ed","fields__slug":"/engineering/shopify-embedded-app/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}