Builder plugin in October CMS

Let’s say I need to create a Product plugin by using official Builder plugin, where user can add products and then I render these products in a product-single page. When user add a new product, a product image and a product gallery will need to be added, but I don’t want to use file upload as the image uploaded doesn’t show up in the media. Better way is to let users upload all product images into media, and then when then add a new product, they can just choose the right image from the media and insert it into the Product plugin interface, similar to WordPress.

First I need to add two columns in my plugin database (squarestudio_products_) for product image and product gallery, both string type. Product gallery can be set to nullable just in case some products only have one image.

Media finder does not require an “attach” relationship to be defined, it just needs a string column in the database.

Moving forward, in the Builder – Models – Product – Forms (fields.yaml), add a control of Media finder connect Field name to image and change Mode to image. Also need to add another control for product gallery, but please be careful that we can’t use Media finder here as one image is allowed, which is not what we need since this is a product gallery. We need to add a control of Repeater and set the Field name to gallery, and now we can add a control of Media finder, same as before. By doing this, we can add multiple images to our gallery section, but this is still not a great way to do it because you can only add one image for each control under repeater. It would be nice to choose multiple images at once, and I hope this can be done with future releases of October CMS.

Within our Product Single page, we use below code to display product image and product gallery.

<div>
<img src="{{ record.image|media }}" alt="">
</div>
<ul>
{% for gallery in record.gallery %}
<li>
<img src="{{ gallery|join(', ')|media }}" alt="" >
</li>
{% endfor %}
</ul>

And add this function to plugins-squarestudio-products-models-Product.php

protected $jsonable = ['gallery'];

Following content added on June 23, 2021

Add a column product_image for product image in database.

And add a Media Finder control for product_image

This is what it looks like when you expand the details component in Editor:

{% set record = builderDetails.record %}
{% set displayColumn = builderDetails.displayColumn %}
{% set notFoundMessage = builderDetails.notFoundMessage %}

{% if record %}
    {{ attribute(record, displayColumn) }}
{% else %}
    {{ notFoundMessage }}
{% endif %}

We need to find the path of the product image added from Media Finder.

{{ record.product_image }}

Above code record.product_image will render the image name and format like this on the front end (the image I added is tractor1.jpeg):

/tractor1.jpeg

This will not work, we also need to get the path to the Media Finder, let’s try this:

{{ path|media }}

It will render the path to the Media Finder like this:

http://localhost:8888/myproject/storage/app/media

Then we need to find a way to combine the {{ path|media }} and {{ record.product_image }} and use a <img> tag to show the image on the front end. (no space between these two twig tag)

<img src="{{ path|media }}{{ record.product_image }}" alt="" srcset="">

Will render as below:
<img src="http://localhost:8888/horizontrading/storage/app/media/tractor1.jpeg" alt="" srcset="">

Leave a comment

Your email address will not be published. Required fields are marked *