visual commerce - magento• for magento site, we provide visual commerce magento extension. there...

Magento - Installation Instruction Document

VISUAL COMMERCE

Contents

1

1

1

1

2

2

3

5

7

8

8

11

13

14

15

1. Purpose of the document

2. Who can use this document?

3. Introduction to Visual Commerce

4. Functionality of Visual Commerce Module

5. Installation of Visual Commerce Module at Magento Extension

5.1. Steps to display the Visual Commerce setting section in Magento

5.2. Steps to set the Visual Commerce settings at Magento

5.3. To Display Visual Commerce Slider on Homepage

5.4. To Display Visual Commerce Slider at Product Page

5.5. To Display Visual Commerce Slider Category Page

5.6. To Display Visual Commerce Gallery

5.7. To Display Category Galley

5.8. To Display upload image button on Order Page

5.9. To Display Photo Details Page

6. Conclusion

This integration guide is useful for all Magento versions.

1. PURPOSE OF THE DOCUMENT This document provides comprehensive guidelines and step-by-step instructions to install & configure the Visual Commerce module on e-commerce website at Magento.

2. WHO CAN USE THIS DOCUMENT?

This document is most useful for client or site admin who will install the Visual Commerce module at Magento.

3. INTRODUCTION TO VISUAL COMMERCE

• Visual Commerce is used for the purpose of uploading the Product images on e-commerce website using Social Networking sites.

• This tool provides different upload options like Facebook, Instagram, Flicker, Twitter, and computer/Hard-drive.

• By using this tool, the user can share specific product images on social networking sites like Facebook, Twitter, Pinterest, and Email.

4. FUNCTIONALITY OF VISUAL COMMERCE MODULE

Visual Commerce module works as below:

• When a user visits the e-commerce website’s Home page, Product page or Gallery page, it shows the Visual Commerce module.

• Upload process of Visual commerce module:1. Visit Visual commerce module’s homepage slider or product page slider or

Gallery page.2. Click on the upload button.3. Choose the uploading option like Facebook, Twitter, Instagram, hard drive etc.4. Enter login credentials for the specific social networks.5. Authorize the Annex Cloud’s app on a specific social networking site.6. Select a specific image from image selection popup & click on next button.7. Enter the product name, caption & email address on image upload popup &

click on the finish button.8. The specific image will be uploaded & saved in the database.

1














9. When Site admin approves & publish the specific uploaded image, the specific image will be displayed on homepage slider, product page slider & in Visual commerce Gallery.

Sharing Process in Visual commerce module:

1. Visit Visual commerce module’s home page slider or product page slider or Gallery page.

2. Click on specific image.3. Choose the sharing option like Facebook, Twitter or Pinterest from image

details popup.4. Enter login credentials for the specific social networks.5. Authorize the Annex Cloud’s app on a specific social networking site.6. Click on share button.7. Enter details in the email collection popup for Twitter & Pinterest sharing.8. The shared image will be displayed on the specific user’s social networking account.9. Whenever his friends/followers click on the shared image it will be redirected to the

specific product page.

• Using these steps, user shares & upload the specific product image on the e-commerce website, using different Social networking sites.

5. INSTALLATION OF VISUAL COMMERCE MODULE AT MAGENTO EXTENSION

• For Magento site, we provide Visual Commerce Magento extension. There are simple steps to integrate Magento extension.


1. Copy Socialannex_ Visualcommerce.xml file to /app/code/Socialannex server.2. Copy Socialannex folder to /app/code on the server.3. This will display the Visual Commerce setting section in Magento.

2















1. First, log in to the Magento site admin section as shown in the following image.

2. Go to the Stores > Configuration as shown in the following image.

3

3. Then click on Socialannex’s General link in the configuration section as shown in the following image.

4. In that, we have to set the different settings for the Visual Commerce module as shown in the following image.

5. Here, we have to set the following settings:Category Page IDGallery Page IDActivate Category GalleryActivate Detail PageDetail Page IDActivate detail page login optionOrder page ID

Note:All these attributes will be provided by Annex Cloud.

5.3. To Display Visual Commerce Slider on Homepage• Visit Manage content from the CMS setting section tab i.e. Content > Pages > Add

New Page as shown in the following image.

• After click on Add New Page, it will open following setting section. • In that, enter following required information & create a CMS page for the Homepage as shown in the following image.

• Page Title• URL Key• Store View• Status

• Now click on the content link & paste following code in the edit area as shown in following image.

• After this, Visual commerce slider will be displayed on home page.

5.4. To Display Visual Commerce Slider at Product page• To show the Visual commerce slider on the Product page, firstly open the view.pht-

ml file in edit mode, following is the path of the view.phtml file

Path of view.phtml filevendor/magento/magento_catalog/view/template/frontend/product/view/details.phtml

• After opening the view.phtml file in edit mode, paste the following provided code at the ending of the file.

Code:

• Call below VC function to load VC slider on product page.

After this, we can see the Visual commerce slider on the product page.

5.5. To Display Visual Commerce Slider Category page• To show the Visual commerce slider on the Product page, firstly open the list.phtml

file in edit mode, following is the path of the list.phtml file

Path of the list.phtml file:vendor/magento/magento_catalog/view/template/frontend/product/view/list.phtml

• After opening the list.phtml file in edit mode, paste the following provided code at the ending of the file.

Code:

After this, we can see the Visual commerce slider on the category page.

5.6. To Display Visual Commerce Gallery• To display the visual commerce gallery, the client needs to create a page from

Magento admin section i.e. from Content > Pages > Add New Page setting section as shown in the following image.

• After click on Add New Page, it will open following setting section.

• Then, click on the Add new page button as shown in the above image in the blue box.

• This will open create page setting section as shown in the following image.

• In that, enter following required information & create a CMS page for the Homepage as shown in the following image.



4

1. Purpose of the document

2. Who can use this document?

3. Introduction to Visual Commerce

4. Functionality of Visual Commerce Module

5. Installation of Visual Commerce Module at Magento Extension



5.3. To Display Visual Commerce Slider on Homepage

5.4. To Display Visual Commerce Slider at Product Page

5.5. To Display Visual Commerce Slider Category Page

5.6. To Display Visual Commerce Gallery

5.7. To Display Category Galley

5.8. To Display upload image button on Order Page

5.9. To Display Photo Details Page

6. Conclusion















Code:







Code:










5








• Then, click on the Add new page button as shown in the above image in the blue box.• This will open create page setting section as shown in the following image.









Code:







Code:










6










{{block class="Socialannex\Visualcommerce\Block\VC" name="vc_home" template="Socialannex_Visualcommerce::homesilder.phtml"}}






Code:







Code:










7















Code:







Code:




$saVcHelperObj = $this->helper('Socialannex\Visualcommerce\Helper\Data');

echo $saVcHelperObj->saVcProductPageSlider($productCode);

$saVcHelperObj = $this->helper('Socialannex\Visualcommerce\Helper\Data'); echo $saVcHelperObj->saVCCatePageSlider();







8















Code:







Code:










9















Code:







Code:










{{block class="Socialannex\Visualcommerce\Block\VC" name="vc_gallery" template="Socialannex_Visualcommerce::gallery.phtml"}}

• After this, Visual Commerce gallery will be displayed on the website.

10

5.7. To Display Category Galley• First, activate the Detail page from Socialannex’s settings section as shown in

the following image.

• Now, the client needs to create a page from Magento admin section i.e. from Content > Pages > Add New Page setting section as shown in the following image.


11

• Then, click on the Add new page button, as shown in the above image in the blue box.




12

• Now click on the content link & paste following code in the edit area as shown in following

{{block class="Socialannex\Visualcommerce\Block\VC"

category_id="<CATEGORY ID>"name="vc_gallery"

template="Socialannex_Visualcommerce::gallery.phtml"}}

• The category id is a mandatory field, so the client needs to pass the category id into above code.

• After this, Visual Commerce slider will be displayed on the category page.

5.8. To Display upload image button on Order page• To display upload image button on Order page first, create an array & assign the

following value to an arrayDiv id as array key value: sa_s22_instagram_<product_id>Product SKu as array value: <product_sku>

13

• Then, call the following Annex Cloud function

• To displaying upload photo button client need to create following div for each product

<?php $savcHelper = $this->helper('Socialannex\Visualcommerce\Helper\Data'); echo $savcHelper->saVcOrderPgId($saorderpagearray); ?>

5.9. To Display Photo Details page• First, enable the “Activate Details Page” from Annex Cloud’s settings section as

shown in the following image and set details page id as 8.

<div id=”sa_s22_instagram_<product_id>”></div>

14

• If the client wants to add login functionality to enter comment or likes against the photo details page then he needs to activate detail page login option as YES as shown in below screenshot.

• Then call the following VC controller action on any link http://saannex.600social.com/visualcommerce/index/index/photoid/1212

• After this, the photo details page will be displayed on the specific page.

15

CONCLUSION

This document contains the instructions to the site admin or client, who wants to install the Visual Commerce module on e-commerce website at Magento Extension.

This document includes a stepwise approach to install and configure Visual Commerce module.

visual commerce - magento• for magento site, we provide visual commerce magento extension. there...

Documents