Product Attributes that can be targeted individually

CMS > eCommerce
1

The basic product attribute tag is {% component source: “Products”, itemId: “{{this.Id}}”, type: “item_attributes” %} and then there is ‘Layout’, ‘Sort By’, ‘Object’ and ‘Collection Variable’ as options.

I need to be able to place different attributes in different locations on the page so need to be able to target the name of an attribute to put it in a certain location.

Does anyone know if this is possible?

2

Hi @SiroccoDigital. Yes, this is possible, but you’ll have to rebuild the HTML for the options/inputs yourself (make a copy of the source Treepl generated code to work off).

First, add a collectionVariable to the component:

{% component source: “Products”, itemId: “{{this.Id}}”, type: “item_attributes”, collectionVariable: "attr" %}

Then if you output that variable you’ll see all the data you have to work with:

<pre>{{attr}}</pre>

To access the first level of data here (the attributes), do a forloop like this:

{% for i in attr.items.attributes %}
    <h4>{{i.name}}</h4>
    ...
{% endfor %}

To access the second level of data here (the options), do a second forloop within the first:

{% for i in attr.items.attributes %}
    <h4>{{i.name}}</h4>
    {% for x in i.options %}
        {{x.name}}<br>
    {% endfor %}
{% endfor %}

Now, of course, you need to build out the HTML stuff within these loops, accessing the liquid data as needed.

To render different attributes in different places you’d need to introduce an if statement and repeat the forloops where needed.

Hope that helps, but let me know if you get stuck somewhere :slight_smile:

3

Wow that is fantastic @Adam.Wilson. Do you think I would be able to target the price for attributes in a similar way?

4

@SiroccoDigital, see your other post for my reply that:

5

I have got the section ‘options’ code you supplied working and it displays the attributes where i can pick and choose what data is displayed (fantastic cause this fixes my price issue too). How do I just get it to show a specific attribute like if the attribute name was ‘Colour’?

6

So, inside your first forloop you’d add an if statement like:

{% if i.name == 'Colour' %}
   ... second forloop here ...
{% endif %}
7

@Adam.Wilson you nailed it!!! Thank you so much. A work around I have wanted on BC for years and now I can do this for my client.

8

@Adam.Wilson so I have managed to draft up a layout without the price displaying, using the second level data code -

{% component source: “Products”, itemId: “{{this.Id}}”, type: “item_attributes”, collectionVariable: “attr” %}
{% for i in attr.items.attributes %}
{% if i.name == ‘Colour’ %}
< h4>{{i.name}}< /h4>
{% for x in i.options %}
< input type="{{i.attributeType}}" name=“attr_{{this.Id}}_{{i.id}}” value="{{x.id}}" data-attr_price="{{x.priceValue}}"> < img src="{{x.image}}" style=“width: 50px;”> {{x.name}}< br>< br>
{% endfor %}
{% endif %}
{% endfor %}

But when I check the box and add it to cart, it doesn’t pull the price through. I don’t think it is appending the ‘checked’ to the input field…

9

Hi @SiroccoDigital. I can’t access that link at the moment (a Liquid error is showing), but have you made sure to include the parent HTML element/s (such as the ) around those attributes (referenced from the Treepl default output)?

10

How strange @Adam.Wilson! This was working normally yesterday and now all the catalogs and products have the same liquid error this morning. Wonder if the eCommerce upgrade has caused this?

11

Hi guys!

I’m afraid this is a bug after the recent release. This will be resolved as a hotfix today.

Apologies for the inconvenience.

12

@Violetta.S yes it is working now.

13

@SiroccoDigital, it doesn’t look like you have the wrapper around those attributes like what is present in the default output. I’d say this is needed for the system to submit those selected items.

14

Fixed this @Adam.Wilson and it is working. Thanks for all your assistance with this, most appreciated.

1 Like