Laravel ajax setup for jQuery and Angular

Request::ajax() = True when:

headers:{
    "X-Requested-With" : "XMLHttpRequest"
},

Request::wantsJson() = True when:

Note: laravel looks for “json” in the first accept parameter.

headers:{
    "Accept" : "application/json"
}

Both are true if

headers:{
    "X-Requested-With" : "XMLHttpRequest",
    "Accept" : "application/json"
}

Global jQuery setup

This will add the proper headers to all jQuery$.ajax $.get $.post calls in your app.

 

$.ajaxSetup({
    headers: {
        "X-Requested-With" : "XMLHttpRequest",
        accept: "application/json"
    }
});

The headers can be overridden and appended in the indivdual calls.

Global Angular setup

This will add the proper headers to all Angular http calls in your app.

app.config(['$httpProvider', function($httpProvider){

    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';

    $httpProvider.defaults.headers.common["accept"] = 'application/json';

}]);

 

Shopify App for Product Grouping and Filtering: A Case Study

Integrating VendHQ, Shopify and Google App Engine

Revolution Vapor is a brick and mortar electronic cigarette store in San Pedro, Costa Rica; a trendy area of San Jose near the University of Costa Rica. The owner has created a hip vibe in the store, branding his products as high-end, customized liquids for top-of-the-line electric cigarettes. He already had a Shopify store, which served the purpose of reaching online shoppers as well as providing an online marketing venue and solidifying his brand.

Problems

The owner wanted dual languages (English/Spanish) and dual currencies (Dollars/Colones).  He also wanted a sidebar filter similar to Amazon where customers could drill down to exactly what they were looking for. His primary problem was the way Shopify listed his products for the customer.  He was happy with VendHQ as his inventory management and POS, but was not satisfied with its limitations in allowing him to create variants from composite products. These limitations primarily effected his name-brand, e-liquid products. His “house” brand consisted of a bottle and a quantity of liquid which are separate inventory items he put together for an end product for the customer. This made it necessary to create composite products (products with multiple inventory items), however, VendHQ does not allow for variants among composite products that varied by size, strength, etc..

Normally, in Shopify if you have a product that has different sizes or strengths you would enter one product with many variants. But this was not possible because of the limitations of VendHQ. The end result was that each different flavor of e-liquid had twelve or more size and strength variations that were all listed as separate products. Therefore, on his catalog page the first twelve products were all the same flavor, listed with different variations of size and strength. The next twelve were the second flavor and so on. This made for twelve times more pages the customer had to look though before making a purchase.

Solutions

The owner needed a solution that would integrate VendHQ, Shopify, and Google App Engine.

Dual Language and Dual Currency

Shopify supports different languages and different currencies, but it does not support more than one language and/or currency at the same time. His client base is in Costa Rica and many of his customers speak English. Furthermore, his customers in Costa Rica can make purchases with either dollars or the local currency, colones. Because of this, I needed to tie the currency to the appropriate language.

My solution was to create a currency selector drop-down that would also change the language to match the respective currency. So, if an online customer selects US dollars, the language defaults to English and, conversely, if colones is selected, the language defaults to Spanish. I also added a Geo IP script that detects if the site is being viewed from within Costa Rica, which automatically defaults to Spanish. The language selections can be easily changed at any time.

Product Grouping

I needed to create a Shopify app that requested all the products from my client’s store and re-index them according to Collection and Group. Collections are built into Shopify. They are a way to organize similar products like Shirts, Hats, Shoes, etc. Shopify has variants for very similar products. But because variants weren’t an option for his composite products, I needed to create a different grouping mechanism. I called it simply, “grouping.”

I accomplished this through the use of product tags, which are already an integral part of the Shopify system. They are one or two word descriptions that are added by the shop owner as a way to filter products. For example, each e-liquid had a tag for size, strength, etc.. I created two new tags for each product: a tag that reflects the name of all products of the same flavor, and a master tag I applied to only one of the products of a  particular flavor. This allows for two things to be discerned for each product:

  1. Flavor group to which the product belongs
  2. Product representing the group (master)

I created an app on Google App Engine that re-indexed all his products by these flavor groups using the aforementioned tags, in addition to an API to request these groups in JSON format. With that in place I could request product groups using JavaScript from within the Shopify theme, allowing the store to display the products just as it would display products with variants. This format displays the master product only and provides a drop-down to select different product options.

product-group-drop-down

Sidebar Filtering

To complete the project, I created an app that allows the shop owner to build a sidebar filter to his specifications.

revolution-vapor-home

All the filter items in the sidebar filter consist of tags the shop owner had already added to each of his products. He created these tags for filtering through the available Shopify system, but Shopify could only filter by one tag at a time. Using the improved filter system I created, as shown in the above image, the customer can now filter by size, strength, brand and flavor profile. This is a drastic improvement in user interface.

I wanted the shop owner to be able to create this sidebar from existing tags and place them in his preferred order.

product-group-tool

As you can see from the image above, I added an additional level of filtering, allowing the shop owner to create custom filter categories.  He can then drag product tags–created in Shopify– on the right into that filter category of his choosing on the left. He can also reorder the tags and the filters categories any way he wants them displayed to the customer.

Work-Arounds

A Shopify app must be hosted on a https (secure) server.  I couldn’t justify paying for a SSL certificate for a one-off app for a single client . So, instead I settled on Google  App Engine. It provides a free tier, based on usage, and I felt this app wouldn’t exceed that usage quota. In addition, all GAE apps are hosted with https, so are secure.

