Magento w/ Fishpig Wordpress and Advanced Custom Fields

Question

I have a field group with one flexible content field in with the code post_builder, which contains 2 subfields, image_2_column_text and image_right_text_left.

I've populated these fields for a post and inside the post view template on Magento I've added the following code:

<?php echo $post->getMetaValue('post_builder') ?>

This returns a serialised array as follows:

a:2:{i:0;s:19:"image_2_column_text";i:1;s:21:"image_right_text_left";}

How am I meant to be able to loop over the items added and pull out the content which I've added to the Wordpress post?

There appears to be code in the following file to handle this, but it will not correctly render: app/code/community/Fishpig/Wordpress/Addon/ACF/Model/Field/Renderer/Flexible/Content.php

The versions I'm using are as follows:

Magento: 1.9.2.4
Wordpress: 4.6.0
Acf Pro: 5.4.2
Fishpig Wordpress: 4.2.0.19
Fishpig Acf: 1.4.0.8

Thomas Harding Thomas Harding · Accepted Answer · 2017-08-10T12:40:28

I've found this resource which I've managed to implement into my own installation, as I had the same problem as you:

https://bitbucket.org/Bobadevv/acf-flexible-content-fishpig

Basically, this has taught me that through the use of conditional statements like:

if ($flexLayout["acf_fc_layout"] == "fct_text_image") {

You can filter out your flexible content and display things accordingly.

EDIT: Having done more work on this, I can confirm it works perfectly and should do the same for your needs.

Let's initiate the flexible content:

if ($post->getMetaValue('content')):
   $flex = $post->getMetaValue('content');
      $pos = 0;
      foreach ($flex as $flexLayout) {

So here we're essentially treating the flex content as a repeater field. I've deviated a little by adding a loop counter so you can have dynamic ID's (in case you need multiple js instances)

Within that loop, you need to load each HTML block you wish to associate with the flex block. Firstly we need to define the blocks the Magento way (in wordpress.xml layout file):

<reference name="flexible_content">
   <block name="fct_cta_carousel" template="wordpress/fct/fct_cta_carousel.phtml" type="core/template"/>

And then within the loop above:

$this->getChild('fct_cta_carousel')->setData("flex_layout", $flexLayout)->setData('pos',$pos);
        echo $this->getChildHtml('fct_cta_carousel', false);

The block phtml should look like this:

<?php
$flexLayout = $this->getFlexLayout();
if ($flexLayout[acf_fc_layout] == "cta_carousel") {
    if ($flexLayout[carousel_visibility] == 1) {
    $carouID = "homepage-carousel-" . $this->getPos(); //To enable multiple carousels, we need a dynamic ID, based on position in flex content. 
    echo '<div class="featured-products featured-products-alt featured-products-visible">';
    echo '<h2>' . $flexLayout[cta_row_title_carousel] . '</h2>';
    echo '<div id="'. $carouID .'" class="featured-carousel">';
    foreach($flexLayout[cta_rows_carousel] as $row){
        echo '<div class="carousel-prod">';
        echo '<div class="col">';

            echo '<div class="img-overlay">';
                echo '<img src="'.$row[cta_row_image].'" alt="'. $row['cta_row_title'] .'">';
            echo '</div>';
            echo '<h3>' . $row['cta_row_title'] . '</h3>';
            echo '<a href="'.$row['cta_row_url'].'" class="cover-link"><span class="hide">'.$row['cta_row_title'] . '</span></a>';  
        echo '</div>';
        echo '</div>';
    }
    echo '</div>';
echo '</div>';

So essentially what this is does is:

Initiates the flex layout
Checks if the flex content in the loop matches the ID specified in ACF.
Processes the flex content fields as if it's a run-of-the-mill ACF repeater.

You can rinse and repeat as needed.

Obviously the whole structure is on that repo I linked you to, I'm just holding your hand as there's not much documentation on there.

Magento w/ Fishpig Wordpress and Advanced Custom Fields

1 Answers