Articles in this section

See more

STEP 8 - Placing Widgets in Your Online Store

  • Updated

Adding Widgets to Magento

Once you have finished customising the layout and behaviour of your widget in the Widget Editor, copy the Widget ID by clicking on the copy icon next to it. Now go back to your Magento dashboard and click on the “Photoslurp” button in the main navigation bar. Choose “Manage widgets” and then “Add new item”. Here you can paste the Widget ID, as shown below.
 
 

In “Manage Widgets” you can modify the current configuration of each widget.


Required parameters

  1. Username - The username used to access Photoslurp’s dashboard.
  2. Widget ID - The ID of the widget created in the Widget Editor.
  3. Page Type - Choose the type of page you want to embed this widget in: home, product, category or lookbook.

If you select a “Product” or “Category” page, further customization options are available:

  1. Website - If you have multiple websites configured in your Magento store, here you will need to choose which website you would like the widget to be embedded in.

  2. Position - This parameter allows you to choose where on the page you would like to place the widget. 


  3. Only Show Media From Product Category  – If enabled, this parameter will ensure that the widget will only display media linked to other products in the same category when there is no media available for the current product.

Product widgets will automatically be added to your product pages. For custom positioning on the product page, please refer to the "Custom Product Page Positioning" below, under Magento 1.


To set the location of all other widgets go to CMS -> Pages (Magento 1) or Content ->Pages (Magento 2) and select the page that you want to edit. From here, select your platform and choose one of the following options to add our widgets:

 

Magento 1

Content Field
Click on the Content tab in the vertical menu on the left. There you can paste the following code in the location where you want the widget to appear, remembering to replace the ID with the actual ID of the widget assigned by our module:

{{block type="pswidget/widget" id="7"}}

Page Design
Another way would be to click on the Design tab in the vertical menu on the left, and insert the following block in the position where you want the widget to appear:

<reference name="content">
  <block type="pswidget/widget" name="block-name">
    <action method="setId"><value>8</value></action>
  </block>
</reference>
  • ‘block-name’ is a unique name you give to this block. 
  • “setId” is the ID of the specific widget you had created earlier (This ID is generated by our Magento module and is unique for each widget created).

Template File
You can also add the widget directly in your template file, where you can use the following PHP code to insert it:

<?php echo  $this->getLayout()->createBlock('pswidget/widget')->setId('8')->toHtml(); ?>
  • "SetId" is the ID of the specific widget you created earlier in our module.

Customised Positioning in a Product Page

To insert widgets in a custom position within the product page, paste the following code in a new file, name it local.xml and place it in the layout folder of your template (app/frontend/default/your-theme/layout):

<?xml version="1.0"?>   
<layout version="0.1.0">
    <catalog_product_view>
        <remove name="pswidget"/>
        <reference name="NEW.LOCATION.BLOCK">
            <block type="pswidget/widget" template="pswidget/widget.phtml" name="pswidget_custom">
                <action method="setId"><value>6</value></action>
            </block>
        </reference>
    </catalog_product_view>
</layout>
  • NEW.LOCATION.BLOCK is the name of the block you would like to move the widget to.
  • “SetId” is the ID of the widget you are moving.

 

Magento 2

Content Field
Click on the Content tab in the vertical menu on the left. There you can paste the following code in the location where you want the widget to appear, remembering to replace the ID with the actual ID of the widget assigned by our module:

{{block class="Photoslurp\Pswidget\Block\Widget" widget_id="1"}}

Template File
You can also add the widget directly in your template file, where you can use the following PHP code to insert it:

<?php echo $block->getLayout()->createBlock('Photoslurp\Pswidget\Block\Widget',
'', ['data' => ['widget_id' => 1,]])->toHtml(); ?>
  • "widget_id" is the id of the specific widget you created earlier in our module.