custom property for cart items

by sneakyimp - Member - 08:31PM, May 16, 2008

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 ?

Jump to comment form | subscribe to this topic

5adbe9e20522d6a177e76b223b6750ed HunkyBill Member 10:17PM, May 16, 2008	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! --- Implement the Logic. Email: hunkybill@gmail.com WWW: http://wiki.shopify.com/Resistor_Software
6617bf9fc09137ddcec910155424c7ca sneakyimp Member 10:25PM, May 16, 2008	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.
5adbe9e20522d6a177e76b223b6750ed HunkyBill Member 07:06PM, May 17, 2008	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… --- Implement the Logic. Email: hunkybill@gmail.com WWW: http://wiki.shopify.com/Resistor_Software — Last edited 07:08PM, May 17, 2008
a8924dfee3d0ebfea4f119420da7c3cb BBG Member 12:47PM, May 18, 2008	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. — Last edited 12:48PM, May 18, 2008
5adbe9e20522d6a177e76b223b6750ed HunkyBill Member 01:15PM, May 18, 2008	@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. --- Implement the Logic. Email: hunkybill@gmail.com WWW: http://wiki.shopify.com/Resistor_Software
a8924dfee3d0ebfea4f119420da7c3cb BBG Member 01:25PM, May 19, 2008	Thanks HunkyBill. I’ve updated the page.

custom property for cart items

HunkyBill

sneakyimp

HunkyBill

BBG

HunkyBill

BBG