I’m a PHP developer and GAE has just started supporting PHP . In fact, it’s still in beta release. Some features of PHP aren’t supported on GAE,  namely CURL. CURL is the standard function PHP developers use to access other website like the Shopify API. Also Shopify API SDKs have already been created for PHP. I settled on ohShopify.php., but it relied on CURL, which isn’t supported by GAE. That lead me to a work-around called PURL that substituted CURL calls for file_get_contents() calls that GAE would accept.

This work-around functioned well for GET request but not PUT or POST requests, which was acceptable for this application, because I only required GET requests. I could have created my own Shopify SDK for GAE but the time investment wasn’t in the product budget, and I didn’t want to reinvent the wheel. Now that I had an https server running PHP that could interface with the Shopify API, I was ready to move forward with creating the app.

I wanted the app to run from the client’s Shopify admin console. Therefore, I needed to use Shopify’s Embed API. This added another layer of complexity because I also needed to tie in their JavaScript library.

The end result is a slick user interface for both the shop owner and his customers.

About the author: Brian Gaeddert is a Web Developer for Maya Creative Group. He is a native Oklahoman who currently lives with his wife and daughter in Costa Rica.

This is not spam! GMAIL

Question:

When using Media Temple Virtual Dedicated (dv) server – Why does gmail think all email is being sent using PHP mail() is being sent from the primary domain and not other domains host on the same server. Why is google receiving emails that say: Username <username@secondarydomain.com> via primarydomain.com.  I want to get rid of the darn via!

Answer:

In the gmail help it says you need to sent up SPF and Domainkeys. I set up the SPF and tried again and the email was being authenticated but by the primary domain not the secondary.

I stuggled with this for days, then I relized that when mail was sent by the webmail client on the secondary server it arrived at gmail just fine. So it dawned on me to compare the two email headers.

This can be done by opening the email and next to the reply button is a drop down where you click “Show original”. This will show the message as gmail received it. What I notice was the problem emails had:

     Return-Path<anonymous@primarydomain.com>

And the emails from the secondary domains webmail client had

     Return-Path: <username@secondarydomain.com>

When you call mail() in PHP it just calls sendmail on the server and if you don’t tell it the return path it will use anonymous@primarydomain.com by default. Use the code below as a template to send non-spam emails to gmail.

PHP code:

$to = 'recipient@email.com';
	
$message = 'This is a test email';
	
// subject
$subject = 'Sample Email';
	
// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . PHP_EOL;
$headers .= 'Content-type: text/html; charset=iso-8859-1' . PHP_EOL;
$headers .= 'From: Pupalup ' . PHP_EOL;
$headers .= 'Reply-To: noreply@example.com' . PHP_EOL;
$headers .= 'Return-path: noreply@example.com' . PHP_EOL;
$headers .= 'X-Mailer: PHP/' . phpversion();
	
// Mail it
mail($to, $subject, $message, $headers);

How do I bold text in Google Plus?

Question:

I wanted to add a bold title on a Google Plus Post (+Brian Gaeddert). There Seemed to be no buttons in the editor to do this. So is it Possible?

Answer:

Yep.

You have to a some special characters before and after to get different text styles.

  • *text*      ->   text
  • _text_       ->   text
  • -text-       ->   text
  • *_text_*   ->   text

Simple but effective much like all Google products.

Answer Links:

http://www.bloggertipsseotricks.com/2011/07/bold-italic-strikethrough-google-

How do I schedule Facebook / twitter post?

Question:

I’m reading though Google reader and I want to post all this cool stuff I just discovered. But I’ll look like a jerk if I post all these links and videos at once. Or I want to delay my sharing until after work when everyone is checking there Facebook. And lets not forget how I always forget everybody’s Birthday.

Answer:

Later Bro -> Nice and simple for text status updates.

HootSuite -> Pretty Awesome. Very intuitive. You don’t have it yet?

Answer Links:

http://www.ilovefreesoftware.com/27/featured/schedule-facebook-status-updates.html

How do I insert an image into Tumblr post.

Question:

I clicked the little picture of a tree in the Tumblr editor. I assumed this would let me insert an image from my computer. It asked me for the image URL. Now What?

Answer:

Update: I completely overlooked the very light grey “+ upload photo” button just above the right hand side of the editor menu. I swear that wasn’t there a minute ago. DUH! 

You have to upload your images somewhere else. I signed up with Photobucket. Uploaded my images there and copied the “direct link”. Now I have something to paste into the image URL field.

Answer Links:

http://answers.yahoo.com/question/index?qid=20090829110927AAiEnoV

Is the GIMP crop tool like Photoshop’s Crop tool?

Question:

  I’m used to the Photoshop crop tool which is awesome. In Photoshop you can enter the final size you want to the cropped image to be, You then select an area of the original image and Photoshop maintains the correct aspect ratio while you drag. You can then adjust the crop area to get it perfect. And when you accept the crop then final image is re-sized automatically to the settings you entered. Like I said awesome! So I was wondering if gimp worked in the same way. 

Answer:

Nope.

 The hard way: Use crop tool. Gimp Crop tool

  1. Check fixed.
  2. Pick “size” from the drop-down.
  3. Type in the width x height.
  4. Click somewhere on the image.
  5. Change the fixed drop-down to “aspect ratio” (text box will reset to “current”.)
  6. Drag the corners of the crop area to perfect your selection.
  7. Click inside the crop area or hit enter and the image will be cropped.
  8. Image>Scale image and in the dialog adjust the size.

The Easy Way: Use the selection tool. Gimp Selection Tool

  1. Check fixed.
  2. Pick “Aspect Ratio” in Drop-Down.
  3. Type Desired Width : Height (use colon not x).
  4. Make Selection on image.
  5. Image>Scale Image and adjust size.

Answer Links:

http://docs.gimp.org/en/gimp-tool-crop.html

http://www.youtube.com/watch?v=2rGGpOTSpbc