Ryan Page
posted this on July 21, 2011 06:17
Looking at the example personified looks for the row id of the product that it needs to include personified details to and adds a new row directly under it. Without modify add_cart_row() is there a way to add the personified details to the existing product row. So only add cells to the template and have those cells append the variants cell?
I am willing to rework the cart.liquid to use div's instead of tables if you think that will work.
Comments
Hi Ryan,
Under the covers, add_cart_row is basically calling the template and inserting it after the row (for the corresponding variant). So what you can do instead, or as well, is call another template and append or insert as you need.
E.g. if you have this template:
<script id="p9d-row-template" type="text/html">
<p id="p9d-${ record.variant }-${ record.ts }" class="p9d-record" data-qty="${ record.qty }">${ record.qty } x Team: ${ record.values.team }</p>
</script>
You can add it to the description area of an existing cart table row:
{% for item in cart.items %}
personified.iterator(function(record) {
var parms = {record: record, item: {{ item | json }}};
{% capture tmpl %}{% if item.product.handle == "back-lettering" %}#backlettering-template{% else %}#p9d-row-template{% endif %}{% endcapture %}
$('{{ tmpl }}').tmpl(parms).insertAfter('#item-{{ item.variant.id }}');
}, "{{ item.variant.id }}")
{% endfor %}
The creates a <p> element inside a div for every customization in the cart for the backlettering product. (The code is a bit messy because I don't have a way to easily look up the personified records for a particular variant so I'm doing it via the iterator method).
The description td looks like this:
<td class="cart-details">
<h3><a href="{{ item.product.url | within: collections.all }}">
<span class="cart-image"><img src="{{ item.product.images.last | product_img_url: 'small' }}" alt="{{ item.title | escape }}" /></span>
{{ item.title }} {{ item.product.type }}
</a></h3>
<div id="item-{{ item.variant.id }}"></div>
</td>
I hope this makes sense.
One thing to note: if you go down this path you will need to keep the quantity in sync. You can do this using the unique timestamp given to each Personified record. E.g.
// handle remove option
$('a[href*=/cart/change/]').click(function() {
var variant_id = $(this).attr('href');
variant_id = variant_id.substring(variant_id.lastIndexOf('/') + 1).split('?')[0];
personified.iterator(function(record) {
personified.qty(record.ts, 0);
return false;
}, function(record) {
return record.variant == variant_id;
})
})
// handle update option
$('#cartform input[name=update]').click(function(e) {
var variant_id = $(this).attr('rel'),
update = $('#updates_' + variant_id),
old_qty = parseInt(update.attr('data-qty'), 10),
qty = parseInt(update.val(), 10),
delta = qty - old_qty;
// find first record for this variant and increment count by delta
personified.iterator(function(record) {
var qty = record.qty + delta;
personified.qty(record.ts, qty);
return false;
}, function(record) {
return record.variant == variant_id;
})
});
Thanks, Gavin.