Website Links from your marketplace

I want to allow my Listers to provide a URL to their company website and show it on their Listing Detail page. 

To do this, I have to (1) create a custom attribute, (2) add it to my space_wizard form and transactable_attributes form and then (3) surface it on the Listing Detail page.

Step 1 - Create the Custom Attribute

Navigate to Admin Dash > Manage > Transactable Types > Custom Attributes and click Add Attribute

We are just looking for a simple String input, so we create the custom attribute with the following settings:

  1. Name: website_url (or any other name, as long as there are no capitol letters, spaces or non letter characters)
  2. Label: Do you have a website? (or any other label you want your users to see)
  3. Attribute Type: Choose String from the dropdown
  4. Html tag: Choose Input from the dropdown
  5. Make sure that Public is checked/enabled.
  6. Save your work

You have now created a Custom Attribute that you can surface with the liquid tag: {{ listing.properties.website_url }}   (please note that if you used a different name for your custom attribute your liquid tag would be {{ listing.properties.what_ever_you_entered_for_name }}

Step 2 - Add the Custom Attribute to your Forms

Navigate to Admin Dash > Manage > Transactable Types > Form Components and click on the form component you wish to add the custom attribute to.

Inside the Form Component, we need to check the custom attribute to add it to the form. The Custom Attribute will be labeled "Transactable - The name you gave it (minus the _'s)"

Make sure to add it to both forms!

Step 3 - Surface the attribute on the Listing Detail page

Navigate to Admin Dash > Theme > Liquid Views and choose the theme you want to surface this on. We are adding it to the Listing Description, so we'll choose the Liquid View Listings > Listing Description. Click 'edit' to enter the Liquid View details. 

We only want this to be surfaced if the Lister has entered in a URL so we add the following liquid markup to check that:

{% if listing.properties.website_url != blank %}

{% endif %}

We also want the user to be able to enter various URL formats and still have it work so we also will need to add:

{% if listing.properties.website_url contains "http://" or listing.properties.website_url contains "https://" %}{{ listing.properties.website_url }}{% else %}http://{{ listing.properties.website_url }}{% endif %}

Reminder, if you used a different name for you custom attribute, make sure you edit your liquid expression appropriately.

So, the full final code entered is:

{% if listing.properties.website_url != blank %}
<h2>Company website:</h2>
<a href="{% if listing.properties.website_url contains "http://" or listing.properties.website_url contains "https://" %}{{ listing.properties.website_url }}{% else %}http://{{ listing.properties.website_url }}{% endif %}", target='_blank'>{{ listing.properties.website_url }}</a>
{% endif %}

And the final result is: