Installation
Before installing the extension, please make sure to Backup your web directory and store database
You will require to install MageDelight Base Extension first. If it is not installed then please download it from https://www.magedelight.com/pub/extensions/magedelight-base.zip and unzip the package file into the root folder of your Magento 2 installation.
Root Directory is - "app/code/magedelight/#YourExtensionName#"
- Unzip the extension package file into the root folder of your Magento 2 installation.
- Connect to SSH console of your server:
- Navigate to the root folder of your Magento 2 setup
Run command as per below sequence,
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
- log out from the backend and log in again
If you are using Magento 2.3 or later then you do not need to activate license. Extension will be activated with silent activation mechanism and does not require activation keys to be entered manually.
Filter on Product Page
Backend Configuration (Admin side)
Instagram Account Configuration steps
Before setting up admin configurations, it is required to create and configure developer account on Instagram. Follow below steps to configure developer account.
- Open url https://www.instagram.com/developer/.
- From top menu bar, select Manage Clients.
- Click on Register a New Client to create an Instagram client account.
- After creating a client Account, click on Manage link.
- Copy Valid redirect URI from Admin Configuration and enter into Valid redirect URIs text box under Security Tab.
- Client Id and Client Secret key are then available in Instagram developer account.
Instagram Connect Configurations
Go to Admin Control Panel > Instagram Connect > Settings
- Client ID: Copy from Instagram developer account and paste it here.
- Client Secret: Copy from Instagram developer account and paste it here.
- Authorize: Click the button to authorize the client store details configured in developer account. It will automatically fetch below 2 fields -
It will automatically fetch below 2 fields - Account ID and Access Token.
- Valid redirect URI: On installing the module it will automatically add the redirect URI (Copy URI from here and paste it in Instagram configuration settings.
- Enable Instagram Link in Top Link: Display a link of Instagram gallery in header of the page.
- Instagram Gallery Link Slug: Add a slug / URL key for the Instagram gallery page. It will create page URL using the slug provided.
- Instagram Gallery Link Label: Add label of the Instagram gallery page.
- Show Image on CMS Page: Select "yes" to display Instagram gallery image on CMS page. Copy and paste the given code (below the text field) on CMS page and also set how many images should get displayed.
- Show Image on Product Page: Select "yes" to display Instagram gallery image on product page.
- Filter on Product Page: Select whether to display images by filtering using Hash tags or Associated products.
- Filter by Hashtags: Display Instagram images on a product page with the same hashtags on Instagram posts.
- Filter by Associated Products: Display Instagram image on all associated product pages on frontend i.e. products which are assigned to the markers on the image.
- No. of Images to show on Product Page: set number of Instagram images to be display on product page on frontend.
- Get Account Photo Gallery: Get all the images from Instagram account to admin panel under Instagram Images grid.
Instagram Auto Import
- Enable Instagram Auto Import: Set Yes to enable auto importing Instagram gallery to your store admin panel. All images will be stored in a separate grid and admin will be able to manage them all.
- Default Instagram Image Status: On importing the images, set the default status of each image. The images with approved status will get displayed on frontend under the dedicated page of Instagram Gallery.
- CRON JOB Frequency: Select frequency to fetch the Instagram gallery images automatically daily, weekly or monthly.
- CRON JOB Start Time: Set the time to run the CRON job to import the images from Instagram account.
Backend Functionality
Go to Instagram Connect > Instagram Images and find the grid containing all images from connected Instagram account as display below.
Instagram Images
- View and manage list of Instagram images in admin. click on Select dropdown from Action column to add the marker, assign products and sort the product order.
- Change the status of the image(s) from using Actions dropdown. Please note that only images with "Approved" status will get displayed on frontend.
Instagram Image Settings
- Sort Order: Set number from zero (0). It will sort the Instagram images on dedicated gallery page on front-end.
- Description: Write description for image. It will get displayed on front-end.
- Position Top: On drag and drop marker image the coordinate of top position will be fetched automatically.
- Position Left: On drag and drop marker image the coordinate of left position will be fetched automatically.
- Product One: Set the product id to assign to the marker. The name of the product will get displayed on the front-end where marker image has been placed.
It is mandatory to first click on "Save Markers" button before saving the other settings. Maximum 4 products can be assigned to one Instagram image. Follow the same process to assign 2nd, 3rd and 4th images as described above for 1st image.
Image Hashtags
Go to catalog > Products and select the product for which hashtags are to be assigned then go to Instagram tab to select the hashtags.
- Instagram Hashtag: Select the hashtags and save the product. Products which have been assigned to Instagram images with the same hashtags will have all images displayed on product detail page on front-end.
Frontend Functionality
Instagram Gallery Page
Instagram images which are approved will get displayed on a dedicated page. On click of image, a popup will get displayed as shown in below image.
Instagram Image Popup
- Markers which have been placed on the image with the products associated (from admin panel) will get displayed on front-end with product name over it and the products will also be visible on the popup. Users can click on the product and visit the product detail page to make process.
Instagram Image on Product Detail Page
- Click on the Instagram gallery image will open a popup as shown in Instagram image popup.
Sample Data
Thank you for choosing MageDelight!