Child pages
  • Pinterest Widget - Magento 2
Skip to end of metadata
Go to start of metadata

Icon

Firefox user notice:

Please use different web browser to view this document.

Sorry for the inconvenience.

 

 


Pinterest Widget for Magento 2

Magento 2 Pinterest Widget improves the look of your website pages via configurable Pinterest boards. Choose among three board display options with individual customization options. Define the pages and page locations to put your Pinterest boards on.

Compatibility: Magento Open Source 2.2.X, Magento Commerce 2.2.X

   Product Page

Thank you for choosing Aheadworks!


Installing Pinterest Widget

1. Unpack the zip file provided in the root folder of your Magento 2 installation.

2. Upload the contents of the zip file into the root folder of your Magento 2 installation. Is is advisable to merge the files in the folders, not replace them. On MacOS, use the 'Transmit' option.

3. Connect to your Magento directory with SSH.

4.Run the following commands at the command prompt:

• bin/magento module:enable Neklo_Core
• bin/magento module:enable Neklo_Pinterest
• bin/magento setup:upgrade
• bin/magento setup:static-content:deploy

5. In your Admin Panel, go to System > Cache Management and flush the Magento cache.

6. Log out from Magento and login to reload the ACL (account control level) rules.




Introducing Pinterest Widget

Magento 2 Pinterest Widget is a convenient extension that displays boards with images from Pinterest.com profiles in your Magento 2 store. The module is easy to use and fully customizable.

Extension Logic

The Pinterest widget can display boards from any owner and works in three handy and clear display modes:

  • Pinterest Board;
  • Image Grid;
  • Image Slider.

All three display modes are easy to fit into any store page and adjust to your requirements. Each display mode has its own settings so you can make your boards truly eye-catching.


Backend Configuration

Generating an Access Token

Before enabling the Pinterest module for your online store, you need to configure the Pinterest API.

At first, you need to log in to your Pinterest account and create a Pinterest Application here: https://developers.pinterest.com/apps/. Follow the steps suggested there.

Further, you need to generate an Access Token. To get the token, you need the Postman app. Follow the instructions in the 'Using Postman to get an auth token' section at https://developers.pinterest.com/docs/api/overview/.

Auth Token Prerequisites

The Access Token is generated.

Access Token Generated

Your Workspace

After the Access Token is generated, you will have a limited access to the Pinterest API: only up to 10 requests per hour. To get a full access, you need to submit your application for approval.

Go to your application page at https://developers.pinterest.com/apps/ and choose the application you created. To authorize the application, fill out the form following the instructions provided on the app's page and send your submission. For the App Description, you can use this User Guide or the Pinterest extension's product page link.

Current Status

Submitting an App for a Review

Extension Settings

Once you've had the app created and the access token generated, you can enable the Pinterest widget for your store by following these steps:

  1. Log to your Admin Panel and go to Stores > Configuration > Neklo > Pinterest.

  2. To enable the widget, choose Yes in the 'Enabled' field.

  3. Insert your generated access token in the 'Access Token' field to enable the API access. This field is required for the 'Images Grid' and 'Images Slider' board view modes.

  4. If you need a specific cache lifetime, enter the required value in the 'Cache Lifetime' field. By default, the value is set to 86400 seconds.

Pinterest API Configuration

Adding the Pinterest Widget

To add the Pinterest widget to your store pages, follow these steps:

  1. Log in to your Admin Panel and go to Content > Elements > Widgets. Click .

  2. Select '[NEKLO] Pinterest widget' in the 'Type' field.

  3. Select a design theme for your widget in the 'Design Theme' field.

  4. Click to proceed to the 'Storefront Properties' settings.

Adding the Pinterest Widget

Widget Storefront Properties

With the 'Storefront Properties' options, you can configure where the widget will be displayed in the store along with some basic settings.

  1. To view the storefront settings, go to Content > Elements > Widgets > Select the Pinterest widget in the widget grid > Storefront Properties.
  2. In the 'Widget Title' field, enter the name of the widget to identify it in the widget grid under Content > Widgets.
  3. Choose the store view for the Pinterest Widget in the 'Assign to Store Views' field.
  4. Choose categories, product and page types where the widget will be displayed in your store in the 'Layout Updates' section.
  5. Click to apply the changes.

Widget Storefront Properties

Widget Options

'Widget Options' is the tab where you can configure style settings and display mode details for the Pinterest widget.

To enable the widget, choose Yes in the 'Is Enabled' field.

In the 'Title' field, you can enter the name of the Pinterest widget that will be displayed on the storefront.

The 'Description' field adds a text description to the Pinterest widget. The description text will be displayed on the storefront.

'Board Id' is the mandatory field that specifies the Pinterest board that will be displayed on the storefront. To enter the Board's ID, copy the last part of the Board's URL from https://www.pinterest.com/pinterest/board_id and insert it into the field.

There are three display modes for the Pinterest widget: Pinterest Board, Images Grid, and Images Slider. You can choose the display mode in the 'Type' box. Every display mode has its own set of settings.

Widget Options

'Pinterest Board' Display Mode

The 'Pinterest Board' display mode builds the original Pinterest board exactly as on your Pinterest page. In this mode, you can adjust the image width, board width, and height parameters.

Pinterest Board Settings

Click Save to apply the changes.

Pinterest Board View

'Images Grid' Display Mode

In this mode, Pinterest images are displayed as an infinite grid. On the storefront, you can load more images by clicking Show more.

Images Grid Settings

In the 'Rows' box, you can choose the number of image rows to be displayed. The maximum number of rows is 16.

In the 'Columns' box, you can choose the number of image columns to be displayed. The maximum number of columns is 16.

In the 'Show More With' box, you can specify how a user can load more images: with a button or by scrolling (infinite scroll). If you don’t want more images to load, choose 'Do not open more images'.

In the 'Show More Animation' box, you can enable animation for loading images.

In the 'Show More Step' box, you can choose how many image rows should be loaded after clicking 'Show More'. The maximum number of rows is 16.

Images Grid View

'Images Slider' Display Mode

Images Slider Settings

The 'Images Slider' display mode presents the Pinterest board as a rotating horizontal row of images. On the storefront, you can view the images in the slider one by one by clicking 'Next' .

The 'Total Number of Images on Page' field specifies how many images the slider will contain. The maximum number of images is 100.

In the 'Number of visible Images' box, you can choose how many images will be displayed in the visible row of the slider. The row can contain up to 12 images.

To enable automatic scrolling for the slider, choose Yes in the 'Slide Autostart' field.

To specify the type of scrolling animation, choose the 'Swing' or 'Linear' options in the 'Slide Step Easing' box.

To enable navigation dots for the slider, choose Yes in the 'Use Navigation Dots' box.

You can specify how the image details will be displayed after clicking on the image. Choose the preferable option in the 'Open Pin Details In' box:

  • The 'Lightbox' option opens the image with the details in the same window.
  • The 'Pinterest page' option redirects the user to the original Pinterest pin.
  • Choose the 'Don’t open details' option if you don’t want the details to be shown.

Images Slider View

Support

Thank you for using this extension. You will find more our great solutions for Magento here: store.neklo.com.

Product Page

Need Customization?

Magento 2 Custom Development Services by Aheadworks


You can always find the latest version of the software, full documentation, demos, screenshots, and reviews on http://ecommerce.aheadworks.com

License agreement: https://ecommerce.aheadworks.com/end-user-license-agreement/
Contact Us: http://ecommerce.aheadworks.com/contacts/
Copyright © 2019 Aheadworks Co. http://www.aheadworks.com

  • No labels