Is it possible to add personified to existing cart row

Follow

Comments

1 comment

  • Avatar
    Zetya Support

    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.

Please sign in to leave a comment.