Faceted Filtering for BigCommerce Products in WordPress using FacetWP – OLD

Faceted Filtering for BigCommerce Products in WordPress using FacetWP – OLD
Faceted Filtering for BigCommerce Products in WordPress using FacetWP – OLD2018-11-28T15:11:03+00:00

Faceted Filtering for BigCommerce Products in WordPress using FacetWP

Recently, I have been working on integrating BigCommerce with WordPress more and more. I’ve already found that the BigCommerce WordPress plugin is quite amazing in how quickly it can integrate your BigCommerce store right into your WordPress site, and in how seamless it was. Combing the BigCommerce plugin with FacetWP has opened up a whole new side of possibilities for headlessly integrating your BigCommerce store into your WordPress site.

What you will need:

 

  1. The first thing we will want to do is to go to our WordPress site’s admin panel and install the Bigcommerce plugin. Download the zip file from the resource above [click “Clone or Download” > Download Zip] and go to Plugins > Add New. Once you are here, press “Upload Plugin”.
  2. Go to Plugins > Installed Plugins, find the plugin, and activate it.
  3. Go to BigCommerce > Welcome and follow the instructions to connect your BigCommerce store.
  4. You should land on the setting page. For now, make sure you have some products in your BigCommerce store with product options, then go ahead and press “Sync Now”.
  5. Download and install FacetWP using the same technique we used for the BigCommercer plugin.
  6. Now we are ready to create a new facet: Navigate to Settings > FacetWP and click on “Add New” next to “Facets”. Choose the following configuration options (change accordingly):

    For data source, you can choose bigcommerce_options_data for now, as that’s where our data will be coming from. Hit save and reindex.
  7. Still on the FacetWP settings page, Click “Copy Shortcode”. Then click on Pages > Add New Page.
  8. Create a new page which will be your BigCommerce category page. I’m just creating a test page here to make things simple. As long as your using WordPress’s default text editor, you should see a button above the content field that says “Add Products” with the BigCommerce icon. Click that button and I’m going to go ahead and choose the Shop All category from the category dropdown for now. Press “Embed Products”.
  9. You should now see a shortcode in your Page content field. In essence, this is your category page. Using a more advanced page editor or using normal HTML, surround the shortcode with a div with the class “facetwp-template”. Outside of your category div, paste your FacetWP shortcode for the facet you created earlier. I used fusion editor for quick column styling, however, I’ll show you the general concept in HTML as well.
  10. Save the page, and if all went well, you should see what looks like part of a JSON object inside some checkboxes on your page.
  11. Next, we need to dive into some code. Go ahead and download, install, and activate the FacetWP helper plugin from the resources above. Login to your server and from your WordPress root directory, go to wp-content/plugins/custom-hooks and open custom-hooks.php. Each of the following code blocks can be inserted right underneath the previous code block.
  12. This step is optional, but let’s start by making labels appear over our facets. Copy and paste this code into the file:
    //Add Facet Labels
    function fwp_add_facet_labels() {
    ?>
    <script>
    (function($) {
        $(document).on('facetwp-loaded', function() {
            $('.facetwp-facet').each(function() {
                var $facet = $(this);
                var facet_name = $facet.attr('data-name');
                var facet_label = FWP.settings.labels[facet_name];
                if ($facet.closest('.facet-wrap').length < 1) {
                    $facet.wrap('<div class="facet-wrap"></div>');
                    $facet.before('<h3 class="facet-label">' + facet_label + '</h3>');
                }
            });
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action( 'wp_head', 'fwp_add_facet_labels', 100 );
  13. In my scenario, I’m looking to filter by product size. Let’s add “Product Size” as a post attribute (BigCommerce products are treated as posts) in our FacetWP dropdown when picking a data source. Copy the code below into the same file making sure you change “post_BCsize” and “Product Size” accordingly.
    //add to dropdown
    add_filter( 'facetwp_facet_sources', function( $sources ) {
        $sources['posts']['choices']['post_BCsize'] = 'Product Size';
        return $sources;
    });
  14. If all went well, you should see “Product Size” in any facet’s data source drop-down.
  15. Back to custom-hooks.php, we need to fill that new data source with data. Currently, it’s empty. Let’s fill it in with the BigCommerce options data. Add this to custom-hooks.php making sure you change the code accordingly.
    //fill new source with data
    add_filter( 'facetwp_indexer_row_data', function( $rows, $params ) {
        if ( 'YOUR_FACET'S_NAME' == $params['facet']['name'] ) {
            $post_id = (int) $params['defaults']['post_id'];
            $field_value = get_post_meta( $post_id, 'bigcommerce_options_data', true );
            $new_row = $params['defaults'];
            $new_row['facet_value'] = $field_value; // value
            $new_row['facet_display_value'] = $field_value; // label
            $rows[] = $new_row;
        }
        return $rows;
    }, 10, 2 );
  16. Now we need to parse the bigcommerce_source_data data and modify it to only grab the labels of the products options that we want, before it hits FacetWP’s index. Luckily, I’ve already done this for you. Add the following code and make sure you change it accordingly.
    //edit data to only include size
    add_filter( 'facetwp_index_row', function( $params, $class ) {
        if ( 'YOUR_FACET'S_NAME' == $params['facet_name'] ) {
            $values = json_decode($params['facet_value']);
            if ( is_array( $values ) && ! empty( $values ) ) {
                foreach ( $values as $value ) {
                    if ($value->display_name == 'PRODUCT_ATTR_NAME(*mine was Size)') {
                        foreach ( $value->option_values as $option ) {
                            $params['facet_value'] = $option->label;
                            $params['facet_display_value'] = $option->label;
                            $class->insert( $params ); // insert new value to the database
                        }
                    }
                }
                $params['facet_value'] = ''; // skip original row
            }
            $class->insert( $params ); // insert new value to the database
        }
        return $params;
    }, 10,2);
  17. You will need to do this for each product option that you would like to sort by.
  18. If all went well, you should see your beautiful filters on your category page!
  19. Please consider buying FacetWP if you like it!

 

 

Razoyo

Razoyo is an ecommerce consultancy and Magento Certified Developer serving the needs of small and medium-sized web stores. We help online merchants to create, manage, maintain and update their stores, and to solve both business and technology problems.

RECENT TWEETS

CONTACT US