custom property for cart items

sneakyimp — Fri, 16 May 2008 20:31:04 +0000

My cousin has asked me to look at her shopify cart to see if it’s possible to prompt the user for custom text for certain products. She has these charm bracelets which can be customized with your name or something like ‘Donny & Suzee 4Ever’ or something like that.

I tried adding this to the ‘add to cart’ form in collection.liquid:

Custom Text: <input type="text" name="note" value="" /><br>

And then I tried this in cart.liquid:

      {% tablerow item in cart.items cols:3  %}

        <h3>{{ item.title }}</h3>
        <div class="cart-thumb">
          <img src="{{item.product.featured_image | product_img_url: 'thumb' }}" alt="{{item.title | escape }}" title="{{item.title | escape }}" />
        </div>
        <span class="money fl">{{ item.price | money}} each.</span>
        <div class="myNewClass">custom text: {{ item.customText}}</div>
etc, etc.

No dice though. Can someone tell me how I might allow customers to specify a little bit of text only on items with a particular tag or belong to a particular collection ?

HunkyBill commented

HunkyBill — Fri, 16 May 2008 22:17:33 +0000

Hi,

If you check out http://www.lucyann.ca, you’ll see your charm bracelet customization to the nth degree.. it’s old code, needs some re-factoring to modernize it, but you can clearly see it exploits Shopify to the max. That site is online since 2006 without much change, works like a charm.

As for your need of customizing certain products only, that is also very easy, with tags or without, you just need to leverage liquid cleverly.

If you understand the code I used, you’re well on your way. If it’s greek to you, you’ll need to brush up fast on Javascript, or hire an expert. Having done it before, many times, it becomes easier and easier…

Good luck! Have fun with it!

sneakyimp commented

sneakyimp — Fri, 16 May 2008 22:25:40 +0000

Hi Bill

Thanks for your response, I really appreciate it. However, digging through the hundreds of lines of Javascript you have in there isn’t something I’m particularly excited about doing. I can’t even tell where you assign the dialog launcher to your ‘Customize Item’ button.

I’m no stranger to Javascript and would really by psyched if you could outline the basic process in broad strokes.

HunkyBill commented

HunkyBill — Sat, 17 May 2008 19:06:52 +0000

product.liquid
- recognize a product needs customization, decide what kind
- build dom to collect info, glue that into existing dom
- if shopper customized.. save info as cookie, go to cart
- if shopper did not customize, alert them and wait on product

cart.liquid
- for each product, decide if it needed customization
- if so, read the cookie set in product.liquid for details
- build DOM to reflect custom settings
- allow shopper to change settings, add new items
- if adding new items, provide same customization as product
- if checking out, save all customization into cart.attributes
- checkout….

Any guesses as to why we charge a tiny bit of money for doing all that? It works great by the way.

Some people expect that for free for some reason. Same types of people who probably drive Hummers and have Nannies raise their children while they rip off the elderly for their life savings as they holiday at Club Med.

Hope that helps!

I probably missed 3 or 4 crucial other steps in this broad canvas…me bad…I have other things to do these days… That recipe above is NOT lucyann because I have radically altered the recipe since those days.. I look back at that code and shudder… most of it is idle now anyway.. and I never bothered to amputate the bad stuff… no wonder you had trouble with it…

BBG commented

BBG — Sun, 18 May 2008 12:47:49 +0000

I wrote up how to add a custom color choice property here. You should be able to use this as a starting point if you know javascript.

HunkyBill commented

HunkyBill — Sun, 18 May 2008 13:15:50 +0000

@Gavin,

Nice article.. I would add one caveat as well. When you include the products customization in the actual product.description (which does work), you run into the small issue that when the product description is output as text, that javascript is output too. This caused me to puzzle over how to hide it, which led me to using the blogs as a source of that data.

I requested a new liquid feature to strip scripts when desired, but short of me patching Liquid myself for all of Shopify, that seems to be unlikely to occur.

BBG commented

BBG — Mon, 19 May 2008 13:25:25 +0000

Thanks HunkyBill. I’ve updated the page.